/* =============================================================================
   LAF — Sayfa Navigasyonu (açık pencere tabları)
   Kullanan bileşen: LAFPageNavigationTabs.razor
   index.html'den referanslanır.

   AD ALANI
   ────────
   Bu dosyadaki her sınıf ve değişken "laf-pagenav" önekini taşır. Tek istisna
   .laf-mainlayout-brandzone: appbar'ın parçası, mainlayout ailesine ait.
   Değişkenler .laf-pagenav üzerinde tanımlıdır → :root'a sızmaz.

   GÖRSEL DİL — segment
   ────────────────────
   Tablar, barda yüzen gri bir kabın (trough) içinde hap şeklinde durur.
   Aktif olan yüzey renginde, hafif gölgeli; kabın içinden "yukarı kalkmış"
   gibi görünür. Pasifler dolgusuz, ama kap sayesinde sınırları bellidir.
   Renk yükü düşük: primary yalnızca odak halkasında kullanılır.

   Şerit bara YAPIŞMAZ, dikeyde ortalanır. Kap içeriği kadar geniştir;
   sekme sayısı artınca büyür, yer kalmayınca kendi içinde kayar.

   HİZALAMA
   ────────
   Şerit, drawer'ın sağ kenarından sonra başlar. Genişlik kaynağı
   laf_mainlayout_styles.css'teki --laf-mainlayout-drawer-width değişkenidir;
   burada İKİNCİ bir değişken tanımlanmaz.
   ============================================================================= */


/* ── Appbar'daki marka bölgesi: hamburger + logo ─────────────────────────────
   Genişliği drawer ile aynı. Appbar'ın sol padding'i sıfırlanıp bölgenin
   içine alınır, yoksa şerit drawer kenarından padding kadar sağa kayar.

   TABAN GENİŞLİK (120px) İKİ YERDE GEÇER: aşağıdaki collapsed kuralında ve
   dar ekran bloğunda. Değiştirecekseniz İKİSİNİ BİRDEN değiştirin.
   Bölge sıfıra çökmemeli: app modunda hamburger yok, logo tek çocuk kalıyor
   ve genişliğini kabından aldığı için kap sıfırlanınca logo da kayboluyor.  */
.laf-mainlayout-appbar {
    padding-left: 0;
}

.laf-mainlayout-brandzone {
    flex: 0 0 auto;
    /* Genişlik içerikten gelir; drawer açıkken en az drawer kadar.
       width yerine min-width animasyonlanır: iki sayı arasında geçtiği için
       her tarayıcıda kayar (max-content'e geçiş animasyonlanamıyordu). */
    width: auto;
    min-width: var(--laf-mainlayout-drawer-width);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    /* Sağ boşluk İKİ DURUMDA DA aynı: yalnızca kapalı duruma verilseydi,
       genişlik yumuşak geçerken bu 8px anında değişip zıplama yaratırdı. */
    padding-left: 12px;
    padding-right: 8px;
    box-sizing: border-box;
    transition: min-width .225s cubic-bezier(0,0,.2,1);
}

    /* Drawer kapalı (masaüstü): sınıfı LAFMainLayout verir.
   Bölge logonun genişliğine iner, şerit logonun yanından başlar. */
    .laf-mainlayout-brandzone.laf-mainlayout-brandzone-collapsed {
        min-width: 120px;
    }

    /* Çocuklar küçülmez ve kabı doldurmaz: logo host'u kendi içeriği kadar kalır. */
    .laf-mainlayout-brandzone > * {
        flex: 0 0 auto;
    }

    /* Logonun sınırı YÜZDE OLMAMALI. Yüzde, marka bölgesinin o anki genişliğine
   göre hesaplanır; menü açılıp kapanırken bölge genişlediği/daraldığı için
   logo da büyüyüp küçülür ve üst bar oynuyormuş gibi görünür.
   (Appbar'daki .laf-applogo-host { max-width: 35% } kuralını ezer.) */
    .laf-mainlayout-brandzone .laf-applogo-host {
        width: auto;
        height: auto;
        max-width: none;
        align-self: center;
    }

        /* Logonun KENDİSİ de kabına bağlı ölçülmemeli. LAFAppLogo görseli bir <img>
   ile çiziyor ve MaxWidth verilmediğinde inline max-width:100% yazıyor; bu
   yüzde host'a → host'unki bölgeye bağlanır ve menü açılıp kapanırken logo
   büyüyüp küçülür. Burada serbest bırakılıyor.

   DİKKAT — SVG LOGOLAR: bir SVG dosyası piksel boyutu bildirmez, yalnızca
   ORAN verir. Yükseklik max-height ile sınırlanırsa (LAFAppLogo'nun MaxHeight
   parametresi) kesin bir yükseklik olmadığı için genişlik orandan türetilemez:
   bölge görseli yanlış ölçer ve sekmeler logonun üstüne biner. Bu yüzden
   MainLayout'ta MaxHeight DEĞİL, Height kullanın:
       <LAFAppLogo Height="30" ... />                                        */
        .laf-mainlayout-brandzone .laf-applogo-host img {
            width: auto;
            max-width: none;
            flex: 0 0 auto;
        }


