/*
 * theme-enhance.css — depth + form-control polish layer for Soft UI.
 *
 * Loaded after soft-ui-dashboard.css + dashboard-vocabulary.css, before
 * mobile.css. Applies at ALL viewports (not media-gated). Two concerns:
 *   1. Form controls — fix the invisible/broken native+Bootstrap checkboxes
 *      and give them a branded appearance.
 *   2. Depth — lift the "plain-jane" flat surfaces with layered shadows,
 *      branded focus states, and a subtle atmospheric background.
 *
 * Brand accent derived from the app's existing orange gradient (#f97316 ->
 * #ea580c) and logo orange (#ff600a). Exposed as --ca-* custom properties so
 * a future [data-bs-theme=dark] block can re-point them in one place.
 */

:root {
  --ca-accent: #ea580c;        /* orange-600 — checked / focus */
  --ca-accent-hover: #f97316;  /* orange-500 — hover border */
  --ca-accent-ring: rgba(234, 88, 12, 0.22);
  --ca-border: rgba(16, 24, 40, 0.10);
  --ca-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --ca-shadow-md: 0 1px 2px rgba(16, 24, 40, 0.07), 0 12px 30px -8px rgba(16, 24, 40, 0.16);
  --ca-shadow-lg: 0 2px 6px rgba(16, 24, 40, 0.08), 0 24px 48px -12px rgba(16, 24, 40, 0.26);
  /* "lit from above" inner top highlight stacked onto card shadows */
  --ca-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  /* dramatic elevation for floating surfaces (modals) */
  --ca-shadow-xl: 0 4px 10px rgba(16, 24, 40, 0.10), 0 32px 64px -16px rgba(16, 24, 40, 0.42);
  /* brand gradient used on modal headers + primary affordances */
  --ca-brand-gradient: linear-gradient(120deg, #fb8b1e 0%, #ea580c 58%, #c2410c 100%);
}

/* ===========================================================================
 * 1. Form controls — checkboxes & radios
 *
 * Bootstrap/Soft UI's .form-check-input is built for a `.form-check`
 * { padding-left:1.5em } wrapper and uses margin-left:-1.5em to sit in that
 * gutter. Django's CheckboxInput / CheckboxSelectMultiple render the input
 * WITHOUT that wrapper, so the negative margin drags the box off-screen — the
 * checkboxes look missing. Re-style from scratch as self-contained controls.
 * Attribute selectors catch every checkbox/radio app-wide regardless of class.
 * ======================================================================== */
/* `:not(.form-switch *)` leaves Bootstrap toggle switches (a pill track, not a
   box) entirely to Bootstrap — our from-scratch box geometry would otherwise
   leak in via attribute-selector specificity and distort the knob. */
input[type="checkbox"]:not(.form-switch *),
input[type="radio"]:not(.form-switch *) {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 1.2em;
  height: 1.2em;
  margin: 0 0.55em 0 0;        /* cancels the orphaned -1.5em pull */
  padding: 0;
  vertical-align: -0.22em;
  flex-shrink: 0;
  border: 1.5px solid #c2c8d4;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.85em 0.85em;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  print-color-adjust: exact;
}
input[type="checkbox"]:not(.form-switch *) { border-radius: 0.4em; }
input[type="radio"]:not(.form-switch *)    { border-radius: 50%; }

input[type="checkbox"]:not(.form-switch *):hover,
input[type="radio"]:not(.form-switch *):hover { border-color: var(--ca-accent-hover); }

input[type="checkbox"]:not(.form-switch *):checked,
input[type="radio"]:not(.form-switch *):checked {
  border-color: var(--ca-accent);
  background-color: var(--ca-accent);
}
/* crisp white tick */
input[type="checkbox"]:not(.form-switch *):checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
}
input[type="radio"]:not(.form-switch *):checked {
  background-image: radial-gradient(circle, #fff 0 36%, transparent 42%);
}
input[type="checkbox"]:not(.form-switch *):focus-visible,
input[type="radio"]:not(.form-switch *):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ca-accent-ring);
}
input[type="checkbox"]:not(.form-switch *):disabled,
input[type="radio"]:not(.form-switch *):disabled { opacity: 0.5; cursor: not-allowed; }

