/* Light theme */

.theme-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.62rem;
  min-width: 10rem;
  min-height: 2.65rem;
  padding: 0.48rem 0.8rem;
}

.theme-mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--apex-muted);
  opacity: 0.58;
  transform: scale(0.9);
  transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.theme-menu-item[aria-checked="false"] .theme-icon-moon,
.theme-menu-item[aria-checked="true"] .theme-icon-sun {
  color: var(--apex-primary);
  opacity: 1;
  transform: scale(1);
}

.theme-switch-visual {
  position: relative;
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 1.2rem;
  border: 1px solid var(--apex-border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.theme-switch-visual span {
  position: absolute;
  top: 50%;
  left: 0.15rem;
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50%;
  background: var(--apex-muted-strong);
  transform: translateY(-50%);
  transition: left 0.18s ease, background-color 0.18s ease;
}

.theme-menu-item:focus-visible {
  outline: 2px solid var(--apex-primary);
  outline-offset: -2px;
}

html[data-theme="light"] {
  color-scheme: light;
  --apex-primary: #0B6848;
  --apex-primary-strong: #07563B;
  --apex-primary-deep: #125F46;
  --apex-primary-deeper: #0A4532;
  --apex-on-accent: #FFFFFF;
  --apex-on-primary: #FFFFFF;
  --apex-primary-rgb: 11, 104, 72;
  --apex-primary-line: rgba(11, 104, 72, 0.28);
  --apex-primary-gradient: linear-gradient(180deg, #167C58, #0B6848);
  --apex-primary-glow: 0 0 0 1px rgba(11, 104, 72, 0.28), 0 8px 22px rgba(11, 104, 72, 0.16);
  --apex-brunswick-rgb: 29, 103, 74;
  --apex-moss-rgb: 14, 66, 40;
  --apex-gold: #9A7100;
  --apex-gold-strong: #7A5900;
  --apex-gold-rgb: 154, 113, 0;
  --apex-surface: #F3F6F3;
  --apex-panel: #FFFFFF;
  --apex-card: #FFFFFF;
  --apex-card-raised: #F8FAF8;
  --apex-elevate: rgba(255, 255, 255, 0.92);
  --apex-muted: #586A5E;
  --apex-muted-strong: #35483B;
  --apex-text: #18251D;
  --apex-heading: #09170F;
  --apex-border: rgba(40, 68, 51, 0.18);
  --apex-border-strong: rgba(40, 68, 51, 0.30);
  --apex-focus-ring: rgba(11, 104, 72, 0.22);
  --apex-success: #187A3D;
  --apex-success-strong: #126330;
  --apex-success-deep: #126330;
  --apex-success-rgb: 24, 122, 61;
  --apex-danger: #B42332;
  --apex-warning: #8A6500;
  --apex-shadow: 0 1px 2px rgba(26, 45, 33, 0.08), 0 10px 30px rgba(26, 45, 33, 0.09);
  --bs-body-bg: var(--apex-surface);
  --bs-body-color: var(--apex-text);
  --bs-card-bg: var(--apex-card);
  --bs-card-color: var(--apex-text);
  --bs-card-border-color: var(--apex-border);
  --bs-heading-color: var(--apex-heading);
  --bs-border-color: var(--apex-border);
  --bs-table-color: var(--apex-text);
  --bs-table-bg: transparent;
  --bs-input-bg: #FFFFFF;
  --bs-input-color: var(--apex-text);
  --bs-input-border-color: var(--apex-border);
  --bs-nav-link-color: var(--apex-muted);
  --bs-nav-link-hover-color: var(--apex-heading);
  --bs-dropdown-bg: var(--apex-card);
  --bs-dropdown-color: var(--apex-text);
}

html[data-theme="light"] body::before {
  background:
    radial-gradient(1050px 580px at 84% -10%, rgba(var(--apex-brunswick-rgb), 0.10), transparent 62%),
    radial-gradient(820px 520px at -8% 108%, rgba(var(--apex-moss-rgb), 0.08), transparent 58%);
}

html[data-theme="light"] .theme-switch-visual {
  border-color: var(--apex-primary);
  background: rgba(var(--apex-primary-rgb), 0.16);
}
html[data-theme="light"] .theme-switch-visual span {
  left: 1.15rem;
  background: var(--apex-primary);
}

/* Global chrome, navigation and shared Bootstrap components. */
html[data-theme="light"] .glass-nav {
  background: rgba(255, 255, 255, 0.94);
}
html[data-theme="light"] .navbar-brand,
html[data-theme="light"] .navbar .nav-link:hover,
html[data-theme="light"] .navbar .nav-link:focus,
html[data-theme="light"] .navbar .nav-link.active {
  color: var(--apex-heading);
}
html[data-theme="light"] .navbar .nav-link:hover,
html[data-theme="light"] .navbar .nav-link:focus {
  background: rgba(var(--apex-primary-rgb), 0.08);
}
html[data-theme="light"] .navbar .nav-link.active {
  background: rgba(var(--apex-primary-rgb), 0.12);
}
html[data-theme="light"] .navbar-toggler {
  border-color: var(--apex-border-strong);
}
/* Dark hamburger strokes independent of the Bootstrap navbar-dark/-light class,
   which site.js only swaps after DOM ready — without this the icon is
   white-on-white during the first paint of a light-theme page. */
html[data-theme="light"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%289, 23, 15, 0.72%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
html[data-theme="light"] .profile-avatar,
html[data-theme="light"] .admin-avatar {
  color: var(--apex-primary);
  background: rgba(var(--apex-primary-rgb), 0.09);
  border-color: rgba(var(--apex-primary-rgb), 0.24);
}
html[data-theme="light"] .profile-trigger:hover,
html[data-theme="light"] .dropdown-item:hover,
html[data-theme="light"] .dropdown-item:focus {
  color: var(--apex-heading);
  background: rgba(19, 42, 27, 0.07);
}
html[data-theme="light"] .dropdown-divider { border-color: var(--apex-border); }
html[data-theme="light"] .dropdown-menu .text-danger { color: var(--apex-danger) !important; }

html[data-theme="light"] .card-header {
  background: linear-gradient(180deg, rgba(var(--apex-primary-rgb), 0.09), rgba(var(--apex-primary-rgb), 0.025));
}
html[data-theme="light"] .table-light,
html[data-theme="light"] .table thead {
  background: rgba(var(--apex-primary-rgb), 0.075);
}
html[data-theme="light"] .table-light th { color: var(--apex-muted-strong) !important; }
html[data-theme="light"] .table tbody tr:hover,
html[data-theme="light"] .table-cards tbody tr.drive-row:hover,
html[data-theme="light"] .table-cards tbody tr.testing-row:hover {
  background: rgba(var(--apex-primary-rgb), 0.055);
}
html[data-theme="light"] .badge.text-bg-light {
  color: var(--apex-text) !important;
  background: #F7F9F7 !important;
  border-color: var(--apex-border) !important;
}

html[data-theme="light"] .btn-outline-primary {
  color: var(--apex-primary);
  border-color: rgba(var(--apex-primary-rgb), 0.52);
  background: rgba(var(--apex-primary-rgb), 0.035);
}
html[data-theme="light"] .btn-outline-primary:hover {
  color: #FFFFFF;
  border-color: var(--apex-primary);
  background: var(--apex-primary);
}
html[data-theme="light"] .btn-outline-secondary,
html[data-theme="light"] .btn-ghost {
  color: var(--apex-muted-strong);
  border-color: var(--apex-border-strong);
  background: rgba(19, 42, 27, 0.025);
}
html[data-theme="light"] .btn-outline-secondary:hover,
html[data-theme="light"] .btn-ghost:hover {
  color: var(--apex-heading);
  border-color: rgba(var(--apex-primary-rgb), 0.38);
  background: rgba(var(--apex-primary-rgb), 0.08);
}
html[data-theme="light"] .btn-outline-danger { color: var(--apex-danger); }
html[data-theme="light"] .btn-outline-danger:hover { color: #FFFFFF; background: var(--apex-danger); }
html[data-theme="light"] .badge-mode--direct,
html[data-theme="light"] .admin-badge--accent { color: var(--apex-primary); }

html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] .ts-in,
html[data-theme="light"] input[type="file"].form-control {
  color: var(--apex-text);
  background-color: #FFFFFF;
  border-color: var(--apex-border-strong);
  color-scheme: light;
}
html[data-theme="light"] .form-control::placeholder,
html[data-theme="light"] .form-select::placeholder,
html[data-theme="light"] .ts-in::placeholder { color: #718077; }
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .form-select:focus,
html[data-theme="light"] .ts-in:focus {
  background-color: #FFFFFF;
  border-color: var(--apex-primary);
  box-shadow: 0 0 0 0.2rem var(--apex-focus-ring);
}
html[data-theme="light"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2335483b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
html[data-theme="light"] .form-select option { background: #FFFFFF; color: var(--apex-text); }
html[data-theme="light"] .form-check-input { background-color: #FFFFFF; border-color: var(--apex-border-strong); }
html[data-theme="light"] .form-check-input:checked { background-color: var(--apex-primary); border-color: var(--apex-primary); }
html[data-theme="light"] .form-range::-webkit-slider-runnable-track { background: rgba(19, 42, 27, 0.12); }
html[data-theme="light"] .form-range::-moz-range-track { background: rgba(19, 42, 27, 0.12); }
html[data-theme="light"] input[type="file"].form-control::file-selector-button,
html[data-theme="light"] input[type="file"].form-control::-webkit-file-upload-button {
  color: var(--apex-text) !important;
  background: #EEF3EF !important;
  border: 1px solid var(--apex-border) !important;
  border-radius: 8px;
  cursor: pointer;
}
html[data-theme="light"] input[type="file"].form-control::file-selector-button:hover,
html[data-theme="light"] input[type="file"].form-control::-webkit-file-upload-button:hover {
  color: var(--apex-primary) !important;
  background: rgba(var(--apex-primary-rgb), 0.09) !important;
  border-color: var(--apex-primary) !important;
}
html[data-theme="light"] .btn-close { filter: none; }
html[data-theme="light"] .alert { color: var(--apex-text); background: #FFFFFF; }
html[data-theme="light"] .alert-success { color: #125D31; background: #EAF7EE; }
html[data-theme="light"] .alert-warning { color: #6B5100; background: #FFF8D9; }
html[data-theme="light"] .alert-danger { color: #8F1D29; background: #FDECEF; }
html[data-theme="light"] .error-title,
html[data-theme="light"] .page-title,
html[data-theme="light"] .admin-panel-header h2,
html[data-theme="light"] .widget-modal-header h4,
html[data-theme="light"] .signal-settings-header h4 { color: var(--apex-heading); }
html[data-theme="light"] .toggle-password,
html[data-theme="light"] .toggle-password .icon-eye::before,
html[data-theme="light"] .toggle-password .icon-eye::after { color: var(--apex-muted-strong); border-color: var(--apex-muted-strong); }
html[data-theme="light"] .toggle-password.active .icon-eye::after { background: var(--apex-muted-strong); }

/* Live dashboard: controls, tiles, editors and specialized widgets. */
html[data-theme="light"] .connection-status,
html[data-theme="light"] .source-switch,
html[data-theme="light"] .recording-controls,
html[data-theme="light"] .radio-controls,
html[data-theme="light"] .recording-caret,
html[data-theme="light"] .widget-card {
  background: rgba(19, 42, 27, 0.035);
}
html[data-theme="light"] .widget-library-modal,
html[data-theme="light"] .widget-library-config,
html[data-theme="light"] .widget-modal-body {
  background: #FFFFFF;
}
html[data-theme="light"] .widget-library-browser,
html[data-theme="light"] .widget-modal-header,
html[data-theme="light"] .widget-modal-footer {
  background: #F8FAF8;
}
html[data-theme="light"] .widget-library-search input,
html[data-theme="light"] .can-library-tab,
html[data-theme="light"] .library-signal-card,
html[data-theme="light"] .modal-signal-context {
  color: var(--apex-text);
  background: #F3F6F3;
}
html[data-theme="light"] .library-selected-signal strong,
html[data-theme="light"] .library-signal-copy strong { color: var(--apex-heading); }
html[data-theme="light"] .can-library-tab.is-active,
html[data-theme="light"] .library-signal-card:hover,
html[data-theme="light"] .library-signal-card.is-selected {
  background: #EAF3EE;
}
html[data-theme="light"] .library-signal-card[data-bus="can2"].is-selected {
  background: #EAF7FC;
}
html[data-theme="light"] .recording-caret:hover,
html[data-theme="light"] .recording-menu-item:hover { background: rgba(var(--apex-primary-rgb), 0.08); }
html[data-theme="light"] .recording-action { color: var(--apex-danger); }
html[data-theme="light"] .recording-action:hover,
html[data-theme="light"] .recording-action:focus,
html[data-theme="light"] .recording-controls.is-recording .recording-action,
html[data-theme="light"] .recording-controls.is-recording .recording-status { color: #8F1D29; }
html[data-theme="light"] .radio-action,
html[data-theme="light"] .radio-action:hover,
html[data-theme="light"] .radio-action:focus,
html[data-theme="light"] .radio-action.is-active,
html[data-theme="light"] .recording-download-link:hover { color: var(--apex-primary); }
html[data-theme="light"] .recording-download-link { color: var(--apex-muted-strong); }
html[data-theme="light"] .status-light {
  background: linear-gradient(135deg, #FFFFFF, #F3F6F3);
  border-color: var(--apex-border);
}
html[data-theme="light"] .status-light-label { color: var(--apex-muted-strong); }
html[data-theme="light"] .status-light.is-on { background: linear-gradient(135deg, #E8F6ED, #F3FAF5); }
html[data-theme="light"] .status-light.is-warn { background: linear-gradient(135deg, #FFF5CF, #FFFAE8); }
html[data-theme="light"] .status-light.is-off { background: linear-gradient(135deg, #FDECEF, #FFF6F7); }
html[data-theme="light"] .status-light.is-stale { background: linear-gradient(135deg, #F0F3F1, #F8FAF8); }
html[data-theme="light"] .status-light.is-on .status-light-state { color: #126330; }
html[data-theme="light"] .status-light.is-warn .status-light-state { color: #745800; }
html[data-theme="light"] .status-light.is-off .status-light-state { color: #9B2330; }
html[data-theme="light"] .status-light.is-stale .status-light-state { color: var(--apex-muted); }
html[data-theme="light"] .edit-toolbar,
html[data-theme="light"] .widget,
html[data-theme="light"] .widget-btn,
html[data-theme="light"] .widget-bar,
html[data-theme="light"] .widget-bar-track,
html[data-theme="light"] .widget-vbar-track,
html[data-theme="light"] .widget-chart,
html[data-theme="light"] .formula-signal-grid,
html[data-theme="light"] .formula-signal-cell {
  background-color: rgba(19, 42, 27, 0.035);
}
html[data-theme="light"] .widget { background: linear-gradient(180deg, #FFFFFF, #F8FAF8); }
html[data-theme="light"] .widget:hover { box-shadow: 0 10px 28px rgba(26, 45, 33, 0.11), inset 0 1px 0 var(--apex-elevate); }
html[data-theme="light"] .widget-edit-controls--floating {
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 6px 18px rgba(26, 45, 33, 0.12);
}
html[data-theme="light"] .widget-btn:hover,
html[data-theme="light"] .modal-close:hover { color: var(--apex-heading); background: rgba(var(--apex-primary-rgb), 0.09); }
html[data-theme="light"] .widget-value,
html[data-theme="light"] .numerical-value,
html[data-theme="light"] .gauge-value,
html[data-theme="light"] .widget-bar-value,
html[data-theme="light"] .widget-vbar-value,
html[data-theme="light"] .widget-empty-title,
html[data-theme="light"] .signal-item-name,
html[data-theme="light"] .signal-item-value { color: var(--apex-heading); }
html[data-theme="light"] .gauge-bg { stroke: rgba(19, 42, 27, 0.10); }
html[data-theme="light"] .gauge-fill,
html[data-theme="light"] .widget-bar-fill,
html[data-theme="light"] .widget-vbar-fill,
html[data-theme="light"] .widget-chart-canvas {
  filter: brightness(0.62) saturate(1.1);
}
html[data-theme="light"] .widget-modal-overlay,
html[data-theme="light"] .signal-settings-overlay { background: rgba(20, 33, 24, 0.48); }
html[data-theme="light"] .modal-close { background: rgba(19, 42, 27, 0.055); }
html[data-theme="light"] .signal-item:hover,
html[data-theme="light"] .signal-item-details { background: rgba(19, 42, 27, 0.025); }
html[data-theme="light"] .signal-item-unit { background: rgba(19, 42, 27, 0.05); }
html[data-theme="light"] .signal-item-badge-modified { color: var(--apex-primary); }
html[data-theme="light"] .empty-state { background: rgba(19, 42, 27, 0.025); }
html[data-theme="light"] .empty-state h3 { color: var(--apex-heading); }
html[data-theme="light"] .color-btn:hover { border-color: rgba(9, 23, 15, 0.42); }
html[data-theme="light"] .color-btn.active {
  border-color: var(--apex-heading);
  box-shadow: 0 0 0 3px rgba(9, 23, 15, 0.14);
}
html[data-theme="light"] ::selection { color: #FFFFFF; background: rgba(var(--apex-primary-rgb), 0.78); }
html[data-theme="light"] * { scrollbar-color: rgba(40, 68, 51, 0.22) transparent; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(40, 68, 51, 0.22); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(40, 68, 51, 0.38); }

html[data-theme="light"] .gf-ring { stroke: rgba(40, 68, 51, 0.20); }
html[data-theme="light"] .gf-ring:first-of-type { stroke: rgba(40, 68, 51, 0.34); }
html[data-theme="light"] .gf-axis { stroke: rgba(40, 68, 51, 0.18); }
html[data-theme="light"] .gf-tick,
html[data-theme="light"] .gf-center,
html[data-theme="light"] .gf-cap { fill: rgba(40, 68, 51, 0.62); }
html[data-theme="light"] .gf-num,
html[data-theme="light"] .gf-sub b,
html[data-theme="light"] .car-telemetry-title,
html[data-theme="light"] .car-telemetry b,
html[data-theme="light"] .warning-name,
html[data-theme="light"] .warning-val { color: var(--apex-heading); }
html[data-theme="light"] .gf-sub,
html[data-theme="light"] .car-telemetry span { color: var(--apex-muted); }
html[data-theme="light"] .gf-trail { filter: brightness(0.62) saturate(1.1); }
html[data-theme="light"] .gf-dot { filter: brightness(0.62) saturate(1.1) drop-shadow(0 0 5px var(--accent)); }
html[data-theme="light"] .car-svg { filter: drop-shadow(0 8px 18px rgba(20, 36, 25, 0.18)); }
html[data-theme="light"] .car-telemetry,
html[data-theme="light"] .car-telemetry.is-live { background: rgba(255, 255, 255, 0.88); }
html[data-theme="light"] .car-tyre { fill: #26332B; stroke: #09170F; }
html[data-theme="light"] .car-body { fill: #26332B !important; stroke: rgba(9, 23, 15, 0.55) !important; }
html[data-theme="light"] .car-pod { fill: #34443A; stroke: rgba(9, 23, 15, 0.52); }
html[data-theme="light"] .car-cockpit { fill: #101A13; stroke: rgba(255, 255, 255, 0.28); }
html[data-theme="light"] .car-driver { fill: #9BAD9F; }
html[data-theme="light"] .car-halo,
html[data-theme="light"] .car-spine { filter: brightness(0.68) saturate(1.1); }
html[data-theme="light"] .warning-row { background: rgba(19, 42, 27, 0.035); }
html[data-theme="light"] .warning--exceeded .warning-kind { color: #A61F2D; }
html[data-theme="light"] .warning--below .warning-kind { color: #7A5900; }
html[data-theme="light"] .dash-more-toggle { background: rgba(19, 42, 27, 0.025); }

/* Testing sheet, admin, uploads and secondary page modules. */
html[data-theme="light"] .ts-scorner,
html[data-theme="light"] .ts-corner,
html[data-theme="light"] .ts-damper-block,
html[data-theme="light"] .ts-laps { background: #F8FAF8; }
html[data-theme="light"] .ts-damper-sub { background: #EEF3EF; }
html[data-theme="light"] .ts-wheel {
  background: linear-gradient(90deg, #26332B, #526158);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15), 0 0 0 1px rgba(20, 36, 25, 0.18);
}
html[data-theme="light"] .admin-badge,
html[data-theme="light"] .admin-panel-header,
html[data-theme="light"] .admin-table thead th { color: var(--apex-muted-strong); background: rgba(19, 42, 27, 0.035); }
html[data-theme="light"] .admin-user-cell { color: var(--apex-heading); }
html[data-theme="light"] .admin-form .form-label,
html[data-theme="light"] .admin-inline-form .form-label,
html[data-theme="light"] .admin-formula-row .form-label { color: var(--apex-muted-strong); }
html[data-theme="light"] .admin-formula-row:hover,
html[data-theme="light"] .card-hover:hover,
html[data-theme="light"] .feature-card:hover { background-color: #F7FAF7; }
html[data-theme="light"] .site-footer,
html[data-theme="light"] .site-footer a { color: var(--apex-muted); }
html[data-theme="light"] .error-icon--danger { color: var(--apex-danger); }
html[data-theme="light"] .error-icon--warning { color: #745800; }
html[data-theme="light"] .upload-overlay { background: rgba(232, 238, 233, 0.88); }
html[data-theme="light"] .ajax-toast { background: #FFFFFF; box-shadow: var(--apex-shadow); }
html[data-theme="light"] .map-overlay { background: rgba(243, 246, 243, 0.68); }

@media (max-width: 768px) {
  html[data-theme="light"] .table-cards tbody tr { background: rgba(19, 42, 27, 0.025); }
  html[data-theme="light"] .table-cards tbody tr:hover { background: rgba(var(--apex-primary-rgb), 0.055); }
}