/**
 * ISPARTA — Koyu (varsayılan) + açık tema
 * html[data-theme="light"] ile etkinleşir (theme.js + localStorage)
 */

:root {
    --sticky-head-bg: linear-gradient(180deg, #070b14 0%, #070b14 78%, rgba(7, 11, 20, 0.92) 100%);
    --bg-scene-top: #0a0f1a;
    --bg-scene-bottom: #050810;
    --bg-glow-1: rgba(56, 189, 248, 0.18);
    --bg-glow-2: rgba(167, 139, 250, 0.12);
    --bg-glow-3: rgba(13, 148, 136, 0.15);
    --noise-opacity: 0.04;
    --surface-inset: rgba(0, 0, 0, 0.18);
    --surface-hover: rgba(255, 255, 255, 0.06);
    --surface-hover-strong: rgba(255, 255, 255, 0.09);
    --surface-card: rgba(0, 0, 0, 0.2);
    --border-dashed: rgba(100, 140, 200, 0.15);
    --summary-board-bg: linear-gradient(145deg, rgba(18, 30, 52, 0.75), rgba(8, 14, 28, 0.88));
    --summary-head-bg: linear-gradient(90deg, rgba(56, 189, 248, 0.08), transparent);
    --summary-tile-mobile-bg: rgba(5, 10, 22, 0.42);
    --tank-bg-top: rgba(15, 23, 42, 0.9);
    --tank-bg-bottom: rgba(30, 41, 59, 0.5);
    --tank-water-top: rgba(56, 189, 248, 0.45);
    --tank-water-bottom: rgba(13, 148, 136, 0.75);
    --tank-wave-crest: color-mix(in srgb, var(--tank-water-top) 72%, #ffffff 28%);
    --tank-wave-crest-2: color-mix(in srgb, var(--tank-water-bottom) 55%, var(--tank-water-top) 45%);
    --hero-bg: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(8, 14, 28, 0.6));
    --hero-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    --accent-soft-bg: rgba(56, 189, 248, 0.08);
    --accent-soft-border: rgba(56, 189, 248, 0.28);
    --accent-focus-ring: rgba(56, 189, 248, 0.12);
    --accent-glow-text: 0 0 20px rgba(56, 189, 248, 0.35);
    --level-glow-text: 0 0 24px rgba(56, 189, 248, 0.35);
    --modal-backdrop: rgba(0, 0, 0, 0.65);
    --flash-ok-bg: rgba(52, 211, 153, 0.12);
    --flash-ok-border: rgba(52, 211, 153, 0.5);
    --flash-ok-text: #a7f3d0;
    --flash-err-bg: rgba(248, 113, 113, 0.12);
    --flash-err-border: rgba(248, 113, 113, 0.5);
    --flash-err-text: #fecaca;
    --flash-warn-bg: rgba(251, 191, 36, 0.1);
    --flash-warn-border: rgba(251, 191, 36, 0.45);
    --flash-warn-text: #fde68a;
    --status-pending-bg: rgba(251, 191, 36, 0.15);
    --status-pending-text: #fde68a;
    --status-pending-border: rgba(251, 191, 36, 0.35);
    --status-success-bg: rgba(52, 211, 153, 0.15);
    --status-success-text: #a7f3d0;
    --status-success-border: rgba(52, 211, 153, 0.35);
    --status-err-bg: rgba(248, 113, 113, 0.12);
    --status-err-text: #fecaca;
    --status-err-border: rgba(248, 113, 113, 0.35);
    --status-idle-bg: rgba(148, 163, 184, 0.12);
    --status-idle-text: var(--text-muted);
    --status-stopped: var(--text-muted);
    --pump-well-title: #7dd3fc;
    --pump-chlor-title: #c4b5fd;
    --btn-on-accent: #0f172a;
    --segment-active-bg: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(13, 148, 136, 0.08));
    --dose-panel-bg: linear-gradient(145deg, var(--dose-muted), rgba(18, 28, 48, 0.5));
    --login-brand-bg: linear-gradient(145deg, rgba(56, 189, 248, 0.12), rgba(167, 139, 250, 0.08));
    --header-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    --device-fault-gradient: linear-gradient(90deg, #b91c1c, var(--danger), #f87171);
    --hero-alert-bg: linear-gradient(135deg, rgba(248, 113, 113, 0.1), rgba(8, 14, 28, 0.65));
    --hero-alert-border: rgba(248, 113, 113, 0.45);
    --hero-offline-bg: linear-gradient(135deg, rgba(71, 85, 105, 0.2), rgba(8, 14, 28, 0.65));
    --hero-offline-border: rgba(148, 163, 184, 0.35);
    --tab-link-bg: rgba(255, 255, 255, 0.04);
    --tab-link-hover-bg: rgba(255, 255, 255, 0.07);
    --tab-link-hover-border: rgba(100, 140, 200, 0.25);
    --tab-link-active-border: rgba(56, 189, 248, 0.45);
    --subnav-hover-bg: rgba(255, 255, 255, 0.05);
    --subnav-active-bg: rgba(56, 189, 248, 0.1);
    --subnav-active-border: rgba(56, 189, 248, 0.4);
    --input-focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.15);
    --logo-chip-bg: #ffffff;
    --legend-bg: rgba(0, 0, 0, 0.15);
    --table-hover-bg: rgba(56, 189, 248, 0.06);
    --table-head-bg: rgba(0, 0, 0, 0.2);
    --badge-warning-bg: rgba(251, 191, 36, 0.15);
    --badge-warning-border: rgba(251, 191, 36, 0.4);
    --badge-critical-bg: rgba(248, 113, 113, 0.12);
    --badge-critical-border: rgba(248, 113, 113, 0.35);
    --badge-info-bg: rgba(56, 189, 248, 0.12);
    --badge-info-border: rgba(56, 189, 248, 0.35);
    --badge-comm-bg: rgba(167, 139, 250, 0.12);
    --badge-comm-border: rgba(167, 139, 250, 0.35);
}

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

    /* Modern açık palet — beyaz yüzey, hafif mavi vurgu (gri slate yok) */
    --bg-deep: #f3f8fc;
    --bg-panel: #ffffff;
    --bg-panel-solid: #ffffff;
    --bg-hover: rgba(8, 145, 178, 0.07);
    --border: #e2eaf2;
    --border-glow: rgba(8, 145, 178, 0.45);
    --accent: #0891b2;
    --accent-deep: #0e7490;
    --accent-secondary: #7c3aed;
    --dose-highlight: #c2410c;
    --dose-muted: rgba(251, 146, 60, 0.1);
    --ocean: #0d9488;
    --ocean-glow: rgba(13, 148, 136, 0.2);
    --text: #0c1929;
    --text-muted: #5a6b7d;
    --success: #059669;
    --danger: #e11d48;
    --warning: #d97706;
    --shadow: 0 1px 2px rgba(12, 25, 41, 0.04), 0 8px 28px rgba(12, 25, 41, 0.06);

    --sticky-head-bg: #ffffff;
    --bg-scene-top: #ffffff;
    --bg-scene-bottom: #f0f7fb;
    --bg-glow-1: rgba(8, 145, 178, 0.09);
    --bg-glow-2: rgba(124, 58, 237, 0.05);
    --bg-glow-3: rgba(13, 148, 136, 0.06);
    --noise-opacity: 0.012;
    --surface-inset: #f6fafd;
    --surface-hover: rgba(8, 145, 178, 0.06);
    --surface-hover-strong: rgba(8, 145, 178, 0.1);
    --surface-card: #ffffff;
    --border-dashed: #d8e3ec;
    --summary-board-bg: #ffffff;
    --summary-head-bg: linear-gradient(90deg, rgba(8, 145, 178, 0.06), transparent);
    --summary-tile-mobile-bg: #ffffff;
    --tank-bg-top: #e8f4fa;
    --tank-bg-bottom: #f8fcff;
    --tank-water-top: rgba(8, 145, 178, 0.72);
    --tank-water-bottom: rgba(13, 148, 136, 0.78);
    --tank-wave-crest: color-mix(in srgb, var(--tank-water-top) 70%, #ffffff 30%);
    --tank-wave-crest-2: color-mix(in srgb, var(--tank-water-bottom) 55%, #a5f3fc 45%);
    --hero-bg: linear-gradient(135deg, #f0f9ff 0%, #ffffff 55%, #f8fafc 100%);
    --hero-shadow: 0 4px 20px rgba(12, 25, 41, 0.06);
    --accent-soft-bg: rgba(8, 145, 178, 0.08);
    --accent-soft-border: rgba(8, 145, 178, 0.22);
    --accent-focus-ring: 0 0 0 3px rgba(8, 145, 178, 0.22);
    --accent-glow-text: none;
    --level-glow-text: none;
    --modal-backdrop: rgba(12, 25, 41, 0.35);
    --flash-ok-bg: #ecfdf5;
    --flash-ok-border: #86efac;
    --flash-ok-text: #047857;
    --flash-err-bg: #fff1f2;
    --flash-err-border: #fda4af;
    --flash-err-text: #be123c;
    --flash-warn-bg: #fffbeb;
    --flash-warn-border: #fde68a;
    --flash-warn-text: #b45309;
    --status-pending-bg: #fffbeb;
    --status-pending-text: #b45309;
    --status-pending-border: #fde68a;
    --status-success-bg: #ecfdf5;
    --status-success-text: #047857;
    --status-success-border: #86efac;
    --status-err-bg: #fff1f2;
    --status-err-text: #be123c;
    --status-err-border: #fda4af;
    --status-idle-bg: #f6fafd;
    --status-idle-text: #5a6b7d;
    --status-stopped: #475569;
    --pump-well-title: #0e7490;
    --pump-chlor-title: #6d28d9;
    --btn-on-accent: #ffffff;
    --segment-active-bg: linear-gradient(135deg, #ecfeff 0%, #f0fdfa 100%);
    --dose-panel-bg: linear-gradient(145deg, #fffbeb, #ffffff);
    --login-brand-bg: linear-gradient(145deg, #ecfeff 0%, #f5f3ff 100%);
    --header-shadow: 0 1px 0 #e2eaf2;
    --device-fault-gradient: linear-gradient(90deg, #be123c, var(--danger), #fb7185);
    --hero-alert-bg: linear-gradient(135deg, #fff1f2, #ffffff);
    --hero-alert-border: rgba(225, 29, 72, 0.22);
    --hero-offline-bg: linear-gradient(135deg, #f6fafd, #ffffff);
    --hero-offline-border: var(--border);
    --tab-link-bg: #ffffff;
    --tab-link-hover-bg: rgba(8, 145, 178, 0.06);
    --tab-link-hover-border: #c5d9e8;
    --tab-link-active-border: rgba(8, 145, 178, 0.4);
    --subnav-hover-bg: rgba(8, 145, 178, 0.06);
    --subnav-active-bg: rgba(8, 145, 178, 0.1);
    --subnav-active-border: rgba(8, 145, 178, 0.28);
    --input-focus-ring: 0 0 0 3px rgba(8, 145, 178, 0.22);
    --logo-chip-bg: #ffffff;
    --legend-bg: #f6fafd;
    --table-hover-bg: rgba(8, 145, 178, 0.05);
    --table-head-bg: #f6fafd;
    --badge-warning-bg: #fffbeb;
    --badge-warning-border: #fde68a;
    --badge-critical-bg: #fff1f2;
    --badge-critical-border: #fda4af;
    --badge-info-bg: #ecfeff;
    --badge-info-border: #67e8f9;
    --badge-comm-bg: #f5f3ff;
    --badge-comm-border: #c4b5fd;
}

html[data-theme="light"] body::before {
    background:
        radial-gradient(ellipse 120% 80% at 10% -20%, var(--bg-glow-1), transparent 50%),
        radial-gradient(ellipse 90% 70% at 100% 0%, var(--bg-glow-2), transparent 45%),
        radial-gradient(ellipse 70% 50% at 50% 100%, var(--bg-glow-3), transparent 50%),
        linear-gradient(180deg, var(--bg-scene-top) 0%, var(--bg-deep) 40%, var(--bg-scene-bottom) 100%);
}

html[data-theme="light"] body::after {
    opacity: var(--noise-opacity);
}

/* —— Bileşenler (php-compat + app) —— */
html[data-theme="light"] .detail-page-head {
    background: var(--sticky-head-bg);
    box-shadow: var(--header-shadow);
}

html[data-theme="light"] .settings-subnav__link {
    background: transparent;
}

html[data-theme="light"] .settings-subnav__link:hover {
    background: var(--surface-hover);
}

html[data-theme="light"] .settings-subnav__link.is-active {
    background: var(--accent-soft-bg);
}

html[data-theme="light"] .ozet-connection--ok {
    background: var(--status-success-bg);
    color: var(--status-success-text);
    border-color: var(--status-success-border);
}

html[data-theme="light"] .ozet-connection--err {
    background: var(--status-err-bg);
    color: var(--status-err-text);
    border-color: var(--status-err-border);
}

html[data-theme="light"] .summary-unified {
    background: var(--summary-board-bg);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

html[data-theme="light"] .summary-unified-head {
    background: var(--summary-head-bg);
    border-bottom-color: var(--border);
}

html[data-theme="light"] .summary-tile {
    border-right-color: var(--border);
    background: transparent;
}

@media (max-width: 1020px) {
    html[data-theme="light"] .summary-tile {
        background: var(--summary-tile-mobile-bg);
        border: 1px solid var(--border);
        border-radius: 0;
        box-shadow: none;
    }
}

html[data-theme="light"] .ozet-depot-mini,
html[data-theme="light"] .cal-depot-card,
html[data-theme="light"] .param-card,
html[data-theme="light"] .panel-box,
html[data-theme="light"] .device-card,
html[data-theme="light"] .depot-card {
    background: var(--bg-panel-solid);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

html[data-theme="light"] .device-card:hover {
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .level-bar-wrap {
    background: #eef6fb;
    border: 1px solid var(--border);
}

html[data-theme="light"] .tank-visual {
    background: linear-gradient(180deg, var(--tank-bg-top), var(--tank-bg-bottom));
    border-color: var(--border);
}

html[data-theme="light"] .tank-water {
    background: linear-gradient(180deg, var(--tank-water-top), var(--tank-water-bottom));
}

html[data-theme="light"] .depot-metric,
html[data-theme="light"] .cal-depot-card__values div {
    background: var(--bg-panel-solid);
    border-color: var(--border);
    border-radius: 0;
    box-shadow: none;
}

html[data-theme="light"] .pump-relay-block__title--well,
html[data-theme="light"] .pump-relay-block--well .pump-relay-block__title {
    color: var(--pump-well-title);
}

html[data-theme="light"] .pump-relay-block--chlor .pump-relay-block__title {
    color: var(--pump-chlor-title);
}

html[data-theme="light"] .pump-relay-block--well .pump-relay-block__title i {
    color: var(--pump-well-title);
}

html[data-theme="light"] .pump-relay-block--chlor .pump-relay-block__title i {
    color: var(--pump-chlor-title);
}

html[data-theme="light"] .cal-status--idle {
    background: var(--status-idle-bg);
    color: var(--status-idle-text);
}

html[data-theme="light"] .cal-status--pending {
    background: var(--status-pending-bg);
    color: var(--status-pending-text);
    border-color: var(--status-pending-border);
}

html[data-theme="light"] .cal-status--success {
    background: var(--status-success-bg);
    color: var(--status-success-text);
    border-color: var(--status-success-border);
}

html[data-theme="light"] .cal-status--err {
    background: var(--status-err-bg);
    color: var(--status-err-text);
    border-color: var(--status-err-border);
}

html[data-theme="light"] .personnel-modal-backdrop {
    background: var(--modal-backdrop);
}

html[data-theme="light"] .personnel-modal-box,
html[data-theme="light"] .param-modal-box {
    background: var(--bg-panel-solid);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

html[data-theme="light"] .param-segment__item span,
html[data-theme="light"] .detail-tabs a.detail-tab-link {
    background: var(--bg-panel-solid);
    border: 1.5px solid var(--border);
    color: var(--text);
    font-weight: 700;
}

html[data-theme="light"] .settings-subnav__link {
    background: transparent;
}

html[data-theme="light"] .param-segment__item input:checked + span,
html[data-theme="light"] .detail-tabs a.detail-tab-link.is-active {
    background: var(--segment-active-bg);
    font-weight: 800;
    border-color: var(--tab-link-active-border);
}

html[data-theme="light"] .btn-cal,
html[data-theme="light"] .btn-back,
html[data-theme="light"] .ozet-quick-nav__item {
    background: var(--bg-panel-solid);
}

html[data-theme="light"] .btn-cal:hover:not(:disabled),
html[data-theme="light"] .ozet-quick-nav__item:hover {
    background: var(--accent-soft-bg);
}

html[data-theme="light"] .notif-dropdown {
    background: var(--bg-panel-solid);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

html[data-theme="light"] .notif-item.unread {
    background: var(--accent-soft-bg);
}

html[data-theme="light"] table td {
    border-color: var(--border);
}

html[data-theme="light"] .read-only-hint {
    background: var(--surface-inset);
    border-color: var(--border);
}

html[data-theme="light"] .login-card {
    background: var(--bg-panel-solid);
    box-shadow: var(--shadow);
}

html[data-theme="light"] .login-card-brand {
    background: var(--login-brand-bg);
    border-right-color: var(--border);
}

html[data-theme="light"] .login-card-form input {
    background: var(--bg-panel-solid);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="light"] .login-error {
    background: var(--flash-err-bg);
    color: var(--flash-err-text);
    border-color: var(--flash-err-border);
}

html[data-theme="light"] .device-card.device-card--fault::before {
    background: var(--device-fault-gradient);
}

html[data-theme="light"] .isparta-legend {
    background: var(--legend-bg);
}

html[data-theme="light"] tbody tr:hover {
    background: var(--table-hover-bg);
}

html[data-theme="light"] table th {
    background: var(--table-head-bg);
    color: var(--text-muted);
}

html[data-theme="light"] .badge.warning {
    background: var(--badge-warning-bg);
    border-color: var(--badge-warning-border);
}

html[data-theme="light"] .badge.critical {
    background: var(--badge-critical-bg);
    border-color: var(--badge-critical-border);
}

html[data-theme="light"] .badge.info {
    background: var(--badge-info-bg);
    border-color: var(--badge-info-border);
}

html[data-theme="light"] .badge.comm {
    background: var(--badge-comm-bg);
    border-color: var(--badge-comm-border);
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
    box-shadow: var(--input-focus-ring);
}

html[data-theme="light"] .login-card-brand img,
html[data-theme="light"] .login-logo {
    background: var(--logo-chip-bg);
}

html[data-theme="light"] .login-card-form input:focus {
    box-shadow: var(--input-focus-ring);
}

html[data-theme="light"] .login-demo {
    color: var(--text-muted);
}

html[data-theme="light"] .login-demo code {
    background: var(--surface-inset);
    color: var(--text);
}

html[data-theme="light"] .header-user-pill {
    background: var(--bg-panel-solid);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="light"] .btn-logout-mini {
    background: var(--bg-panel-solid);
    border-color: var(--border);
    color: var(--text-muted);
}

html[data-theme="light"] .btn-logout-mini:hover {
    color: var(--danger);
    border-color: var(--status-err-border);
    background: var(--status-err-bg);
}

html[data-theme="light"] .site-header {
    background: var(--bg-panel-solid);
    box-shadow: var(--header-shadow);
    border-bottom: 1px solid var(--border);
}

html[data-theme="light"] .read-only-hint {
    background: #f6fafd;
    border-color: var(--border);
}

html[data-theme="light"] .login-demo code {
    background: #f6fafd;
    border: 1px solid var(--border);
}

html[data-theme="light"] .ozet-quick-nav__item {
    border: 1px solid var(--border);
}

html[data-theme="light"] .theme-toggle {
    background: var(--bg-panel-solid);
}

/* Tema seçici */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-panel-solid);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.theme-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft-bg);
}

.theme-toggle__icon {
    font-size: 1rem;
    line-height: 1;
}

html:not([data-theme="light"]) .theme-toggle__icon--light {
    display: none;
}

html[data-theme="light"] .theme-toggle__icon--dark {
    display: none;
}

.login-theme-wrap {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100;
}