/**
 * ============================================================================
 * DARK MODE — LEGACY OVERRIDE LAYER
 * ============================================================================
 * Everything in this file is scoped under html[data-theme="dark"], so it is
 * completely inert in light mode. Loading it can never regress the existing
 * light UI.
 *
 * WHY THIS FILE EXISTS
 * The app's own CSS is token-driven, so it flips theme for free the moment
 * design-tokens.css redefines the --color-* vars. This file covers only what
 * tokens cannot reach:
 *
 *   1. Vendor CSS we do not own — Bootstrap 4 and the Datta Able theme
 *      (style.css, 316KB) hardcode #fff / #333 / #f1f1f1 throughout.
 *   2. Deliberate literals in our own CSS that must stay literal in light
 *      mode (e.g. `color:#fff` on a purple button) but need a different value
 *      on dark.
 *   3. Third-party widget CSS bundled by Vite (NProgress, Notyf, Phosphor).
 *
 * ORDERING: loaded LAST in base.html so it outranks style.css, bootstrap.css
 * and the Vite bundle without needing !important everywhere. !important is
 * used only where the rule it must beat is itself !important.
 * ========================================================================= */

/* ══════════════════════════════════════════════════════════════════════════
   1. THEME TOGGLE BUTTON
   Both icons ship in the DOM; CSS reveals the one that represents the action
   the click performs (moon = "go dark" while light, sun = "go light" while
   dark). Doing it in CSS rather than JS means the glyph is already correct on
   the first painted frame.
   ═══════════════════════════════════════════════════════════════════════ */