/* ── Şerit ────────────────────────────────────────────────────────────────── */
.laf-pagenav {
    /* --- Yerel değişkenler --- */
    --laf-pagenav-height: 32px; /* hap yüksekliği */
    --laf-pagenav-max: 200px; /* başlık kesilmeden önceki sınır */
    --laf-pagenav-radius: 7px;
    --laf-pagenav-gap: 2px;
    /* Kap (trough): nötr kalsın diye primary'nin çok soluk tonu.
       Projenizde gri bir yüzey token'ı varsa onunla değiştirin. */
    --laf-pagenav-trough-bg: rgba(var(--LAF-palette-primary-rgb), .07);
    --laf-pagenav-trough-radius: 10px;
    --laf-pagenav-trough-padding: 3px;
    /* Aktif hap: sayfa yüzeyiyle aynı renk olmalı ki kaptan kalkmış görünsün. */
    --laf-pagenav-active-bg: var(--LAF-palette-surface, var(--LAF-palette-background));
    --laf-pagenav-active-shadow: 0 1px 2px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04);
    --laf-pagenav-font-size: 13px;
    --laf-pagenav-icon-size: 16px;
    --laf-pagenav-hover-duration: .15s;
    /* --- Yerleşim --- */
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center; /* bara yapışmaz, ortalanır */
    gap: 4px;
    padding: 0 8px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Kap: içeriği kadar geniş, yer kalmayınca kendi içinde kayar. */
.laf-pagenav-strip {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--laf-pagenav-gap);
    padding: var(--laf-pagenav-trough-padding);
    border-radius: var(--laf-pagenav-trough-radius);
    background: var(--laf-pagenav-trough-bg);
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
}

    .laf-pagenav-strip::-webkit-scrollbar {
        display: none;
    }

    /* Hiç tab yokken boş bir gri kutu görünmesin. */
    .laf-pagenav-strip:empty {
        display: none;
    }


/* ── Tek pencere (hap) ────────────────────────────────────────────────────── */
.laf-pagenav-item {
    position: relative;
    flex: 0 0 auto; /* içeriği kadar */
    max-width: var(--laf-pagenav-max);
    height: var(--laf-pagenav-height);
    display: flex;
    align-items: center;
    border-radius: var(--laf-pagenav-radius);
    background: transparent;
    color: var(--LAF-palette-text-secondary);
    transition: background var(--laf-pagenav-hover-duration) ease, color var(--laf-pagenav-hover-duration) ease;
}

    .laf-pagenav-item:not(.laf-pagenav-item-active):hover {
        background: var(--LAF-palette-hover);
        color: var(--LAF-palette-text);
    }

