/* Zentrack — system theme | */
/* A tiny inline script in reads localStorage before first paint. */
:root,
[data-theme="dark"] {
--bg-primary: #0a0f1a;
--bg-secondary: #111827;
--bg-tertiary: #1a2236;
--bg-card: #151d30;
--text-primary: #e2e8f0;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--accent: #00b4d8;
--accent-light: rgba(0,180,216,0.15);
--accent-glow: rgba(0,180,216,0.4);
--border: #1e293b;
--border-light: #263348;
--border-dark: #344258;
--success: #10b981; --success-bg: rgba(16,185,129,0.15);
--warning: #f59e0b; --warning-bg: rgba(245,158,11,0.15);
--danger: #ef4444; --danger-bg: rgba(239,68,68,0.15);
--info: #0ea5e9; --info-bg: rgba(14,165,233,0.15);
--purple: #a78bfa; --purple-bg: rgba(167,139,250,0.15);
--flagged: #a78bfa; --flagged-bg: rgba(167,139,250,0.15);
--selected-bg: #0f2740;
--shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
--shadow-md: 0 4px 16px rgba(0,0,0,0.5);
--shadow-lg: 0 24px 60px rgba(0,0,0,0.5);
}
[data-theme="light"] {
--bg-primary: #f0f4f8;
--bg-secondary: #ffffff;
--bg-tertiary: #f8fafc;
--bg-card: #ffffff;
--text-primary: #1e293b;
--text-secondary: #374151;
--text-muted: #64748b;
--accent: #0284c7;
--accent-light: #e0f2fe;
--accent-glow: rgba(2,132,199,0.2);
--border: #e2e8f0;
--border-light: #f1f5f9;
--border-dark: #cbd5e1;
--success: #059669; --success-bg: #d1fae5;
--warning: #d97706; --warning-bg: #fef3c7;
--danger: #dc2626; --danger-bg: #fee2e2;
--info: #0891b2; --info-bg: #cffafe;
--purple: #7c3aed; --purple-bg: #ede9fe;
--flagged: #7c3aed; --flagged-bg: #ede9fe;
--selected-bg: #e0f2fe;
--shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
--shadow-md: 0 4px 16px rgba(0,0,0,0.10);
--shadow-lg: 0 24px 60px rgba(0,0,0,0.12);
}
/* ── Theme toggle button (universal ID-based styles) ── */
/* Hidden 2026-06-30 (Edison): dark/light switch retired for now — the default theme is used
everywhere. To bring the toggle back, remove this single rule. */
#zt-theme-btn {
display: none !important;
}
#zt-theme-btn {
background: var(--bg-tertiary);
border: 1px solid var(--border);
color: var(--text-secondary);
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
padding: 0;
}
#zt-theme-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-light);
}
/* Float variant for pages without a top nav (login, register) */
.zt-float-btn {
position: fixed;
top: 14px;
right: 14px;
z-index: 200;
}
/* ── Light-mode overrides for index.php dark hardcoded values ── */
[data-theme="light"] #header {
background: var(--bg-secondary);
border-bottom-color: var(--border);
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
[data-theme="light"] #sidebar {
background: var(--bg-secondary);
border-right-color: var(--border);
}
[data-theme="light"] #bottom-panel {
background: var(--bg-secondary);
border-top-color: var(--border);
}
[data-theme="light"] .vessel-card {
background: var(--bg-card);
border-color: var(--border);
}
[data-theme="light"] .vessel-card:hover {
background: var(--bg-tertiary);
border-color: var(--border-dark);
}
[data-theme="light"] .vessel-card.selected {
background: #e0f2fe !important;
border-color: var(--accent) !important;
box-shadow: 0 0 12px rgba(2,132,199,0.25);
}
[data-theme="light"] .voyage-item {
background: var(--bg-card);
border-color: var(--border);
}
[data-theme="light"] .voyage-item.selected {
background: #e0f2fe !important;
border-color: var(--accent) !important;
box-shadow: 0 0 12px rgba(2,132,199,0.2);
}
[data-theme="light"] #map-container {
background: var(--bg-tertiary);
}
[data-theme="light"] .vessel-tooltip {
background: rgba(255,255,255,0.97) !important;
color: var(--text-primary) !important;
border-color: var(--border) !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}
[data-theme="light"] .vessel-tooltip::before {
border-top-color: var(--border) !important;
}
[data-theme="light"] .leaflet-popup-content-wrapper {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border-color: var(--border) !important;
}
[data-theme="light"] .leaflet-popup-tip {
background: var(--bg-secondary) !important;
}
[data-theme="light"] .popup-row strong { color: var(--text-primary); }
[data-theme="light"] .overlay-panel {
background: var(--bg-secondary);
border-color: var(--border);
}
[data-theme="light"] .zone-card {
background: var(--bg-card);
border-color: var(--border);
}
[data-theme="light"] #alerts-dropdown {
background: var(--bg-secondary);
border-color: var(--border);
}
/* ── Light-mode fixes for login / register ── */
[data-theme="light"] .card .btn {
color: #ffffff;
}
[data-theme="light"] .card .btn:hover {
background: #0369a1;
}