/* ============================================================
   NOVAHBYS — Tema Sistemi
   3 Mod: light | dark | colorful (pastel)
   ============================================================ */

/* ---------- AÇIK TEMA (varsayılan) ---------- */
:root,
[data-theme="light"] {
    /* Arka planlar */
    --t-bg-page:         #f8fafc;
    --t-bg-secondary:    #f1f5f9;
    --t-bg-card:         #ffffff;
    --t-bg-card2:        #f1f5f9;
    --t-bg-hover:        #e2e8f0;

    /* Metinler */
    --t-text-primary:    #0f172a;
    --t-text-secondary:  #475569;
    --t-text-muted:      #94a3b8;
    --t-text-on-accent:  #ffffff;

    /* Kenarlıklar */
    --t-border:          #e2e8f0;
    --t-border-strong:   #cbd5e1;

    /* Header gradient */
    --t-header-from:     #1e3c72;
    --t-header-to:       #2a5298;
    --t-header-text:     #ffffff;
    --t-header-btn-bg:   rgba(255,255,255,0.10);
    --t-header-btn-hover:rgba(255,255,255,0.22);
    --t-header-btn-border:rgba(255,255,255,0.20);

    /* Tab bar */
    --t-tab-bar-bg:        #f1f5f9;
    --t-tab-bar-border:    #e2e8f0;
    --t-tab-active-bg:     #ffffff;
    --t-tab-active-text:   #1e3c72;
    --t-tab-active-shadow: #2a5298;
    --t-tab-inactive-bg:   #e2e8f0;
    --t-tab-inactive-text: #64748b;
    --t-tab-inactive-hover:#d1d5db;

    /* Accent */
    --t-accent:          #2a5298;
    --t-accent-hover:    #1e3c72;
    --t-accent-light:    #dbeafe;

    /* Giriş (input) */
    --t-input-bg:        #ffffff;
    --t-input-border:    #cbd5e1;
    --t-input-focus:     #2a5298;
    --t-input-text:      #0f172a;

    /* Scrollbar */
    --t-scroll-track:    #f1f5f9;
    --t-scroll-thumb:    #cbd5e1;
    --t-scroll-hover:    #94a3b8;

    /* Gölge */
    --t-shadow-sm:       0 1px 3px rgba(0,0,0,0.08);
    --t-shadow-md:       0 4px 12px rgba(0,0,0,0.10);

    /* Geçiş */
    --t-transition:      0.22s ease;

    /* Grid (table) başlık + zebra çizgisi (zebra için card/secondary değişkenleri kullanılır) */
    --t-grid-head-bg:    #f5f7fa;
    --t-grid-head-text:  #475569;

    /* Randevu vs Seans kart zemin renkleri (tbRandevu Nereden=1, tbSeanslar Nereden=2)
       Randevu = çok açık mavi, Seans = pembeye yakın çok açık kırmızı */
    --t-randevu-randevu-bg: #e6f3ff;
    --t-randevu-seans-bg:   #ffe6ec;

    /* Semantic durum renkleri — Emanet success/danger badge'leri, modal overlay,
       toplam satır vurguları için. Her tema bunları override eder; component'ler
       her zaman var(--t-success / --t-danger / --t-info / --t-overlay) kullanır. */
    --t-overlay:         rgba(0,0,0,0.5);
    --t-success:         #059669;
    --t-success-bg:      rgba(16,185,129,0.10);
    --t-success-hover-bg:rgba(16,185,129,0.22);
    --t-danger:          #ef4444;
    --t-danger-strong:   #dc2626;
    --t-danger-bg:       rgba(239,68,68,0.08);
    --t-danger-hover-bg: rgba(239,68,68,0.18);
    --t-warning:         #d97706;
    --t-info:            #7c3aed;
    --t-info-bg:         rgba(124,58,237,0.18);

    /* Date input native popup & icon */
    color-scheme: light;
}

/* ─────────────────────────────────────────────────────────────────────────
   TANIMSIZ KALMIŞ DEĞİŞKEN ADLARI — TEMAYA BAĞLANIYOR

   ⛔ SORUN: ekranların bir kısmı hiç tanımlanmamış adlar kullanıyordu
      (--t-bg, --t-text, --t-bg-primary…). CSS böyle bir değişkeni çözemeyince
      YEDEK değere düşer; yedekler de açık tema renkleriydi. Sonuç: o bölümler
      KOYU TEMADA DA BEYAZ kalıyor, üzerlerindeki yazı --t-text-primary ile açık
      renk olduğu için okunmuyordu ("Günlük Hatırlatmalar dark temada okunmuyor").
      Yedeği olmayan kullanımlar ise sessizce boşa düşüyordu.

   ÇÖZÜM: adları silmek yerine gerçek değişkenlere BAĞLA. Burada :root üzerinde
   bir kez tanımlanır ve var() ile taban değişkene bakar; taban değişkeni her tema
   kendi bloğunda ezdiği için takma adlar TÜM temalarda kendiliğinden doğru olur.
   🪤 Bu adlar hiçbir tema bloğunda yeniden tanımlanmamalı — tanımlanırsa bağ kopar
      ve o temada yine sabit renge düşer. Yeni renk gerekiyorsa TABAN değişken ezilir.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    --t-bg:             var(--t-bg-card);        /* panel / kart zemini */
    --t-bg-primary:     var(--t-bg-card);
    --t-bg-soft:        var(--t-bg-secondary);
    --t-bg-muted:       var(--t-bg-secondary);
    --t-text:           var(--t-text-primary);
    --t-hover:          var(--t-bg-hover);
    --t-border-soft:    var(--t-border);
    --t-primary:        var(--t-accent);
    --t-accent-soft:    color-mix(in srgb, var(--t-accent) 12%, transparent);
    --t-shadow-lg:      0 18px 50px rgba(0,0,0,0.28);
    --t-warning-strong: var(--t-warning);
    --t-warning-light:  color-mix(in srgb, var(--t-warning) 18%, var(--t-bg-card));
    /* Kapalı randevu zemini: --t-randevu-randevu-bg / -seans-bg her temada tanımlı,
       yalnız bu biri unutulmuş ve koyu temada açık pembede kalıyordu. */
    --t-randevu-kapali-bg: color-mix(in srgb, var(--t-danger) 16%, var(--t-bg-card));
}

/* Light tema — tüm grid header'ları için override.
   Component-level <style> blokları (vbg-table thead, tnm-table thead vb.)
   doğrudan --t-bg-secondary / --t-text-muted kullandığından, bu kural
   onların da light temada açık zemin + okunaklı yazıyla görünmesini sağlar.
   Selector specificity (0,2,2) inline .vbg-table thead (0,1,1) override eder. */
[data-theme="light"] table thead,
[data-theme="light"] table thead th,
[data-theme="light"] table thead td {
    background: #f5f7fa;
    color: #475569;
}

/* ============================================================
   KULÜP / MİLLİ TAKIM TEMALARI — light tabanlı (okunur arka plan),
   kulüp renkleri header/accent/tab/odaklarda. Hepsi tüm --t-* setini tanımlar.
   ============================================================ */

/* ---------- MİLLİ TAKIM (Türkiye — kırmızı/beyaz) ---------- */
[data-theme="milli"] {
    --t-bg-page:#ffffff; --t-bg-secondary:#f6f8fb; --t-bg-card:#ffffff; --t-bg-card2:#f6f8fb; --t-bg-hover:#fde8e8;
    --t-text-primary:#0f172a; --t-text-secondary:#475569; --t-text-muted:#94a3b8; --t-text-on-accent:#ffffff;
    --t-border:#e2e8f0; --t-border-strong:#e7b4b6;
    --t-header-from:#c20710; --t-header-to:#e30a17; --t-header-text:#ffffff;
    --t-header-btn-bg:rgba(255,255,255,0.12); --t-header-btn-hover:rgba(255,255,255,0.26); --t-header-btn-border:rgba(255,255,255,0.25);
    --t-tab-bar-bg:#ffffff; --t-tab-bar-border:#f0b9bb; --t-tab-active-bg:#ffd6d6; --t-tab-active-text:#b00710; --t-tab-active-shadow:#e30a17;
    --t-tab-inactive-bg:#e30a17; --t-tab-inactive-text:#ffffff; --t-tab-inactive-hover:#c20710;
    --t-accent:#e30a17; --t-accent-hover:#b00710; --t-accent-light:#fde8e8;
    --t-input-bg:#ffffff; --t-input-border:#cbd5e1; --t-input-focus:#e30a17; --t-input-text:#0f172a;
    --t-scroll-track:#f1f5f9; --t-scroll-thumb:#e7b4b6; --t-scroll-hover:#e30a17;
    --t-shadow-sm:0 1px 3px rgba(0,0,0,0.08); --t-shadow-md:0 4px 12px rgba(0,0,0,0.10); --t-transition:0.22s ease;
    --t-grid-head-bg:#ffd6d6; --t-grid-head-text:#9b1c1c;
    /* İçerik zemini: pastel kırmızı (bkz. Fenerbahçe bloğundaki açıklama). */
    --t-icerik-bg:#ffecec; --t-icerik-bg2:#ffe2e2;
    --t-dis-bg:#ffecec;
    --t-grid-row-bg:#ffecec; --t-grid-row-alt:#ffe2e2;
    --t-randevu-randevu-bg:#eaf2ff; --t-randevu-seans-bg:#ffe6ec;
    --t-overlay:rgba(0,0,0,0.5); --t-success:#059669; --t-success-bg:rgba(16,185,129,0.10); --t-success-hover-bg:rgba(16,185,129,0.22);
    --t-danger:#ef4444; --t-danger-strong:#dc2626; --t-danger-bg:rgba(239,68,68,0.08); --t-danger-hover-bg:rgba(239,68,68,0.18);
    --t-warning:#d97706; --t-info:#7c3aed; --t-info-bg:rgba(124,58,237,0.18);
    color-scheme: light;
}

/* Milli Takım — TÜM tab sistemlerinde (ana t-tab, Hasta Kartı hkt-tab, Tedavi tet-tab):
   pasif sekme = KIRMIZI zemin + BEYAZ yazı; seçili sekme zaten --t-tab-active-* ile
   BEYAZ zemin + KIRMIZI yazı gelir. :not(.active) ile aktif sekmeye dokunulmaz.
   (Bar/boşluk zemini beyaz: --t-tab-bar-bg=#fff.) */
[data-theme="milli"] .t-tab--inactive,
[data-theme="milli"] .hkt-tab:not(.active),
[data-theme="milli"] .tnm-tab:not(.tnm-tab--active),
[data-theme="milli"] .tet-tab:not(.active) {
    background-color: #e30a17;
    color: #ffffff;
    border-color: #e30a17;
}
[data-theme="milli"] .t-tab--inactive:hover,
[data-theme="milli"] .hkt-tab:not(.active):hover,
[data-theme="milli"] .tnm-tab:not(.tnm-tab--active):hover,
[data-theme="milli"] .tet-tab:not(.active):hover {
    background-color: #c20710;
    color: #ffffff;
    border-color: #c20710;
}
[data-theme="milli"] .hkt-tab:not(.active) .hkt-tab-icon,
[data-theme="milli"] .tet-tab:not(.active) .tet-tab-icon {
    opacity: 1;
    color: #ffffff;
}

