/* ==========================================================================
   ASBO theme tokens + dark mode (2026-10-10)
   Loaded last. <html data-theme="light|dark"> is set before first paint by
   layouts/partials/theme-head (saved choice, otherwise the OS setting).
   ========================================================================== */
:root {
  --surface: #ffffff;
  --surface-2: #fbfcfe;
  --tint-ok: #e7f6ee;   --tint-ok-line: #bfe5cd;   --ok-ink: #145c33;
  --tint-warn: #fff4e5; --tint-warn-line: #f3d9a4; --warn-ink: #6b4100;
  --tint-bad: #fdecea;  --tint-bad-line: #f5c2c2;  --bad-ink: #8e1c1c;
  --tint-muted: #eef1f5;
  --scrim: rgba(15, 27, 42, .38);
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --surface: #151d29;
  --surface-2: #19222f;
  --canvas: #0e141c;
  --ink-900: #e8eef6;
  --ink-700: #c4cfdc;
  --ink-500: #96a3b5;
  --ink-400: #76849a;
  --line: #273345;
  --line-2: #1f2937;
  --asbo-blue-50: #10293a;
  --asbo-blue-100: #173a50;
  --asbo-blue-200: #22506d;
  --asbo-blue-400: #3ba8dc;
  --asbo-blue-500: #2f9bd3;
  --asbo-blue-600: #6cc3ec;
  --asbo-blue-700: #9ad6f3;
  --ok: #3ccf7f; --warn: #f2b14a; --bad: #ff7b6e;
  --tint-ok: rgba(60, 207, 127, .14);  --tint-ok-line: rgba(60, 207, 127, .35);  --ok-ink: #7fe0a8;
  --tint-warn: rgba(242, 177, 74, .14); --tint-warn-line: rgba(242, 177, 74, .38); --warn-ink: #f6c779;
  --tint-bad: rgba(255, 123, 110, .14); --tint-bad-line: rgba(255, 123, 110, .38); --bad-ink: #ffa49a;
  --tint-muted: #1f2a38;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .25);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, .5);
  --scrim: rgba(0, 0, 0, .55);
}

/* smooth switch (not on first paint) */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, fill .3s ease, box-shadow .3s ease !important;
}

/* ---- dark: legacy style.css / bootstrap surfaces ------------------------- */
html[data-theme="dark"] body { background-color: var(--canvas) !important; color: var(--ink-700); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--ink-900); }
html[data-theme="dark"] p, html[data-theme="dark"] label, html[data-theme="dark"] li, html[data-theme="dark"] td, html[data-theme="dark"] th { color: inherit; }
html[data-theme="dark"] .text-muted { color: var(--ink-500) !important; }
html[data-theme="dark"] .text-dark { color: var(--ink-900) !important; }
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--surface) !important; }
html[data-theme="dark"] .border, html[data-theme="dark"] hr { border-color: var(--line) !important; }

html[data-theme="dark"] .navbar-box, html[data-theme="dark"] .topbar,
html[data-theme="dark"] .sidebar-nav { background: var(--surface) !important; border-color: var(--line) !important; }
html[data-theme="dark"] .sidebar-nav .navbar-brand { border-color: var(--line-2) !important; }
html[data-theme="dark"] .full-imgbox, html[data-theme="dark"] .ab-logo-dark { background: #fff; border-radius: 8px; padding: 4px 6px; }

html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] select,
html[data-theme="dark"] textarea, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] .user-input {
  background-color: var(--surface-2) !important; color: var(--ink-900) !important; border-color: var(--line) !important;
}
html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--ink-400) !important; }
html[data-theme="dark"] input[readonly], html[data-theme="dark"] .form-control:disabled { background-color: var(--canvas) !important; color: var(--ink-500) !important; }
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85); }
html[data-theme="dark"] .input-group-text { background: var(--surface-2) !important; color: var(--ink-500) !important; border-color: var(--line) !important; }

html[data-theme="dark"] .dropdown-menu { background: var(--surface) !important; border-color: var(--line) !important; box-shadow: var(--shadow-lg); }
html[data-theme="dark"] .dropdown-item { color: var(--ink-700) !important; }
html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background: var(--canvas) !important; color: var(--ink-900) !important; }
html[data-theme="dark"] .dropdown-header { color: var(--ink-900) !important; }

html[data-theme="dark"] .table, html[data-theme="dark"] table { color: var(--ink-700); --bs-table-bg: transparent; --bs-table-color: var(--ink-700); border-color: var(--line); }
html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: inherit; border-color: var(--line-2); }

html[data-theme="dark"] .modal-content, html[data-theme="dark"] .popup__content, html[data-theme="dark"] .popup .popup-box,
html[data-theme="dark"] .popup-content { background: var(--surface) !important; color: var(--ink-700); border-color: var(--line) !important; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }

html[data-theme="dark"] .alert-success { background: var(--tint-ok) !important; color: var(--ok-ink) !important; border-color: var(--tint-ok-line) !important; }
html[data-theme="dark"] .alert-danger { background: var(--tint-bad) !important; color: var(--bad-ink) !important; border-color: var(--tint-bad-line) !important; }
html[data-theme="dark"] .alert-warning { background: var(--tint-warn) !important; color: var(--warn-ink) !important; border-color: var(--tint-warn-line) !important; }
html[data-theme="dark"] .text-danger, html[data-theme="dark"] .error-message { color: var(--bad) !important; }
html[data-theme="dark"] .text-success { color: var(--ok) !important; }

