/* ══════════════════════════════════════════════════════════════════════════
   tabs.css — TƏTBİQİN YEGANƏ TAB DİLİ (115)
   ══════════════════════════════════════════════════════════════════════════

   🔴 SİSTEM SAHİBİNİN QƏRARI (19.08.2026):
      «konkret qərar aldım, bunu .md-lərdə də qeyd et: bütün tablar standart
       olacaq — ya anbar modulundakı tab məntiqi, ya hesabat. Hansı daha
       müasir, gözə xoş, sürətli və istifadəsi rahatdırsa onu seç, sonra isə
       standart halına gətir.»

   ── SEÇİM: HESABAT (`.rpt-nav`) ────────────────────────────────────────
   İkisi arasındakı fərq zövq deyil, ÖLÇÜLƏ BİLƏN davranışdır:

   | | ANBAR (.inv-nav) | HESABAT (.rpt-nav) ✅ |
   |---|---|---|
   | Sığmayanda | `flex-wrap: wrap` → İKİ SƏTİR | üfüqi sürüşmə, tək sətir |
   | Səhifə sıçraması | var (sətir artanda məzmun aşağı düşür) | yox |
   | Aktiv nişan | şəffaf fon + kənar | qabarıq ağ «həb» + kölgə |
   | Qrup hissi | yoxdur (ayrı-ayrı düymələr) | var (seqment idarəedicisi) |
   | Sürüşmə zolağı | — | gizlədilir (`scrollbar-width: none`) |

   Aktiv nişanın QABARIQ olması vacibdir: rəng korluğu olan istifadəçi
   («deuteranopia» ~8% kişi) yalnız rəng fərqini görmür — kölgə və fon
   qalxması rəngdən asılı olmayan ikinci siqnaldır. Anbar variantında
   aktivlik YALNIZ rənglə göstərilirdi.

   ⚠️ SEQMENT İDARƏEDİCİSİ İKİ REJİMDƏ İŞLƏYİR:
      ① `AppTabs` / `AppTabPanel` — SƏHİFƏ İÇİ tablar (məzmun yerində dəyişir)
      ② `AppTabLinks`             — MARŞRUT tabları (hər tab ayrı səhifədir)
      İkisi də EYNİ siniflərdən istifadə edir, ona görə istifadəçi fərqi
      görmür — halbuki texniki olaraq biri düymə, digəri linkdir.

   ⚠️ NİYƏ QLOBAL FAYL, scoped CSS DEYİL: `AppTabLinks` `NavLink`
      KOMPONENTİ render edir və Blazor scoped `b-xxx` atributunu uşaq
      komponentlərə VERMİR — scoped qayda səssizcə ölərdi (bu tələyə
      layihədə iki dəfə düşülüb).

   ⚠️ KÖHNƏ SİNİFLƏR (`.rpt-nav`, `.inv-nav`, `.sup-nav`) burada ALIAS kimi
      saxlanılır. Silinmədilər, çünki `reports.css` və `upsell.css`-də hələ
      qalıqları var; alias sayəsində hər üçü eyni görünür.
   ══════════════════════════════════════════════════════════════════════════ */

.atabs-nav {
    display: flex;
    gap: .375rem;
    overflow-x: auto;
    padding: 4px;
    margin-bottom: 1.25rem;
    border-radius: 14px;
    background: var(--mud-palette-action-disabled-background);
    scrollbar-width: none;
}

    .atabs-nav::-webkit-scrollbar {
        display: none;
    }

.atabs-nav-item {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .875rem;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

    .atabs-nav-item:hover {
        color: var(--mud-palette-text-primary);
    }

    .atabs-nav-item:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: -2px;
    }

    .atabs-nav-item:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

    .atabs-nav-item.is-active {
        background: var(--mud-palette-surface);
        color: var(--mud-palette-primary);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    }

/* Sayğac nişanı (məs. baxılmamış istəklər). Rəng «gözləyir» siqnalıdır. */
.atabs-nav-badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    color: var(--mud-palette-error-text);
    background: var(--mud-palette-error);
}

/* ── Panel ──
   ⚠️ Gizli panel DOM-dan SİLİNMİR, yalnız `display: none` alır (KeepAlive).
      Səbəb praktikdir: profil ekranında bio redaktoru (Quill) panelin
      içindədir və `SaveAsync` mətni məhz redaktordan oxuyur. Panel
      silinsəydi, istifadəçi həmin taba girmədən yadda saxlayanda mətn
      SƏSSİZCƏ boşalardı. */
.atabs-panel--hidden {
    display: none !important;
}