/* Fenerbahçe — pasif sekme lacivert + beyaz yazı (tüm tab sistemleri; aktif zaten açık + koyu). */
[data-theme="fb"] .t-tab--inactive,
[data-theme="fb"] .hkt-tab:not(.active),
[data-theme="fb"] .tnm-tab:not(.tnm-tab--active),
[data-theme="fb"] .tet-tab:not(.active) { background-color:#1b458f; color:#ffffff; border-color:#1b458f; }
[data-theme="fb"] .t-tab--inactive:hover,
[data-theme="fb"] .hkt-tab:not(.active):hover,
[data-theme="fb"] .tnm-tab:not(.tnm-tab--active):hover,
[data-theme="fb"] .tet-tab:not(.active):hover { background-color:#13315e; color:#ffffff; border-color:#13315e; }
[data-theme="fb"] .hkt-tab:not(.active) .hkt-tab-icon,
[data-theme="fb"] .tet-tab:not(.active) .tet-tab-icon { opacity:1; color:#ffffff; }

/* Galatasaray — pasif sekme kırmızı + beyaz yazı. */
[data-theme="gs"] .t-tab--inactive,
[data-theme="gs"] .hkt-tab:not(.active),
[data-theme="gs"] .tnm-tab:not(.tnm-tab--active),
[data-theme="gs"] .tet-tab:not(.active) { background-color:#c20a3a; color:#ffffff; border-color:#c20a3a; }
[data-theme="gs"] .t-tab--inactive:hover,
[data-theme="gs"] .hkt-tab:not(.active):hover,
[data-theme="gs"] .tnm-tab:not(.tnm-tab--active):hover,
[data-theme="gs"] .tet-tab:not(.active):hover { background-color:#8a0a2e; color:#ffffff; border-color:#8a0a2e; }
[data-theme="gs"] .hkt-tab:not(.active) .hkt-tab-icon,
[data-theme="gs"] .tet-tab:not(.active) .tet-tab-icon { opacity:1; color:#ffffff; }

/* Trabzonspor — pasif sekme bordo + beyaz yazı. */
[data-theme="ts"] .t-tab--inactive,
[data-theme="ts"] .hkt-tab:not(.active),
[data-theme="ts"] .tnm-tab:not(.tnm-tab--active),
[data-theme="ts"] .tet-tab:not(.active) { background-color:#6a1b32; color:#ffffff; border-color:#6a1b32; }
[data-theme="ts"] .t-tab--inactive:hover,
[data-theme="ts"] .hkt-tab:not(.active):hover,
[data-theme="ts"] .tnm-tab:not(.tnm-tab--active):hover,
[data-theme="ts"] .tet-tab:not(.active):hover { background-color:#501325; color:#ffffff; border-color:#501325; }
[data-theme="ts"] .hkt-tab:not(.active) .hkt-tab-icon,
[data-theme="ts"] .tet-tab:not(.active) .tet-tab-icon { opacity:1; color:#ffffff; }

/* ---------- FENERBAHÇE (sarı/lacivert) ---------- */
[data-theme="fb"] {
    --t-bg-page:#f8fafc; --t-bg-secondary:#f1f5f9; --t-bg-card:#ffffff; --t-bg-card2:#f1f5f9; --t-bg-hover:#e3ebf7;
    --t-text-primary:#0f172a; --t-text-secondary:#475569; --t-text-muted:#94a3b8; --t-text-on-accent:#ffed00;
    --t-border:#e2e8f0; --t-border-strong:#b6c5e0;
    --t-header-from:#0e2a52; --t-header-to:#1b458f; --t-header-text:#ffed00;
    --t-header-btn-bg:rgba(255,237,0,0.14); --t-header-btn-hover:rgba(255,237,0,0.28); --t-header-btn-border:rgba(255,237,0,0.30);
    --t-tab-bar-bg:#ffffff; --t-tab-bar-border:#b6c5e0; --t-tab-active-bg:#dbe6f7; --t-tab-active-text:#13315e; --t-tab-active-shadow:#1b458f;
    --t-tab-inactive-bg:#1b458f; --t-tab-inactive-text:#ffffff; --t-tab-inactive-hover:#13315e;
    --t-accent:#1b458f; --t-accent-hover:#13315e; --t-accent-light:#dbe6f7;
    --t-input-bg:#ffffff; --t-input-border:#cbd5e1; --t-input-focus:#1b458f; --t-input-text:#0f172a;
    --t-scroll-track:#f1f5f9; --t-scroll-thumb:#b6c5e0; --t-scroll-hover:#1b458f;
    --t-shadow-sm:0 1px 3px rgba(0,0,0,0.08); --t-shadow-md:0 4px 12px rgba(0,0,0,0.10); --t-transition:0.22s ease;
    /* Grid başlık şeridi de sarı ailesinden (pastel zeminden bir ton koyu) — beyaz/gri
       başlık sarı gövdenin üstünde yamalı duruyordu. */
    --t-grid-head-bg:#fdeba4; --t-grid-head-text:#15315e;
    --t-randevu-randevu-bg:#e6effc; --t-randevu-seans-bg:#fff9d6;
    --t-overlay:rgba(0,0,0,0.5); --t-success:#059669; --t-success-bg:rgba(16,185,129,0.10); --t-success-hover-bg:rgba(16,185,129,0.22);
    --t-danger:#ef4444; --t-danger-strong:#dc2626; --t-danger-bg:rgba(239,68,68,0.08); --t-danger-hover-bg:rgba(239,68,68,0.18);
    --t-warning:#d97706; --t-info:#1b458f; --t-info-bg:rgba(27,69,143,0.16);
    /* Sayfa/içerik zemini: kulüp sarısının pastel tonu. Tek değişken → koyulaştırmak
       (#ffed00) ya da açmak (#fffbe0) isteyen tek satırı değiştirir. */
    --t-fb-sari:#fff6c4;
    /* KULÜP TEMASI İÇERİK RENKLERİ (4 kulüp temasında da aynı değişken adları):
         --t-icerik-bg   sayfa/panel zemini      --t-icerik-bg2  ikinci ton (zebra çift satır)
         --t-dis-bg      diş şeması hücresi      --t-grid-row-bg/alt  tablo satırları */
    --t-icerik-bg:#fff6c4; --t-icerik-bg2:#fdf0b8;
    --t-dis-bg:#fff6c4;
    --t-grid-row-bg:#fff6c4; --t-grid-row-alt:#fdf0b8;
    color-scheme: light;
}

/* ============================================================================
   KULÜP TEMALARI — İÇERİK YÜZEYLERİ
   Fenerbahçe / Milli Takım / Galatasaray / Trabzonspor: içerik alanları kulübün
   pastel tonuyla boyanır. Renk her temanın kendi --t-icerik-bg değişkeninden gelir,
   kural TEK yerde durur (:is ile dört tema birden seçilir).

   🪤 Bunu "--t-bg-page" değişkenini değiştirerek yapmayın: o değişkeni modal gövdeleri
   (.hbys-modal, .hbys-modal-body) de kullanıyor → bütün pencereler boyanır.
   Yalnız sayfa/içerik yüzeyleri boyanır; formlar, giriş kutuları ve modallar beyaz kalır.
   ============================================================================ */

/* Sayfa + sekme içeriği */
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) body,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .t-bg-page,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .tet-content
{ background-color: var(--t-icerik-bg); }

/* Kimlik: "Önceki Başvurular" paneli + "Başvuru Hesap Özeti" */
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) #hkt-prev-panel,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) #hkt-prev-panel .hkt-bk-table,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .hkt-ozet
{ background-color: var(--t-icerik-bg); }

/* Diagnoz / Planlama / Tedavi: şema kutusu, şema zemini, panoramik alanı, hizmet grid'i,
   sağ paneldeki kartlar.
   🪤 Panoramik FİLM VARKEN siyah kalmalı (dt-schema-image--has-image); resmin etrafı
   renklenirse görüntü kirli görünür → yalnız "film yok" hâli boyanır. */
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .dt-chart,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .dt-schema-row,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .dt-schema-stack > .dt-dis-islem,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .dt-schema-image:not(.dt-schema-image--has-image),
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .dt-services-table,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .dt-services-table table,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .dt-summary-buttons,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .dt-prices,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .dt-sadakat,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .dt-son-islemler
{ background-color: var(--t-icerik-bg); }

/* Yapışkan grid başlığı gövdeden ayrışsın (aynı tonda olsaydı kaydırırken satırlar
   başlığın içinden geçiyormuş gibi görünürdü). */
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .dt-services-table thead
{ background-color: var(--t-grid-head-bg); }

/* İmaj sekmesi — gövde, klasör ağacı, kart paneli, kartlar.
   (Kartların medya alanı koyu kalır: küçük resimler koyu zeminde daha net görünür.) */
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .hi-wrap,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .hi-tree,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .hi-cards,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .hi-card
{ background: var(--t-icerik-bg); }

/* Sonraki Randevu — "Yeni Hazırlık" formu, "Hazırlıklar" listesi ve kartları.
   (Giriş kutuları .srh-input beyaz kalır; yazılan metin renkli zeminde değil beyazda.) */
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .srh-form,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .srh-list,
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) .srh-card
{ background: var(--t-icerik-bg); }

/* "Önceki Başvurular" satırları — 🪤 zebra deseni (.hasta-search-row) tek/çift satırlara
   BEYAZ (--t-bg-card) ve GRİ (--t-bg-secondary) veriyordu; panel boyansa da grid beyaz
   kalıyordu. Kulüp temalarında iki tona çevrilir (satır ayrımı korunur).
   Kapsam #hkt-prev-panel ile sınırlı → Hasta Ara vb. diğer listeler etkilenmez. */
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) #hkt-prev-panel .hasta-search-row:nth-child(odd)
{ background: var(--t-icerik-bg); }
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) #hkt-prev-panel .hasta-search-row:nth-child(even)
{ background: var(--t-icerik-bg2); }
:is([data-theme="fb"],[data-theme="milli"],[data-theme="gs"],[data-theme="ts"]) #hkt-prev-panel .hkt-bk-subtotal td
{ background: var(--t-grid-head-bg); }

/* ---------- GALATASARAY (sarı/kırmızı) ---------- */
[data-theme="gs"] {
    --t-bg-page:#f8fafc; --t-bg-secondary:#f1f5f9; --t-bg-card:#ffffff; --t-bg-card2:#f1f5f9; --t-bg-hover:#fbe6dd;
    --t-text-primary:#0f172a; --t-text-secondary:#475569; --t-text-muted:#94a3b8; --t-text-on-accent:#ffcc00;
    --t-border:#e2e8f0; --t-border-strong:#e7b9a6;
    --t-header-from:#8a0a2e; --t-header-to:#c20a3a; --t-header-text:#ffcc00;
    --t-header-btn-bg:rgba(255,204,0,0.14); --t-header-btn-hover:rgba(255,204,0,0.28); --t-header-btn-border:rgba(255,204,0,0.30);
    --t-tab-bar-bg:#ffffff; --t-tab-bar-border:#e7b9c1; --t-tab-active-bg:#ffd9e0; --t-tab-active-text:#8a0a2e; --t-tab-active-shadow:#c20a3a;
    --t-tab-inactive-bg:#c20a3a; --t-tab-inactive-text:#ffffff; --t-tab-inactive-hover:#8a0a2e;
    --t-accent:#c20a3a; --t-accent-hover:#8a0a2e; --t-accent-light:#ffe0e6;
    --t-input-bg:#ffffff; --t-input-border:#cbd5e1; --t-input-focus:#c20a3a; --t-input-text:#0f172a;
    --t-scroll-track:#f1f5f9; --t-scroll-thumb:#e7b9a6; --t-scroll-hover:#c20a3a;
    --t-shadow-sm:0 1px 3px rgba(0,0,0,0.08); --t-shadow-md:0 4px 12px rgba(0,0,0,0.10); --t-transition:0.22s ease;
    --t-grid-head-bg:#ffe0a8; --t-grid-head-text:#a80a32;
    /* İçerik zemini: kulübün SARISI'nın pastel tonu (kırmızı zemin okumayı zorlaştırırdı). */
    --t-icerik-bg:#fff3cf; --t-icerik-bg2:#ffecbb;
    --t-dis-bg:#fff3cf;
    --t-grid-row-bg:#fff3cf; --t-grid-row-alt:#ffecbb;
    --t-randevu-randevu-bg:#eaf2ff; --t-randevu-seans-bg:#fff3d6;
    --t-overlay:rgba(0,0,0,0.5); --t-success:#059669; --t-success-bg:rgba(16,185,129,0.10); --t-success-hover-bg:rgba(16,185,129,0.22);
    --t-danger:#ef4444; --t-danger-strong:#dc2626; --t-danger-bg:rgba(239,68,68,0.08); --t-danger-hover-bg:rgba(239,68,68,0.18);
    --t-warning:#d97706; --t-info:#c20a3a; --t-info-bg:rgba(194,10,58,0.14);
    color-scheme: light;
}

/* ---------- TRABZONSPOR (bordo/mavi) ---------- */
[data-theme="ts"] {
    --t-bg-page:#f8fafc; --t-bg-secondary:#f1f5f9; --t-bg-card:#ffffff; --t-bg-card2:#f1f5f9; --t-bg-hover:#f0e2e7;
    --t-text-primary:#0f172a; --t-text-secondary:#475569; --t-text-muted:#94a3b8; --t-text-on-accent:#ffffff;
    --t-border:#e2e8f0; --t-border-strong:#d8b6c1;
    --t-header-from:#6a1b32; --t-header-to:#1c4e9d; --t-header-text:#ffffff;
    --t-header-btn-bg:rgba(255,255,255,0.12); --t-header-btn-hover:rgba(255,255,255,0.26); --t-header-btn-border:rgba(255,255,255,0.25);
    --t-tab-bar-bg:#ffffff; --t-tab-bar-border:#d8b6c1; --t-tab-active-bg:#f0d6df; --t-tab-active-text:#501325; --t-tab-active-shadow:#6a1b32;
    --t-tab-inactive-bg:#6a1b32; --t-tab-inactive-text:#ffffff; --t-tab-inactive-hover:#501325;
    --t-accent:#6a1b32; --t-accent-hover:#501325; --t-accent-light:#f3e0e6;
    --t-input-bg:#ffffff; --t-input-border:#cbd5e1; --t-input-focus:#6a1b32; --t-input-text:#0f172a;
    --t-scroll-track:#f1f5f9; --t-scroll-thumb:#d8b6c1; --t-scroll-hover:#6a1b32;
    --t-shadow-sm:0 1px 3px rgba(0,0,0,0.08); --t-shadow-md:0 4px 12px rgba(0,0,0,0.10); --t-transition:0.22s ease;
    --t-grid-head-bg:#eccdd8; --t-grid-head-text:#6a1b32;
    /* İçerik zemini: bordonun pastel tonu. */
    --t-icerik-bg:#f9e7ec; --t-icerik-bg2:#f3dde4;
    --t-dis-bg:#f9e7ec;
    --t-grid-row-bg:#f9e7ec; --t-grid-row-alt:#f3dde4;
    --t-randevu-randevu-bg:#e6effc; --t-randevu-seans-bg:#f6e3ea;
    --t-overlay:rgba(0,0,0,0.5); --t-success:#059669; --t-success-bg:rgba(16,185,129,0.10); --t-success-hover-bg:rgba(16,185,129,0.22);
    --t-danger:#ef4444; --t-danger-strong:#dc2626; --t-danger-bg:rgba(239,68,68,0.08); --t-danger-hover-bg:rgba(239,68,68,0.18);
    --t-warning:#d97706; --t-info:#1c4e9d; --t-info-bg:rgba(28,78,157,0.16);
    color-scheme: light;
}

/* ---------- KOYU TEMA ---------- */
[data-theme="dark"] {
    --t-bg-page:         #0f172a;
    --t-bg-secondary:    #1e293b;
    --t-bg-card:         #1e293b;
    --t-bg-card2:        #273142;
    --t-bg-hover:        #334155;

    --t-text-primary:    #e2e8f0;
    --t-text-secondary:rgb(255, 255, 255);
    --t-text-muted:      #ffffff;
    --t-text-on-accent:  #ffffff;

    --t-border:          #334155;
    --t-border-strong:   #9daec7;

    --t-header-from:     #020617;
    --t-header-to:       #0f172a;
    --t-header-text:     #e2e8f0;
    --t-header-btn-bg:   rgba(255,255,255,0.07);
    --t-header-btn-hover:rgba(255,255,255,0.14);
    --t-header-btn-border:rgba(255,255,255,0.12);

    --t-tab-bar-bg:        #1e293b;
    --t-tab-bar-border:    #334155;
    --t-tab-active-bg:     #0f172a;
    --t-tab-active-text:   #7dd3fc;
    --t-tab-active-shadow: #0ea5e9;
    --t-tab-inactive-bg:   #334155;
    --t-tab-inactive-text:rgb(255, 255, 255);
    --t-tab-inactive-hover:#3f5269;

    --t-accent:          #0ea5e9;
    --t-accent-hover:    #38bdf8;
    --t-accent-light:    #0c4a6e;

    --t-input-bg:        #1e293b;
    --t-input-border:    #475569;
    --t-input-focus:     #0ea5e9;
    --t-input-text:      #e2e8f0;

    --t-scroll-track:    #1e293b;
    --t-scroll-thumb:    #475569;
    --t-scroll-hover:    #64748b;

    --t-shadow-sm:       0 1px 3px rgba(0,0,0,0.30);
    --t-shadow-md:       0 4px 12px rgba(0,0,0,0.40);

    --t-grid-head-bg:    #0f172a;
    --t-grid-head-text:  #93c5fd;

    /* Randevu vs Seans — koyu temada açık tonların koyu karşılıkları (mavi/pembe damarı korunur) */
    --t-randevu-randevu-bg: #1e3554;
    --t-randevu-seans-bg:   #4a1f2e;

    /* Semantic durum renkleri — dark temada koyu zemin üzerinde okunabilir
       parlaklıklara çekilmiş varyantlar. */
    --t-overlay:         rgba(0,0,0,0.65);
    --t-success:         #10b981;
    --t-success-bg:      rgba(16,185,129,0.15);
    --t-success-hover-bg:rgba(16,185,129,0.28);
    --t-danger:          #f87171;
    --t-danger-strong:   #ef4444;
    --t-danger-bg:       rgba(239,68,68,0.15);
    --t-danger-hover-bg: rgba(239,68,68,0.28);
    --t-warning:         #f59e0b;
    --t-info:            #a78bfa;
    --t-info-bg:         rgba(167,139,250,0.20);

    /* Date input native popup & icon */
    color-scheme: dark;
}

/* ---------- RENKLİ (PEMBE) TEMA ---------- */
[data-theme="colorful"] {
    --t-bg-page:         #fff0f6;
    --t-bg-secondary:    #fce7f3;
    --t-bg-card:         #fdf2f8;
    --t-bg-card2:        #fce7f3;
    --t-bg-hover:        #ffd6e7;

    --t-text-primary:    #831843;
    --t-text-secondary:  #9c009c;
    --t-text-muted:      #a20055;
    --t-text-on-accent:  #ffffff;

    --t-border:          #fbcfe8;
    --t-border-strong:   #f9a8d4;

    --t-header-from:     #be185d;
    --t-header-to:       #ec4899;
    --t-header-text:     #ffffff;
    --t-header-btn-bg:   rgba(255,255,255,0.18);
    --t-header-btn-hover:rgba(255,255,255,0.30);
    --t-header-btn-border:rgba(255,255,255,0.30);

    --t-tab-bar-bg:        #fce7f3;
    --t-tab-bar-border:    #fbcfe8;
    --t-tab-active-bg:     #fff0f6;
    --t-tab-active-text:   #9d174d;
    --t-tab-active-shadow: #ec4899;
    --t-tab-inactive-bg:   #fbcfe8;
    --t-tab-inactive-text: #db2777;
    --t-tab-inactive-hover:#ffd6e7;

    --t-accent:          #ec4899;
    --t-accent-hover:    #db2777;
    --t-accent-light:    #fce7f3;

    --t-input-bg:        #fff0f6;
    --t-input-border:    #fbcfe8;
    --t-input-focus:     #ec4899;
    --t-input-text:      #831843;

    --t-scroll-track:    #fce7f3;
    --t-scroll-thumb:    #f9a8d4;
    --t-scroll-hover:    #f472b6;

    --t-shadow-sm:       0 1px 3px rgba(236,72,153,0.12);
    --t-shadow-md:       0 4px 12px rgba(236,72,153,0.18);

    --t-grid-head-bg:    #fbcfe8;
    --t-grid-head-text:  #9d174d;

    /* Renkli temada da Randevu = çok açık mavi, Seans = çok açık pembe */
    --t-randevu-randevu-bg: #e6f3ff;
    --t-randevu-seans-bg:   #ffe6ec;

    /* Date input native popup & icon */
    color-scheme: light;
}

/* ---------- RENKLİ MOD TEMA (Gökkuşağı) ---------- */
[data-theme="rainbow"] {
    /* Arka planlar — her bölge farklı pastel renk */
    --t-bg-page:         #eff6ff;   /* pastel mavi */
    --t-bg-secondary:    #f0fdf4;   /* pastel yeşil */
    --t-bg-card:         #fefce8;   /* pastel sarı */
    --t-bg-card2:        #F0FDF4;   /* pastel amber */
    --t-bg-hover:        #fdf2f8;   /* pastel pembe */

    /* Metinler */
    --t-text-primary:    #374151;   /* koyu gri */
    --t-text-secondary:  #4b5563;
    --t-text-muted:      #9ca3af;
    --t-text-on-accent:  #ffffff;

    /* Kenarlıklar — pastel yeşil */
    --t-border:          #bbf7d0;
    --t-border-strong:   #6ee7b7;

    /* Header — pastel yeşil */
    --t-header-from:     #6ee7b7;
    --t-header-to:       #6ee7b7;
    --t-header-text:     #065f46;
    --t-header-btn-bg:   rgba(0,0,0,0.07);
    --t-header-btn-hover:rgba(0,0,0,0.13);
    --t-header-btn-border:rgba(0,0,0,0.10);

    /* Tab bar — pastel mavi */
    --t-tab-bar-bg:        #bfdbfe;
    --t-tab-bar-border:    #93c5fd;
    --t-tab-active-bg:     #ffffff;
    --t-tab-active-text:   #1e40af;
    --t-tab-active-shadow: #93c5fd;
    --t-tab-inactive-bg:   #dbeafe;
    --t-tab-inactive-text: #1e40af;
    --t-tab-inactive-hover:#bfdbfe;

    /* Accent — pastel mor */
    --t-accent:          #a78bfa;
    --t-accent-hover:    #7c3aed;
    --t-accent-light:    #ede9fe;

    /* Input — pastel yeşil vurgulu */
    --t-input-bg:        #f0fdf4;
    --t-input-border:    #86efac;
    --t-input-focus:     #4ade80;
    --t-input-text:      #374151;

    /* Scrollbar — pastel mor */
    --t-scroll-track:    #f5f3ff;
    --t-scroll-thumb:    #c4b5fd;
    --t-scroll-hover:    #a78bfa;

    /* Gölge */
    --t-shadow-sm:       0 1px 3px rgba(167,139,250,0.15);
    --t-shadow-md:       0 4px 12px rgba(167,139,250,0.22);

    /* Grid başlık — pastel turuncu */
    --t-grid-head-bg:    #fed7aa;
    --t-grid-head-text:  #7c2d12;

    /* Randevu vs Seans */
    --t-randevu-randevu-bg: #dbeafe;
    --t-randevu-seans-bg:   #fce7f3;

    color-scheme: light;
}

/* ============================================================
   BOYUT (SCALE) SİSTEMİ
   4 Seviye: compact | normal | large | xlarge
   ============================================================ */

:root,
[data-scale="normal"] {
    --t-root-font:  14px;
    --t-header-h:   52px;
    --t-tabbar-h:   38px;
}

[data-scale="compact"] {
    --t-root-font:  12px;
    --t-header-h:   44px;
    --t-tabbar-h:   32px;
}

[data-scale="large"] {
    --t-root-font:  16px;
    --t-header-h:   58px;
    --t-tabbar-h:   44px;
}

[data-scale="xlarge"] {
    --t-root-font:  19px;
    --t-header-h:   66px;
    --t-tabbar-h:   52px;
}

/* ============================================================
   GENEL OKUNABİLİRLİK (yaşlı / az gören kullanıcılar)
   Tüm projeye uygulanır (MainLayout/Login köküne .t-okunabilir).
   Tema değişkenleri üzerinden çalışır → açık/koyu/pembe uyumlu.
   ============================================================ */
.t-okunabilir {
    /* En açık (mat) metinleri bir tık koyulaştır → kontrast artar. */
    --t-text-muted: var(--t-text-secondary);
}
/* Küçük yazıları biraz büyüt. */
.t-okunabilir .text-xs              { font-size: 0.8rem; }
.t-okunabilir .text-\[0\.7rem\]     { font-size: 0.8rem; }
.t-okunabilir .text-\[0\.72rem\]    { font-size: 0.82rem; }
.t-okunabilir .text-\[0\.74rem\]    { font-size: 0.82rem; }
.t-okunabilir .text-\[0\.78rem\]    { font-size: 0.86rem; }
.t-okunabilir .text-\[9px\]         { font-size: 11px; }
.t-okunabilir .text-\[10px\]        { font-size: 11.5px; }
.t-okunabilir .text-\[11px\]        { font-size: 12.5px; }
/* İnce/normal yazıları kalınlaştır → daha canlı/net. */
.t-okunabilir .font-normal,
.t-okunabilir .font-medium          { font-weight: 600; }
/* Form alanlarının yazısı daha büyük. */
.t-okunabilir input,
.t-okunabilir select,
.t-okunabilir textarea,
.t-okunabilir .t-input,
.t-okunabilir .t-input-ro           { font-size: 0.9rem; }
/* Açılır liste seçenekleri (combobox). */
.t-okunabilir option                { font-size: 0.9rem; }
/* Etiketler: kalın ve net. */
.t-okunabilir label                 { font-weight: 600; }
/* Placeholder'lar çok soluk kalmasın. */
.t-okunabilir ::placeholder         { opacity: 0.92; }
/* TÜM gridler/tablolar: başlıklar koyu, hücreler koyu + büyük (satır içi renkler korunur). */
.t-okunabilir table th { color: var(--t-text-secondary); font-size: 0.72rem; }
.t-okunabilir table td { color: var(--t-text-primary);   font-size: 0.86rem; }

/* Vezne tahsilat alt-formları (Nakit/POS/Havale/Çek/Emanet) — ortak .vfk-row etiketleri.
   Beş form da aynı global kuralı tekrar tanımlıyor; .t-okunabilir öneki ile (daha yüksek
   specificity) tek yerden koyulaştırıp büyütüyoruz (editler zaten input/select kuralıyla 0.9rem). */
.t-okunabilir .vfk-row > label:first-child { font-size: 0.86rem; color: var(--t-text-primary); }
.t-okunabilir .vfk-inline-label            { font-size: 0.84rem; color: var(--t-text-primary); }

/* ============================================================
   TEMEL ELEMENT STİLLERİ
   ============================================================ */
html {
    font-size: var(--t-root-font, 14px);
    transition: font-size 0.2s ease;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--t-bg-page);
    color: var(--t-text-primary);
    transition: background-color var(--t-transition), color var(--t-transition);
}

h1:focus { outline: none; }

/* ============================================================
   TEMA YARDIMCI SINIFLAR
   ============================================================ */

/* Arka planlar */
.t-bg-page        { background-color: var(--t-bg-page); }
.t-bg-secondary   { background-color: var(--t-bg-secondary); }
.t-bg-card        { background-color: var(--t-bg-card); }
.t-bg-card2       { background-color: var(--t-bg-card2); }

/* Metinler */
.t-text-primary   { color: var(--t-text-primary); }
.t-text-secondary { color: var(--t-text-secondary); }
.t-text-muted     { color: var(--t-text-muted); }

/* Kenarlıklar */
.t-border         { border-color: var(--t-border); }
.t-border-strong  { border-color: var(--t-border-strong); }

/* ============================================================
   TEMA AKSİYON BUTONLARI — Kaydet / Sil / Kapat
   Tüm projede ortak kullanılır. İkon ::before ile otomatik gelir,
   ayrıca <i>/<svg>/<img> koymaya GEREK YOKTUR.
   Kaynak: Kaydet → Hasta Kimlik (accent), Sil/Kapat → Personel Kartı.

   Kullanım:
     <button class="t-btn t-btn-save">Kaydet</button>
     <button class="t-btn t-btn-delete">Sil</button>
     <button class="t-btn t-btn-close">Kapat</button>
   ============================================================ */
.t-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 14px;
    font-size: 0.78rem; font-weight: 600;
    border-radius: 8px; cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--t-transition), border-color var(--t-transition), color var(--t-transition);
}
.t-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* İkonlar — FontAwesome 6 Free Solid, ::before ile gömülü.
   save → floppy-disk (\f0c7), delete → trash (\f1f8), close → door-open (\f52b) */
.t-btn-save::before,
.t-btn-delete::before,
.t-btn-close::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.9em;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
.t-btn-save::before   { content: "\f0c7"; }
.t-btn-delete::before { content: "\f1f8"; }
.t-btn-close::before  { content: "\f52b"; }

/* Kaydet — Hasta Kimlik "Kaydet" ile aynı accent ton */
.t-btn-save {
    background: var(--t-accent);
    color: var(--t-text-on-accent);
    border-color: var(--t-accent);
}
.t-btn-save:hover:not(:disabled) {
    background: var(--t-accent-hover);
    border-color: var(--t-accent-hover);
}

/* Sil — Personel Kartı "Sil" ile aynı kırmızı */
.t-btn-delete {
    background: var(--t-danger-strong);
    color: #fff;
    border-color: var(--t-danger-strong);
}
.t-btn-delete:hover:not(:disabled) {
    background: var(--t-danger);
    border-color: var(--t-danger);
}

/* Kapat — Personel Kartı "Kapat" ile aynı nötr ton */
.t-btn-close {
    background: var(--t-bg-secondary);
    color: var(--t-text-secondary);
    border-color: var(--t-border);
}
.t-btn-close:hover:not(:disabled) {
    background: var(--t-bg-hover);
    color: var(--t-text-primary);
}

/* Header */
.t-header {
    background: linear-gradient(135deg, var(--t-header-from) 0%, var(--t-header-to) 100%);
    color: var(--t-header-text);
    transition: background var(--t-transition);
    box-shadow: 0 2px 20px rgba(0,0,0,0.14);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.t-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.5rem;
    background-color: var(--t-header-btn-bg);
    border: 1px solid var(--t-header-btn-border);
    color: var(--t-header-text);
    cursor: pointer;
    transition: background-color var(--t-transition), transform 0.12s ease, box-shadow var(--t-transition);
}
.t-header-btn:hover {
    background-color: var(--t-header-btn-hover);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.t-header-btn:active { transform: scale(0.9); box-shadow: none; }

/* ── HEADER YARDIMCI SINIFLAR ── */
.hdr-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}

.hdr-brand-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 900;
    flex-shrink: 0;
    letter-spacing: -0.03em;
}