/* Django renders CheckboxSelectMultiple as bare `<label><input>text</label>`
   rows with no .form-check wrapper. :has() turns each into a tidy flex row.
   Excludes Bootstrap's .form-check-label so styled form-check rows are left
   alone. */
label:not(.form-check-label):has(> input[type="checkbox"]),
label:not(.form-check-label):has(> input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.35rem;
  cursor: pointer;
}

/* ===========================================================================
 * 2. Depth — lift the flat surfaces
 * ======================================================================== */

/* Atmospheric background: a fine grain texture (SVG fractal noise) layered
   over a vertical fade plus a warm brand glow top-right. The grain is what
   actually kills the "flat plastic" feel — it gives the empty canvas surface.
   Fixed attachment so it reads as a backdrop, not scrolling wallpaper. */
body.bg-gray-100 {
  background-color: #e9ebf0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(1100px 560px at 100% -12%, rgba(249, 115, 22, 0.13), transparent 58%),
    radial-gradient(900px 500px at -5% 110%, rgba(91, 103, 202, 0.07), transparent 60%),
    linear-gradient(180deg, #f4f5f8 0%, #e7e9ef 100%);
  background-attachment: fixed;
}

/* Cards: layered shadow + lit-from-above highlight + a whisper of surface
   gradient so the white isn't dead flat. Reads as a genuinely raised panel. */
.card {
  border: 1px solid var(--ca-border);
  box-shadow: var(--ca-shadow-lg), var(--ca-highlight);
  background-image: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
}

/* Separate the sidebar from the canvas with its own soft shadow + crisp edge
   so the chrome layers behind the content rather than blending into it. */
.sidenav {
  box-shadow: 0 8px 28px -10px rgba(16, 24, 40, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Inputs/selects get a touch of depth + a branded focus ring (Soft UI's
   default focus is a faint un-branded glow). */
.form-control,
.form-select {
  border: 1px solid #d6dae2;
  box-shadow: var(--ca-shadow-sm) inset;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ca-accent-hover);
  box-shadow: 0 0 0 3px var(--ca-accent-ring);
}

/* Buttons: subtle resting shadow + a small lift on hover so primary actions
   feel pressable rather than painted-on. */
.btn {
  box-shadow: var(--ca-shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--ca-shadow-md);
}
.btn:active { transform: translateY(0); }

/* The staff-dashboard health pills are flat color blocks; a layered shadow +
   gentle hover lift gives the front door tactile depth. */
.dash-health-pill {
  box-shadow: var(--ca-shadow-md);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.dash-health-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--ca-shadow-lg);
}

/* Active sidebar item: a warm tint + orange edge bar so navigation carries
   brand color instead of reading as monochrome chrome. */
.sidenav .navbar-nav > .nav-item > .nav-link.active {
  background-image: linear-gradient(90deg, rgba(234, 88, 12, 0.12), rgba(234, 88, 12, 0.02));
  box-shadow: inset 3px 0 0 var(--ca-accent);
}

/* ===========================================================================
 * 3. Modals — dramatic elevation + branded header / footer "zing"
 * ======================================================================== */

#app-modal .modal-content {
  border: none;
  border-radius: 1rem;
  overflow: hidden;                 /* clip the header gradient + footer to the radius */
  box-shadow: var(--ca-shadow-xl);
}

/* Branded gradient header — the modal's identity bar, white title + close. */
#app-modal .modal-header {
  background: var(--ca-brand-gradient);
  border-bottom: 0;
  padding: 0.9rem 1.25rem;
}
#app-modal .modal-header .modal-title {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.2px;
}
#app-modal .modal-header .btn-close {
  filter: brightness(0) invert(1);  /* white X on the orange bar */
  opacity: 0.85;
}
#app-modal .modal-header .btn-close:hover { opacity: 1; }

