/* Light theme overrides — applied when */
[data-theme="light"] {
/* ── BODY / PAGE ── */
--bg: #f4f5f7;
--surface: #ffffff;
--surface2: #f0f1f3;
--border: #dde1e7;
--border2: #ccd1d8;
--text: #0d1117;
--text-muted2: #3a4049;
--muted: #5a6372;
--green: #26b96d;
--red: #e84040;
--blue: #2f7cd8;
--orange: #e09020;
}
[data-theme="light"] body,
[data-theme="light"] html {
background: #f4f5f7;
color: #0d1117;
}
/* ── SCROLLBAR ── */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #ccd1d8; }
/* ── APP GRID ── */
[data-theme="light"] .app { background: #f4f5f7; }
/* ── SIDEBAR ── */
[data-theme="light"] .sidebar {
background: #ffffff;
border-right-color: #dde1e7;
}
[data-theme="light"] .sidebar-logo { border-bottom-color: #dde1e7; }
[data-theme="light"] .logo-text { color: #26b96d; }
[data-theme="light"] .logo-icon { border-color: #26b96d; }
[data-theme="light"] .nav-item { color: #3a4049; }
[data-theme="light"] .nav-item:hover { background: rgba(0,0,0,.05); color: #0d1117; }
[data-theme="light"] .nav-item.active { background: rgba(38,185,109,.12); color: #26b96d; }
[data-theme="light"] .nav-item.active .nav-dot { background: #26b96d; }
[data-theme="light"] .sidebar-user { background: #f0f1f3; }
[data-theme="light"] .user-name { color: #0d1117; }
[data-theme="light"] .user-shift { color: #5a6372; }
[data-theme="light"] .user-avatar { background: rgba(47,124,216,.12); color: #2f7cd8; }
/* ── MAIN / TOPBAR ── */
[data-theme="light"] .main { background: #f4f5f7; }
[data-theme="light"] .topbar,
[data-theme="light"] .page-header {
background: #ffffff;
border-bottom-color: #dde1e7;
}
[data-theme="light"] .topbar-left .topbar-title,
[data-theme="light"] .page-title { color: #0d1117; }
[data-theme="light"] .topbar-left .topbar-meta,
[data-theme="light"] .page-meta { color: #5a6372; }
[data-theme="light"] .topbar-clock,
[data-theme="light"] .page-clock {
background: #f0f1f3;
border-color: #ccd1d8;
color: #5a6372;
}
[data-theme="light"] .topbar-clock span { color: #0d1117; }
[data-theme="light"] .notif-btn {
background: #f0f1f3;
border-color: #ccd1d8;
color: #3a4049;
}
[data-theme="light"] .notif-btn:hover { background: #e4e7ec; }
[data-theme="light"] .notif-dot { border-color: #ffffff; }
[data-theme="light"] .logout-btn { border-color: #ccd1d8; color: #5a6372; }
[data-theme="light"] .logout-btn:hover { color: #e84040; border-color: #e84040; }
/* ── KPI TILES ── */
[data-theme="light"] .kpi-row { border-bottom-color: #dde1e7; }
[data-theme="light"] .kpi-ring-card,
[data-theme="light"] .kpi-tile {
background: #ffffff;
border-color: #dde1e7;
}
[data-theme="light"] .kpi-ring-value,
[data-theme="light"] .kpi-tile-num { color: #0d1117; }
[data-theme="light"] .kpi-ring-label,
[data-theme="light"] .kpi-tile-label,
[data-theme="light"] .kpi-tile-suf { color: #5a6372; }
[data-theme="light"] .kpi-shift-title { color: #0d1117; }
[data-theme="light"] .kpi-shift-row { color: #5a6372; }
[data-theme="light"] .kpi-shift-val { color: #3a4049; }
[data-theme="light"] .shift-bar-wrap { background: #dde1e7; }
[data-theme="light"] .trend-nu { color: #5a6372; }
/* ── LIST / TABLE HEADERS ── */
[data-theme="light"] .list-header { background: #f4f5f7; border-bottom-color: #dde1e7; }
[data-theme="light"] .list-header > div { color: #5a6372; }
[data-theme="light"] .group-label { color: #3a4049; }
[data-theme="light"] .group-label-text { color: #3a4049; }
/* ── LINE ROWS ── */
[data-theme="light"] .line-row {
background: #ffffff;
border-color: #dde1e7;
}
[data-theme="light"] .line-row:hover { background: #f7f8fa; }
[data-theme="light"] .line-id { color: #0d1117; }
[data-theme="light"] .line-product { color: #3a4049; }
[data-theme="light"] .line-sub { color: #5a6372; }
[data-theme="light"] .speed-val,
[data-theme="light"] .pct-val { color: #0d1117; }
[data-theme="light"] .speed-sub,
[data-theme="light"] .ago-text { color: #5a6372; }
[data-theme="light"] .speed-bar-track { background: #e4e7ec; }
/* ── PANEL / RIGHT COLUMN ── */
[data-theme="light"] .panel { background: #ffffff; border-left-color: #dde1e7; }
[data-theme="light"] .panel-section { border-bottom-color: #dde1e7; }
[data-theme="light"] .panel-label { color: #5a6372; }
[data-theme="light"] .panel-value { color: #0d1117; }
[data-theme="light"] .event-item { border-bottom-color: #f0f1f3; }
[data-theme="light"] .event-line { color: #3a4049; }
[data-theme="light"] .event-msg { color: #5a6372; }
[data-theme="light"] .event-time { color: #5a6372; }
/* ── CARDS (generic) ── */
[data-theme="light"] .card,
[data-theme="light"] .stop-card,
[data-theme="light"] .lcard {
background: #ffffff;
border-color: #dde1e7;
}
[data-theme="light"] .stop-line { color: #0d1117; }
/* ── TABS ── */
[data-theme="light"] .tabs { border-bottom-color: #dde1e7; }
[data-theme="light"] .tab { color: #5a6372; }
[data-theme="light"] .tab.active { color: #26b96d; border-bottom-color: #26b96d; }
/* ── MODAL ── */
[data-theme="light"] .modal-bg { background: rgba(0,0,0,.35); }
[data-theme="light"] .modal {
background: #ffffff;
border: 1px solid #dde1e7;
box-shadow: 0 8px 40px rgba(0,0,0,.12);
}
[data-theme="light"] .modal h3 { color: #0d1117; }
[data-theme="light"] .modal-sub { color: #5a6372; }
[data-theme="light"] .field-label { color: #5a6372; }
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="date"] {
background: #f4f5f7;
border-color: #ccd1d8;
color: #0d1117;
}
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] input:focus {
border-color: #26b96d;
outline: none;
}
[data-theme="light"] select option { background: #ffffff; color: #0d1117; }
/* ── BUTTONS ── */
[data-theme="light"] .btn-cancel {
background: #f0f1f3;
color: #3a4049;
border-color: #ccd1d8;
}
[data-theme="light"] .btn-cancel:hover { background: #e4e7ec; }
/* ── ANALYTICS ── */
[data-theme="light"] .chart-container,
[data-theme="light"] .chart-wrap { background: #ffffff; border-color: #dde1e7; }
[data-theme="light"] .stat-card { background: #ffffff; border-color: #dde1e7; }
[data-theme="light"] .stat-label { color: #5a6372; }
[data-theme="light"] .stat-value { color: #0d1117; }
[data-theme="light"] .controls-bar,
[data-theme="light"] .filter-bar { background: #f4f5f7; border-bottom-color: #dde1e7; }
[data-theme="light"] .line-btn { background: #f0f1f3; border-color: #ccd1d8; color: #3a4049; }
[data-theme="light"] .line-btn.active { background: rgba(38,185,109,.12); border-color: #26b96d; color: #26b96d; }
[data-theme="light"] .section-title { color: #0d1117; }
[data-theme="light"] .subtitle { color: #5a6372; }
/* ── REPORTS ── */
[data-theme="light"] .report-table th {
background: #f0f1f3;
color: #5a6372;
border-bottom-color: #dde1e7;
}
[data-theme="light"] .report-table td { border-bottom-color: #f0f1f3; color: #0d1117; }
[data-theme="light"] .report-table tr:hover td { background: #f7f8fa; }
[data-theme="light"] .preview-box { background: #f0f1f3; border-color: #ccd1d8; color: #3a4049; }
/* ── LINES CONFIG ── */
[data-theme="light"] .lcard { background: #ffffff; border-color: #dde1e7; }
[data-theme="light"] .lcard-header { border-bottom-color: #f0f1f3; }
[data-theme="light"] .lcard-title { color: #0d1117; }
[data-theme="light"] .assign-bar { background: #f0f1f3; border-color: #dde1e7; }
[data-theme="light"] .assign-label { color: #5a6372; }
[data-theme="light"] .assign-value { color: #0d1117; }
[data-theme="light"] .swatch-name { color: #5a6372; }
[data-theme="light"] .color-swatch.selected { box-shadow: 0 0 0 2px #26b96d; }
[data-theme="light"] .lcard-check-label { color: #3a4049; }
/* ── SETTINGS ── */
[data-theme="light"] .settings-sidebar { background: #f0f1f3; border-right-color: #dde1e7; }
[data-theme="light"] .settings-tab { color: #5a6372; }
[data-theme="light"] .settings-tab.active { background: #ffffff; color: #0d1117; }
[data-theme="light"] .settings-panel { background: #ffffff; }
[data-theme="light"] .setting-row { border-bottom-color: #f0f1f3; }
[data-theme="light"] .setting-label { color: #0d1117; }
[data-theme="light"] .setting-desc { color: #5a6372; }
[data-theme="light"] .tag { background: #f0f1f3; color: #3a4049; border-color: #ccd1d8; }
[data-theme="light"] #authGate { background: #f4f5f7; }
[data-theme="light"] .auth-box { background: #ffffff; border-color: #dde1e7; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
[data-theme="light"] .auth-title { color: #0d1117; }
[data-theme="light"] .auth-sub { color: #5a6372; }
[data-theme="light"] .auth-input { background: #f4f5f7; border-color: #ccd1d8; color: #0d1117; }
[data-theme="light"] .table-wrap { background: #ffffff; border-color: #dde1e7; }
[data-theme="light"] th { background: #f0f1f3; color: #5a6372; border-bottom-color: #dde1e7; }
[data-theme="light"] td { border-bottom-color: #f0f1f3; color: #0d1117; }
[data-theme="light"] tr:hover td { background: #f7f8fa; }
[data-theme="light"] .section-header { color: #0d1117; border-bottom-color: #dde1e7; }
[data-theme="light"] .subsection { background: #f7f8fa; border-color: #dde1e7; }
[data-theme="light"] .shift-card { background: #f0f1f3; border-color: #dde1e7; }
/* ── OPERATOR ── */
[data-theme="light"] .entry-row { background: #ffffff; border-color: #dde1e7; }
[data-theme="light"] .entry-row:hover { background: #f7f8fa; }
[data-theme="light"] .entry-label { color: #0d1117; }
[data-theme="light"] .entry-sub { color: #5a6372; }
[data-theme="light"] .num-input { background: #f4f5f7; border-color: #ccd1d8; color: #0d1117; }
[data-theme="light"] .num-input:focus { border-color: #26b96d; }
[data-theme="light"] .op-header { background: #ffffff; border-bottom-color: #dde1e7; }
[data-theme="light"] .shift-badge { background: rgba(38,185,109,.12); color: #26b96d; }
[data-theme="light"] .day-badge { background: #f0f1f3; color: #3a4049; }
/* ── BADGE ── */
[data-theme="light"] .badge-count { background: #e84040; }
/* ── DOWNTIME SPECIFIC ── */
[data-theme="light"] .stop-reason { color: #3a4049; }
[data-theme="light"] .stop-time { color: #5a6372; }
[data-theme="light"] .fill-btn { background: #f0f1f3; border-color: #ccd1d8; color: #3a4049; }
[data-theme="light"] .fill-btn:hover { background: #e4e7ec; }