/* ============================================================
   Kira Takip Sistemi — Tema (Theme) Desteği
   Light Mode ve Dark Mode CSS değişkenleri
   ============================================================ */

:root {
    --c-bg: #f8fafc;          /* slate-50 */
    --c-surface: #ffffff;
    --c-surface-alt: #f1f5f9;  /* slate-100 */
    --c-border: #e2e8f0;       /* slate-200 */
    --c-text: #0f172a;         /* slate-900 */
    --c-text-muted: #64748b;   /* slate-500 */
    --c-heading: #1e293b;      /* slate-800 */

    /* Gradient ana renk (navbar / header) */
    --c-grad-from: #312e81;    /* indigo-900 */
    --c-grad-via: #1e293b;     /* slate-800 */
    --c-grad-to: #4a1d96;      /* purple-900 */

    /* Kart & tablo alternasyonu */
    --c-row-hover: #f1f5f9;
    --c-nav-text: rgba(255,255,255,0.9);
    --c-nav-link: rgba(203,213,225,1); /* slate-300 */
    --c-nav-link-active-bg: rgba(255,255,255,0.15);
    --c-nav-bg: rgba(30, 41, 59, 0.88);  /* glass-nav */
}

/* ---------- DARK MODE ---------- */
html[data-theme="dark"] {
    --c-bg: #0f172a;           /* slate-950 */
    --c-surface: #1e293b;      /* slate-800 */
    --c-surface-alt: #1e293b;
    --c-border: #334155;       /* slate-700 */
    --c-text: #f1f5f9;         /* slate-100 */
    --c-text-muted: #94a3b8;   /* slate-400 */
    --c-heading: #f8fafc;

    --c-grad-from: #0f172a;
    --c-grad-via: #1e1b4b;
    --c-grad-to: #1e0548;

    --c-row-hover: #1e293b;
    --c-nav-text: #e2e8f0;
    --c-nav-link: #cbd5e1;
    --c-nav-link-active-bg: rgba(99,102,241,0.2);
    --c-nav-bg: rgba(15, 23, 42, 0.92);
}

/* ---------- Tema Toggle İkon Görünürlüğü ---------- */
/* Light modda: Ay ikonu görünür (koyu temaya geç), Güneş gizli */
.icon-light { display: none !important; }
.icon-dark  { display: inline-block !important; }
/* Dark modda: Güneş görünür (açık temaya geç), Ay gizli */
html[data-theme="dark"] .icon-light { display: inline-block !important; }
html[data-theme="dark"] .icon-dark  { display: none !important; }

/* ---------- Bağlam uygulamaları ---------- */
body {
    background-color: var(--c-bg);
    color: var(--c-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Tablolar */
.themed-table thead {
    background-color: var(--c-surface-alt) !important;
    color: var(--c-text-muted) !important;
    border-color: var(--c-border) !important;
}
.themed-table tbody tr {
    border-color: var(--c-border) !important;
}
.themed-table tbody tr:hover {
    background-color: var(--c-row-hover) !important;
}

/* Kartlar */
.themed-card {
    background-color: var(--c-surface) !important;
    border-color: var(--c-border) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Glass Nav */
.glass-nav {
    background: var(--c-nav-bg) !important;
}

/* Gradient arka plan kutusu */
.page-header-grad {
    background: linear-gradient(135deg, var(--c-grad-from) 0%, var(--c-grad-via) 50%, var(--c-grad-to) 100%);
}

/* Filtre / seçim alanları */
html[data-theme="dark"] select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] textarea {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .bg-white {
    background-color: var(--c-surface) !important;
}
html[data-theme="dark"] .bg-slate-50 {
    background-color: var(--c-bg) !important;
}
html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .bg-slate-50\/20,
html[data-theme="dark"] .bg-white\/80 {
    background-color: var(--c-surface-alt) !important;
}
html[data-theme="dark"] .text-slate-900 { color: #f1f5f9 !important; }
html[data-theme="dark"] .text-slate-800 { color: #e2e8f0 !important; }
html[data-theme="dark"] .text-slate-700 { color: #cbd5e1 !important; }
html[data-theme="dark"] .text-slate-600 { color: #94a3b8 !important; }
html[data-theme="dark"] .text-slate-500 { color: #64748b !important; }
html[data-theme="dark"] .border-slate-200 { border-color: #334155 !important; }
html[data-theme="dark"] .border-slate-100 { border-color: #1e293b !important; }
html[data-theme="dark"] .divide-slate-200 > * + * { border-color: #334155 !important; }
html[data-theme="dark"] .divide-slate-100 > * + * { border-color: #1e293b !important; }