/* Consistent modal-body padding so every form partial looks uniform regardless
   of its own wrapper markup. Overrides Bootstrap's 1rem default to give forms
   a touch more breathing room against the modal edges. */
#app-modal .modal-body { padding: 1.25rem 1.5rem; }

/* Uniform vertical rhythm for form groups so successive .mb-3 fields don't
   compound with the body padding and create uneven gaps. */
#app-modal .modal-body .mb-3 { margin-bottom: 1rem !important; }

/* The last row/flex row of the form body shouldn't add bottom margin — the
   footer tinted bar that follows already has its own top spacing. */
#app-modal .modal-body form > .row:last-of-type,
#app-modal .modal-body form > .d-flex:last-child { margin-bottom: 0; }

/* The form's action row is the de-facto modal footer (no real .modal-footer).
   Give it a tinted bar + top divider, bled to the modal-body edges (1rem
   padding). All viewports; mobile.css layers the sticky + full-width-stack
   behavior on top of this look. */
#modal-body .d-flex.justify-content-end,
#modal-body .d-flex.justify-content-between {
  margin: 1.25rem -1rem -1rem;
  padding: 0.85rem 1.25rem;
  background: linear-gradient(180deg, #f7f8fb 0%, #eceef4 100%);
  border-top: 1px solid rgba(16, 24, 40, 0.10);
}

/* ===========================================================================
 * 4. Theme toggle icons — show the icon matching the OPPOSITE of active theme
 *    (moon while light = "switch to dark"; sun while dark = "switch to light").
 * ======================================================================== */
.theme-icon-light { display: none; }
.theme-icon-dark  { display: inline-block; }
[data-bs-theme="dark"] .theme-icon-dark  { display: none; }
[data-bs-theme="dark"] .theme-icon-light { display: inline-block; }

/* ===========================================================================
 * 5. Dark mode
 *
 * Soft UI is a light-only template: it hardcodes white card/modal/input
 * surfaces, `bg-gray-100`, `text-dark`, and `rgba(255,255,255,…)` navbar /
 * sidebar fills. Bootstrap 5.3's `data-bs-theme="dark"` (set on <html>) flips
 * Bootstrap's own components, but the Soft UI overrides + this file's depth
 * layer need explicit dark counterparts. We re-point the --ca-* vars first,
 * then override the surfaces that break legibility in dark. The brand orange
 * accent + the modal-header gradient are deliberately KEPT.
 * ======================================================================== */
[data-bs-theme="dark"] {
  /* Keep the orange accent; soften the ring a touch for the darker canvas. */
  --ca-accent: #f97316;
  --ca-accent-hover: #fb923c;
  --ca-accent-ring: rgba(249, 115, 22, 0.30);
  --ca-border: rgba(255, 255, 255, 0.12);
  --ca-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --ca-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 30px -8px rgba(0, 0, 0, 0.55);
  --ca-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.50), 0 24px 48px -12px rgba(0, 0, 0, 0.65);
  --ca-shadow-xl: 0 4px 10px rgba(0, 0, 0, 0.55), 0 32px 64px -16px rgba(0, 0, 0, 0.75);
  /* top highlight near-invisible on dark — keep it subtle, not white */
  --ca-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  /* Dark surface palette */
  --ca-bg: #11131a;
  --ca-surface: #1b1e27;
  --ca-surface-2: #232733;
  --ca-text: #f2f4f8;
  /* Muted text is for metadata/secondary copy: lift it well clear of the dark
     surfaces so it still clears WCAG AA (~4.5:1) on #1b1e27/#11131a instead of
     vanishing. Soft UI's defaults (#67748e / .text-muted) are far too dim. */
  --ca-text-muted: #b6bdcc;
  /* Inactive sidebar nav items: a clearly legible light grey, distinct from the
     near-white active label so hierarchy survives. */
  --ca-sidenav-link: #c4cbd9;
}

