/* ============================================================
   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-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;
}

/* 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;
}

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

    --t-text-primary:    #e2e8f0;
    --t-text-secondary:  #94a3b8;
    --t-text-muted:      #475569;
    --t-text-on-accent:  #ffffff;

    --t-border:          #334155;
    --t-border-strong:   #475569;

    --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: #94a3b8;
    --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:         #ffffff;
    --t-bg-hover:        #ffd6e7;

    --t-text-primary:    #831843;
    --t-text-secondary:  #9c009c;
    --t-text-muted:      #f472b6;
    --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-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;
}

/* ============================================================
   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); }

/* 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); }

/* 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);
}
.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-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-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;
}
.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-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;
}
.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; }
.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; }
.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); }
.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); }

.tnm-tabs {
    display: flex; gap: 2px;
    padding: 0 16px;
    background: var(--t-bg-card);
    border-bottom: 1px solid var(--t-border);
}
.tnm-tab {
    padding: 8px 14px;
    background: transparent; border: none;
    border-bottom: 2px solid transparent;
    color: var(--t-text-secondary);
    font-size: 0.8rem; font-weight: 600;
    cursor: pointer;
}
.tnm-tab:hover { color: var(--t-text-primary); }
.tnm-tab--active { color: var(--t-accent); border-bottom-color: var(--t-accent); }

.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;
    padding: 0 0.75rem;
    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.75rem;
    font-weight: 500;
    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);
    /* Üst renkli çizgi */
    box-shadow: 0 -2.5px 0 var(--t-tab-active-shadow) inset,
                0 1px 4px rgba(0,0,0,0.06);
    z-index: 2;
}
/* Aktif sekmenin alt kenarını gizle — içerik ile birleştirir */
.t-tab--active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--t-tab-active-bg);
    z-index: 3;
}

/* ── Pasif sekme ── */
.t-tab--inactive {
    background-color: transparent;
    color: 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 */
.settings-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    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(2, 1fr);
    gap: 0.75rem;
}

.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; }

/* ── 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;
}
table tbody tr > td {
    background: var(--t-bg-card);
}
table tbody tr:nth-child(even) > td {
    background: var(--t-bg-secondary);
}
table tbody tr:hover > td {
    background: var(--t-bg-hover);
}