/* =============================================================================
   ChessUp Dashboard — dark theme (fleet palette)
   -----------------------------------------------------------------------------
   Applies the same palette as /fleet, /deploy, /devRouting to the Bootstrap
   dashboard pages. Everything is scoped under [data-bs-theme="dark"], so this
   file is inert in light mode and the toggle can flip cleanly between the two.

   Strategy:
   1. Remap Bootstrap 5.3's dark-mode CSS variables to the fleet palette
      (covers cards, tables, buttons, forms, dropdowns, text automatically).
   2. Override the page-scoped "polish pass" light tokens (soft-gray bg, white
      cards, navy header) — these win by [data-bs-theme="dark"] specificity, so
      the existing inline <style> blocks don't need editing.
   Palette source: views/pages/fleet.ejs.
   ============================================================================ */

:root {
	/* Fleet palette — DARK values (the default). The [data-bs-theme="light"]
	   block flips them for the custom pages (fleet/deploy/devRouting/drainEvents)
	   that consume these vars directly. Bootstrap pages don't need the light
	   override — Bootstrap handles light natively. */
	--cu-bg: #0b1220;
	--cu-surface: #111a2e;
	--cu-surface-2: #0f1830;
	--cu-border: #1e293b;
	--cu-border-2: #334155;
	--cu-text: #e5e9f0;
	--cu-text-2: #cbd5e1;
	--cu-muted: #94a3b8;
	--cu-muted-2: #64748b;
	--cu-stale: #475569;
	--cu-accent: #93c5fd;
	--cu-accent-hi: #bfdbfe;
	--cu-success: #22c55e;
	--cu-success-hi: #4ade80;
	--cu-success-bg: #052e16;
	--cu-success-border: #166534;
	--cu-warning: #f59e0b;
	--cu-warning-hi: #fbbf24;
	--cu-warning-bg: #451a03;
	--cu-danger: #ef4444;
	--cu-danger-hi: #f87171;
	--cu-danger-bg: #450a0a;
	--cu-danger-border: #7f1d1d;
}
[data-bs-theme="light"] {
	--cu-bg: #f6f7fb;
	--cu-surface: #ffffff;
	--cu-surface-2: #f1f4fb;
	--cu-border: #dfe3ee;
	--cu-border-2: #c7cfe0;
	--cu-text: #1a2440;
	--cu-text-2: #334155;
	--cu-muted: #64748b;
	--cu-muted-2: #94a3b8;
	--cu-stale: #94a3b8;
	--cu-accent: #2c5fd1;
	--cu-accent-hi: #1d4ed8;
	--cu-success: #16a34a;
	--cu-success-hi: #15803d;
	--cu-success-bg: #dcfce7;
	--cu-success-border: #86efac;
	--cu-warning: #d97706;
	--cu-warning-hi: #b45309;
	--cu-warning-bg: #fef3c7;
	--cu-danger: #dc2626;
	--cu-danger-hi: #b91c1c;
	--cu-danger-bg: #fee2e2;
	--cu-danger-border: #fca5a5;
	color-scheme: light;
}