/* Canvas: dark gradient, drop the noise + warm glow that read as grime on dark. */
[data-bs-theme="dark"] body.bg-gray-100 {
  background-color: var(--ca-bg);
  background-image: linear-gradient(180deg, #161922 0%, #0f1117 100%);
  background-attachment: fixed;
  color: var(--ca-text);
}

/* Cards: dark surface + border, no white surface gradient. */
[data-bs-theme="dark"] .card {
  background-color: var(--ca-surface);
  background-image: none;
  border: 1px solid var(--ca-border);
  box-shadow: var(--ca-shadow-lg), var(--ca-highlight);
  color: var(--ca-text);
}
/* Soft UI gives .card-header its own (white-ish) bg + hardcodes heading colors
   to a dark slate (#344767). On dark that's an opaque pale strip with
   near-invisible titles — make the header transparent and lift heading text. */
[data-bs-theme="dark"] .card .card-header {
  background-color: transparent;
  color: var(--ca-text);
}
[data-bs-theme="dark"] .main-content h1,
[data-bs-theme="dark"] .main-content h2,
[data-bs-theme="dark"] .main-content h3,
[data-bs-theme="dark"] .main-content h4,
[data-bs-theme="dark"] .main-content h5,
[data-bs-theme="dark"] .main-content h6,
[data-bs-theme="dark"] .main-content .h1,
[data-bs-theme="dark"] .main-content .h2,
[data-bs-theme="dark"] .main-content .h3,
[data-bs-theme="dark"] .main-content .h4,
[data-bs-theme="dark"] .main-content .h5,
[data-bs-theme="dark"] .main-content .h6 {
  color: var(--ca-text);
}

/* Sidebar + top navbar: opaque dark glass instead of white rgba fills.
   Inline styles on these elements set rgba(255,255,255,…) so we need the
   attribute-scoped rule to override (same specificity tier wins via cascade
   only if specificity is high enough — inline wins, so bump with !important). */
[data-bs-theme="dark"] .sidenav {
  background-color: rgba(27, 30, 39, 0.94) !important;
  border: 1px solid var(--ca-border);
  box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.7);
}
[data-bs-theme="dark"] .navbar-main {
  background-color: rgba(27, 30, 39, 0.85) !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5) !important;
}

/* Sidebar text legibility ---------------------------------------------------
 * Soft UI colors inactive sidebar nav-links + their labels/icons in a dim
 * slate that's fine on white but unreadable on the dark rail. It also leans on
 * .text-dark and low .opacity-* utilities for icon glyphs. Lift every piece of
 * sidebar text to a legible light grey (inactive) or near-white (active), and
 * neutralise the opacity dimming so glyphs/labels actually show. */
[data-bs-theme="dark"] .sidenav .navbar-nav .nav-link,
[data-bs-theme="dark"] .sidenav .navbar-nav .nav-link .nav-link-text,
[data-bs-theme="dark"] .sidenav .navbar-nav .nav-link .sidenav-normal,
[data-bs-theme="dark"] .sidenav .navbar-nav .nav-link .sidenav-mini-icon,
[data-bs-theme="dark"] .sidenav .navbar-nav .nav-link i,
[data-bs-theme="dark"] .sidenav .navbar-nav .nav-link svg {
  color: var(--ca-sidenav-link) !important;
}
/* Soft UI's active sidebar item is a SOLID WHITE pill (#fff) with dark text.
   On the dark rail that white pill blazes and (after we lift text to near-white)
   becomes white-on-white. Re-skin the active pill to a dark, orange-tinted
   surface so the near-white label/icon read clearly as selected. */
