/* ============================================================
   SER ASSIST — Dark Tema
   app.css'teki design token'lari dark modda override eder.
   ============================================================ */

/* ---------- Light (varsayılan) ek token'lar ---------- */
:root {
    --color-surface-2: #FAFBFD;
    --color-surface-3: #F1F5FB;
    --color-border-soft: #F1F5F9;
    --color-border-strong: #D1D9E4;
    --color-input-border: #DDE3EA;
    --color-skeleton: #EDF1F7;
    --color-scrollbar: #CBD5E1;
    --color-overlay: rgba(15, 23, 42, .4);

    --color-success-text: #16865A;
    --color-warning-text: #B77900;
    --color-danger-text: #C9363E;
    --color-info-text: #2563EB;
    --color-purple-text: #7C3AED;
    --color-teal-text: #0D9488;
    --color-orange-text: #EA580C;

    --color-success-border: #C9EED8;
    --color-warning-border: #F7E3B2;
    --color-danger-border: #F8D7DB;
    --color-info-border: #C6E0FF;

    --color-neutral-bg: #E5E7EB;
    --color-neutral-border: #D1D5DB;
    --color-neutral-text: #374151;
    --color-neutral-hover: #6B7280;

    /* Grafik */
    --chart-grid: #F1F5F9;
    --chart-area: rgba(23, 105, 224, .08);
    --chart-text: #6B7280;
    --chart-tooltip-bg: #FFFFFF;
    --chart-tooltip-border: #E5EAF0;
    --chart-tooltip-title: #6B7280;
    --chart-tooltip-body: #111827;
    --chart-point-border: #FFFFFF;
}

html[data-theme="dark"] {
    color-scheme: dark;

    /* Primary */
    --color-primary: #3B82F6;
    --color-primary-hover: #60A5FA;
    --color-primary-light: #1B2E4D;
    --color-primary-very-light: #131F33;

    /* Sidebar */
    --color-sidebar-bg: #050C18;
    --color-sidebar-secondary: #0A1526;
    --color-sidebar-hover: #122340;
    --color-sidebar-active: #2563EB;

    /* Text */
    --color-heading: #F1F5F9;
    --color-text: #DCE5F1;
    --color-text-secondary: #9FB0C7;
    --color-muted: #75859C;

    /* Surfaces */
    --color-bg: #0A1020;
    --color-surface: #111B2E;
    --color-border: #22304A;

    /* Status */
    --color-success: #34D399;
    --color-success-light: #10291F;
    --color-success-text: #4ADE80;
    --color-success-border: #1E4D38;

    --color-warning: #FBBF24;
    --color-warning-light: #2C2412;
    --color-warning-text: #FBBF24;
    --color-warning-border: #4D3B14;

    --color-danger: #F87171;
    --color-danger-light: #2C1518;
    --color-danger-text: #F87171;
    --color-danger-border: #4D2429;

    --color-info: #60A5FA;
    --color-info-light: #13253D;
    --color-info-text: #60A5FA;
    --color-info-border: #1E3A5F;

    --color-purple: #A78BFA;
    --color-purple-light: #1F1633;
    --color-purple-text: #C084FC;

    --color-orange: #FB923C;
    --color-orange-light: #2C2113;
    --color-orange-text: #FB923C;

    --color-teal: #2DD4BF;
    --color-teal-light: #0F2A28;
    --color-teal-text: #2DD4BF;

    /* Ek yüzeyler */
    --color-surface-2: #141F33;
    --color-surface-3: #1A2740;
    --color-border-soft: #1E2B42;
    --color-border-strong: #33465F;
    --color-input-border: #2C3D57;
    --color-skeleton: #1B2739;
    --color-scrollbar: #334155;
    --color-overlay: rgba(2, 6, 16, .72);

    /* Nötr (gri) buton */
    --color-neutral-bg: #1E2A3E;
    --color-neutral-border: #2C3D57;
    --color-neutral-text: #C7D2E0;
    --color-neutral-hover: #475569;

    /* Grafik ızgara */
    /* Grafik */
    --chart-grid: #1E2B42;
    --chart-area: rgba(59, 130, 246, .16);
    --chart-text: #9FB0C7;
    --chart-tooltip-bg: #162234;
    --chart-tooltip-border: #22304A;
    --chart-tooltip-title: #9FB0C7;
    --chart-tooltip-body: #F1F5F9;
    --chart-point-border: #111B2E;

    /* Gölgeler */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, .5);
}

/* ---- Dark moda özel ince ayarlar ---- */
html[data-theme="dark"] .modal-backdrop,
html[data-theme="dark"] .modal-overlay { background: var(--color-overlay); }
html[data-theme="dark"] .sidebar-backdrop { background: rgba(2, 6, 16, .6); }
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text);
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
}
html.theme-anim, html.theme-anim * {
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease !important;
}

/* ---- Tema değiştirici buton ---- */
.theme-toggle {
    position: relative;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: 19px; cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.theme-toggle:hover { background: var(--color-bg); color: var(--color-text); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline-block; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- KPI ikon kutusu renk varyantları (tema duyarlı) ---------- */
.kpi-icon-box.kb-blue { background: var(--color-primary-light); color: var(--color-primary); }
.kpi-icon-box.kb-green { background: var(--color-success-light); color: var(--color-success-text); }
.kpi-icon-box.kb-purple { background: var(--color-purple-light); color: var(--color-purple-text); }
.kpi-icon-box.kb-orange { background: var(--color-orange-light); color: var(--color-orange-text); }
.kpi-icon-box.kb-teal { background: var(--color-teal-light); color: var(--color-teal-text); }
.kpi-icon-box.kb-red { background: var(--color-danger-light); color: var(--color-danger-text); }

/* ---------- Tema duyarlı yardımcı sınıflar ---------- */
.panel-box {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}
.panel-box.bordered { border: 1px solid var(--color-border); box-shadow: none; }
.subtle-box {
    background: var(--color-surface-3);
    border-radius: var(--radius-sm);
    padding: 16px;
}
.doc-body { white-space: pre-wrap; line-height: 1.6; color: var(--color-text); }
.meta-label { font-size: .78rem; color: var(--color-text-secondary); text-transform: uppercase; }
.meta-hint { font-size: .8rem; color: var(--color-text-secondary); }
.stat-good { font-size: 1.4rem; font-weight: 700; color: var(--color-success-text); }
.stat-warn { font-size: 1.4rem; font-weight: 700; color: var(--color-warning-text); }
.row-unread { background: var(--color-warning-light); }