.hdr-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.hdr-brand-name {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.hdr-brand-sub {
    font-size: 0.58rem;
    opacity: 0.55;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.hdr-sep {
    width: 1px;
    height: 1.25rem;
    background: rgba(255,255,255,0.18);
    flex-shrink: 0;
    margin: 0 0.125rem;
}

.hdr-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem 0.3rem 0.375rem;
    border-radius: 2rem;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.16);
    flex-shrink: 0;
    transition: background var(--t-transition);
}
.hdr-user:hover { background: rgba(255,255,255,0.15); }

.hdr-user-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    border: 1.5px solid rgba(255,255,255,0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    flex-shrink: 0;
}

.hdr-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    max-width: 140px;
}

.hdr-user-name {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr-user-sub {
    font-size: 0.6rem;
    opacity: 0.62;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Topbar (TabBar + sağ aksiyon butonları tek satırda) ── */
.t-topbar-row {
    display: flex;
    align-items: stretch;
    min-height: var(--t-tabbar-h);
    background: linear-gradient(
        to bottom,
        var(--t-tab-bar-bg) 0%,
        color-mix(in srgb, var(--t-tab-bar-bg) 85%, var(--t-tab-bar-border)) 100%
    );
    border-bottom: 1px solid var(--t-tab-bar-border);
    transition: background var(--t-transition);
}
.t-topbar-row > .t-tabbar {
    flex: 1;
    min-width: 0;
    background: transparent;
    border-bottom: none;
}
.t-topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    flex-shrink: 0;
    border-left: 1px solid var(--t-tab-bar-border);
}
.t-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--t-text-secondary);
    cursor: pointer;
    transition: background-color var(--t-transition), color var(--t-transition);
}
/* Rozetli üst çubuk düğmesi (Görevler / Mesajlar). Rozet düğmenin sağ-üstüne taşar,
   bu yüzden konumlandırma bağlamı burada açılıyor; overflow kesilmemeli. */
.t-rozetli { position: relative; overflow: visible; }
.t-rozet {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    /* Çubuk zeminiyle arasına ince ayraç — ikonun üstüne binince okunur kalsın. */
    box-shadow: 0 0 0 1.5px var(--t-bg-topbar, var(--t-bg-secondary));
    pointer-events: none;
}
.t-topbar-btn:hover {
    background: var(--t-bg-hover);
    color: var(--t-text-primary);
    border-color: var(--t-border);
}
.t-topbar-btn:active { transform: scale(0.92); }
.t-topbar-btn.is-busy { pointer-events: none; opacity: 0.7; }
.t-topbar-btn.is-busy svg { animation: t-topbar-spin 0.8s linear infinite; }
@keyframes t-topbar-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.t-topbar-btn-danger:hover {
    background: rgba(239,68,68,0.12);
    color: #ef4444;
    border-color: rgba(239,68,68,0.3);
}
.t-topbar-user {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    cursor: default;
}
.t-topbar-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--t-accent-light);
    color: var(--t-accent);
    border: 1px solid var(--t-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 800;
}
.t-topbar-sep {
    width: 1px;
    height: 18px;
    background: var(--t-border-strong);
    margin: 0 4px;
    flex-shrink: 0;
}
.t-topbar-btn--active {
    background: var(--t-bg-hover);
    color: var(--t-text-primary);
    border-color: var(--t-border);
}

/* ── Hamburger Sidebar Menu ── */
.sidebar-menu-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 90;
}
.sidebar-menu-panel {
    position: fixed;
    top: var(--t-tabbar-h, 38px);
    right: 8px;
    z-index: 100;
    width: 240px;
    background: var(--t-bg-card);
    border: 1px solid var(--t-border);
    border-left: 5px solid #06b6d4;   /* Randevu slot menüsüyle aynı cyan aksan şeridi */
    border-radius: 8px;
    box-shadow: var(--t-shadow-md);
    overflow: visible;
    animation: sm-slide-in 0.18s ease-out;
}
@keyframes sm-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sidebar-menu-list {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}
/* Sık Kullanılanlar — FAREYLE SIRALAMA (sürükle-bırak).
   Satır sürüklenirken soluklaşır; bırakılacak yer belirgin bir çizgiyle gösterilir. */
.sm-fav-drag { cursor: grab; }
.sm-fav-drag:active { cursor: grabbing; }
.sm-fav-dragging { opacity: .45; }
.sm-fav-drop { box-shadow: inset 0 2px 0 0 var(--t-accent, #22d3ee); }

.sm-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 14px;
    color: var(--t-text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    user-select: none;
    transition: background var(--t-transition);
}
.sm-item:hover {
    background: var(--t-bg-hover);
}
.sm-item .sm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    color: var(--t-text-secondary);
    font-size: 0.85rem;
}
.sm-item:hover .sm-icon {
    color: var(--t-accent);
}
.sm-item .sm-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-item .sm-chevron {
    flex-shrink: 0;
    width: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: var(--t-text-muted);
}
.sm-item .sm-chevron--empty { visibility: hidden; }
.sm-item-with-sub:hover .sm-chevron {
    color: var(--t-accent);
}
.sm-sub-list {
    position: absolute;
    top: 0;
    right: 100%;
    margin-right: 0;
    width: 220px;
    background: var(--t-bg-card);
    border: 1px solid var(--t-border);
    border-radius: 8px;
    box-shadow: var(--t-shadow-md);
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    z-index: 101;
    animation: sm-slide-in 0.15s ease-out;
}
.sm-sub-list .sm-item {
    height: 36px;
    padding: 0 12px;
    font-size: 0.78rem;
}

/* ── Generic Modal (PopupComponent) ── */
.hbys-modal-backdrop {
    position: fixed; inset: 0;
    z-index: 9000;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    outline: none;
    animation: hbys-fade-in 0.18s ease-out;
}
.hbys-modal {
    position: relative;
    width: 100%;
    max-height: 92vh;
    display: flex; flex-direction: column;
    background: var(--t-bg-page);
    color: var(--t-text-primary);
    border: 1px solid var(--t-border);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: hbys-modal-in 0.22s ease-out;
}
.hbys-modal--sm   { max-width: 400px; }
.hbys-modal--md   { max-width: 720px; }
.hbys-modal--lg   { max-width: 1100px; }
.hbys-modal--xl   { max-width: 1400px; }
.hbys-modal--full { max-width: 96vw; height: 94vh; }

.hbys-modal-header {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 6px 4px;
    background: var(--t-bg-card);
    border-bottom: 1px solid var(--t-border);
}
.hbys-modal-header--drag { cursor: move; user-select: none; touch-action: none; }
.hbys-modal-header--drag .hbys-modal-title { cursor: move; }
.hbys-modal-title {
    font-size: 0.95rem; font-weight: 700;
    color: var(--t-text-primary);
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Tam ekran: max-width sınırını ve sürükleme konumunu ezip ekranı kaplar. */
.hbys-modal--maxi {
    position: fixed; inset: 8px;
    max-width: none; width: auto; height: auto;
    max-height: none;
    transform: none !important; left: 8px !important; top: 8px !important;
    border-radius: 10px;
}
.hbys-modal-maxi {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--t-bg-secondary);
    border: 1px solid var(--t-border);
    color: var(--t-text-secondary);
    border-radius: 6px; cursor: pointer;
    transition: background var(--t-transition), color var(--t-transition), border-color var(--t-transition);
}
.hbys-modal-maxi:hover { background: var(--t-bg-hover); color: var(--t-text-primary); }

.hbys-modal-close {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--t-bg-secondary);
    border: 1px solid var(--t-border);
    color: var(--t-text-secondary);
    border-radius: 6px; cursor: pointer;
    font-size: 1.25rem; line-height: 1;
    transition: background var(--t-transition), color var(--t-transition), border-color var(--t-transition);
}
.hbys-modal-close:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}
.hbys-modal-close--floating {
    position: absolute; top: 10px; right: 10px;
    z-index: 1;
}
.hbys-modal-body {
    flex: 1; min-height: 0;
    overflow: auto;
    padding: 16px 20px;
    background: var(--t-bg-page);
}
.hbys-modal-footer {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px;
    padding: 4px 20px;
    background: var(--t-bg-card);
    border-top: 1px solid var(--t-border);
}
@keyframes hbys-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes hbys-modal-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Tanım Listesi (Personel/Hizmet/Stok ortak) ── */
.tnm-wrap { padding: 12px 16px; height: 100%; display: flex; flex-direction: column; gap: 12px; }
/* İçerik-kadar açılan popup'larda (ModalSize XLarge, .hbys-modal max-height:92vh, sabit
   yükseklik yok) liste kökü height:100%'i içerik olarak çözer → modal satır sayısına göre
   büyür/küçülür. Bu sınıf sabit yükseklik verir; tablo (.tnm-table-wrap flex:1) kendi
   içinde kayar, modal boyu değişmez. 92vh üst sınırı korunur. */