[data-bs-theme="dark"] .sidenav .navbar-nav > .nav-item > .nav-link.active {
  background-color: rgba(249, 115, 22, 0.16) !important;
  background-image: linear-gradient(90deg, rgba(249, 115, 22, 0.22), rgba(249, 115, 22, 0.06)) !important;
  box-shadow: inset 3px 0 0 var(--ca-accent) !important;
}
/* Active item label/icon → near-white so it reads as selected, not just tinted. */
[data-bs-theme="dark"] .sidenav .navbar-nav .nav-link.active,
[data-bs-theme="dark"] .sidenav .navbar-nav .nav-link.active .nav-link-text,
[data-bs-theme="dark"] .sidenav .navbar-nav .nav-link.active .sidenav-normal,
[data-bs-theme="dark"] .sidenav .navbar-nav .nav-link.active .sidenav-mini-icon,
[data-bs-theme="dark"] .sidenav .navbar-nav .nav-link.active i {
  color: var(--ca-text) !important;
}
/* Hover/focus → near-white feedback on the otherwise-grey inactive items. */
[data-bs-theme="dark"] .sidenav .navbar-nav .nav-link:hover,
[data-bs-theme="dark"] .sidenav .navbar-nav .nav-link:hover .nav-link-text,
[data-bs-theme="dark"] .sidenav .navbar-nav .nav-link:hover .sidenav-normal,
[data-bs-theme="dark"] .sidenav .navbar-nav .nav-link:hover i {
  color: var(--ca-text) !important;
}
/* Section headings ("STAFF" / "ACCOUNT") + the brand wordmark. */
[data-bs-theme="dark"] .sidenav .navbar-heading,
[data-bs-theme="dark"] .sidenav .navbar-brand,
[data-bs-theme="dark"] .sidenav .navbar-brand .text-dark {
  color: var(--ca-text-muted) !important;
}
[data-bs-theme="dark"] .sidenav .navbar-brand,
[data-bs-theme="dark"] .sidenav .navbar-brand span {
  color: var(--ca-text) !important;
}
/* Sidebar uses .opacity-{5,6,7,8} on glyphs/labels to soft-dim them; on dark
   that compounds with the muted base into invisibility. Restore full opacity
   inside the rail so the lifted colors above are actually visible. */
[data-bs-theme="dark"] .sidenav .nav-link .opacity-5,
[data-bs-theme="dark"] .sidenav .nav-link .opacity-6,
[data-bs-theme="dark"] .sidenav .nav-link .opacity-7,
[data-bs-theme="dark"] .sidenav .nav-link .opacity-8,
[data-bs-theme="dark"] .sidenav .nav-link.opacity-5,
[data-bs-theme="dark"] .sidenav .nav-link.opacity-6,
[data-bs-theme="dark"] .sidenav .nav-link.opacity-7,
[data-bs-theme="dark"] .sidenav .nav-link.opacity-8 {
  opacity: 1 !important;
}

/* Inputs / selects: dark fill, light text, visible border. */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--ca-surface-2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--ca-text);
  box-shadow: var(--ca-shadow-sm) inset;
}
[data-bs-theme="dark"] .form-control::placeholder { color: var(--ca-text-muted); }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--ca-surface-2);
  border-color: var(--ca-accent-hover);
  box-shadow: 0 0 0 3px var(--ca-accent-ring);
  color: var(--ca-text);
}
/* Bootstrap renders the select chevron as a dark SVG; swap to a light one. */
[data-bs-theme="dark"] .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='%23e6e8ee' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

/* Checkbox / radio: white box → dark box, keep the orange-checked state. */
[data-bs-theme="dark"] input[type="checkbox"]:not(.form-switch *),
[data-bs-theme="dark"] input[type="radio"]:not(.form-switch *) {
  background-color: var(--ca-surface-2);
  border-color: rgba(255, 255, 255, 0.28);
}
[data-bs-theme="dark"] input[type="checkbox"]:not(.form-switch *):checked,
[data-bs-theme="dark"] input[type="radio"]:not(.form-switch *):checked {
  background-color: var(--ca-accent);
  border-color: var(--ca-accent);
}

/* Modals: dark body surface; KEEP the brand gradient header. Footer bar → dark tint. */
[data-bs-theme="dark"] #app-modal .modal-content {
  background-color: var(--ca-surface);
  color: var(--ca-text);
  box-shadow: var(--ca-shadow-xl);
}
[data-bs-theme="dark"] #modal-body .d-flex.justify-content-end,
[data-bs-theme="dark"] #modal-body .d-flex.justify-content-between {
  background: linear-gradient(180deg, #20242e 0%, #181b23 100%);
  border-top: 1px solid var(--ca-border);
}
/* Form labels (Soft UI renders them in a dim slate ~#67748e) read as dark-on-dark
   in the modal + forms. Lift to the muted-light token for comfortable contrast. */