html[data-theme="dark"] .pagination .page-link { background: var(--surface) !important; color: var(--ink-700) !important; border-color: var(--line) !important; }
html[data-theme="dark"] .pagination .active .page-link { background: var(--asbo-blue-500) !important; color: #fff !important; }

html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown { background: var(--surface-2) !important; border-color: var(--line) !important; color: var(--ink-900) !important; }
html[data-theme="dark"] .select2-container--default .select2-selection__rendered { color: var(--ink-900) !important; }
html[data-theme="dark"] .select2-results__option { color: var(--ink-700); }
html[data-theme="dark"] .select2-search__field { background: var(--canvas) !important; color: var(--ink-900) !important; }

/* buttons that were white-on-white */
html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-outline-secondary, html[data-theme="dark"] .btn-secondary:not(.disabled) {
  background: var(--surface-2) !important; color: var(--ink-700) !important; border-color: var(--line) !important; }

/* nav icon tiles + kpi icons: mix their tint into the dark surface */
html[data-theme="dark"] .nav-ic { background: color-mix(in srgb, var(--tone) 22%, var(--surface)); color: color-mix(in srgb, var(--tone) 70%, #fff); }
html[data-theme="dark"] .side-menu-v2 li.active .nav-ic { background: rgba(255, 255, 255, .18); color: #fff; }
html[data-theme="dark"] .side-menu-v2 li:not(.active):not(.side-group):hover a { background-color: var(--surface-2) !important; }

/* scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--canvas); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2c394b; border-radius: 10px; border: 2px solid var(--canvas); }

/* ---- the switch itself ------------------------------------------------------ */
.theme-toggle { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-500); display: inline-grid; place-items: center; cursor: pointer; margin-right: 10px; overflow: hidden; flex: 0 0 40px;
  transition: border-color .2s, color .2s, box-shadow .2s; }
.theme-toggle:hover { color: var(--ink-900); border-color: var(--asbo-blue-200); box-shadow: var(--shadow-sm); }
.theme-toggle i { position: absolute; font-size: 16px; transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.theme-toggle .tt-sun { color: #f2a516; }
.theme-toggle .tt-moon { color: #8fb8ff; }
html[data-theme="dark"] .theme-toggle .tt-sun { transform: translateY(26px) rotate(90deg); opacity: 0; }
html:not([data-theme="dark"]) .theme-toggle .tt-moon { transform: translateY(-26px) rotate(-90deg); opacity: 0; }
.theme-toggle.is-auto::after { content: "A"; position: absolute; right: 3px; bottom: 2px; font: 700 8px/1 var(--font, sans-serif); color: var(--ink-400); }
.theme-toggle:focus-visible { outline: 3px solid var(--asbo-blue-200); outline-offset: 2px; }
.auth-theme { position: fixed; top: 16px; right: 16px; z-index: 20; margin: 0; }
@media (prefers-reduced-motion: reduce) { .theme-toggle i { transition: none; } }

/* heatmap + planner details in dark */
html[data-theme="dark"] .hm-cell:not(.has) { background: var(--surface-2) !important; }

/* legacy style.css blocks that were hard-coded white */
html[data-theme="dark"] .select-drop-iconbox, html[data-theme="dark"] .search-box input, html[data-theme="dark"] .user-project > li,
html[data-theme="dark"] .graph-box-line, html[data-theme="dark"] .graph-box-circle, html[data-theme="dark"] .graph-box-level,
html[data-theme="dark"] .filter-box-bar, html[data-theme="dark"] .asign-task-project li, html[data-theme="dark"] .report-btnbox button,
html[data-theme="dark"] .general-img-grid, html[data-theme="dark"] .meta-popup-contentbox, html[data-theme="dark"] .report-generator-box,
html[data-theme="dark"] .enquiry-header, html[data-theme="dark"] .upload-databtns, html[data-theme="dark"] .upload-wrapper,
html[data-theme="dark"] .checkbox__checkmark, html[data-theme="dark"] .employe-form, html[data-theme="dark"] .form-container,
html[data-theme="dark"] .setting-updatebox, html[data-theme="dark"] .popup .popup__content, html[data-theme="dark"] .popup .form-container {
  background-color: var(--surface) !important; border-color: var(--line) !important; color: var(--ink-700);
}
html[data-theme="dark"] .search-box, html[data-theme="dark"] .search-box input { background-color: var(--surface-2) !important; }
html[data-theme="dark"] .piesite:after { background: var(--surface) !important; }
html[data-theme="dark"] .general-img-grid img, html[data-theme="dark"] .preview-img img { border-color: var(--line) !important; }

/* sign-in pages in dark */
html[data-theme="dark"] .btn-passkey { background: #e8eef6; border-color: #e8eef6; color: #0f1b2a; }
html[data-theme="dark"] .btn-passkey:hover { background: #ffffff; }
html[data-theme="dark"] .auth-main { background: var(--surface); }
html[data-theme="dark"] .auth-logo-sm { background: #fff; border-radius: 8px; padding: 4px 6px; }
@media (max-width: 991px) { html[data-theme="dark"] .auth-main { background: var(--canvas); } }