/* Light theme overrides. Applies only when html[data-theme="light"] is set. */

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

    --bg-0: #fbf7ff;
    --bg-1: #f5efff;
    --bg-2: #eee6fb;
    --bg-3: #e7dcf6;
    --bg-4: #ded2ef;

    --surface: rgba(253, 248, 255, 0.76);
    --surface-2: rgba(250, 244, 255, 0.86);
    --surface-3: rgba(247, 240, 252, 0.94);

    --border: rgba(91, 58, 166, 0.20);
    --border-strong: rgba(91, 58, 166, 0.32);

    --text-main: #221b46;
    --text-soft: #3e366b;
    --text-muted: #625990;
    --text-dim: #8178ad;

    --shadow-sm: 0 10px 26px rgba(71, 44, 132, 0.12);
    --shadow-md: 0 18px 46px rgba(71, 44, 132, 0.16);
    --shadow-lg: 0 24px 66px rgba(71, 44, 132, 0.20);
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 10% 14%, rgba(139, 92, 246, 0.18), transparent 26%),
        radial-gradient(circle at 84% 16%, rgba(168, 85, 247, 0.14), transparent 24%),
        radial-gradient(circle at 76% 84%, rgba(6, 182, 212, 0.10), transparent 20%),
        radial-gradient(circle at 20% 86%, rgba(244, 114, 182, 0.10), transparent 18%),
        linear-gradient(145deg, #fffafc 0%, #f8f1ff 30%, #f1e9fb 58%, #fff9fb 100%);
}

html[data-theme="light"] body::before {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0.10) 35%, transparent 72%);
}

html[data-theme="light"] body::after {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.16) 0%, rgba(6, 182, 212, 0.10) 28%, transparent 72%);
}

html[data-theme="light"] .box,
html[data-theme="light"] article.box,
html[data-theme="light"] section.box,
html[data-theme="light"] .glass,
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .dash-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .flow-card,
html[data-theme="light"] .company-management-card,
html[data-theme="light"] .company-entity-card,
html[data-theme="light"] .company-line-card,
html[data-theme="light"] .traffic-person-summary-card,
html[data-theme="light"] .map-card-note,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .navbar,
html[data-theme="light"] .modal,
html[data-theme="light"] .form-shell,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] #header {
    background: linear-gradient(180deg, rgba(253, 248, 255, 0.90), rgba(247, 240, 252, 0.72));
    border-color: var(--border);
}

html[data-theme="light"] #header::before,
html[data-theme="light"] .box::before,
html[data-theme="light"] article.box::before,
html[data-theme="light"] section.box::before,
html[data-theme="light"] .card::before,
html[data-theme="light"] .sidebar::before,
html[data-theme="light"] .stat-card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 26%, transparent 74%, rgba(139, 92, 246, 0.08));
}

html[data-theme="light"] #header .inner {
    background: transparent;
    border: 0;
    box-shadow: none;
}

html[data-theme="light"] body.page-scrolled-content #nav ul,
html[data-theme="light"] body.compact-nav #nav.nav-open ul,
html[data-theme="light"] body[data-nav-stage="icon"] #nav.nav-open ul,
html[data-theme="light"] body[data-nav-stage="sidebar"] #nav ul,
html[data-theme="light"] body.compact-actions .top-actions.top-actions--open,
html[data-theme="light"] .dropdown-menu {
    background: linear-gradient(180deg, rgba(253, 248, 255, 0.96), rgba(246, 238, 252, 0.94));
    border-color: rgba(91, 58, 166, 0.22);
    box-shadow: 0 18px 46px rgba(71, 44, 132, 0.16);
}

html[data-theme="light"] #nav ul li a,
html[data-theme="light"] .dropdown-item,
html[data-theme="light"] .sidebar-link,
html[data-theme="light"] .top-actions .button {
    color: var(--text-soft);
}

html[data-theme="light"] #nav ul li a:hover,
html[data-theme="light"] #nav ul li.current_page_item a,
html[data-theme="light"] .dropdown-item:hover,
html[data-theme="light"] .sidebar-link:hover,
html[data-theme="light"] .sidebar-link.active {
    color: var(--text-main);
    background: rgba(139, 92, 246, 0.10);
    border-color: rgba(139, 92, 246, 0.18);
}

html[data-theme="light"] .input,
html[data-theme="light"] .select,
html[data-theme="light"] .textarea,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    border: 1px solid rgba(91, 58, 166, 0.18);
    color: var(--text-main);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.78));
}