[data-bs-theme="dark"] #modal-body label,
[data-bs-theme="dark"] .main-content .form-label,
[data-bs-theme="dark"] .main-content label,
[data-bs-theme="dark"] #modal-body .form-text,
[data-bs-theme="dark"] .main-content .form-text {
  color: var(--ca-text) !important;
}

/* Soft UI uses .text-dark liberally for body copy + sidebar labels + icons.
   On a dark canvas that's black-on-near-black. Lift it to the light text token.
   Scope to content/sidebar/nav so we don't fight the white-on-orange modal
   header (its title is set explicitly above). */
[data-bs-theme="dark"] .main-content .text-dark,
[data-bs-theme="dark"] .sidenav .text-dark,
[data-bs-theme="dark"] .navbar-main .text-dark {
  color: var(--ca-text) !important;
}
/* `.text-body` (navbar links/icons) and breadcrumb resolve to dark by default. */
[data-bs-theme="dark"] .navbar-main .text-body,
[data-bs-theme="dark"] .navbar-main .nav-link,
[data-bs-theme="dark"] .breadcrumb-item,
[data-bs-theme="dark"] .breadcrumb-item a { color: var(--ca-text) !important; }

/* Sidebar icon chips are `bg-white` squares with a dark glyph — invert to a
   dark chip so the white tiles don't blaze on the dark rail. */
[data-bs-theme="dark"] .sidenav .icon.bg-white {
  background-color: var(--ca-surface-2) !important;
}

/* Table surfaces + borders: Soft UI tables are white with light-gray rules. */
[data-bs-theme="dark"] .table {
  --bs-table-color: var(--ca-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--ca-border);
  color: var(--ca-text);
}
[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th { border-color: var(--ca-border); }

/* Horizontal rules / dividers in the sidebar. */
[data-bs-theme="dark"] hr.horizontal.dark {
  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

/* Dropdown menus (Bootstrap 5.3 themes these via data-bs-theme already, but
   Soft UI overrides the surface) — make sure they're dark + legible. */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--ca-surface);
  border: 1px solid var(--ca-border);
  color: var(--ca-text);
}
[data-bs-theme="dark"] .dropdown-item { color: var(--ca-text); }
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--ca-surface-2);
  color: var(--ca-text);
}

/* Health pills on the staff dashboard are flat color blocks with white text by
   design; on dark we keep them but ensure their own text stays legible. The
   colored variants already carry sufficient contrast; only the neutral/secondary
   pill needs help. */
[data-bs-theme="dark"] .dash-health-pill.bg-secondary,
[data-bs-theme="dark"] .dash-health-pill.bg-light {
  background-color: var(--ca-surface-2) !important;
  color: var(--ca-text) !important;
}

/* Soft UI’s `.bg-white` content panels (used outside .card) and `.bg-gray-*`
   helper surfaces would stay light. Re-point the common ones used as panels. */
[data-bs-theme="dark"] .main-content .bg-white {
  background-color: var(--ca-surface) !important;
  color: var(--ca-text);
}
[data-bs-theme="dark"] .main-content .bg-gray-100,
[data-bs-theme="dark"] .main-content .bg-gray-200 {
  background-color: var(--ca-surface-2) !important;
}

/* Muted/secondary text used for metadata — lift off pure-dark so it's readable.
   Soft UI also styles .text-secondary heavily for table cells, card sub-copy,
   timestamps, etc. Cover the modal too so dialog body copy is legible. */
[data-bs-theme="dark"] .main-content .text-secondary,
[data-bs-theme="dark"] .main-content .text-muted,
[data-bs-theme="dark"] .main-content .text-body,
[data-bs-theme="dark"] #modal-body .text-secondary,
[data-bs-theme="dark"] #modal-body .text-muted {
  color: var(--ca-text-muted) !important;
}