/* --- 1. Bootstrap dark-mode variable remap --------------------------------- */
[data-bs-theme="dark"] {
	--bs-body-bg: var(--cu-bg);
	--bs-body-color: var(--cu-text);
	--bs-emphasis-color: var(--cu-text);
	--bs-emphasis-color-rgb: 229, 233, 240;
	--bs-secondary-color: var(--cu-muted);
	--bs-secondary-bg: var(--cu-surface);
	--bs-tertiary-color: var(--cu-muted-2);
	--bs-tertiary-bg: var(--cu-surface-2);
	--bs-border-color: var(--cu-border);
	--bs-border-color-translucent: rgba(148, 163, 184, .14);
	--bs-heading-color: var(--cu-text);

	--bs-link-color: var(--cu-accent);
	--bs-link-color-rgb: 147, 197, 253;
	--bs-link-hover-color: var(--cu-accent-hi);
	--bs-link-hover-color-rgb: 191, 219, 254;

	--bs-primary: var(--cu-accent);
	--bs-primary-rgb: 147, 197, 253;
	--bs-success-rgb: 34, 197, 94;
	--bs-warning-rgb: 245, 158, 11;
	--bs-danger-rgb: 239, 68, 68;
	--bs-info-rgb: 147, 197, 253;

	--bs-card-bg: var(--cu-surface);
	--bs-card-border-color: var(--cu-border);
	--bs-card-cap-bg: var(--cu-surface-2);

	--bs-dropdown-bg: var(--cu-surface);
	--bs-dropdown-border-color: var(--cu-border);
	--bs-dropdown-link-color: var(--cu-text);
	--bs-dropdown-link-hover-bg: var(--cu-border);

	--bs-modal-bg: var(--cu-surface);
	--bs-modal-border-color: var(--cu-border);

	--bs-table-bg: transparent;
	--bs-table-color: var(--cu-text);
	--bs-table-border-color: var(--cu-border);
	--bs-table-striped-bg: rgba(148, 163, 184, .05);
	--bs-table-hover-bg: rgba(148, 163, 184, .08);

	--bs-form-control-bg: var(--cu-surface-2);
	--bs-form-control-color: var(--cu-text);
	--bs-tooltip-bg: var(--cu-surface);

	color-scheme: dark;
}

/* --- 2. Base surfaces ------------------------------------------------------ */
[data-bs-theme="dark"] body { background: var(--cu-bg); color: var(--cu-text); }

/* Metronic/legacy wrappers that hardcode a light background */
[data-bs-theme="dark"] #content-wrapper,
[data-bs-theme="dark"] #kt_body,
[data-bs-theme="dark"] .page,
[data-bs-theme="dark"] .wrapper { background: var(--cu-bg) !important; }

/* --- 3. index.ejs "polish pass" overrides (win by specificity) ------------- */
[data-bs-theme="dark"] .dash-hdr {
	background: linear-gradient(180deg, #16223f, #111a2e);
	color: var(--cu-text);
	border: 1px solid var(--cu-border);
}
[data-bs-theme="dark"] .dash-hdr h3 { color: var(--cu-text); }
[data-bs-theme="dark"] .dash-hdr .dash-hdr-sub { color: var(--cu-accent); }

[data-bs-theme="dark"] .card {
	background: var(--cu-surface);
	border: 1px solid var(--cu-border);
	color: var(--cu-text);
}
[data-bs-theme="dark"] .card.shadow { box-shadow: 0 2px 10px rgba(0, 0, 0, .35) !important; }
[data-bs-theme="dark"] .card .card-header {
	background: var(--cu-surface-2);
	border-bottom: 1px solid var(--cu-border);
	color: var(--cu-text);
}
/* empty spacer cards used as section dividers */
[data-bs-theme="dark"] div.card.shadow.mb-4:empty { background: var(--cu-border); }

/* Section headings (h6.text-primary.fw-bold) — the polish pass sets !important */
[data-bs-theme="dark"] h6.text-primary.fw-bold { color: var(--cu-accent) !important; }
[data-bs-theme="dark"] .text-primary { color: var(--cu-accent) !important; }

/* --- 4. Common Bootstrap components --------------------------------------- */
[data-bs-theme="dark"] .text-muted { color: var(--cu-muted) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--cu-text) !important; }
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light { background-color: var(--cu-surface) !important; }
[data-bs-theme="dark"] hr { border-color: var(--cu-border); opacity: 1; }