.vx-theme-toggle .vx-theme-icon-light { display: none; }
.vx-theme-toggle .vx-theme-icon-dark { display: inline-flex; }
html[data-theme="dark"] .vx-theme-toggle .vx-theme-icon-light { display: inline-flex; }
html[data-theme="dark"] .vx-theme-toggle .vx-theme-icon-dark { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   1b. THEME CROSSFADE
   Two paths, chosen in window.vxTheme.set(): the View Transitions API where
   it exists, and a narrowly-scoped CSS transition everywhere else.

   Neither is a standing global transition. Leaving `* { transition:
   background-color … }` on the page would make every hover, focus and active
   state fade at the same duration, which reads as sluggish UI.
   ═══════════════════════════════════════════════════════════════════════ */

/* Gradients do not interpolate: the browser cannot tween linear-gradient(A…)
   into linear-gradient(B…), so the sidebar and header would SNAP while the
   rest of the page faded — the most noticeable surface on screen jumping
   mid-crossfade. Registering the chrome stops as typed <color> properties
   makes the custom properties themselves animatable, so the gradient is
   re-resolved each frame and the chrome fades with everything else.
   Browsers without @property support simply keep the instant swap. */
@property --chrome-stop-1 { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --chrome-stop-2 { syntax: "<color>"; inherits: true; initial-value: #fdfcff; }
@property --chrome-stop-3 { syntax: "<color>"; inherits: true; initial-value: #faf7fe; }
@property --chrome-glow   { syntax: "<color>"; inherits: true; initial-value: rgba(155, 111, 240, 0.10); }

/* ── Preferred path: View Transitions ─────────────────────────────────────
   One GPU-composited crossfade of the whole page instead of N per-element
   transitions. Cost is independent of how many elements are on screen, so a
   dense findings table fades exactly as smoothly as an empty page. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Fallback path: browsers without View Transitions ─────────────────────
   Scope is everything here, and getting it wrong is what made the first
   attempt feel slow and stuttery rather than smooth.

   There is deliberately NO universal `*` rule. Measured on a 3,600-element
   page (a realistic findings table), a `*` rule spawned 5,400+ concurrent
   animations; the browser spends the frame budget creating and ticking
   animation objects instead of painting. That is what "slow and not smooth"
   actually was — too much animation, not too little.

   Selectors below are the handful of structural surfaces that carry the
   theme: about a dozen animations total, independent of page size. Content
   inside them swaps instantly, which is invisible underneath a crossfading
   parent.

   The --chrome-* properties appear only on the root and the two chrome
   surfaces. They are registered AND inherit:true, so listing them under `*`
   gave every element its own interpolation of all four — the single largest
   contributor to the count above. Animating them at the top is enough:
   descendants inherit the already-interpolated value each frame, so the
   sidebar and header gradients still fade.

   box-shadow is excluded on purpose: it forces a full repaint per frame and
   buys nothing when the shadow is a near-invisible low-alpha black in both
   themes. */
html.vx-theme-transition,
html.vx-theme-transition body,
html.vx-theme-transition .pcoded-main-container,
html.vx-theme-transition .pcoded-wrapper,
html.vx-theme-transition nav.pcoded-navbar,
html.vx-theme-transition .app-header,
html.vx-theme-transition .workspace-canvas {
  transition:
    --chrome-stop-1 200ms ease,
    --chrome-stop-2 200ms ease,
    --chrome-stop-3 200ms ease,
    --chrome-glow 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease !important;
  transition-delay: 0s !important;
}

/* A full-page color crossfade is exactly the kind of motion this setting is
   meant to suppress — in both the View Transition and fallback paths. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }

  html.vx-theme-transition,
  html.vx-theme-transition *,
  html.vx-theme-transition *::before,
  html.vx-theme-transition *::after {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Everything below: dark mode only.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 2. Document ground ────────────────────────────────────────────────── */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* ── 3. Bootstrap / Datta surfaces ─────────────────────────────────────────
   These all default to #fff in vendor CSS. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .accordion,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .page-link,
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .tab-content {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

html[data-theme="dark"] .card {
  /* Vendor shadow is a light-blue haze tuned for white pages; invisible and
     slightly milky on dark. */
  box-shadow: var(--shadow-default);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  background-color: transparent;
  border-color: var(--color-border-subtle);
  color: var(--color-text);
}

/* Datta hardcodes near-black on card titles. */
html[data-theme="dark"] .card .card-header h5,
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,
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(--color-text-strong);
}

html[data-theme="dark"] .text-muted { color: var(--color-text-muted) !important; }
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black { color: var(--color-text) !important; }

/* Datta's legacy dark.css ships a hardcoded slate on header labels. */
html[data-theme="dark"] .pcoded-header label { color: var(--color-text-muted); }

/* ── 4. Dividers ───────────────────────────────────────────────────────── */
html[data-theme="dark"] hr,
html[data-theme="dark"] .dropdown-divider {
  border-color: var(--color-border);
}

/* ── 5. Tables ─────────────────────────────────────────────────────────────
   Bootstrap's table styling is built from near-black text plus rgba blacks
   for striping/hover — the rgba blacks turn rows into mud on a dark surface,
   so they are replaced with rgba WHITES of the same weight. */
html[data-theme="dark"] .table {
  color: var(--color-text);
  border-color: var(--color-border);
}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
  border-color: var(--color-border-subtle);
}
html[data-theme="dark"] .table thead th {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  background-color: var(--color-surface-2);
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.025);
}
/* Uses the theme-aware token rather than a raw white-alpha. --color-surface-hover
   is already defined per theme (design-tokens.css: #f4f5f8 light / #303546 dark),
   so hardcoding an alpha here gave `.table-hover` tables a hover colour that no
   other table in the app used — and since this selector outranks the canonical
   rule in components.css, it silently won on every Bootstrap-classed table in
   dark mode. That is why the dashboard's lists hovered a different shade from
   the findings table. */
html[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered th,
html[data-theme="dark"] .table-bordered td {
  border-color: var(--color-border);
}

/* ── 6. Form controls ──────────────────────────────────────────────────────
   Inputs sit INSIDE cards, so they use the recessed surface rather than the
   card surface — that keeps the light theme's "input is a well" relationship
   instead of making fields vanish into the card. */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
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="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-border);
  color: var(--color-text);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] input:focus {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-accent-500);
  color: var(--color-text);
  box-shadow: var(--shadow-focus);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] input::placeholder {
  color: var(--color-text-subtle);
  opacity: 1;
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
  background-color: var(--color-surface-2);
  color: var(--color-text-disabled);
}

html[data-theme="dark"] .input-group-text {
  background-color: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* Native dropdown popups render with the UA's own palette; color-scheme on
   :root (design-tokens.css) handles most engines, this covers the option
   rows in the ones that do not. */
html[data-theme="dark"] select option {
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* ── 7. Dropdowns / menus ──────────────────────────────────────────────── */
html[data-theme="dark"] .dropdown-menu { box-shadow: var(--shadow-xl); }
html[data-theme="dark"] .dropdown-item { color: var(--color-text); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--color-surface-hover);
  color: var(--color-text-strong);
}

/* ── 8. Alerts ─────────────────────────────────────────────────────────────
   Bootstrap's contextual alerts are pale tints with dark text — the exact
   inverse of what dark mode needs. Rebuilt as deep tints with light text. */
html[data-theme="dark"] .alert-success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}
html[data-theme="dark"] .alert-danger {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-danger);
}
html[data-theme="dark"] .alert-warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning);
  color: var(--color-warning);
}
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-primary {
  background-color: var(--color-severity-info-bg);
  border-color: var(--color-severity-info);
  color: var(--color-severity-info);
}
html[data-theme="dark"] .alert-secondary,
html[data-theme="dark"] .alert-light {
  background-color: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* ── 9. Close buttons / modal chrome ───────────────────────────────────── */
html[data-theme="dark"] .close,
html[data-theme="dark"] .close span {
  color: var(--color-text-muted);
  text-shadow: none;
  opacity: 0.9;
}
html[data-theme="dark"] .close:hover { color: var(--color-text-strong); }

/* ── 10. Code / preformatted ───────────────────────────────────────────────
   Payload and request/response bodies are read constantly in this product,
   so they get a distinctly recessed well rather than blending into the card. */
html[data-theme="dark"] pre,
html[data-theme="dark"] code,
html[data-theme="dark"] kbd,
html[data-theme="dark"] samp {
  background-color: var(--color-bg-subtle);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* ── 11. Header + sidebar residuals ────────────────────────────────────────
   These are the few literals in base.html that are deliberately absolute in
   light mode (a white ring reads as "cut out of the header") and therefore
   need an explicit dark counterpart rather than a token. */
html[data-theme="dark"] .notification-badge {
  border-color: var(--chrome-stop-1);
}
html[data-theme="dark"] .mob-hamburger { color: var(--color-text-muted); }
html[data-theme="dark"] .header-icon-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}
html[data-theme="dark"] .header-user {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--color-border);
}
html[data-theme="dark"] .header-user:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-border-strong);
}