html[data-theme="light"] .input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] input::placeholder {
    color: #938ab8;
}

html[data-theme="light"] .table thead th {
    background: rgba(255, 255, 255, 0.85);
    color: var(--text-soft);
    border-bottom: 1px solid rgba(91, 58, 166, 0.14);
}

html[data-theme="light"] .table tbody td {
    background: rgba(255, 255, 255, 0.62);
    color: var(--text-soft);
    border-bottom: 1px solid rgba(91, 58, 166, 0.10);
}

html[data-theme="light"] p,
html[data-theme="light"] span,
html[data-theme="light"] label,
html[data-theme="light"] td,
html[data-theme="light"] th,
html[data-theme="light"] .field-note,
html[data-theme="light"] .page-subtitle,
html[data-theme="light"] .stat-label,
html[data-theme="light"] .stat-note,
html[data-theme="light"] .card p,
html[data-theme="light"] .company-management-card p,
html[data-theme="light"] .company-entity-card p,
html[data-theme="light"] .map-card-note {
    color: var(--text-soft);
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .card-title,
html[data-theme="light"] .stat-value {
    color: var(--text-main);
}

html[data-theme="light"] .table tbody tr:hover td {
    background: rgba(139, 92, 246, 0.08);
}

html[data-theme="light"] .button.alt,
html[data-theme="light"] a.button.alt,
html[data-theme="light"] button.button.alt,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .flow-period-item,
html[data-theme="light"] .flow-day-tab,
html[data-theme="light"] .flow-season-chip,
html[data-theme="light"] .badge,
html[data-theme="light"] .chip,
html[data-theme="light"] .status-pill {
    background: rgba(250, 244, 255, 0.78);
    border-color: rgba(91, 58, 166, 0.18);
    color: var(--text-main);
}

html[data-theme="light"] .flow-chart-wrap {
    background: rgba(248, 241, 255, 0.72);
    border-color: rgba(91, 58, 166, 0.16);
}

html[data-theme="light"] .flow-base-toggle {
    color: #285f46;
    background: rgba(16, 185, 129, 0.11);
    border-color: rgba(16, 185, 129, 0.25);
}

html[data-theme="light"] .auth-alert {
    border-color: rgba(251, 113, 133, 0.30);
    background: rgba(251, 113, 133, 0.12);
    color: #9f2846;
}

html[data-theme="light"] .auth-alert--success,
html[data-theme="light"] .status-chip--ok {
    border-color: rgba(16, 185, 129, 0.34);
    background: rgba(16, 185, 129, 0.14);
    color: #0b684a;
}

html[data-theme="light"] .traffic-status--ready {
    border-color: rgba(22, 101, 52, 0.24);
    background: rgba(220, 252, 231, 0.82);
    color: #166534;
}

html[data-theme="light"] .traffic-status--pending {
    border-color: rgba(146, 64, 14, 0.24);
    background: rgba(254, 243, 199, 0.86);
    color: #92400e;
}

html[data-theme="light"] .traffic-region,
html[data-theme="light"] .traffic-kpi,
html[data-theme="light"] .traffic-stat-card {
    border-color: rgba(91, 58, 166, 0.16);
    background: rgba(253, 248, 255, 0.68);
}

html[data-theme="light"] .traffic-midnight-toggle,
html[data-theme="light"] .traffic-point-window-field,
html[data-theme="light"] .traffic-work-metrics,
html[data-theme="light"] .traffic-route-wheel__readout,
html[data-theme="light"] .traffic-route-wheel__viewport,
html[data-theme="light"] .traffic-zone-timeline__plot {
    border-color: rgba(91, 58, 166, 0.16);
    background: rgba(250, 244, 255, 0.66);
}

html[data-theme="light"] .traffic-work-metrics span {
    background: rgba(255, 255, 255, .52);
}

html[data-theme="light"] .traffic-work-metrics .metric-danger {
    background: rgba(239, 68, 68, .13);
    color: #991b1b;
}

html[data-theme="light"] .traffic-work-metrics .metric-orange {
    background: rgba(249, 115, 22, .14);
    color: #9a3412;
}

html[data-theme="light"] .traffic-work-metrics .metric-yellow,
html[data-theme="light"] .traffic-work-metrics .metric-warning {
    background: rgba(234, 179, 8, .18);
    color: #854d0e;
}

html[data-theme="light"] .traffic-work-metrics .metric-good {
    background: rgba(34, 197, 94, .13);
    color: #166534;
}

html[data-theme="light"] .traffic-work-metrics .metric-cyan {
    background: rgba(6, 182, 212, .14);
    color: #155e75;
}

html[data-theme="light"] .traffic-work-metrics .metric-purple {
    background: rgba(139, 92, 246, .14);
    color: #5b21b6;
}

html[data-theme="light"] .traffic-work-metrics .metric-magenta {
    background: rgba(252, 5, 240, .12);
    color: #9d0a89;
}

html[data-theme="light"] .traffic-chart-help {
    border-color: rgba(91, 58, 166, .20);
    background: rgba(250, 244, 255, .82);
    color: var(--text-main);
}

html[data-theme="light"] .traffic-chart-help-popover {
    border-color: rgba(91, 58, 166, .18);
    background: rgba(255, 251, 255, .98);
    color: var(--text-soft);
    box-shadow: 0 14px 36px rgba(91, 58, 166, .14);
}

html[data-theme="light"] .traffic-schedule-badge {
    border-color: rgba(91, 58, 166, .18);
    background: rgba(250, 244, 255, .72);
    color: var(--text-soft);
}

html[data-theme="light"] .traffic-schedule-popover {
    border-color: rgba(91, 58, 166, .18);
    background: rgba(255, 251, 255, .98);
    color: var(--text-soft);
    box-shadow: 0 18px 44px rgba(91, 58, 166, .18);
}

html[data-theme="light"] .traffic-schedule-popover div {
    background: rgba(91, 58, 166, .055);
}

html[data-theme="light"] .traffic-route-wheel__viewport {
    background:
        radial-gradient(circle at 50% -35%, rgba(139, 92, 246, .20), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(250, 244, 255, .74));
}

html[data-theme="light"] .traffic-route-wheel__tick::before {
    background: rgba(124, 58, 237, .34);
}

html[data-theme="light"] .traffic-zone-hour {
    background: rgba(91, 58, 166, .10);
}

html[data-theme="light"] .traffic-zone-timeline__scroller {
    scrollbar-color: rgba(124, 58, 237, .42) rgba(91, 58, 166, .08);
}

html[data-theme="light"] .traffic-zone-timeline__scroller::-webkit-scrollbar-track {
    background: rgba(91, 58, 166, .08);
}

html[data-theme="light"] .traffic-zone-timeline__scroller::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(124, 58, 237, .50), rgba(14, 165, 233, .34));
}