/* 🔴 `.atabs-panel`-in DAXİLİ BOŞLUĞU QƏSDƏN YOXDUR.
      Panellərin yarısı öz kartını/`MudPaper`-ini daşıyır (Heyət, İş qrafiki,
      Abunə dialoqu) — qlobal padding orada İKİQAT boşluq yaradardı.

   ⚠️ Səhifə öz boşluğunu verirsə, qayda MÜTLƏQ `::deep` ilə yazılmalıdır:
          .my-page ::deep .atabs-panel { padding: 20px; }
      `::deep` OLMADAN Blazor scope atributunu `.atabs-panel`-in ÜZƏRİNƏ
      qoyur, o element isə `AppTabPanel` komponentinindir və atribut daşımır
      — qayda səssizcə ölür. ProfilePage-də tam olaraq bu baş verdi:
      məzmun `MudGrid`-in `margin: -12px`-i ilə kartın kənarından BAYIRA
      çıxırdı. Qoruyucu:
      `SharedTabsAndSelectTests.Scoped_CSS_ortaq_tab_siniflerini_deep_ile_hedefleyir` */

/* ══════════════════════════════════════════════════════════════════════════
   DİALOQ İÇİNDƏKİ TABLAR — HÜNDÜRLÜK SABİTDİR  (09.09.2026)
   ══════════════════════════════════════════════════════════════════════════
   🔴 SİSTEM SAHİBİNİN HESABATI: «admin paneldə klinikaların abunəliklərini
      ayarladığımız ekranda hər taba keçəndə fərqli ölçüdə açılır, bunu
      düzəlt — sabit standart ölçüdə açılsın!»

   SƏBƏB: dialoqun hündürlüyünü AKTİV panelin məzmunu təyin edir. «Əlavələr»
   tabı üç sətirdir, «Kanallar» tabı 245 sətir — yəni tab dəyişəndə dialoq
   ekranda büzülüb-böyüyür və düymələr hər dəfə başqa yerə sıçrayır.
   Bu, «ölçü» problemi kimi görünsə də praktikada NİŞAN ALMA problemidir:
   operator «Yadda saxla»-nı gözü ilə axtarır.

   HƏLL: panelin ÖZÜ sabit pəncərədir — aşağı hədd sıçrayışı, yuxarı hədd
   isə uzun tabın dialoqu ekrandan daşırmasını dayandırır.

   ⚠️ SÜRÜŞMƏ YALNIZ PANELDƏDİR, bütün blokda yox: tab başlıqları
      `.atabs-nav` qardaş elementdir və yerində qalır. Sürüşməni sarğıya
      versəydik uzun tabda başlıqlar yuxarı sürüşüb yox olardı.

   ⚠️ Qlobal fayldadır, scoped CSS-də deyil: dialoq `MudDialogProvider`
      altında, səhifənin scope-undan KƏNARDA render olunur (eyni səbəb
      `ExportButton`-un `.exp-*` siniflərində yazılıb). */
.atabs--fixed-body .atabs-panel:not(.atabs-panel--hidden) {
    min-height: var(--atabs-body-h, 460px);
    max-height: min(62vh, 640px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Alçaq ekranda sabit hündürlük əksinə işləyir — dialoq ekrana sığmır. */
@media (max-height: 700px) {
    .atabs--fixed-body .atabs-panel:not(.atabs-panel--hidden) {
        min-height: 0;
        max-height: 52vh;
    }
}

/* Hərəkətə həssas istifadəçi üçün keçid söndürülür. */
@media (prefers-reduced-motion: reduce) {
    .atabs-nav-item {
        transition: none;
    }
}

/* Telefon: nişanlar bir az sıxılır, mətn qalır (ikon+mətn birlikdə oxunur). */
@media (max-width: 600px) {
    .atabs-nav {
        margin-bottom: 1rem;
    }

    .atabs-nav-item {
        padding: .45rem .7rem;
        font-size: .8125rem;
    }
}

/* ── Köhnə siniflərin aliası ──
   `.rpt-nav` onsuz da eyni görünürdü (standart ondan götürüldü);
   `.inv-nav` və `.sup-nav` isə İNDİ ona bərabərləşdirilir. */
.inv-nav,
.sup-nav {
    display: flex;
    gap: .375rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 4px;
    margin-bottom: 1.25rem;
    border-radius: 14px;
    border-bottom: none;
    background: var(--mud-palette-action-disabled-background);
    scrollbar-width: none;
}

    .inv-nav::-webkit-scrollbar,
    .sup-nav::-webkit-scrollbar {
        display: none;
    }

.inv-nav-item,
.sup-nav-item {
    border-radius: 10px;
    border: none;
    padding: .5rem .875rem;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

    .inv-nav-item:hover,
    .sup-nav-item:hover {
        background: transparent;
        color: var(--mud-palette-text-primary);
    }

    .inv-nav-item.is-active,
    .sup-nav-item.is-active {
        background: var(--mud-palette-surface);
        color: var(--mud-palette-primary);
        border-color: transparent;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    }