/* Aktif: yüzey renginde, gölgeli — kaptan kalkmış hap. */
.laf-pagenav-item-active,
.laf-pagenav-item-active:hover {
    background: var(--laf-pagenav-active-bg);
    box-shadow: var(--laf-pagenav-active-shadow);
    color: var(--LAF-palette-text);
}


/* Gövde (seçim düğmesi) */
.laf-pagenav-select {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 4px 0 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: var(--laf-pagenav-font-size);
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    /* Android: "Touch to Search" ve metin seçimi kapalı */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.laf-pagenav-item-active .laf-pagenav-select {
    font-weight: 600;
}

.laf-pagenav-select > svg {
    flex: 0 0 auto;
    width: var(--laf-pagenav-icon-size);
    height: var(--laf-pagenav-icon-size);
    fill: currentColor;
}

.laf-pagenav-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Kapat düğmesi — her hapta görünür ama pasiflerde daha soluk.
   Dolgusuz bir şeritte tam opak × fazla baskın kalıyor. */
.laf-pagenav-close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .45;
    transition: opacity .12s, background-color .12s;
}

.laf-pagenav-item:hover .laf-pagenav-close,
.laf-pagenav-item-active .laf-pagenav-close {
    opacity: .6;
}

.laf-pagenav-close:hover,
.laf-pagenav-close:focus-visible {
    opacity: 1;
    background-color: var(--LAF-palette-hover);
}

.laf-pagenav-close > svg {
    width: 15px;
    height: 15px;
}


/* ── Kaydırma düğmeleri ───────────────────────────────────────────────────── */
.laf-pagenav-scrollbtn {
    flex: 0 0 auto;
    align-self: center;
    width: 26px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--LAF-palette-text-secondary);
    cursor: pointer;
}

    .laf-pagenav-scrollbtn:hover {
        background: var(--LAF-palette-hover);
    }

    .laf-pagenav-scrollbtn[hidden] {
        display: none;
    }

    .laf-pagenav-scrollbtn > svg {
        width: 17px;
        height: 17px;
    }


/* ── "Açık pencereler" düğmesi ────────────────────────────────────────────────
   MainLayout'ta, sağdaki butonların yanında durur; şeridin gizlendiği dar
   ekranda pencereler arası tek geçiş yoludur. Masaüstünde şerit zaten var,
   bu yüzden gizli.                                                          */
.laf-pagenav-windowlist {
    display: none;
}


/* ── Odak görünürlüğü ─────────────────────────────────────────────────────── */
.laf-pagenav-select:focus-visible,
.laf-pagenav-close:focus-visible,
.laf-pagenav-scrollbtn:focus-visible {
    outline: 2px solid var(--LAF-palette-primary);
    outline-offset: -2px;
}


/* ── Dar ekran ────────────────────────────────────────────────────────────────
   1280 altında drawer overlay moduna geçer; marka bölgesi drawer genişliğini
   rezerve etmez ve şerit tamamen kalkar. Yerini sağdaki "açık pencereler"
   düğmesi alır (LAFDialogs.SingleSelect ile liste açar).

   Dar ekranda bölge 120px'e sabitlenir (min = max). border-box olduğu için
   yatay padding (12 + 8) bu 120'nin içindedir: menülü modda hamburger 36px
   de düşünce logoya ~64px kalır, app modunda ~100px. Logo burada kırpılırsa
   artırılacak yer bu iki satırdır.                                          */
@media (max-width: 1279.98px) {
    .laf-mainlayout-brandzone {
        min-width: 120px;
        max-width: 120px;
        transition: none;
    }

    /* Şeridin İÇİ gizlenir, kendisi DURUR: flex: 1 1 auto ile sağdaki
       butonları sağa iten boşluk odur. display:none verilirse butonlar
       logoya yapışır. */
    .laf-pagenav-strip,
    .laf-pagenav-scrollbtn {
        display: none;
    }

    .laf-pagenav-windowlist {
        display: inline-flex;
    }
}