/* ============================================================================
   laf_mainlayout_styles.css
   LAFMainLayout.razor'a ait stiller.

   İSİMLENDİRME KURALI
   -------------------
   Bu dosyadaki HER tanım (class, keyframe, custom property) "laf-mainlayout-"
   öneki taşır. Böylece diğer LAF bileşenlerinin CSS'i ile çakışma olmaz.

   Bu dosyada TANIMLANMAYAN, sadece markup'ta kullanılan global class'lar:
     .laf-app-root, .laf-app-bg, .laf-app-bg-overlay
   Bunlar global stil dosyasında kalmaya devam eder.
   ============================================================================ */


/* ===== Kök yerleşim ===== */
.laf-mainlayout-root {
    --laf-mainlayout-drawer-width: 350px;
    /* Sayfa geçişi — tek ayar noktası */
    --laf-mainlayout-anim-duration: 420ms;
    --laf-mainlayout-anim-offset: 40px;
    --laf-mainlayout-anim-ease: cubic-bezier(.22, 1, .36, 1); /* easeOutQuint — yumuşak yavaşlama */

    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* Giriş fade-in */
@keyframes laf-mainlayout-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.laf-mainlayout-fade {
    animation: laf-mainlayout-fade-in .5s ease-in-out;
}


/* ===== APPBAR ===== */
.laf-mainlayout-appbar {
    flex: 0 0 48px;
    width: 100%;
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 12px;
    color: var(--LAF-palette-text-secondary);
    box-shadow: var(--LAF-default-paper-shadow);
    position: relative;
    z-index: 1300;
    border-bottom: 1px solid var(--LAF-palette-lines-divider);
}

.laf-mainlayout-spacer {
    flex: 1 1 auto;
}


/* ===== İkon butonlar ===== */
.laf-mainlayout-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

    .laf-mainlayout-iconbtn:hover {
        background: var(--LAF-palette-hover);
        color: var(--LAF-palette-primary);
    }

    .laf-mainlayout-iconbtn:active {
        background-color: color-mix(in srgb, currentColor 24%, transparent);
    }

.laf-mainlayout-edge-start {
    margin-left: -8px;
}

.laf-mainlayout-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
    display: block;
}


/* ===== Logolar =====
   Logo artık LAFAppLogo bileşeni tarafından çizilir; çerçeve/boyut kararı
   orada verilir. Burada sadece appbar'a özgü davranış kalır. */
.laf-mainlayout-appbar .laf-applogo-host {
    cursor: pointer;
    max-width: 35%;
}


/* ===== Appbar altındaki yatay satır (drawer + main) ===== */
.laf-mainlayout-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    position: relative; /* mobil overlay/scrim absolute anchor'ı */
    overflow: hidden; /* kayma sırasında taşan main'i kırpar */
}


/* ===== DRAWER — DESKTOP (>= 1280px) ===== */
.laf-mainlayout-drawer {
    flex: 0 0 auto;
    width: var(--laf-mainlayout-drawer-width);
    max-width: 75vw;
    height: 100%;
    overflow: hidden;
    color: var(--LAF-palette-text);
    transition: width .225s cubic-bezier(0,0,.2,1);
}

    .laf-mainlayout-drawer.laf-mainlayout-closed {
        width: 0;
    }

.laf-mainlayout-drawer-inner {
    width: var(--laf-mainlayout-drawer-width);
    max-width: 75vw;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.laf-mainlayout-scrim {
    display: none; /* desktop'ta yok */
}


/* ===================================================================
   SAYFA GEÇİŞİ — SADECE KAYMA (opacity YOK)
   -------------------------------------------------------------------
   ÖNCEDEN TRANSFORM UYGULANMAZ. Navigasyon anında içerideki sayfa henüz
   LAFPageLayout'u render etmemiş olabilir (LAFObject veri yüklerken
   spinner gösterir). O spinner'ın fade sahibi yoktur → GÖRÜNÜRDÜR.
   main önceden kaydırılsaydı spinner yamuk dururdu.

   laf-mainlayout-page-in   : Animasyonu tetikler. JS, içerideki LAFPageLayout
                              fade'e geçtiği AN ekler. Başlangıç ofsetini
                              keyframe'in `from` karesi verir; o frame'de içerik
                              opacity:0 olduğu için ofset hiç görünmez.
                              Kayma + fade senkron akar.
   laf-mainlayout-page-back : Yön çevirme (lafNavDir.isBack → geri tuşu /
                              mobil jest).

   DİKKAT: Bu iki class'ı lafPageAnim.arm() (JS) ekleyip animationend'de
   temizliyor. İsim değişirse JS tarafı da güncellenmelidir.

   animation-fill-mode KULLANILMAZ; JS animationend'de sınıfları temizler.
   Kalıcı transform OLUŞMAZ → LAF_Popup portal'ı ve LAF_Editor_LookUpCombo'nun
   position:fixed koordinat hesabı etkilenmez.

   JS hiç çalışmazsa hiçbir sınıf eklenmez → main tamamen normaldir.
   =================================================================== */
.laf-mainlayout-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

    .laf-mainlayout-main.laf-mainlayout-page-in {
        animation: laf-mainlayout-page-slide-fwd var(--laf-mainlayout-anim-duration) var(--laf-mainlayout-anim-ease);
    }

    .laf-mainlayout-main.laf-mainlayout-page-back.laf-mainlayout-page-in {
        animation: laf-mainlayout-page-slide-back var(--laf-mainlayout-anim-duration) var(--laf-mainlayout-anim-ease);
    }

@keyframes laf-mainlayout-page-slide-fwd {
    from {
        transform: translate3d(var(--laf-mainlayout-anim-offset), 0, 0);
    }

    to {
        transform: none;
    }
}

@keyframes laf-mainlayout-page-slide-back {
    from {
        transform: translate3d(calc(-1 * var(--laf-mainlayout-anim-offset)), 0, 0);
    }

    to {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .laf-mainlayout-main,
    .laf-mainlayout-main.laf-mainlayout-page-in,
    .laf-mainlayout-main.laf-mainlayout-page-back.laf-mainlayout-page-in {
        transform: none;
        animation: none;
    }
}


/* ===== DRAWER — MOBİL (< 1280px): overlay + scrim ===== */
@media (max-width: 1279.98px) {
    .laf-mainlayout-drawer {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: var(--laf-mainlayout-drawer-width);
        max-width: 75vw;
        z-index: 1250;
        transform: translateX(0);
        transition: transform .225s cubic-bezier(0,0,.2,1);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        /* background: rgba(var(--LAF-palette-background-rgb),.6); */
    }

        .laf-mainlayout-drawer.laf-mainlayout-closed {
            width: var(--laf-mainlayout-drawer-width);
            transform: translateX(-100%);
        }

    .laf-mainlayout-drawer-inner {
        width: 100%;
    }

    .laf-mainlayout-scrim {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1240;
        /* background: rgba(0,0,0,.1); */
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }

        .laf-mainlayout-scrim.laf-mainlayout-open {
            opacity: 1;
            pointer-events: auto;
        }

    [data-theme="dark"] .laf-mainlayout-scrim {
        background: rgba(0,0,0,.4);
    }
}


/* Sağ üstteki butonlar (spacer sonrası) biraz daha küçük */
.laf-mainlayout-spacer ~ .laf-mainlayout-iconbtn {
    width: 36px;
    height: 36px;
    padding: 7px;
}

    .laf-mainlayout-spacer ~ .laf-mainlayout-iconbtn .laf-mainlayout-icon {
        width: 22px;
        height: 22px;
    }