/* Tables */
[data-bs-theme="dark"] .table { color: var(--cu-text); border-color: var(--cu-border); }
[data-bs-theme="dark"] .table > :not(caption) > * > * { border-color: var(--cu-border); }
[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .table th { color: var(--cu-muted); }

/* Badges — keep the fleet's soft-fill pill look */
[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge.text-bg-success { background: var(--cu-success-bg) !important; color: var(--cu-success-hi) !important; }
[data-bs-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge.text-bg-danger { background: var(--cu-danger-bg) !important; color: var(--cu-danger-hi) !important; }
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.text-bg-warning { background: #451a03 !important; color: var(--cu-warning-hi) !important; }
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.text-bg-primary,
[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.text-bg-info { background: var(--cu-border) !important; color: var(--cu-accent) !important; }
[data-bs-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .badge.text-bg-secondary { background: var(--cu-border) !important; color: var(--cu-muted) !important; }

/* Buttons: soften the solid variants into the fleet's outline-on-surface feel */
[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-white { background: var(--cu-surface); border-color: var(--cu-border); color: var(--cu-text); }
[data-bs-theme="dark"] .btn-light:hover { background: var(--cu-border); }
[data-bs-theme="dark"] .btn-outline-primary { color: var(--cu-accent); border-color: var(--cu-border-2); }
[data-bs-theme="dark"] .btn-outline-primary:hover { background: var(--cu-border); color: var(--cu-accent-hi); }

/* Forms */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
	background: var(--cu-surface-2);
	border-color: var(--cu-border);
	color: var(--cu-text);
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--cu-muted-2); }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus { border-color: var(--cu-accent); box-shadow: 0 0 0 .2rem rgba(147, 197, 253, .15); }

/* List groups, nav-tabs, borders */
[data-bs-theme="dark"] .list-group-item { background: var(--cu-surface); border-color: var(--cu-border); color: var(--cu-text); }
[data-bs-theme="dark"] .nav-tabs { border-color: var(--cu-border); }
[data-bs-theme="dark"] .nav-tabs .nav-link.active { background: var(--cu-surface); border-color: var(--cu-border) var(--cu-border) var(--cu-surface); color: var(--cu-accent); }
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end { border-color: var(--cu-border) !important; }

/* --- 5. Floating theme toggle (shared button) ----------------------------- */
.cu-theme-toggle {
	/* bottom-right, stacked ABOVE the scroll-to-top button (which every page
	   family puts at the very bottom-right) and clear of the top-bar user menu. */
	position: fixed; bottom: 76px; right: 20px; z-index: 1080;
	width: 40px; height: 40px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 17px; line-height: 1; cursor: pointer;
	background: var(--cu-surface); color: var(--cu-accent);
	border: 1px solid var(--cu-border);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	transition: background .15s, border-color .15s, transform .1s;
}
.cu-theme-toggle:hover { background: var(--cu-border); border-color: var(--cu-border-2); }
.cu-theme-toggle:active { transform: scale(.94); }
/* In light mode, give it a light chip so it stays visible */
[data-bs-theme="light"] .cu-theme-toggle { background: #fff; color: #1a2440; border-color: #dfe3ee; }
[data-bs-theme="light"] .cu-theme-toggle:hover { background: #f1f4fb; }

/* --- 6. Sidebar — replace the bright-blue slab with the fleet surface -------
   Covers BOTH families: SB-Admin (.sidebar.bg-gradient-primary on index) and
   Metronic (#kt_app_sidebar / .app-sidebar / .custom-sidebar). Chosen colour is
   the card surface (#111a2e) so the sidebar reads as one elevated panel with the
   cards, with the accent blue reserved for the active/hover nav item. */
[data-bs-theme="dark"] .sidebar.bg-gradient-primary,
[data-bs-theme="dark"] .sidebar,
[data-bs-theme="dark"] #kt_app_sidebar,
[data-bs-theme="dark"] .app-sidebar,
[data-bs-theme="dark"] .custom-sidebar {
	background: var(--cu-surface) !important;
	background-image: none !important;
	border-right: 1px solid var(--cu-border);
}
[data-bs-theme="dark"] .sidebar .sidebar-divider { border-color: var(--cu-border); opacity: 1; }
[data-bs-theme="dark"] .sidebar .nav-item .nav-link,
[data-bs-theme="dark"] .sidebar .sidebar-brand,
[data-bs-theme="dark"] .app-sidebar .menu-link,
[data-bs-theme="dark"] .app-sidebar .menu-title { color: var(--cu-text-2) !important; }
[data-bs-theme="dark"] .sidebar .sidebar-heading { color: var(--cu-muted) !important; }
[data-bs-theme="dark"] .sidebar .nav-item .nav-link:hover { background: rgba(147, 197, 253, .06); }
[data-bs-theme="dark"] .sidebar .nav-item .nav-link:hover,
[data-bs-theme="dark"] .sidebar .nav-item.active > .nav-link,
[data-bs-theme="dark"] .app-sidebar .menu-item.here > .menu-link,
[data-bs-theme="dark"] .app-sidebar .menu-item.active > .menu-link,
[data-bs-theme="dark"] .app-sidebar .menu-link.active { color: var(--cu-accent) !important; }
[data-bs-theme="dark"] .app-sidebar .menu-item.here > .menu-link,
[data-bs-theme="dark"] .app-sidebar .menu-link.active { background: rgba(147, 197, 253, .06) !important; }
/* sidebar collapse toggle chip */
[data-bs-theme="dark"] #sidebarToggle,
[data-bs-theme="dark"] .app-sidebar-toggle { background: var(--cu-border) !important; border-color: var(--cu-border-2) !important; }

/* --- 7. Map legend (boardMapView) — readable on dark + panel surface -------- */
[data-bs-theme="dark"] .map-legend-wrapper,
[data-bs-theme="dark"] .map-legend {
	background: var(--cu-surface); border: 1px solid var(--cu-border); border-radius: 10px;
}
[data-bs-theme="dark"] .legend-table { color: var(--cu-text); }
[data-bs-theme="dark"] .legend-table th { color: var(--cu-muted) !important; border-color: var(--cu-border) !important; }
[data-bs-theme="dark"] .legend-table td { border-color: var(--cu-border) !important; }
[data-bs-theme="dark"] .legend-label { color: var(--cu-text) !important; }
[data-bs-theme="dark"] .legend-count { color: var(--cu-text-2) !important; }

/* --- 8. Modal headers ------------------------------------------------------
   The dashboard uses solid `.modal-header.bg-primary.text-white` bands. Under
   the palette remap `.bg-primary` becomes soft light-blue → white text on it is
   low-contrast. Give info headers a dark band (like the page header) and keep
   status headers' hue but darkened so their white/accent text stays readable. */
[data-bs-theme="dark"] .modal-content { background: var(--cu-surface); border: 1px solid var(--cu-border); }
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer { border-color: var(--cu-border); }
[data-bs-theme="dark"] .modal-header.bg-primary {
	background: linear-gradient(180deg, #16223f, #111a2e) !important;
	border-bottom: 1px solid var(--cu-border);
}
[data-bs-theme="dark"] .modal-header.bg-primary,
[data-bs-theme="dark"] .modal-header.bg-primary * { color: var(--cu-text) !important; }
[data-bs-theme="dark"] .modal-header.bg-success { background: var(--cu-success-bg) !important; }
[data-bs-theme="dark"] .modal-header.bg-success, [data-bs-theme="dark"] .modal-header.bg-success * { color: var(--cu-success-hi) !important; }
[data-bs-theme="dark"] .modal-header.bg-danger { background: var(--cu-danger-bg) !important; }
[data-bs-theme="dark"] .modal-header.bg-danger, [data-bs-theme="dark"] .modal-header.bg-danger * { color: var(--cu-danger-hi) !important; }
/* Bootstrap's close button is a dark SVG — invert it so it shows on dark headers */
[data-bs-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }