/* laf-pagelayout2.css — LAFPageLayout bileşeninin stilleri */

/* ── KÖK + FADE-IN ────────────────────────────────────────────────────────
   YERLEŞİM (display/height/overflow) KRİTİKTİR: AutoSize, content'in
   getBoundingClientRect().height değerini okur. Bu flex zinciri kırılırsa
   yükseklik 0 olur ve LAFPageLayout_AutoSizeSection sessizce return eder.
   → Bu blok ASLA silinmemeli.

   FADE: Taban durum opacity:0. İçerik ve AutoSize oturunca JS
   (LAFPageLayout_Reveal) .laf-pagelayout-visible ekler → fade akar.
   Böylece section'ların hizalanması/zıplaması görünmez.

   EMNİYET SUPABI: JS hiç çalışmazsa 1500 ms sonra 0sn'lik failsafe animasyonu
   opacity'yi 1 yapar. .laf-pagelayout-visible, animation shorthand'ini ezerek
   failsafe'i iptal eder. Beyaz ekranda kalma riski YOKTUR.

   KAYMA YOK — kayma yalnızca LAFMainLayout'un işidir (bkz. LAFMainLayout.razor
   içindeki <style>). Böylece dialog içindeki LAFPageLayout'lar sadece fade alır,
   yerinden oynamaz.
   ──────────────────────────────────────────────────────────────────────── */
.laf-pagelayout-root {
    --laf-pagelayout-fade-duration: 320ms;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    opacity: 0;
    animation: laf-pagelayout-failsafe 0s linear 1500ms forwards;
}

@keyframes laf-pagelayout-failsafe {
    to {
        opacity: 1;
    }
}

.laf-pagelayout-root.laf-pagelayout-visible {
    animation: laf-pagelayout-fade-in var(--laf-pagelayout-fade-duration) ease-out forwards;
}


@keyframes laf-pagelayout-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .laf-pagelayout-root,
    .laf-pagelayout-root.laf-pagelayout-visible {
        opacity: 1;
        animation: none;
    }
}

/* ── HEADER / FOOTER / BODY ───────────────────────────── */
.laf-pagelayout-header {
    flex-shrink: 0;
    height: 52px;
    overflow: visible;
    position: relative;
    z-index: 301;
}

.laf-pagelayout-footer {
    flex-shrink: 0;
    height: 25px;
    overflow: hidden;
}

.laf-pagelayout-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
}

.laf-pagelayout-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── DRAWER — desktop ─────────────────────────────────── */
.laf-pagelayout-drawer {
    flex-shrink: 0;
    width: 0;
    overflow: hidden;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 1px solid var(--LAF-palette-lines-divider);
    box-sizing: border-box;
}

.laf-pagelayout-drawer--open {
    width: var(--laf-pagelayout-drawer-width);
}

/* JS resize sırasında eklenir — sürüklerken animasyon olmasın */
.laf-pagelayout-drawer--resizing {
    transition: none !important;
}

/* Sabit genişlik — kapanırken reflow olmaz */
.laf-pagelayout-drawer-inner {
    width: var(--laf-pagelayout-drawer-width);
    min-width: var(--laf-pagelayout-drawer-width);
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ── DRAWER — overlay ─────────────────────────────────── */
.laf-pagelayout-drawer--overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    z-index: 300;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

    .laf-pagelayout-drawer--overlay.laf-pagelayout-drawer--open {
        width: var(--laf-pagelayout-drawer-width);
    }

    .laf-pagelayout-drawer--overlay .laf-pagelayout-drawer-inner {
        width: var(--laf-pagelayout-drawer-width);
        min-width: var(--laf-pagelayout-drawer-width);
        background:rgba(var(--LAF-palette-background-rgb),.6);
    }

/* ── OVERLAY BACKDROP ─────────────────────────────────── */
.laf-pagelayout-overlay-backdrop {
    position: absolute;
    inset: 0;
    /*    background: rgba(0, 0, 0, 0.45);*/
    z-index: 299;
    cursor: pointer;
    animation: laf-pagelayout-overlay-in 0.2s ease forwards;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

@keyframes laf-pagelayout-overlay-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── RESIZER — desktop ────────────────────────────────── */
.laf-pagelayout-resizer {
    flex-shrink: 0;
    width: 0;
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: visible;
    position: relative;
    /* z-index yok — popup'lar üste çıkabilsin */
}

/* ── RESIZER — overlay ────────────────────────────────── */
.laf-pagelayout-resizer--overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    overflow: visible;
    z-index: 301;
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .laf-pagelayout-resizer::before,
    .laf-pagelayout-resizer--overlay::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -8px;
        right: -8px;
        cursor: ew-resize;
    }

/* ── RESIZER GRIP ─────────────────────────────────────── */
.laf-pagelayout-resizer-grip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    pointer-events: none;
    position: relative; /* absolute değil — stacking context oluşturmaz */
    padding: 4px 3px;
    border-radius: 3px;
    background: var(--LAF-palette-surface);
    border: 1px solid var(--LAF-palette-lines);
}

/* Overlay modda grip gizle */
.laf-pagelayout-resizer--overlay .laf-pagelayout-resizer-grip {
    display: none;
}

.laf-pagelayout-resizer-grip span {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--LAF-palette-text-secondary);
    opacity: 0.5;
    transition: opacity 0.2s;
}

/* .laf-pagelayout-resizer--active JS tarafından sürükleme sırasında eklenir */
.laf-pagelayout-resizer:hover .laf-pagelayout-resizer-grip span,
.laf-pagelayout-resizer--active .laf-pagelayout-resizer-grip span {
    opacity: 1;
}