.tnm-wrap.tnm-wrap--fixed { height: min(80vh, 860px); }
.tnm-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--t-bg-card);
    border: 1px solid var(--t-border);
    border-radius: 10px;
    box-shadow: var(--t-shadow-sm);
}
.tnm-search {
    flex: 1; min-width: 200px;
    padding: 7px 10px; font-size: 0.82rem;
    background: var(--t-bg-card); border: 1px solid var(--t-border); border-radius: 8px;
    color: var(--t-text-primary); outline: none;
}
.tnm-search:focus { border-color: var(--t-accent); box-shadow: 0 0 0 3px var(--t-accent-light); }
.tnm-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    font-size: 0.78rem; font-weight: 600;
    border-radius: 8px; cursor: pointer;
    border: 1px solid transparent;
}
.tnm-btn-primary  { background: rgba(59,130,246,0.12);  border-color: rgba(59,130,246,0.4);  color: #2563eb; }
.tnm-btn-primary:hover  { background: rgba(59,130,246,0.22); }
.tnm-btn-success  { background: rgba(16,185,129,0.12);  border-color: rgba(16,185,129,0.4);  color: #059669; }
.tnm-btn-success:hover  { background: rgba(16,185,129,0.22); }
.tnm-btn-warning  { background: rgba(245,158,11,0.12);  border-color: rgba(245,158,11,0.4);  color: #d97706; }
.tnm-btn-warning:hover  { background: rgba(245,158,11,0.22); }
.tnm-btn-secondary { background: var(--t-bg-secondary); border-color: var(--t-border); color: var(--t-text-secondary); }
.tnm-btn-secondary:hover { background: var(--t-bg-hover); color: var(--t-text-primary); }

.tnm-table-wrap {
    flex: 1; overflow: auto;
    border: 1px solid var(--t-border); border-radius: 10px;
    background: var(--t-bg-card);
    min-height: 0;
}
.tnm-table {
    width: max-content; min-width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    white-space: nowrap;
}
.tnm-table thead { position: sticky; top: 0; z-index: 1; background: var(--t-bg-secondary); }
.tnm-table th {
    padding: 8px 10px; text-align: left;
    font-size: 0.66rem; font-weight: 700;
    color: var(--t-text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    border-bottom: 1px solid var(--t-border-strong);
}
.tnm-table td { padding: 6px 10px; border-bottom: 1px solid var(--t-border); color: var(--t-text-secondary); cursor: pointer; }
.tnm-table tbody tr:hover { background: var(--t-bg-hover); }
.tnm-table .text-right { text-align: right; }
.tnm-empty { text-align: center; padding: 24px !important; color: var(--t-text-muted) !important; font-style: italic; cursor: default !important; }

/* ── Pasif tanım satırı (banka / banka hesabı) ─────────────────────────────────
   🪤 Pasif kayıt GİZLENMEZ, soluklaştırılır: kullanıcı "kayıt kayboldu" sanmasın,
      ama aktif olanlardan bir bakışta ayrılsın. Üstü çizili ad + soluk satır. */
.tnm-pasif { opacity: .55; }
.tnm-pasif td { text-decoration: line-through; text-decoration-thickness: 1px; }
.tnm-pasif td:first-child, .tnm-pasif td:last-child { text-decoration: none; }
.tnm-rozet-aktif, .tnm-rozet-pasif {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    font-size: .68rem; font-weight: 800; text-decoration: none !important;
}
.tnm-rozet-aktif { background: rgba(22,163,74,.12); color: #16a34a; }
.tnm-rozet-pasif { background: rgba(148,163,184,.20); color: #64748b; }
/* ── Personel Kartı İK sekmeleri (İzinler / Belgeler) ─────────────────────────
   Sağlık Turizmi "Personel Düzenle" modalıyla BİREBİR aynı görsel dil (.tpm-*).
   Buraya taşındı çünkü bileşen <style> bloğu yalnız o bileşen render edilirken
   yüklenir; iki sekme de aynı sınıfları kullanıyor.
   ⚠ Kaynak: Components/Pages/Kalite/TurizmPersonel.razor — biri değişirse diğeri de. */
.tpm-kisi { font-size:15px; display:flex; align-items:center; gap:8px; padding:4px 0 12px; }
.tpm-row { display:flex; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.tpm-f { flex:1; min-width:180px; }
.tpm-f label, .tpm-diller > label { display:block; font-size:11.5px; color:#64748b; font-weight:600; margin-bottom:4px; }
.tpm-in { width:100%; padding:7px 10px; border:1px solid #cbd5e1; border-radius:7px; font-size:13px; }
.tpm-in.sm { padding:5px 8px; font-size:12px; }
.tpm-not2 { font-size:11px; color:#94a3b8; margin:-6px 0 6px; }
.tpm-checks { display:flex; flex-direction:column; gap:5px; justify-content:center; }
.tpm-ck { font-size:12.5px; color:#334155; display:flex; align-items:center; gap:6px; cursor:pointer; }
.tpm-diller { margin:6px 0 12px; }
.tpm-dilgrid { display:flex; gap:7px; flex-wrap:wrap; }
.tpm-dil { display:inline-flex; align-items:center; gap:7px; border:1.5px solid #e2e8f0; background:#fff;
    border-radius:8px; padding:5px 11px; font-size:12.5px; font-weight:600; color:#475569; cursor:pointer; }
.tpm-dil.on { border-color:#2a5298; background:#eef4ff; color:#1e3d73; }
.tpm-gt { border:1px solid #eef2f7; border-radius:9px; padding:11px 13px; margin:6px 0 12px; background:#f8fafc; }
.tpm-gt-bas { font-size:12px; font-weight:700; color:#334155; margin-bottom:8px; }
.tpm-gt-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tpm-gt-tarih { display:inline-flex; align-items:center; gap:7px; }
.tpm-gt-tarih .tpm-in.sm { width:auto; min-width:140px; }
.tpm-gt-lbl { font-size:12px; font-weight:600; color:#64748b; white-space:nowrap; }
.tpm-file { display:inline-flex; align-items:center; gap:6px; font-size:12px; background:#fff;
    border:1px solid #e2e8f0; border-radius:7px; padding:4px 9px; }
.tpm-file.sm { font-size:11px; }
.tpm-ekle { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:#2a5298;
    cursor:pointer; border:1px dashed #93b4e6; border-radius:7px; padding:5px 10px; }
.tpm-ekle.sm { font-size:11px; padding:4px 8px; }
.tpm-mini { border:1px solid #e2e8f0; background:#fff; border-radius:6px; padding:2px 8px; font-size:11px;
    font-weight:600; cursor:pointer; color:#475569; }
.tpm-mini.danger { color:#dc2626; }
.tpm-belge { margin-top:8px; }
.tpm-belge-bas { font-size:12.5px; font-weight:700; margin-bottom:7px; }
.tpm-belge-not { font-weight:400; color:#94a3b8; font-size:11px; }
.tpm-btbl { width:100%; border-collapse:collapse; font-size:12px; }
.tpm-btbl th { text-align:left; color:#64748b; font-size:10px; text-transform:uppercase; padding:5px 8px; border-bottom:1px solid #eef2f7; }
.tpm-btbl td { padding:5px 8px; border-bottom:1px solid #f5f7fa; }
.tpm-btbl td.tpm-ad-td { width:100%; max-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tpm-btbl td.tpm-tur-td, .tpm-btbl td.tpm-gec-td, .tpm-btbl td.tpm-durum-td { white-space:nowrap; }
.tpm-btbl th.tpm-aks-th, .tpm-btbl td.tpm-aks { text-align:right; white-space:nowrap; }
.tpm-aks .tpm-mini { margin-left:5px; }
.tpm-kalan { font-size:10px; font-weight:700; margin-right:7px; }
.tpm-kalan.yesil { color:#16a34a; } .tpm-kalan.turuncu { color:#d97706; } .tpm-kalan.kirmizi { color:#dc2626; }
.tpm-dur { font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:5px; }
.tpm-dur.yesil { background:#dcfce7; color:#16a34a; } .tpm-dur.turuncu { background:#fef3c7; color:#d97706; }
.tpm-dur.kirmizi { background:#fee2e2; color:#dc2626; } .tpm-dur.gri { background:#f1f5f9; color:#94a3b8; }
.tpm-belge-ekle { display:flex; align-items:center; gap:7px; margin-top:10px; flex-wrap:wrap;
    padding-top:10px; border-top:1px dashed #e2e8f0; }
.tpm-belge-btn { border:none; background:#16a34a; color:#fff; border-radius:7px; padding:6px 12px;
    font-size:12px; font-weight:600; cursor:pointer; }
.tpm-belge-btn:disabled { background:#cbd5e1; color:#f1f5f9; cursor:not-allowed; }
.tpm-not { font-size:12px; color:#94a3b8; font-style:italic; padding:8px 0; }
.tpm-foot { display:flex; align-items:center; gap:9px; padding:12px 0 2px; border-top:1px solid #e2e8f0; margin-top:6px; }
.tpm-btn { padding:8px 15px; border:1px solid #e2e8f0; background:#fff; border-radius:7px;
    font-size:12.5px; font-weight:600; cursor:pointer; }
.tpm-btn.pri { background:#2a5298; color:#fff; border-color:#2a5298; }
.tpm-btn.danger { color:#dc2626; border-color:#f0c0c0; }
.tpm-spin { width:16px; height:16px; border:2px solid #dbeafe; border-top-color:#2a5298; border-radius:50%;
    animation:tpm-spin .8s linear infinite; display:inline-block; }
@keyframes tpm-spin { to { transform:rotate(360deg); } }

/* Randevu doktor başlığında "İZİNLİ" rozeti (İK entegrasyonu). */
.rnd-izinli {
    align-self: flex-start; margin-top: 2px;
    background: rgba(255,255,255,.9); color: #dc2626;
    font-size: 9px; font-weight: 900; letter-spacing: .06em;
    border-radius: 4px; padding: 0 5px; line-height: 14px;
}

/* ── İzin durumu rozetleri (İK modülü) ───────────────────────────────────────── */
.izn-rozet {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    font-size: .68rem; font-weight: 800; white-space: nowrap; text-decoration: none !important;
}
.izn-rozet-bekliyor { background: rgba(245,158,11,.15); color: #d97706; }
.izn-rozet-onayli   { background: rgba(22,163,74,.14);  color: #16a34a; }
.izn-rozet-ret      { background: rgba(220,38,38,.12);  color: #dc2626; }
.izn-rozet-iptal    { background: rgba(148,163,184,.20); color: #64748b; }
.izn-rozet-taslak   { background: rgba(100,116,139,.14); color: #475569; }

/* ── Aktiflik filtresi segmenti (Tümü / Aktif / Pasif) ─────────────────────────
   Bileşen: Components/Component/AktiflikFiltre.razor — varsayılan "Aktif". */
.akf-seg {
    display: inline-flex; align-items: center; gap: 2px; padding: 2px;
    background: var(--t-bg-secondary); border: 1px solid var(--t-border); border-radius: 8px;
}
.akf-btn {
    padding: 4px 10px; font-size: .72rem; font-weight: 700; white-space: nowrap;
    background: transparent; border: none; border-radius: 6px;
    color: var(--t-text-muted); cursor: pointer;
}
.akf-btn:hover { background: var(--t-bg-hover); color: var(--t-text-primary); }
.akf-btn--secili, .akf-btn--secili:hover { background: var(--t-accent-light); color: var(--t-accent); }

.tnm-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    background: var(--t-bg-secondary); border: 1px solid var(--t-border);
    color: var(--t-text-secondary); cursor: pointer; border-radius: 5px;
}
.tnm-icon-btn:hover { background: rgba(59,130,246,0.18); color: #2563eb; border-color: rgba(59,130,246,0.4); }

/* ── Tanım Kart Modal (Personel/Hizmet/Stok ortak) ── */
.tnm-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.55); backdrop-filter: blur(2px);
    z-index: 9000;
}
.tnm-modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 92vw; max-width: 1200px; height: 90vh;
    background: var(--t-bg-page);
    border: 1px solid var(--t-border);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    z-index: 9001;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.tnm-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    background: var(--t-bg-card);
    border-bottom: 1px solid var(--t-border);
}
.tnm-modal-title { font-size: 1rem; font-weight: 700; color: var(--t-text-primary); }
/* Özel modal başlıkları sürüklenerek taşınabilir (global HBYSWEB_modalDrag) — imleç ipucu.
   Konvansiyon: "*-dialog"/"*-modal" konteyner + doğrudan "*-header" çocuk. PopupComponent hariç. */
[class*="-dialog"] > [class*="-header"],
[class*="-modal"]:not(.hbys-modal) > [class*="-header"] { cursor: move; user-select: none; touch-action: none; }
[class*="-dialog"] > [class*="-header"] button,
[class*="-modal"]:not(.hbys-modal) > [class*="-header"] button { cursor: pointer; }
.tnm-modal-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--t-bg-secondary); border: 1px solid var(--t-border);
    color: var(--t-text-secondary); border-radius: 6px; cursor: pointer;
    font-size: 1.2rem; line-height: 1;
}
.tnm-modal-close:hover { background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.4); }

/* Modal sekmeleri (Şube/Personel/Hizmet/Stok) — ana sayfa .t-tab görünümü:
   sekme şeritli zemin, kapsül sekmeler, seçili sekme açık zemin + alt vurgu çizgisi.
   --t-tab-* değişkenleriyle tema/kulüp temaları otomatik uyumlu. */
.tnm-tabs {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    padding: 5px 0.75rem 0;
    overflow-x: auto;
    scrollbar-width: none;
    background: linear-gradient(
        to bottom,
        var(--t-tab-bar-bg) 0%,
        color-mix(in srgb, var(--t-tab-bar-bg) 85%, var(--t-tab-bar-border)) 100%
    );
    border-bottom: 1px solid var(--t-tab-bar-border);
}
.tnm-tabs::-webkit-scrollbar { display: none; }
.tnm-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.85rem;
    height: 32px;
    border-radius: 0.55rem 0.55rem 0 0;
    background-color: transparent;
    color: var(--t-text-secondary, var(--t-tab-inactive-text));
    font-size: 0.84rem; font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
    transition:
        background-color var(--t-transition),
        color var(--t-transition),
        border-color var(--t-transition),
        box-shadow var(--t-transition);
}
.tnm-tab:hover {
    background-color: color-mix(in srgb, var(--t-tab-bar-bg) 60%, var(--t-tab-active-bg));
    color: var(--t-tab-active-text);
    border-color: var(--t-tab-bar-border);
}
.tnm-tab--active {
    background-color: var(--t-tab-active-bg);
    color: var(--t-tab-active-text);
    font-weight: 650;
    border-color: var(--t-tab-bar-border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    z-index: 2;
}
.tnm-tab--active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3.5px;
    background: var(--t-tab-active-shadow);
    z-index: 3;
}

.tnm-modal-body {
    flex: 1; overflow-y: auto;
    padding: 16px 20px;
    background: var(--t-bg-page);
}
.tnm-modal-footer {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    background: var(--t-bg-card);
    border-top: 1px solid var(--t-border);
}

/* ── Tanım Kart, PopupComponent gövdesinde (Personel/Hizmet/Stok) ──
   PopupComponent sabit yükseklikte açılır (Height="90vh"); tab çubuğu üstte
   sabit kalır, yalnızca form/grid alanı kayar. Böylece içindeki grid modalı
   ne genişletir ne de boyunu değiştirir. */
.hbys-modal-body:has(> .tnm-kart-shell) { padding: 0; overflow: hidden; }
.tnm-kart-shell { display: flex; flex-direction: column; height: 100%; }
.tnm-kart-shell > .tnm-tabs { flex-shrink: 0; }
.tnm-kart-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; }
/* Personel başlığındaki hamburger menünün ellipsis kırpmasına takılmaması için */
.hbys-modal-title:has(.pk-burger-wrap) { overflow: visible; }

/* Form rows */
.tnm-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.tnm-row label {
    width: 160px; flex-shrink: 0;
    font-size: 0.74rem; font-weight: 600;
    color: var(--t-text-secondary);
    text-align: right;
}
.tnm-row input,
.tnm-row select,
.tnm-row textarea {
    flex: 1; min-width: 0;
    padding: 6px 10px;
    font-size: 0.8rem;
    background: var(--t-input-bg);
    color: var(--t-input-text);
    border: 1px solid var(--t-input-border);
    border-radius: 6px;
    outline: none;
}
.tnm-row input:focus,
.tnm-row select:focus,
.tnm-row textarea:focus {
    border-color: var(--t-input-focus);
    box-shadow: 0 0 0 3px var(--t-accent-light);
}
.tnm-row textarea { min-height: 60px; resize: vertical; }

/* Tab bar */
/* ── Tab Bar ── */
.t-tabbar {
    display: flex;
    align-items: flex-end;
    /* Sol boşluk 3px: ilk sekme (ör. "Randevu") sol kenardan 3px içeride başlar.
       Alt şeritler (.tet-tabs, .hk-tabs) de 3px → üç sekme sırası aynı dikeyde. */
    padding: 0 0.75rem 0 3px;
    gap: 1px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    min-height: var(--t-tabbar-h);
    background: linear-gradient(
        to bottom,
        var(--t-tab-bar-bg) 0%,
        color-mix(in srgb, var(--t-tab-bar-bg) 85%, var(--t-tab-bar-border)) 100%
    );
    border-bottom: 1px solid var(--t-tab-bar-border);
    transition: background var(--t-transition);
}
.t-tabbar::-webkit-scrollbar { display: none; }

/* ── Tek sekme ── */
.t-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.7rem 0 0.85rem;
    height: calc(var(--t-tabbar-h) - 5px);
    border-radius: 0.55rem 0.55rem 0 0;
    font-size: 0.86rem;   /* okunabilirlik: daha büyük */
    font-weight: 600;     /* okunabilirlik: daha kalın/canlı */
    cursor: pointer;
    white-space: nowrap;
    max-width: 210px;
    min-width: 80px;
    flex-shrink: 0;
    user-select: none;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
    transition:
        background-color var(--t-transition),
        color var(--t-transition),
        border-color var(--t-transition),
        box-shadow var(--t-transition);
}

/* ── Aktif sekme ── */
.t-tab--active {
    background-color: var(--t-tab-active-bg);
    color: var(--t-tab-active-text);
    font-weight: 650;
    border-color: var(--t-tab-bar-border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    z-index: 2;
}
/* Alt seçim çizgisi (iç sekmelerle aynı kalınlık) */
.t-tab--active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: var(--t-tab-active-shadow);
    z-index: 3;
}

/* ── Pasif sekme ── */
.t-tab--inactive {
    background-color: transparent;
    /* okunabilirlik: pasif sekme metni bir tık koyu (mat değil). */
    color: var(--t-text-secondary, var(--t-tab-inactive-text));
}
.t-tab--inactive:hover {
    background-color: color-mix(in srgb, var(--t-tab-bar-bg) 60%, var(--t-tab-active-bg));
    color: var(--t-tab-active-text);
    border-color: var(--t-tab-bar-border);
}

/* ── Sekme başlık metni ── */
.t-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
    letter-spacing: -0.01em;
}

/* ── Kapat butonu ── */
.t-tab-close {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--t-text-muted);
    opacity: 0;
    margin-left: 0.05rem;
    transition:
        background-color var(--t-transition),
        color var(--t-transition),
        opacity var(--t-transition),
        transform 0.1s ease;
}
.t-tab:hover .t-tab-close,
.t-tab--active .t-tab-close {
    opacity: 1;
}
.t-tab-close:hover {
    background-color: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    transform: scale(1.15);
}
.t-tab-close:active {
    transform: scale(0.9);
}

/* ══════════════════════════════════════════════════════════════
   SEGMENTED CONTROL — Form / kart içi sekme geçişi
   Tüm tema modlarıyla uyumlu (light / dark / colorful)
   ══════════════════════════════════════════════════════════════ */
.t-seg {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--t-bg-secondary);
    border: 1px solid var(--t-border);
    flex-wrap: wrap;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.t-seg-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 7px;
    font-size: 0.74rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--t-text-muted);
    user-select: none;
    overflow: hidden;
    transition:
        background-color 150ms ease,
        color 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease;
}

/* Üst aksent çizgisi — aktifken açılır */
.t-seg-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 2px;
    background: var(--t-accent);
    border-radius: 0 0 3px 3px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 180ms ease;
}

.t-seg-btn:hover:not(.t-seg-btn--active) {
    background: color-mix(in srgb, var(--t-bg-secondary) 30%, var(--t-bg-card));
    color: var(--t-text-secondary);
}

.t-seg-btn--active {
    background: var(--t-bg-card);
    color: var(--t-accent);
    font-weight: 600;
    border-color: var(--t-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 1px 1px rgba(0,0,0,0.06);
}

.t-seg-btn--active::before {
    transform: scaleX(1);
}

.t-seg-btn svg {
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 150ms ease, color 150ms ease;
}
.t-seg-btn--active svg {
    opacity: 1;
    color: var(--t-accent);
}
.t-seg-btn:hover:not(.t-seg-btn--active) svg {
    opacity: 0.7;
}

/* ── Boş sekme içeriği ── */
.t-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 2.5rem 1rem;
    border-radius: 0.75rem;
    text-align: center;
    background: var(--t-bg-secondary);
    border: 1px dashed var(--t-border);
}
.t-empty-state__icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--t-accent-light) 80%, transparent);
    color: var(--t-accent);
    opacity: 0.7;
}
.t-empty-state__title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--t-text-secondary);
}
.t-empty-state__sub {
    font-size: 0.72rem;
    color: var(--t-text-muted);
}


/* İçerik alanı */
.t-content {
    background-color: var(--t-bg-card);
    transition: background-color var(--t-transition);
}

/* Kart */
.t-card {
    background-color: var(--t-bg-card);
    border: 1px solid var(--t-border);
    border-radius: 0.5rem;
    box-shadow: var(--t-shadow-sm);
    transition: background-color var(--t-transition), border-color var(--t-transition);
}

/* ============================================================
   GLOBAL INPUT SİSTEMİ — Tüm form elemanları
   Tüm renkler var(--t-*) ile tema bağımlı
   ============================================================ */

/* ── Temel ortak özellikler ── */
.t-input,
.t-input-ro,
input.t-input,
select.t-input,
textarea.t-input {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 0.78rem;
    line-height: 1.5;
    padding: 0.375rem 0.625rem;
    border-radius: 0.4rem;
    border: 1.5px solid var(--t-input-border);
    background-color: var(--t-input-bg);
    color: var(--t-input-text);
    transition:
        border-color var(--t-transition),
        background-color var(--t-transition),
        box-shadow var(--t-transition);
    -webkit-appearance: none;
    appearance: none;
}

/* ── Focus ── */
.t-input:focus,
input.t-input:focus,
select.t-input:focus,
textarea.t-input:focus {
    outline: none;
    border-color: var(--t-input-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-input-focus) 18%, transparent);
}

/* ── Hover (focus olmadığında) ── */
.t-input:not(:focus):hover {
    border-color: var(--t-border-strong);
}

/* ── Placeholder ── */
.t-input::placeholder {
    color: var(--t-text-muted);
    opacity: 0.7;
}

/* ── Select — ok ikon ── */
select.t-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    background-size: 12px;
    padding-right: 2rem;
    cursor: pointer;
}

/* ── Select — koyu tema ok ikonu ── */
[data-theme="dark"] select.t-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ── Select — renkli tema ok ikonu ── */
[data-theme="colorful"] select.t-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ── Select — renkli mod ok ikonu (yeşil) ── */
[data-theme="rainbow"] select.t-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ── Select — açık menü (dropdown listesi) ── */
select.t-input option {
    background-color: var(--t-bg-card);
    color: var(--t-input-text);
    font-size: 0.78rem;
    padding: 0.35rem 0.6rem;
}
select.t-input option:hover,
select.t-input option:checked {
    background-color: var(--t-accent-light);
    color: var(--t-text-primary);
}
select.t-input option:disabled {
    color: var(--t-text-muted);
    background-color: var(--t-bg-secondary);
}

/* ── Koyu tema — option renkleri ── */
[data-theme="dark"] select.t-input option {
    background-color: #1e293b;
    color: #e2e8f0;
}
[data-theme="dark"] select.t-input option:checked {
    background-color: #0c4a6e;
    color: #bae6fd;
}
[data-theme="dark"] select.t-input option:disabled {
    color: #475569;
    background-color: #0f172a;
}

/* ── Renkli tema — option renkleri ── */
[data-theme="colorful"] select.t-input option {
    background-color: #fdf4ff;
    color: #3b0764;
}
[data-theme="colorful"] select.t-input option:checked {
    background-color: #ede9fe;
    color: #5b21b6;
}
[data-theme="colorful"] select.t-input option:disabled {
    color: #a78bfa;
    background-color: #fce7f3;
}

/* ── Renkli mod — option renkleri ── */
[data-theme="rainbow"] select.t-input option {
    background-color: #fdf4ff;
    color: #1e1b4b;
}
[data-theme="rainbow"] select.t-input option:checked {
    background-color: #d1fae5;
    color: #065f46;
}
[data-theme="rainbow"] select.t-input option:disabled {
    color: #9a3412;
    background-color: #dcfce7;
}

/* ── Select — çoklu seçim (multiple) ── */
select[multiple].t-input {
    padding-right: 0.625rem;
    background-image: none;
    min-height: 6rem;
}
select[multiple].t-input option {
    border-radius: 0.25rem;
    margin-bottom: 1px;
    padding: 0.3rem 0.5rem;
}
select[multiple].t-input option:checked {
    background-color: var(--t-accent-light);
    color: var(--t-accent);
    font-weight: 600;
}

/* ── Textarea ── */
textarea.t-input {
    resize: vertical;
    min-height: 2.5rem;
}

/* ── Disabled / Readonly ── */
.t-input:disabled,
.t-input[readonly],
.t-input-ro {
    background-color: var(--t-bg-secondary);
    border-color: var(--t-border);
    color: var(--t-text-secondary);
    cursor: not-allowed;
    opacity: 0.8;
    -webkit-text-fill-color: var(--t-text-secondary);
}
.t-input:disabled:hover,
.t-input[readonly]:hover,
.t-input-ro:hover {
    border-color: var(--t-border);
}

/* ── Checkbox & Radio ── */
input[type="checkbox"].t-input,
input[type="radio"].t-input {
    width: 1rem;
    height: 1rem;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--t-accent);
    border-radius: 0.25rem;
}
input[type="radio"].t-input {
    border-radius: 50%;
}

/* ── Number — ok (up/down) kaldır (tüm number input'ları için) ── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ── Date / Datetime-local ── */
input[type="date"].t-input,
input[type="datetime-local"].t-input,
input[type="time"].t-input {
    cursor: pointer;
}

/* ── Genel hata durumu ── */
.t-input.is-invalid,
.t-input:invalid:not(:placeholder-shown) {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* ── Input grubu (ikon + input) ── */
.t-input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.t-input-group .t-input {
    border-radius: 0.4rem;
}
.t-input-group .t-input:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}
.t-input-group .t-input:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.t-input-group-prefix,
.t-input-group-suffix {
    display: flex;
    align-items: center;
    padding: 0 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: var(--t-bg-secondary);
    border: 1.5px solid var(--t-input-border);
    color: var(--t-text-muted);
    white-space: nowrap;
}
.t-input-group-prefix {
    border-right: none;
    border-radius: 0.4rem 0 0 0.4rem;
}
.t-input-group-suffix {
    border-left: none;
    border-radius: 0 0.4rem 0.4rem 0;
}

/* ── Boyut varyantları ── */
.t-input-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.72rem;
    border-radius: 0.35rem;
}
.t-input-lg {
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
}

/* ── Readonly salt-okunur sınıf ── */
.t-input-ro {
    background-color: var(--t-bg-secondary);
    border: 1.5px solid var(--t-border);
    color: var(--t-text-secondary);
    border-radius: 0.4rem;
    cursor: not-allowed;
    opacity: 0.85;
    -webkit-text-fill-color: var(--t-text-secondary);
}

/* Tema geçiş animasyonu */
.theme-transition,
.theme-transition * {
    transition:
        background-color var(--t-transition),
        color var(--t-transition),
        border-color var(--t-transition),
        box-shadow var(--t-transition) !important;
}

/* Özel scrollbar */
::-webkit-scrollbar               { width: 6px; height: 6px; }
::-webkit-scrollbar-track          { background: var(--t-scroll-track); }
::-webkit-scrollbar-thumb          { background: var(--t-scroll-thumb); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover    { background: var(--t-scroll-hover); }

/* ============================================================
   RENKLİ TEMA — Özel bölüm renkleri (pastel)
   ============================================================ */
[data-theme="colorful"] .t-bg-page {
    background: linear-gradient(135deg, #fff0f6 0%, #fce7f3 50%, #ffe4f0 100%);
}

[data-theme="colorful"] .t-content {
    background: linear-gradient(160deg, #ffffff 0%, #fff0f6 100%);
}

/* ============================================================
   BLAZOR FORM DOĞRULAMA
   ============================================================ */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid                              { outline: 1px solid #e50000; }
.validation-message                   { color: #e50000; }

/* ============================================================
   BLAZOR HATA SINIRI
   ============================================================ */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "Bir hata oluştu." }

/* ============================================================
   SETTINGS SIDEBAR
   ============================================================ */

/* Backdrop */
.settings-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 200;
    animation: settings-fade-in 0.22s ease;
}

/* Panel — sağdan kayar */
/* 🪤 SABİT PANEL — TAŞINAMAZ.
   Panel sağ kenara yapışık kalmalı; kullanıcı sürükleyip ekranın ortasında bırakabiliyordu.
   Projede genel bir sürükleme kancası var (app.js: [data-drag-handle] + [data-drag-root])
   ve sürüklerken inline "right:auto; left:...; top:..." yazıyor. Bu panelde o öznitelikler
   olmamasına rağmen taşınabildiği görüldüğü için konum !important ile çivilendi:
   stylesheet'teki !important, inline stilleri de ezer — hangi kod yazarsa yazsın panel yerinde kalır.
   NOT: transform'a DOKUNULMADI; !important verilseydi slide-in animasyonu ölürdü. */
.settings-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    margin: 0 !important;
    width: 420px;
    z-index: 201;
    display: flex;
    flex-direction: column;
    background-color: var(--t-bg-page);
    border-left: 1px solid var(--t-border);
    box-shadow: -16px 0 64px rgba(0,0,0,0.22);
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
    overflow: hidden;
    animation: settings-slide-in 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Panel başlık */
.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    height: 60px;
    min-height: 60px;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.025em;
    background: linear-gradient(135deg, var(--t-header-from) 0%, var(--t-header-to) 100%);
    color: var(--t-header-text);
}

.settings-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    color: inherit;
    cursor: pointer;
    transition: background var(--t-transition), transform 0.22s ease;
}
.settings-close-btn:hover {
    background: rgba(255,255,255,0.26);
    transform: rotate(90deg);
}

/* Panel gövde */
.settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Bölüm */
.settings-section { display: flex; flex-direction: column; gap: 0.875rem; }

.settings-section-label {
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--t-text-muted);
    padding: 0 0.125rem;
}

/* ── TEMA KARTLARI ── */
.theme-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

.theme-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.25rem 0.75rem;
    border-radius: 0.875rem;
    border: 2px solid var(--t-border);
    background: var(--t-bg-card);
    cursor: pointer;
    transition: border-color var(--t-transition), box-shadow var(--t-transition), transform 0.15s ease;
    box-shadow: var(--t-shadow-sm);
}
.theme-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--t-shadow-md);
    border-color: var(--t-border-strong);
}
.theme-card--active {
    border-color: var(--t-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 20%, transparent), var(--t-shadow-sm);
}

.theme-card-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--t-text-secondary);
    letter-spacing: 0.01em;
}
.theme-card--active .theme-card-label { color: var(--t-accent); }

.theme-card-check {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--t-accent);
    color: var(--t-text-on-accent);
    font-size: 0.55rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tema önizleme minyatürleri */
.theme-preview {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.07);
}

.tp-header { height: 28%; }
.tp-body   { flex: 1; padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; }
.tp-line   { border-radius: 999px; }
.tp-line--long  { height: 4px; width: 80%; }
.tp-line--short { height: 4px; width: 50%; }
.tp-line--med   { height: 4px; width: 65%; }

/* Açık */
.theme-preview--light                    { background: #f8fafc; }
.theme-preview--light .tp-header         { background: linear-gradient(90deg,#1e3c72,#2a5298); }
.theme-preview--light .tp-line           { background: #cbd5e1; }
.theme-preview--light .tp-line--long     { background: #94a3b8; }

/* Koyu */
.theme-preview--dark                     { background: #1e293b; }
.theme-preview--dark .tp-header          { background: linear-gradient(90deg,#020617,#0f172a); }
.theme-preview--dark .tp-line            { background: #334155; }
.theme-preview--dark .tp-line--long      { background: #475569; }

/* Renkli */
.theme-preview--colorful                 { background: #fff0f6; }
.theme-preview--colorful .tp-header      { background: linear-gradient(90deg,#be185d,#ec4899); }
.theme-preview--colorful .tp-line        { background: #fbcfe8; }
.theme-preview--colorful .tp-line--long  { background: #f9a8d4; }

/* Renkli Mod preview (henüz bağlanmadı) */
.theme-preview--rainbow                  { background: #f0f4ff; }
.theme-preview--rainbow .tp-header       { background: linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899); }
.theme-preview--rainbow .tp-line         { background: #c7d2fe; }
.theme-preview--rainbow .tp-line--long   { background: #a5b4fc; }

/* Milli Takım (kırmızı/beyaz) */
.theme-preview--milli                    { background: #f8fafc; }
.theme-preview--milli .tp-header         { background: linear-gradient(90deg,#c20710,#e30a17); }
.theme-preview--milli .tp-line           { background: #e7b4b6; }
.theme-preview--milli .tp-line--long     { background: #e30a17; }

/* Fenerbahçe (sarı/lacivert) */
.theme-preview--fb                       { background: #f8fafc; }
.theme-preview--fb .tp-header            { background: linear-gradient(90deg,#0e2a52,#1b458f); }
.theme-preview--fb .tp-line              { background: #ffed00; }
.theme-preview--fb .tp-line--long        { background: #1b458f; }

/* Galatasaray (sarı/kırmızı) */
.theme-preview--gs                       { background: #f8fafc; }
.theme-preview--gs .tp-header            { background: linear-gradient(90deg,#8a0a2e,#c20a3a); }
.theme-preview--gs .tp-line              { background: #ffcc00; }
.theme-preview--gs .tp-line--long        { background: #c20a3a; }

/* Trabzonspor (bordo/mavi) */
.theme-preview--ts                       { background: #f8fafc; }
.theme-preview--ts .tp-header            { background: linear-gradient(90deg,#6a1b32,#1c4e9d); }
.theme-preview--ts .tp-line              { background: #d8b6c1; }
.theme-preview--ts .tp-line--long        { background: #6a1b32; }

/* ── BOYUT SEÇİCİ (Radio-style) ── */
.scale-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scale-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.875rem;
    border-radius: 0.75rem;
    border: 1.5px solid var(--t-border);
    background: var(--t-bg-card);
    cursor: pointer;
    transition: border-color var(--t-transition), background var(--t-transition), box-shadow 0.15s ease, transform 0.12s ease;
    text-align: left;
    box-shadow: var(--t-shadow-sm);
}
.scale-option:hover {
    border-color: var(--t-border-strong);
    transform: translateX(3px);
    box-shadow: var(--t-shadow-md);
}
.scale-option--active {
    border-color: var(--t-accent);
    background: color-mix(in srgb, var(--t-accent) 7%, var(--t-bg-card));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--t-accent) 18%, transparent);
}

.scale-option-radio {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    border: 2px solid var(--t-border-strong);
    transition: border-color var(--t-transition);
    flex-shrink: 0;
    position: relative;
}
.scale-option-radio::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--t-accent);
    opacity: 0;
    transition: opacity var(--t-transition);
}
.scale-option--active .scale-option-radio { border-color: var(--t-accent); }
.scale-option--active .scale-option-radio::after { opacity: 1; }

.scale-option-preview {
    font-weight: 800;
    color: var(--t-text-muted);
    flex-shrink: 0;
    line-height: 1;
    width: 2rem;
    text-align: center;
}
.scale-option--compact .scale-option-preview { font-size: 0.78rem;  }
.scale-option--normal  .scale-option-preview { font-size: 0.95rem;  }
.scale-option--large   .scale-option-preview { font-size: 1.1rem;   }
.scale-option--xlarge  .scale-option-preview { font-size: 1.28rem;  }
.scale-option--active  .scale-option-preview { color: var(--t-accent); }

.scale-option-label {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--t-text-primary);
}
.scale-option--active .scale-option-label { color: var(--t-accent); font-weight: 700; }

.scale-option-size {
    font-size: 0.65rem;
    color: var(--t-text-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ── ANİMASYONLAR ── */
@keyframes settings-slide-in {
    from { transform: translateX(100%); opacity: 0.6; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes settings-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── MENÜ ÖĞESİ (MenuItem.razor) ─── */
.t-menu-item {
    color: var(--t-text-primary);
    transition: background-color var(--t-transition), color var(--t-transition);
}
.t-menu-item:hover {
    background: var(--t-bg-hover);
}
.t-menu-item--danger {
    color: #ef4444;
}
.t-menu-item--danger:hover {
    background: rgba(239,68,68,0.09);
}

/* ─── HASTA ARAMA TABLOSU ─── */
.hasta-search-row {
    border-bottom: 1px solid var(--t-border);
    cursor: pointer;
    transition: background-color var(--t-transition);
}
.hasta-search-row:nth-child(odd)  { background: var(--t-bg-card); }
.hasta-search-row:nth-child(even) { background: var(--t-bg-secondary); }
.hasta-search-row:hover           { background: var(--t-accent-light) !important; }

/* ─── DATE INPUT — TAKVİM İKONU TEMA ─── */
/* color-scheme artık her theme root'unda tanımlı, buradan inherit edilir */

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    border-radius: 3px;
    padding: 2px;
    opacity: 0.5;
    transition: opacity 0.15s, filter 0.22s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Koyu tema: native icon siyah → beyaza dönüşür */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) !important;
    opacity: 0.6;
}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Renkli tema: pembemsi icon */
html[data-theme="colorful"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(35%) sepia(80%) saturate(800%) hue-rotate(300deg) !important;
    opacity: 0.7;
}
html[data-theme="colorful"] input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Renkli mod: yeşil icon */
html[data-theme="rainbow"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(35%) sepia(90%) saturate(500%) hue-rotate(90deg) !important;
    opacity: 0.7;
}
html[data-theme="rainbow"] input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ============================================================
   GLOBAL TABLO (GRID) STİLİ
   - thead her temada belirgin koyu zemin + uygun metin rengi
   - tbody satırları zebra (tek=card, çift=secondary) — temaya göre
   - hover satırı vurgulanır
   Sayfa içi spesifik kurallar (örn. .efg-table thead, .dt-row-aktarilmis)
   daha yüksek specificity ile bu kuralları override eder.
   ============================================================ */
table thead th,
table thead td {
    background: var(--t-grid-head-bg, var(--t-bg-secondary));
    color: var(--t-grid-head-text, var(--t-text-primary));
    font-weight: 700;
}
/* 🪤 Grid GÖVDESİNİN rengi buradan gelir; kapsayıcıya renk vermek yetmez (hücreler
   üstünü örter). Kulüp temaları --t-grid-row-bg/alt tanımlar; tanımsızsa eski davranış. */
table tbody tr > td {
    background: var(--t-grid-row-bg, var(--t-bg-card));
}
table tbody tr:nth-child(even) > td {
    background: var(--t-grid-row-alt, var(--t-bg-secondary));
}
table tbody tr:hover > td {
    background: var(--t-bg-hover);
}

/* ─── Lab İş Durumu rozeti (LabDurumBadge) — eşit genişlik, ikon + fon/yazı rengi ─── */
.ldb-badge {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-width: 92px; padding: 2px 8px; border-radius: 10px;
    font-size: 0.7rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.ldb-ico { font-size: 0.72rem; line-height: 1; }

/* ───────── PARASAL ALAN DÖVİZ STANDARDI (proje geneli) ─────────
   Parasal değerin sağında döviz KISA KODU (tbDoviz.sKod: TL/USD…).
   Kullanım: @val.ToString("N2") <span class="cur-kod">@dovizKod</span>
   Değerle aynı font (boyut/kalınlık inherit), yeşil renk. */
.cur-kod { color: #16a34a; margin-left: 3px; font-weight: inherit; font-size: inherit; }

/* ============================================================
   ONAM ŞABLON LİSTESİ  (osl-*)
   ============================================================ */
.osl-wrap {
    padding: 14px 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.osl-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--t-bg-card);
    border: 1px solid var(--t-border);
    border-radius: 10px;
    box-shadow: var(--t-shadow-sm);
}
.osl-search {
    flex: 1; min-width: 180px;
    display: flex; align-items: center; gap: 6px;
    padding: 7px 10px;
    background: var(--t-input-bg);
    border: 1px solid var(--t-input-border);
    border-radius: 8px;
    color: var(--t-text-muted);
}
.osl-search-input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 0.8rem; color: var(--t-text-primary);
}
.osl-check-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.78rem; color: var(--t-text-secondary);
    cursor: pointer; white-space: nowrap;
}
.osl-input { font-size: 0.8rem; }
.osl-table-wrap {
    flex: 1; min-height: 0; overflow: auto;
    border: 1px solid var(--t-border);
    border-radius: 10px;
    background: var(--t-bg-card);
}
.osl-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.8rem;
}
.osl-table thead {
    position: sticky; top: 0; z-index: 1;
    background: var(--t-bg-secondary);
}
.osl-table th {
    padding: 9px 12px;
    font-size: 0.67rem; font-weight: 700;
    color: var(--t-text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--t-border-strong);
    text-align: left;
}
.osl-table td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--t-border);
    color: var(--t-text-secondary);
}
.osl-table tbody tr:hover { background: var(--t-bg-hover); }
.osl-row-pasif td { opacity: 0.5; }
.osl-edit-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: var(--t-bg-secondary);
    border: 1px solid var(--t-border);
    border-radius: 6px;
    color: var(--t-text-secondary);
    cursor: pointer;
}
.osl-edit-btn:hover {
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.35);
    color: #2563eb;
}
.osl-badge-aktif {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.68rem; font-weight: 700;
    background: rgba(16,185,129,0.12);
    color: var(--t-success);
    border: 1px solid rgba(16,185,129,0.3);
}
.osl-badge-pasif {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.68rem; font-weight: 700;
    background: var(--t-bg-secondary);
    color: var(--t-text-muted);
    border: 1px solid var(--t-border);
}
.osl-loading, .osl-empty {
    padding: 40px;
    text-align: center;
    color: var(--t-text-muted);
    font-style: italic;
    font-size: 0.85rem;
}

/* ============================================================
   ONAM ŞABLON DÜZENLE MODAL  (osd-*)
   ============================================================ */
/* Ödeme planı — sözleşme grubu başlığı. Ana ve ek sözleşmenin senetleri vadeye
   göre iç içe sıralandığında hangi senedin hangi belgeye ait olduğu okunmuyordu. */
.opl-table tr.opl-grup-satir td {
    background: var(--t-bg-secondary, #f1f5f9);
    border-top: 2px solid var(--t-border, #cbd5e1);
    padding: 6px 10px; font-size: 12px;
}

/* Klasik (kâğıt) fatura rozeti — e-belge denetimlerinin yerinde durur ki
   kullanıcı "gönder düğmesi nerede" diye aramasın. */
.efg-klasik-rozet {
    font-size: 11.5px; padding: 3px 10px; border-radius: 999px;
    background: rgba(100,116,139,.14); color: #475569;
    border: 1px solid rgba(100,116,139,.3);
}

/* Not bandı — tamamlanmış kayıt: yeşil şerit + onay imi.
   Renk tek başına yeterli değil (renk körlüğü, dar ekran); im de konuyor. */
.rnd-notband-blok .nottamam { color: #16a34a; flex-shrink: 0; margin-right: 2px; }

.osd-overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(2px);
    z-index: 9000;
}
.osd-dialog {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 90vh;
    background: var(--t-bg-page);
    border: 1px solid var(--t-border);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    z-index: 9001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* SEKME MODU: pencere yok, sekmenin tamamı kullanılır.
   ⛔ position:absolute KULLANILMAZ. Mutlak konum en yakın KONUMLU atasına göre
      hizalanır; o ata sekme şeridini de kapsadığı için içerik şeridin altına
      giriyor, sekme başlığı form satırının üstüne biniyor ve alt düğmeler
      ekranın dışına taşıyordu. Normal akışta yükseklik yeter. */
.osd-sekme {
    height: 100%; min-height: 0;
    background: var(--t-bg-page);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.osd-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    background: var(--t-bg-card);
    border-bottom: 1px solid var(--t-border);
    flex-shrink: 0;
}
.osd-header h3 {
    margin: 0;
    font-size: 1rem; font-weight: 700;
    color: var(--t-text-primary);
}
.osd-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--t-bg-secondary);
    border: 1px solid var(--t-border);
    border-radius: 6px;
    color: var(--t-text-secondary);
    cursor: pointer;
    font-size: 1.1rem; line-height: 1;
}
.osd-close:hover { background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.35); }

/* Üst bar — başlık + checkbox'lar tek satır */
.osd-top-bar {
    padding: 10px 16px;
    background: var(--t-bg-card);
    border-bottom: 1px solid var(--t-border);
    flex-shrink: 0;
}
.osd-top-row {
    display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
}
.osd-field {
    display: flex; flex-direction: column; gap: 4px;
    flex: 1; min-width: 220px;
}
.osd-field-checks { flex: 0 0 auto; }
.osd-field label {
    font-size: 0.72rem; font-weight: 600;
    color: var(--t-text-secondary);
}
.osd-required { color: var(--t-danger); margin-left: 2px; }
.osd-input {
    padding: 7px 10px;
    font-size: 0.84rem;
    background: var(--t-input-bg);
    color: var(--t-input-text);
    border: 1px solid var(--t-input-border);
    border-radius: 8px; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.osd-input:focus {
    border-color: var(--t-input-focus);
    box-shadow: 0 0 0 3px var(--t-accent-light);
}
.osd-checks {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    padding: 7px 12px;
    background: var(--t-bg-secondary);
    border: 1px solid var(--t-border);
    border-radius: 8px;
}
.osd-check-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.79rem; color: var(--t-text-primary); cursor: pointer;
    white-space: nowrap;
}
.osd-check-aktif { margin-left: auto; }
.osd-check-label input[type="checkbox"] {
    width: 14px; height: 14px; accent-color: var(--t-accent); cursor: pointer;
}

/* Ana içerik: sol token panel + sağ editör */
.osd-content {
    flex: 1; min-height: 0;
    display: flex; overflow: hidden;
}

/* ── Sol token paneli ── */
.osd-token-panel {
    width: 210px; flex-shrink: 0;
    border-right: 1px solid var(--t-border);
    background: var(--t-bg-secondary);
    overflow-y: auto;
    display: flex; flex-direction: column;
}
.osd-token-panel-title {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 12px 4px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
    color: var(--t-text-muted); text-transform: uppercase;
    flex-shrink: 0;
}
.osd-token-hint {
    padding: 0 12px 8px;
    font-size: 0.67rem; color: var(--t-text-muted); font-style: italic;
}
.osd-token-grup { padding: 0 6px 6px; }
.osd-token-grup-baslik {
    padding: 6px 6px 3px;
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
    color: var(--t-accent); text-transform: uppercase;
}
.osd-token-item {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px;
    margin-bottom: 2px;
    border-radius: 6px;
    font-size: 0.76rem; color: var(--t-text-secondary);
    background: var(--t-bg-card);
    border: 1px solid var(--t-border);
    cursor: grab; user-select: none;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.osd-token-item:hover {
    background: rgba(37,99,235,0.08);
    border-color: rgba(37,99,235,0.3);
    color: var(--t-text-primary);
}
.osd-token-item:active { cursor: grabbing; }
.osd-drag-ico { flex-shrink: 0; color: var(--t-text-muted); }

/* ── Sağ editör kolonu ── */
.osd-editor-col {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.osd-loading {
    padding: 40px; text-align: center;
    color: var(--t-text-muted); font-style: italic;
}
.osd-editor-wrap {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
}
/* Araç çubuğu kabı — sayfanın dışında, ölçekten bağımsız. */
.osd-toolbar-kap { flex-shrink: 0; }
.osd-toolbar-kap .ql-toolbar {
    border: none; border-bottom: 1px solid var(--t-border);
    background: var(--t-bg-secondary);
}
/* Kâğıdın etrafındaki gri tabla — sayfa sınırı gözle görülsün. */
.osd-kagit-kap {
    flex: 1; min-height: 0; overflow: auto;
    background: #47556922; padding: 14px;
    display: flex; justify-content: center; align-items: flex-start;
}
/* Sayfa: beyaz, gölgeli, kâğıdın tam ölçüsünde. */
.osd-editor-sayfa {
    background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.28);
    flex-shrink: 0; display: flex; flex-direction: column;
}
.osd-editor-sayfa .osd-quill-editor { flex: 1; min-height: 0; }
/* Kareli zemin — 1 cm (37.8px @96dpi) ızgara; her 5 karede bir koyu çizgi.
   🪤 SAYFANIN KENDİSİNE değil, ZEMİNİNE uygulanır: şablon metnine hiçbir şey
      eklenmez, baskıda ve önizlemede iz kalmaz. */
.osd-editor-sayfa.osd-kareli {
    background-color: #fff;
    background-image:
        linear-gradient(to right,  rgba(37,99,235,.16) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(37,99,235,.16) 1px, transparent 1px),
        linear-gradient(to right,  rgba(37,99,235,.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(37,99,235,.07) 1px, transparent 1px);
    background-size: 189px 189px, 189px 189px, 37.8px 37.8px, 37.8px 37.8px;
}
/* Izgara görünsün diye Quill kabı saydam kalır. */
.osd-editor-sayfa.osd-kareli .ql-container,
.osd-editor-sayfa.osd-kareli .ql-editor { background: transparent; }
/* Serbest yerleşim kutusu — sayfa üzerinde mutlak konumlu, fareyle taşınır. */
.osd-editor-sayfa { position: relative; }
.osd-kutu {
    position: absolute; z-index: 5; cursor: move;
    padding: 2px 4px; border: 1px dashed transparent; border-radius: 3px;
    font-size: 12.5px; line-height: 1.45; color: #0f172a;
    min-height: 20px; background: rgba(255,255,255,.6);
}
.osd-kutu:hover { border-color: #94a3b8; }
.osd-kutu-secili { border-color: #2563eb; background: rgba(37,99,235,.06); }
.osd-kutu-metin { pointer-events: none; white-space: pre-wrap; }
/* Gerdir: kutudaki görsel kutuyu doldurur.
   🪤 !important ŞART: token'dan gelen <img> kendi satır içi max-width/max-height
      stilini taşıyor; satır içi stil sınıf kuralını yener. */
.soz-kutu-gerdir img {
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    object-fit: contain; display: block;
}
/* Boyut tutamakları — yalnız seçili kutuda görünür. */
.osd-tut { position: absolute; background: #2563eb; border: 1px solid #fff; z-index: 6; }
.osd-tut-sag  { right: -4px; top: 50%; margin-top: -7px; width: 7px; height: 14px;
                border-radius: 2px; cursor: ew-resize; }
.osd-tut-alt  { bottom: -4px; left: 50%; margin-left: -7px; width: 14px; height: 7px;
                border-radius: 2px; cursor: ns-resize; }
.osd-tut-kose { right: -5px; bottom: -5px; width: 10px; height: 10px;
                border-radius: 2px; cursor: nwse-resize; }
.osd-kutu-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 6px 10px; border-bottom: 1px solid var(--t-border, #cbd5e1);
    background: var(--t-bg-secondary, #f8fafc); flex-shrink: 0;
}
.osd-kutu-metin-in { flex: 1; min-width: 180px; height: 28px; }
.osd-kutu-hiza { display: flex; gap: 2px; }
.osd-kutu-en { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #64748b; }
.osd-kutu-ipucu { font-size: 11.5px; color: #64748b; }
.osd-kutu-sil { color: #dc2626; }
.osd-zoom-btn.osd-zoom-acik {
    background: var(--t-primary, #2563eb); color: #fff; border-color: var(--t-primary, #2563eb);
}
/* Sayfa içindeki Quill: beyaz kâğıt üstünde koyu metin — tema ne olursa olsun,
   çünkü baskı beyaz kâğıda yapılır. */
.osd-editor-sayfa .ql-container { background: #fff; color: #0f172a; overflow: visible; }
.osd-editor-sayfa .ql-editor    { color: #0f172a; padding: 28px 30px; }
.osd-kagit-etiket {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    font-size: 11px; color: var(--t-text-muted, #64748b); padding: 4px 0;
}
/* Quill snow toolbar tema uyumu */
.osd-editor-wrap .ql-toolbar {
    background: var(--t-bg-secondary);
    border: none;
    border-bottom: 1px solid var(--t-border);
    flex-shrink: 0;
}
.osd-editor-wrap .ql-container {
    border: none;
    font-size: 0.88rem;
    background: var(--t-input-bg);
    color: var(--t-input-text);
    flex: 1; min-height: 0; overflow-y: auto;
}
.osd-editor-wrap .ql-editor {
    min-height: 100%;
    color: var(--t-input-text);
}
.osd-editor-wrap .ql-editor.ql-blank::before {
    color: var(--t-text-muted); font-style: italic;
}
/* Koyu tema Quill toolbar ikonları */
[data-theme="dark"] .osd-editor-wrap .ql-stroke { stroke: var(--t-text-secondary); }
[data-theme="dark"] .osd-editor-wrap .ql-fill   { fill:   var(--t-text-secondary); }
[data-theme="dark"] .osd-editor-wrap .ql-picker-label { color: var(--t-text-secondary); }
[data-theme="dark"] .osd-editor-wrap .ql-picker-options {
    background: var(--t-bg-card); border-color: var(--t-border);
}

.osd-footer {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    background: var(--t-bg-card);
    border-top: 1px solid var(--t-border);
    flex-shrink: 0;
}
.osd-footer .t-btn-delete { margin-right: auto; }

/* ============================================================================
   NV-TABS — UYGULAMA GENELİ SEKME STANDARDI
   Referans: Hasta Kartı > Kimlik sekmeleri (.hkt-tab). Ekranlar kendi sekme
   stilini yazmak yerine BU sınıfları kullanır; böylece Kasa Defteri, Vezne,
   Sadakat vb. her yerde sekmeler aynı görünür ve tema değişince hepsi uyar.

   Kullanım:
     <div class="nv-tabs">
       <button class="nv-tab active"><svg class="nv-tab-icon">…</svg> Etiket
         <span class="nv-tab-rozet">3</span></button>
     </div>
   ============================================================================ */
.nv-tabs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 0 2px;
    border-bottom: 1px solid var(--t-tab-bar-border, var(--t-border));
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    flex-shrink: 0;
}
.nv-tabs::-webkit-scrollbar { height: 3px; }
.nv-tabs::-webkit-scrollbar-thumb { background: var(--t-border-strong); border-radius: 2px; }

.nv-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--t-text-secondary, var(--t-tab-inactive-text));
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -1px;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
    position: relative;
}
.nv-tab:hover:not(:disabled) {
    color: var(--t-tab-active-text);
    background: color-mix(in srgb, var(--t-tab-bar-bg) 35%, var(--t-tab-active-bg));
    border-color: color-mix(in srgb, var(--t-tab-bar-border) 60%, transparent);
}
.nv-tab.active {
    color: var(--t-tab-active-text);
    background: var(--t-tab-active-bg);
    border-color: var(--t-tab-bar-border);
    font-weight: 650;
    z-index: 2;
}
/* Seçili göstergesi — alt aksent şeridi (Kimlik sekmeleriyle aynı kalınlık) */
.nv-tab.active::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3.5px;
    background: var(--t-tab-active-shadow);
    z-index: 3;
}
.nv-tab:disabled { opacity: .5; cursor: not-allowed; }

.nv-tab-icon { display: inline-flex; flex-shrink: 0; opacity: 0.45; transition: opacity 140ms ease; }
.nv-tab.active .nv-tab-icon { opacity: 1; color: var(--t-tab-active-shadow); }
.nv-tab:hover .nv-tab-icon { opacity: 0.75; }

/* Sekme etiketinin yanındaki sayaç rozeti (ör. "Kampanyalar 3") */
.nv-tab-rozet {
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--t-bg-secondary);
    border: 1px solid var(--t-border);
    color: var(--t-text-muted);
}
.nv-tab.active .nv-tab-rozet {
    background: var(--t-tab-active-shadow);
    border-color: transparent;
    color: var(--t-text-on-accent, #fff);
}

/* ── Mevcut ekranların sekme çubukları da AYNI standarda çekilir ────────────
   Ekranlar tarihsel olarak kendi sekme sınıflarını yazdı (kd-tab, vbg-tab, …).
   Markup'ları tek tek değiştirmek yerine, o sınıflar burada standart görünüme
   BAĞLANIR. Seçici özgüllüğü bilerek yüksek tutuldu (element.sinif) → bileşen
   içindeki yerel <style> blokları (0,1,0) bunu EZEMEZ, tek görünüm garanti olur.
   Yeni ekran yazarken doğrudan .nv-tabs / .nv-tab kullanın.
   ──────────────────────────────────────────────────────────────────────────── */
div.kd-tabs, div.bk-tabs, div.db-tabs, div.efg-tabs, div.hb-tabs, div.htl-tabs,
div.mg-tabs, div.rt-tabs, div.tnm-tabs, div.tsf-tabs, div.mdt-tabs, div.ba-tabs,
div.tet-tabs, div.exm-tabs, div.ebg-tabs, div.hbg-tabs, div.vbg-tabs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 0 2px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--t-tab-bar-border, var(--t-border));
    border-radius: 0;
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    flex-shrink: 0;
}
button.kd-tab, button.bk-tab, button.db-tab, button.efg-tab, button.hb-tab, button.htl-tab,
button.mg-tab, button.rt-tab, button.tnm-tab, button.tsf-tab, button.mdt-tab, button.ba-tab,
button.tet-tab, button.exm-tab, button.ebg-tab, button.hbg-tab, button.vbg-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--t-text-secondary, var(--t-tab-inactive-text));
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -1px;
    box-shadow: none;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
    position: relative;
}
button.kd-tab:hover:not(:disabled), button.bk-tab:hover:not(:disabled), button.db-tab:hover:not(:disabled),
button.efg-tab:hover:not(:disabled), button.hb-tab:hover:not(:disabled), button.htl-tab:hover:not(:disabled),
button.mg-tab:hover:not(:disabled), button.rt-tab:hover:not(:disabled), button.tnm-tab:hover:not(:disabled),
button.tsf-tab:hover:not(:disabled), button.mdt-tab:hover:not(:disabled), button.ba-tab:hover:not(:disabled),
button.tet-tab:hover:not(:disabled), button.exm-tab:hover:not(:disabled), button.ebg-tab:hover:not(:disabled),
button.hbg-tab:hover:not(:disabled), button.vbg-tab:hover:not(:disabled) {
    color: var(--t-tab-active-text);
    background: color-mix(in srgb, var(--t-tab-bar-bg) 35%, var(--t-tab-active-bg));
    border-color: color-mix(in srgb, var(--t-tab-bar-border) 60%, transparent);
}
/* Seçili sekme — ekranlar farklı işaret sınıfı kullanıyor (active / on / aktif / …) */
button.kd-tab.active, button.efg-tab.active, button.htl-tab.active, button.tet-tab.active,
button.exm-tab.active, button.ebg-tab.active, button.vbg-tab.active,
button.bk-tab.on, button.db-tab.on, button.hb-tab.on, button.rt-tab.on, button.tsf-tab.on, button.ba-tab.on,
button.mdt-tab.aktif, button.hbg-tab.is-on, button.tnm-tab.tnm-tab--active, button.mg-tab.mg-tab-aktif {
    color: var(--t-tab-active-text);
    background: var(--t-tab-active-bg);
    border-color: var(--t-tab-bar-border);
    font-weight: 650;
    z-index: 2;
}
button.kd-tab.active::before, button.efg-tab.active::before, button.htl-tab.active::before,
button.tet-tab.active::before, button.exm-tab.active::before, button.ebg-tab.active::before,
button.vbg-tab.active::before, button.bk-tab.on::before, button.db-tab.on::before, button.hb-tab.on::before,
button.rt-tab.on::before, button.tsf-tab.on::before, button.ba-tab.on::before, button.mdt-tab.aktif::before,
button.hbg-tab.is-on::before, button.tnm-tab.tnm-tab--active::before, button.mg-tab.mg-tab-aktif::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3.5px;
    background: var(--t-tab-active-shadow);
    z-index: 3;
}
/* Sekme içindeki ikonlar aktif sekmede vurgulanır (KIcon / inline svg) */
button.kd-tab .kicon, button.bk-tab .kicon, button.db-tab .kicon, button.vbg-tab svg,
button.ba-tab .kicon, button.tet-tab svg, button.mdt-tab svg, button.rt-tab .kicon {
    opacity: .45; transition: opacity 140ms ease;
}
button.kd-tab.active .kicon, button.bk-tab.on .kicon, button.db-tab.on .kicon, button.vbg-tab.active svg,
button.ba-tab.on .kicon, button.tet-tab.active svg, button.mdt-tab.aktif svg, button.rt-tab.on .kicon {
    opacity: 1; color: var(--t-tab-active-shadow);
}

/* ============================================================================
   GRID BASLIK <-> HUCRE HIZA BIRLIGI  (tek kaynak)
   ----------------------------------------------------------------------------
   TUZAK: neredeyse her ekran kendi <style> blogunda
       .xx-table thead th { text-align:left; }
   yaziyor. Bu kuralin ozgullugu (0,1,2); yardimci siniflar (.text-right = Tailwind,
   .ta-r = ekran ici) ise (0,1,0). Dolayisiyla <th class="text-right"> BASLIGI SOLDA
   kaliyor, govde hucresi <td class="text-right"> SAGDA duruyor -> sutunlar
   "hizalamalari kayik" gorunuyor (Kar-Zarar Tahsilat kalemleri: Tur/Adet/Tutar/%).
   Tek tek 40 ekrani duzeltmek yerine yardimci siniflari burada kesinlestiriyoruz.
   !important bilinclidir: yardimci sinif, bilesenin varsayilan hizasini yenmeli.
   Ekran ozel bir hiza istiyorsa th'a o sinifi HIC vermez.
   ============================================================================ */
table th.text-right,  table td.text-right,
table th.ta-r,        table td.ta-r,
table th.sag,         table td.sag,
table th.izb-sag,     table td.izb-sag   { text-align: right !important; }

table th.text-center, table td.text-center,
table th.orta,        table td.orta,
table th.rt-orta,     table td.rt-orta   { text-align: center !important; }

table th.text-left,   table td.text-left { text-align: left !important; }

/* Sag hizali sayi sutunlarinda basamaklar ayni genislikte olsun ki tutarlar
   birbirinin altina otursun (1.258.666,83 vs 320.166,75). */
table td.text-right, table td.ta-r, table td.sag, table td.izb-sag {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ============================================================
   DAR EKRAN (telefon / küçük tablet)
   ------------------------------------------------------------
   🪤 SORUN: üst çubuktaki aksiyon kümesi (.t-topbar-actions) flex-shrink:0 idi ve
      ~15 düğme taşıyor. 390px'lik bir telefonda bu küme ekranı aşıyor, EN SAĞDAKİ
      düğme — yani HAMBURGER MENÜ — görünmez oluyordu. Menüye ulaşılamayınca
      kullanıcı açılışta gelen Randevu sekmesinde kilitleniyor, başka hiçbir ekrana
      geçemiyordu ("randevu haricinde diğer alanlar görülmüyor").

   ÇÖZÜM iki parçalı:
     1) Menü düğmesi çubuktan ÇIKARILIP sağ üste sabitlenir — her zaman erişilebilir.
     2) Kalan düğmeler yatay KAYDIRILABİLİR olur — hiçbiri kaybolmaz.

   Bu blok YALNIZ dar ekranda çalışır; masaüstü görünümü değişmez.
   ============================================================ */
@media (max-width: 900px) {

    /* 🪤 ÜST ÇUBUK EKRANA YAPIŞTIRILIR: sayfanın kendisi (takvim kolonları, geniş
       tablolar) gövdeyi ekrandan GENİŞ yapabiliyor. O durumda çubuğun "sağ ucu" da
       ekran dışında kalır ve oraya konumlanan her şey görünmez olur. sticky+left:0
       ile çubuk yatay kaydırmada ekranla birlikte gelir. */
    .t-topbar-row {
        position: sticky;
        left: 0;
        z-index: 50;
        width: 100vw;
        max-width: 100vw;
        padding-right: 36px;   /* sabitlenen menü düğmesinin yeri */
    }

    /* Aksiyon kümesi artık daralabilir ve kendi içinde kayar. */
    .t-topbar-actions {
        min-width: 0;
        flex-shrink: 1;
        max-width: 62%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;            /* çubuk görünmesin, parmakla kaydırılır */
        -webkit-overflow-scrolling: touch;
    }
    .t-topbar-actions::-webkit-scrollbar { display: none; }

    /* Sekme şeridi tamamen ezilmesin — açık sekmeler arasında geçiş yapılabilmeli. */
    .t-topbar-row > .t-tabbar { min-width: 38%; }

    /* MENÜ DÜĞMESİ: kayan kümenin dışında, sağ üstte sabit.
       Zeminini boyar ki altından kayan düğmeler görünmesin. */
    /* 🪤 ABSOLUTE DEĞİL FIXED: absolute, çubuğun sağ ucuna göre konumlanır — gövde
       ekrandan genişse o uç da ekran dışında kalır ve düğme yine görünmez. fixed
       doğrudan EKRANA göre konumlanır; sayfa ne kadar geniş olursa olsun sağ üstte
       durur. Bu düğme telefonda menüye tek erişim noktasıdır, kaybolmamalı. */
    .t-topbar-menu {
        position: fixed;
        right: 4px;
        top: calc(var(--t-tabbar-h, 38px) / 2);
        transform: translateY(-50%);
        z-index: 60;                          /* sayfanın üstünde, modallerin altında */
        background: var(--t-bg-card, #fff);
        border: 1px solid var(--t-border, #cbd5e1);
        box-shadow: 0 2px 8px rgba(0,0,0,.25);
    }

    /* Parmakla basılacak hedefler biraz büyür. */
    .t-topbar-btn { width: 32px; height: 32px; }

    /* Menü paneli ekrana sığsın ve uzunsa kendi içinde kaysın. */
    .sidebar-menu-panel {
        width: min(280px, calc(100vw - 16px));
        max-height: calc(100vh - var(--t-tabbar-h, 38px) - 16px);
        overflow-y: auto;
    }

    /* ── ALT SEKME ŞERİTLERİ ────────────────────────────────────────────
       Hasta ekranının şeridi: Kimlik · Diagnoz · Planlama · Tedavi · Hesap Kartı · İmaj.
       Zaten overflow-x:auto idi ama üst çubuk sayfayı ekrandan geniş yaptığı için
       kendi kaydırması hiç devreye girmiyor, şerit ekran dışında kalıyordu. Üst çubuk
       düzeldikten sonra burası parmakla kayar; sekmeler biraz daraltılıp daha çoğu
       aynı anda görünür yapılır.
       🪤 SEÇİCİ İKİ SINIFLI (.tet-tabs .tet-tab): bileşenin kendi <style> bloğu
          app.css'ten SONRA geldiği için tek sınıfla yazılan kural ezilirdi. */
    .tet-tabs, .hk-tabs, .t-tabbar {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
    }
    /* 🪤 12 SEKME TELEFONA SIĞMAZ: "Kimlik · Diagnoz · Planlama · Tedavi · Laboratuvar ·
          Hesap Kartı · İmaj · Tarihçe · Stok · Epikriz · Anamnez · Hasta Notu · Tedavi Notu"
          yazıyla ~1300px eder, ekran ~390px. Yazıları kaydırarak aramak yerine sekmeler
          İKONA dönüşür (~30px), SEÇİLİ olan adını da gösterir. Böylece sekmelerin
          neredeyse tamamı aynı anda görünür; ad uzun basınca (title) okunur. */
    .tet-tabs .tet-tab {
        padding: 0 0.45rem;
        font-size: 0.8rem;
        gap: 4px;
        scroll-snap-align: start;
    }
    .tet-tabs .tet-tab .tet-tab-ad        { display: none; }
    .tet-tabs .tet-tab.active .tet-tab-ad  { display: inline; }
    .tet-tabs .tet-tab .tet-tab-icon      { opacity: .75; }   /* tek gösterge ikon → daha okunur */
    .tet-tabs .tet-tab.active             { padding: 0 0.6rem; }
    /* ── GÜNLÜK HATIRLATMALAR ───────────────────────────────────────────
       Telefonda ortalanmış küçük bir kutu yerine ÜSTTEN AŞAĞI açılan tam genişlik
       panel. Kartlar zaten tek sütuna düşüyor; burada sütun sayısı garanti altına
       alınır ve panel ekranın neredeyse tamamını kullanır.
       🪤 !important ŞART: bu modalın ölçüleri bileşende SATIR İÇİ stil olarak
          yazılı (style="max-width:900px;width:94%..."); satır içi stili yalnız
          !important ezebilir. */
    .hat-perde { align-items: flex-start !important; }
    .hat-kart {
        width: 100% !important;
        max-width: none !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    .hm-grid { grid-template-columns: 1fr !important; }

    /* ── RANDEVU TAKVİMİ ────────────────────────────────────────────────
       Yandaki bekleme listesi telefonda kapalı açılır (kod tarafında), kapalıyken
       kalan 44px'lik şerit de yer kaplamasın diye tamamen gizlenir. */
    .rnd-bekleyen-panel--kapali { display: none !important; }

    /* ── HASTA KARTI (Kimlik) ───────────────────────────────────────────
       🪤 SAĞ PAY TELEFONDA FORMU YOK EDİYOR: masaüstünde hasta fotoğrafı ve Başvuru
          Hesap Özeti paneli forma ABSOLUTE bindiriliyor, forma da 435px sağ pay
          bırakılıyor (.hkt-foto-reserve). 440px'lik ekranda geriye ~5px kalıyor;
          alanlar 40px'lik kırıntılara dönüşüyor, foto ve özet formun üstüne biniyor.
          Telefonda üçü de NORMAL AKIŞA alınır: form tam genişlik, foto ve özet
          altında alt alta. */
    .hkt-foto-reserve { margin-right: 0 !important; }
    .hkt-foto-col,
    .hkt-ozet {
        position: static !important;
        width: 100% !important;
        max-height: none !important;
        margin-top: 8px;
    }
    /* Katlama düğmesi/dikey etiketi akışta anlamsız — gizle. */
    .hkt-ozet-toggle, .hkt-ozet-collabel { display: none !important; }
    .hkt-ozet-collapsed { flex: none !important; width: 100% !important; min-height: 0 !important; }

    /* Gövde tek sütun; iç içe kaydırma yerine sayfa kayar (telefonda doğal olan bu). */
    .hkt-body { display: block !important; overflow: visible !important; }
    .hkt-main { overflow: visible !important; }

    /* Etiket + alan yan yana sığmıyor → etiket ÜSTE, alan tam genişlik.
       🪤 Seçici öznitelik içeriğine bakar: Tailwind'in köşeli parantezli sınıf adını
          (grid-cols-[120px_1fr]) CSS'te kaçış karakteriyle yazmak kırılgan olurdu. */
    [class*="grid-cols-[120px_1fr]"] {
        grid-template-columns: 1fr !important;
        align-items: start !important;
        margin-bottom: 8px !important;
    }

    /* Üst eylem çubuğu (e-Nabız · KVKK · Rapor · Vazgeç · Gönder) taşmasın. */
    .hk-actions { flex-wrap: wrap !important; gap: 6px !important; }

    /* ── İMAJ SEKMESİ ───────────────────────────────────────────────────
       🪤 KLASÖR AĞACI EKRANIN YARISINI YİYOR: düzen "260px + kalan" iki sütun.
          440px'de resimlere ~170px kalıyor, küçük resimler sağ kenardan kesiliyor
          ve ağacın altı boş duruyor. Telefonda ALT ALTA: ağaç üstte kısa ve kendi
          içinde kaydırılır, resimler altta TAM genişlik iki sütun. */
    .hi-grid {
        display: block !important;
        min-height: 0;
    }
    .hi-tree {
        max-height: 28vh;           /* ağaç ekranı yutmasın */
        margin-bottom: 8px;
    }
    /* Kartlar sayfa akışında; iç içe kaydırma yerine sayfa kayar. */
    .hi-cards { overflow: visible !important; }
    .hi-cards-grid {
        overflow: visible !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    /* 🪤 DÖRT DÜĞME TEK SIRAYA SIĞMIYORDU: "Panoromik Ekle" ve "Kameradan Çek" uzun
       olduğu için "Öncesi / Sonrası" alt satıra kayıyordu. Telefonda KISA etiketlere
       geçilir (Pano Ekle · Kamera Çek · Öncesi Sonrası) ve iç boşluk daraltılır;
       dördü aynı sırada kalır. Etiketler markup'ta hazır (.hi-kisa / .hi-uzun). */
    .hi-uzun { display: none !important; }
    .hi-kisa { display: inline !important; }
    .hi-toolbar {
        gap: 5px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;                 /* çok dar cihazda yine de erişilebilsin */
        -webkit-overflow-scrolling: touch;
    }
    .hi-btn {
        padding: 7px 8px !important;
        font-size: .78rem !important;
        gap: 4px !important;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* ── TEDAVİ / DİAGNOZ / PLANLAMA (diş ekranı) ───────────────────────
       İKİ AYRI SORUN VAR:

       1) DÜZEN: ana ızgara "kalan + 270px" (şema solda, özet paneli sağda). 440px'de
          şemaya ~165px kalıyor. Üçü de alt alta tam genişliğe alınır.

       2) 🪤 ŞEMA KIRPILIYOR, KAYMIYOR: bir çenede 16 diş var ve satırın kapsayıcısında
          overflow:hidden yazılı. Dar ekranda dişlerin sağdaki yarısı görünmez oluyor,
          kaydırma da yapılamıyor — yani o dişlere HİÇ dokunulamıyor. Dişleri küçültmek
          yerine (parmakla isabet gerekiyor) şerit YATAY KAYDIRILABİLİR yapılır ve
          içerik ortalanmak yerine soldan başlar; yoksa kaydırmanın başlangıcı kayar. */
    .dt-grid { display: block !important; }
    .dt-grid > .dt-chart,
    .dt-grid > .dt-summary,
    .dt-grid > .dt-services { width: auto !important; margin-bottom: 8px; }

    .dt-yetiskin-grid, .dt-sut-grid {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        /* 🪤 BURAYA "start" YAZMAK ŞEMAYI BOZAR: bu kolon-flex'in iki çocuğu ÜST ve ALT
           diş sıralarıdır ve doğal genişlikleri FARKLIDIR (PNG'ler farklı). Sola
           yaslanınca iki sıra birbiriyle ve alttaki numaralarla hizasını kaybeder —
           hem daimi hem süt şemada. "safe center": sığdığı sürece ortalar (hizalı),
           taşarsa başa yaslar (kaydırma baştan başlar). */
        align-items: safe center !important;
    }
    /* 🪤 DÜZ "flex-start" SÜT ŞEMASINI BOZAR: süt şemasında 10 diş var ama kapsayıcı,
       yetişkin şemasının (16 diş) genişliğine kilitli (ikisi aynı hücrede üst üste
       duruyor). Sola yaslayınca dişler sola yapışıp orta çizgi ile R/L işaretleri
       boşlukta kalıyor. Düz "center" ise taşan yetişkin şemasında baştaki dişlere
       kaydırmayı imkânsız kılar (taşan içerik iki yana taşar).
       "safe center": sığıyorsa ORTALAR, taşıyorsa BAŞA yaslar → ikisi de doğru. */
    .dt-yetiskin-row, .dt-sut-row { justify-content: safe center !important; }

    /* Hizmet tablosu telefonda kendi içinde kaymasın; sayfa kaysın (yatay hariç). */
    .dt-services-table { max-height: none !important; overflow-y: visible !important; }

    /* 🪤 TABLO width:max-content + white-space:nowrap İLE ÇİZİLİYOR: her sütun içeriği
       kadar açılıyor, toplam ~1500px ediyor ve hizmet adı ekranın sağında kalıyor.
       Telefonda tablo EKRANA SIĞDIRILIR; hizmet adı tek satıra sıkışmak yerine
       ALT SATIRA SARAR. Diş numarası ve tutar gibi kısa sütunlar sarmamalı,
       bu yüzden sarma yalnız hizmet adı sütununda açılır. */
    .dt-services-table table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto;
    }
    .dt-services-table .dt-col-stok {
        min-width: 0 !important;
        white-space: normal !important;
        word-break: break-word;
        line-height: 1.25;
    }
    /* Satırlar iki satıra çıkınca dokunma hedefi de rahatlasın. */
    .dt-services-table td { padding-top: 6px !important; padding-bottom: 6px !important; }

    /* 🪤 30 SÜTUNLUK GRID TELEFONA SIĞMAZ: Açıklama, Yön, Doktor, KDV matrahı, indirim,
       kurum katkısı, miktar, KDV oranı, birim/tarife fiyatı, maliyet, prim, uzman çarpanı,
       plan referansı, süre, puan, kilit, garanti, kur… Hepsini göstermeye çalışmak ya
       yatay kaydırma cehennemi ya da okunmaz kırıntılar üretir.
       Telefonda YALNIZ karar için gerekenler kalır (dt-m-kal ile işaretli):
         Seç · Düzelt · İşlem Başlangıç · Dişler · Hizmet · KDV'li Tutar
       Kalan her şey satırdaki KALEM düğmesiyle açılan DETAY penceresinde görülür —
       zaten orada düzenlenebilir hâlde duruyorlar, ikinci bir ekran yazmaya gerek yok. */
    .dt-services-table th:not(.dt-m-kal),
    .dt-services-table td:not(.dt-m-kal) { display: none !important; }

    /* Kalan 6 sütun ekrana yayılsın; hizmet adı en geniş pay alır. */
    .dt-services-table .dt-col-stok { width: 42% !important; }

    /* ── HESAP KARTI ────────────────────────────────────────────────────
       Bu ekranda zaten 1100px kırılma noktası var; 440px'de tek sütuna düşüyor.
       Ekstre/kasa tablosu SABİT sütun genişlikleriyle çiziliyor (tarih 120 + belge 75
       + borç 95 + alacak 95 + cari 150…) — parasal tabloda sütunları sarmak sayıları
       okunmaz yapar, bu yüzden YATAY KAYDIRMA korunur; yalnız parmakla akıcı olsun. */
    .chl-table-wrap {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .chl-side { width: 100%; }

    /* 🪤 AKSİYON ÇUBUĞU DAĞILIYOR: Excel düğmesi margin-left:auto ile sağa yaslanıyor,
       İşlemler menüsü alt satıra düşüyor, Başvuru seçici üstte kalıyor — üç öğe üç ayrı
       hizada duruyor. Telefonda hepsi alt alta ve SOLA yaslı olsun. */
    .chl-actions { flex-direction: column !important; align-items: stretch !important; }
    .chl-actions-buttons { justify-content: flex-start !important; }
    .chl-actions-buttons .exa.exa-sag { margin-left: 0 !important; }
    .chl-basvuru { margin-left: 0 !important; width: 100%; }

    /* ── HASTA NOTU / TEDAVİ NOTU ───────────────────────────────────────
       Filtre kutuları 200px sabit; 440px'de yan yana dizilince arama alanına yer
       kalmıyor. Tam genişliğe alınır. Not tabloları METİN ağırlıklı olduğu için
       (belge no, tarih, diş, rapor) sarma doğru seçim — parasal tablolardan farklı. */
    .hdnl-filter-wrap, .tnot-filter-wrap { width: 100% !important; flex: 1 1 100% !important; }

    /* 🪤 NOT TABLOLARI TELEFONDA TABLO OLARAK ÇALIŞMAZ: 9-11 sütun var ve içlerinden
       biri KOCA bir metin (rapor / tercüman görüşmesi dökümü). Sütunları daraltmak
       çözmüyor — metin ~80px'lik dikey bir şeride sıkışıp satırı ekranlar boyu
       uzatıyor, diğer hücreler boşlukta kalıyor.
       ÇÖZÜM: her satır bir KARTA dönüşür (tablo semantiği CSS ile bloklaştırılır).
       Başlık satırı gizlenir; hücrenin ne olduğu data-etiket ile satır içinde yazar.
       İkincil alanlar (seans, adet, ekleyen, güncelleyen) telefonda gizlenir. */
    .tnot-table, .tnot-table tbody, .tnot-table tr, .tnot-table td,
    .hdnl-table, .hdnl-table tbody, .hdnl-table tr, .hdnl-table td {
        display: block !important;
        width: auto !important;
    }
    .tnot-table thead, .hdnl-table thead { display: none !important; }

    .tnot-table tr, .hdnl-table tr {
        border: 1px solid var(--t-border) !important;
        border-radius: 10px;
        padding: 8px 10px;
        margin-bottom: 8px;
        background: var(--t-bg-card);
    }
    .tnot-table td, .hdnl-table td {
        border: none !important;
        padding: 2px 0 !important;
        white-space: normal !important;
        text-align: left !important;
    }
    /* Etiket: hücrenin başında, küçük ve soluk. Boş hücre hiç çizilmesin. */
    .tnot-table td[data-etiket]::before,
    .hdnl-table td[data-etiket]::before {
        content: attr(data-etiket) ": ";
        font-weight: 700;
        font-size: .72rem;
        color: var(--t-text-muted);
    }
    .tnot-table td:empty, .hdnl-table td:empty { display: none !important; }

    /* Düğmeler kartın üstünde, sağa yaslı bir şerit. */
    .tnot-td-btn, .hdnl-td-btn {
        justify-content: flex-end;
        padding-bottom: 6px !important;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--t-border) !important;
    }
    /* Not metni: etiketi kendi satırında, metin tam genişlik. */
    .tnot-td-metin::before, .hdnl-td-metin::before { display: block; }
    .tnot-td-metin, .hdnl-td-metin { padding-top: 6px !important; }
    /* Telefonda yer kaplamasın: seans, adet, ekleyen, güncelleyen, ekleme tarihi. */
    .tnot-td-ikincil, .hdnl-td-ikincil { display: none !important; }

    /* Rapor metni "…" ile kesilmesin. */
    .tnot-rapor {
        max-width: none !important;
        white-space: pre-wrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word;
    }
    /* Not düzenleme penceresinde etiket üstte, alan tam genişlik. */
    .tnot-form-row { grid-template-columns: 1fr !important; align-items: start !important; }

    /* ── HİZMET SEÇME MENÜSÜ (Diagnoz / Planlama / Tedavi) ──────────────
       🪤 KASKAD FLY-OUT TELEFONDA EKRAN DIŞINA TAŞAR: alt menüler üst menünün SAĞINA
          açılıyor (left: 100% + 4px) ve kendi alt sınırları var (220px, yaprakta 280px).
          220px'lik kök menü x≈10'dan başlayınca alt menü ~235'ten başlıyor ve 455-515px'e
          uzanıyor — 440px'lik ekranda görünmüyor, hizmet seçilemiyor.
          Telefonda fly-out yerine AKORDEON: alt menü üstünün ALTINA, içeriden girintili
          açılır. Böylece hiçbir seviye ekran dışına çıkmaz. */
    .dt-cascade-root {
        min-width: 0 !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: 72vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .dt-cascade-sublist {
        position: static !important;
        top: auto !important;
        left: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        border: none !important;
        border-left: 2px solid var(--t-border) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 2px 0 6px 8px !important;
        padding: 2px 0 2px 8px !important;
    }
    /* Yaprak liste akordeon içinde; kendi yüksekliği sayfayı kilitlemesin. */
    .dt-cascade-sublist-leaf { max-height: 45vh !important; }

    /* ── LABORATUVAR ────────────────────────────────────────────────────
       🪤 FİLTRE ÇİPLERİ EKRANDAN TAŞIYOR: çip kutusu (.dlb-filtreler) kendi içinde
          sarıyor ama araç çubuğunun bir FLEX ÖĞESİ ve genişliği "içeriği kadar"
          hesaplanıyor (~700px). Kendi satırına düşse bile o genişliği koruyor,
          "Dentin/Teslim Yok" ekran dışında kalıyor. Tam satır + daralabilir yapılır.
       Ayrıca tarih alanları satırı paylaşsın, Excel ile Hızlı Tarih alt satırda
       birlikte dursun (şimdi Excel üstte, Hızlı Tarih tek başına altta kalıyor). */
    .dlb-toolbar { gap: 8px !important; }
    .dlb-tarih { flex: 1 1 44% !important; min-width: 0 !important; }
    .dlb-tarih .dlb-input { width: 100%; }
    .dlb-filtreler { flex: 1 1 100% !important; min-width: 0 !important; }
    .dlb-sayac { margin-left: auto; }

    /* Not/anamnez araç çubukları: hiçbirinde flex-wrap yok, başlık + düğmeler
       "space-between" ile tek satıra zorlanıyor. 440px'de düğmeler taşıyor. */
    .hdnl-toolbar, .tnot-toolbar, .anam-toolbar {
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: flex-start !important;
    }
    .hdnl-actions, .tnot-actions { flex-wrap: wrap; }

    /* Anamnez ekranında zaten 700px kırılma noktası var (tek sütuna düşüyor);
       yalnız açılır menüleri ekran dışına taşmasın. */
    .anam-menu, .anam-dil-menu { max-width: calc(100vw - 24px); }
    /* Çıktı-dil sarmalayıcısı margin-left:auto ile sağa yaslanıyor; sarınca
       tek başına satır ortasında kalmasın. */
    .anam-cikti-sar { margin-right: 0 !important; }

    /* Üst arama çubuğundaki alanlar alt alta insin (180-210px'lik alt sınırlar
       440px'de yan yana sığmıyor, sığıştırınca hepsi okunmaz oluyor). */
    .dt-arama-field--doktor,
    .dt-arama-field--basvuru { min-width: 100% !important; flex: 1 1 100% !important; }

    /* 🪤 PANORAMİK EKRAN DIŞINDA KALIYORDU: film alanı diş şemasının SAĞINDA duruyor ve
       min-width:280px taşıyor. 440px'de şemanın yanına sığmayıp sağa taşıyor, kimse
       göremiyor. Telefonda film şemanın ALTINA alınır; 480px'lik sabit yükseklik de
       telefonda ekranın yarısını yiyeceği için kısaltılır. */
    .dt-schema-row { flex-direction: column !important; align-items: stretch !important; }
    .dt-schema-active { flex: 0 0 auto !important; }
    .dt-schema-image {
        min-width: 0 !important;
        min-height: 200px !important;
        height: 220px !important;
    }

    /* 🪤 "Daimi / Süt" ANAHTARI KADRAN DÜĞMELERİNİN ÜSTÜNE BİNİYOR: anahtar absolute
       (right:30px) ve düğme satırı dar ekranda ortalanınca ikisi çakışıyor —
       "Sol Üst Yarım" ne okunuyor ne tıklanıyor. Akışa alınır, satır sarar. */
    .dt-btn-row { flex-wrap: wrap !important; }
    .dt-mode-switch-inline {
        position: static !important;
        transform: none !important;
    }

    /* Kaydırılabildiği belli olsun: şeridin sağ ucunda hafif solma. */
    .tet-tabs {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
                mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
    }
}