/* Small-text utilities (.text-sm/.text-xs) are used everywhere for body copy and
   often pair with a grey color or sit on a dark card; ensure they default to the
   light body token rather than inheriting a dark slate. .text-xxs drives the
   uppercase table headers (NAME / EMAIL / STAFF …) which were near-invisible. */
[data-bs-theme="dark"] .main-content .text-sm,
[data-bs-theme="dark"] .main-content .text-xs,
[data-bs-theme="dark"] #modal-body .text-sm,
[data-bs-theme="dark"] #modal-body .text-xs {
  color: var(--ca-text);
}
[data-bs-theme="dark"] .main-content .text-xxs,
[data-bs-theme="dark"] .main-content .table thead th,
[data-bs-theme="dark"] .main-content .table .text-uppercase.text-secondary {
  color: var(--ca-text-muted) !important;
}

/* Table body cells: Soft UI wraps cell content in .text-secondary/.text-sm
   spans; make sure the actual data is the bright body color, secondary copy the
   muted one. */
[data-bs-theme="dark"] .main-content .table td,
[data-bs-theme="dark"] .main-content .table th {
  color: var(--ca-text);
}
[data-bs-theme="dark"] .main-content .table td .text-secondary,
[data-bs-theme="dark"] .main-content .table td .text-xs,
[data-bs-theme="dark"] .main-content .table td .text-sm.text-secondary {
  color: var(--ca-text-muted) !important;
}

/* Content text dimmed via .opacity-{5,6,7} reads as dark-on-dark; raise the
   floor so dimmed-but-meaningful copy stays readable (don't touch decorative
   backgrounds/borders, only text-bearing utilities scoped to content). */
[data-bs-theme="dark"] .main-content .text-sm.opacity-5,
[data-bs-theme="dark"] .main-content .text-sm.opacity-6,
[data-bs-theme="dark"] .main-content .text-xs.opacity-5,
[data-bs-theme="dark"] .main-content .text-xs.opacity-6,
[data-bs-theme="dark"] .main-content p.opacity-5,
[data-bs-theme="dark"] .main-content p.opacity-6,
[data-bs-theme="dark"] .main-content span.opacity-5,
[data-bs-theme="dark"] .main-content span.opacity-6 {
  opacity: 0.85;
  color: var(--ca-text-muted) !important;
}

/* Breadcrumb separators/inactive crumbs + card-header sub-labels. */
[data-bs-theme="dark"] .breadcrumb-item.active,
[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--ca-text-muted) !important;
}
[data-bs-theme="dark"] .card .card-header .text-sm,
[data-bs-theme="dark"] .card .card-header .text-secondary,
[data-bs-theme="dark"] .card .card-header .text-muted {
  color: var(--ca-text-muted) !important;
}

/* Modal close button is already inverted white on the orange header; leave it. */

/* ---------------------------------------------------------------------------
 * Page-loading toast (#page-loader)
 *
 * Non-blocking corner toast shown while a main-content navigation into
 * #body-swap is in flight (see the Hyperscript on the element in base.html).
 * Slow pages (e.g. the power PDU detail) otherwise gave no feedback during
 * the multi-second server render. Visibility is controlled by the `hidden`
 * attribute (toggled by Hyperscript); this rule only styles the toast, so
 * `display: flex` applies only while `hidden` is absent.
 * ------------------------------------------------------------------------- */
.page-loader {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1090;            /* above page content and Bootstrap modal (1055) so a body-swap nav from an open modal still shows feedback */
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  background: #fff;
  color: #1b1e27;
  border: 1px solid var(--ca-border);
  border-radius: 0.5rem;
  box-shadow: var(--ca-shadow-lg);
}
.page-loader__text { font-weight: 600; font-size: 0.9rem; }

[data-bs-theme="dark"] .page-loader {
  background: var(--ca-surface);
  color: var(--ca-text);
}