/* The animated header canvas is a light-on-white particle field; at 0.3
   opacity over dark chrome it reads as grey haze. Lighten the blend instead
   of hiding it so the motion is kept. */
html[data-theme="dark"] #bg-net-root {
  opacity: 0.18 !important;
  mix-blend-mode: screen;
}

/* ── 12. Scrollbars ────────────────────────────────────────────────────────
   base.html paints the content scrollbar with light literals; without this
   a bright white track runs down the right edge of every dark page. */
html[data-theme="dark"] .pcoded-wrapper::-webkit-scrollbar-track {
  background: var(--color-bg-subtle);
}
html[data-theme="dark"] .pcoded-wrapper::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
}
html[data-theme="dark"] .pcoded-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-subtle);
}
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-bg-subtle); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 4px;
}

/* ── 13. Modal backdrop ────────────────────────────────────────────────────
   base.html sets a slate-tinted backdrop; on dark it needs to go deeper,
   otherwise the dimmed page is barely distinguishable from the modal. */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .premium-modal {
  background: rgba(0, 0, 0, 0.65) !important;
}

/* ── 14. Third-party widgets bundled by Vite ───────────────────────────── */
html[data-theme="dark"] .notyf__toast { color: #fff; }
html[data-theme="dark"] #nprogress .bar { background: var(--color-accent-400); }

/* ── 15. Utility background classes ────────────────────────────────────────
   Bootstrap's .bg-white / .bg-light are declared !important, so beating them
   requires !important in turn. */
html[data-theme="dark"] .bg-white { background-color: var(--color-surface) !important; }
html[data-theme="dark"] .bg-light { background-color: var(--color-surface-2) !important; }
html[data-theme="dark"] .bg-dark { background-color: var(--color-dark-surface) !important; }
html[data-theme="dark"] .border { border-color: var(--color-border) !important; }
html[data-theme="dark"] .border-top { border-top-color: var(--color-border) !important; }
html[data-theme="dark"] .border-bottom { border-bottom-color: var(--color-border) !important; }
html[data-theme="dark"] .border-left { border-left-color: var(--color-border) !important; }
html[data-theme="dark"] .border-right { border-right-color: var(--color-border) !important; }

/* ── 16. Splash screen ─────────────────────────────────────────────────────
   Shown once per session before the app paints; it must match the theme or
   every session starts with a white flash-card on a dark app. */
html[data-theme="dark"] .vx-splash { background: var(--color-bg); }

/* ── 17. Breadcrumb ────────────────────────────────────────────────────── */
html[data-theme="dark"] .breadcrumb { background-color: transparent; }
html[data-theme="dark"] .header-breadcrumb .breadcrumb-item { color: var(--color-text-muted) !important; }
html[data-theme="dark"] .header-breadcrumb .breadcrumb-item.active { color: var(--color-text-strong) !important; }
html[data-theme="dark"] .header-breadcrumb .breadcrumb-separator { color: var(--color-text-disabled) !important; }
html[data-theme="dark"] .header-breadcrumb .breadcrumb-item:not(.active):hover,
html[data-theme="dark"] .header-breadcrumb .breadcrumb-item a:hover { color: var(--color-accent-700) !important; }