html[data-theme="light"] .traffic-map-fallback {
    border-color: rgba(91, 58, 166, 0.20);
    background: rgba(250, 244, 255, 0.72);
    color: var(--text-soft);
}

html[data-theme="light"] .auth-alert--danger,
html[data-theme="light"] .status-chip--off,
html[data-theme="light"] .btn-danger-outline {
    border-color: rgba(251, 113, 133, 0.34);
    background: rgba(251, 113, 133, 0.14);
    color: #9f2846;
}

html[data-theme="light"] .geo-btn {
    border-color: rgba(91, 58, 166, 0.18);
    background: rgba(255, 255, 255, 0.78);
    color: var(--text-main);
}

html[data-theme="light"] .geo-btn.active {
    outline: 2px solid rgba(139, 92, 246, .45);
    background: rgba(139, 92, 246, .16);
}

/* Native select dropdowns need explicit option colors in both themes. */
html[data-theme="dark"] select,
html[data-theme="dark"] .select {
    color-scheme: dark;
    color: #f8f7ff;
    background-color: #171225;
    border-color: rgba(196, 181, 253, .24);
}

html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
    color: #f8f7ff;
    background-color: #171225;
}

html[data-theme="dark"] select option:checked {
    color: #ffffff;
    background-color: #6d28d9;
}

html[data-theme="dark"] select option:disabled {
    color: #9d93bd;
    background-color: #171225;
}

html[data-theme="light"] select,
html[data-theme="light"] .select {
    color-scheme: light;
    color: var(--text-main);
    background-color: #fffaff;
    border-color: rgba(91, 58, 166, .22);
}

html[data-theme="light"] select option,
html[data-theme="light"] select optgroup {
    color: #221b46;
    background-color: #fffaff;
}

html[data-theme="light"] select option:checked {
    color: #ffffff;
    background-color: #7c3aed;
}

html[data-theme="light"] select option:disabled {
    color: #938ab8;
    background-color: #f6efff;
}