@import '/shared/styles/tokens.css';
@import '/shared/styles/wn-primitives.css?v=20260516';
@import '/tailwind.css?v=tw-20260528a';
@import '/styles/ui-kit.css';
@import '/styles/page-header.css?v=20260524a';
@import '/mobile-global.css' screen and (max-width: 1024px);
@import '/mobile-tablet-hardening.css?v=20260501e';

/* Shared shell layout baseline (Companies page density) */
.wn-shell .wn-shell-container,
.wn-shell .page-container,
.wn-shell .content-wrapper,
.wn-shell [data-wn-content],
.wn-shell .container {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

.wn-shell .wn-shell-container,
.wn-shell .wn-shell-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  gap: 0.5rem !important;
}

.wn-shell .wn-shell-page > .w-full,
.wn-shell .wn-shell-page > #pageContent,
.wn-shell #appMain > div {
  margin: 0 !important;
  padding: 0.5rem !important;
}

@media (min-width: 640px) {
  .wn-shell .wn-shell-page > .w-full,
  .wn-shell .wn-shell-page > #pageContent,
  .wn-shell #appMain > div {
    padding: 0.75rem !important;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  background: hsl(var(--background-hsl));
  color: hsl(var(--foreground-hsl));
}

/* Dark-mode compatibility layer for legacy utility classes used across pages. */
:root[data-theme='dark'] {
  color-scheme: dark;
}

:root[data-theme='dark'] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.16) !important; }
:root[data-theme='dark'] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.22) !important; }
:root[data-theme='dark'] .bg-slate-50 { background-color: rgba(30, 41, 59, 0.64) !important; }
:root[data-theme='dark'] .bg-slate-100 { background-color: rgba(51, 65, 85, 0.72) !important; }
:root[data-theme='dark'] .bg-slate-200 { background-color: rgba(71, 85, 105, 0.78) !important; }
:root[data-theme='dark'] .bg-slate-700 { background-color: rgba(51, 65, 85, 0.86) !important; }
:root[data-theme='dark'] .bg-slate-800 { background-color: rgba(30, 41, 59, 0.92) !important; }
:root[data-theme='dark'] .bg-slate-900 { background-color: rgba(15, 23, 42, 0.96) !important; }
:root[data-theme='dark'] .bg-green-50 { background-color: rgba(34, 197, 94, 0.16) !important; }
:root[data-theme='dark'] .bg-green-100 { background-color: rgba(34, 197, 94, 0.22) !important; }
:root[data-theme='dark'] .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.16) !important; }
:root[data-theme='dark'] .bg-emerald-100,
:root[data-theme='dark'] .bg-green-100 { background-color: rgba(16, 185, 129, 0.22) !important; }
:root[data-theme='dark'] .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.26) !important; }
:root[data-theme='dark'] .bg-cyan-300 { background-color: rgba(8, 145, 178, 0.42) !important; }
:root[data-theme='dark'] .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.20) !important; }
:root[data-theme='dark'] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.28) !important; }
:root[data-theme='dark'] .bg-amber-50 { background-color: rgba(245, 158, 11, 0.16) !important; }
:root[data-theme='dark'] .bg-amber-100 { background-color: rgba(245, 158, 11, 0.22) !important; }
:root[data-theme='dark'] .bg-rose-50,
:root[data-theme='dark'] .bg-red-50 { background-color: rgba(244, 63, 94, 0.16) !important; }
:root[data-theme='dark'] .bg-rose-100,
:root[data-theme='dark'] .bg-red-100 { background-color: rgba(244, 63, 94, 0.22) !important; }
:root[data-theme='dark'] .bg-white,
:root[data-theme='dark'] .bg-white\/70,
:root[data-theme='dark'] .bg-white\/85,
:root[data-theme='dark'] .bg-white\/90,
:root[data-theme='dark'] .bg-white\/95 { background-color: hsl(var(--card-hsl)) !important; }

:root[data-theme='dark'] .border-blue-200 { border-color: rgba(96, 165, 250, 0.45) !important; }
:root[data-theme='dark'] .border-neutral-200,
:root[data-theme='dark'] .border-neutral-300 { border-color: hsl(var(--border-hsl)) !important; }
:root[data-theme='dark'] .border-slate-200,
:root[data-theme='dark'] .border-slate-300 { border-color: rgba(100, 116, 139, 0.60) !important; }
:root[data-theme='dark'] .border-emerald-200 { border-color: rgba(52, 211, 153, 0.45) !important; }
:root[data-theme='dark'] .border-cyan-300,
:root[data-theme='dark'] .border-cyan-500 { border-color: rgba(34, 211, 238, 0.58) !important; }
:root[data-theme='dark'] .border-indigo-200,
:root[data-theme='dark'] .border-indigo-300 { border-color: rgba(129, 140, 248, 0.58) !important; }
:root[data-theme='dark'] .border-amber-200,
:root[data-theme='dark'] .border-amber-300 { border-color: rgba(251, 191, 36, 0.5) !important; }
:root[data-theme='dark'] .border-rose-200,
:root[data-theme='dark'] .border-rose-300,
:root[data-theme='dark'] .border-red-200,
:root[data-theme='dark'] .border-red-300 { border-color: rgba(251, 113, 133, 0.5) !important; }

:root[data-theme='dark'] .text-blue-700,
:root[data-theme='dark'] .text-blue-600,
:root[data-theme='dark'] .text-blue-500,
:root[data-theme='dark'] .text-blue-800,
:root[data-theme='dark'] .text-blue-900 { color: #93c5fd !important; }
:root[data-theme='dark'] .text-slate-500,
:root[data-theme='dark'] .text-slate-700 { color: #cbd5e1 !important; }
:root[data-theme='dark'] .text-slate-900 { color: #f8fafc !important; }
:root[data-theme='dark'] .text-emerald-700,
:root[data-theme='dark'] .text-emerald-600,
:root[data-theme='dark'] .text-emerald-500,
:root[data-theme='dark'] .text-emerald-800,
:root[data-theme='dark'] .text-emerald-900,
:root[data-theme='dark'] .text-green-700,
:root[data-theme='dark'] .text-green-600,
:root[data-theme='dark'] .text-green-500,
:root[data-theme='dark'] .text-green-800 { color: #86efac !important; }
:root[data-theme='dark'] .text-amber-700,
:root[data-theme='dark'] .text-amber-600,
:root[data-theme='dark'] .text-amber-500,
:root[data-theme='dark'] .text-amber-800,
:root[data-theme='dark'] .text-amber-900 { color: #fcd34d !important; }
:root[data-theme='dark'] .text-cyan-900,
:root[data-theme='dark'] .text-cyan-800 { color: #a5f3fc !important; }
:root[data-theme='dark'] .text-indigo-900,
:root[data-theme='dark'] .text-indigo-800,
:root[data-theme='dark'] .text-indigo-700 { color: #c7d2fe !important; }
:root[data-theme='dark'] .text-rose-700,
:root[data-theme='dark'] .text-rose-600,
:root[data-theme='dark'] .text-rose-500,
:root[data-theme='dark'] .text-rose-800,
:root[data-theme='dark'] .text-rose-900,
:root[data-theme='dark'] .text-red-600,
:root[data-theme='dark'] .text-red-500,
:root[data-theme='dark'] .text-red-700,
:root[data-theme='dark'] .text-red-800,
:root[data-theme='dark'] .text-red-900 { color: #fda4af !important; }
:root[data-theme='dark'] .text-neutral-900 { color: hsl(var(--foreground-hsl)) !important; }

/* App-wide theme audit (2026-05-21): the dark-mode overrides above caught
   the heavily-used slate/neutral-200/300/900 set but the long tail of
   gray/neutral/zinc surface and text utilities still painted light values
   on dark surfaces. Filling those in here so JS-rendered modals, dropdowns
   and legacy partials theme correctly without per-call `dark:` variants. */
:root[data-theme='dark'] .bg-gray-50,
:root[data-theme='dark'] .bg-zinc-50,
:root[data-theme='dark'] .bg-neutral-50 { background-color: hsl(var(--muted-hsl) / 0.25) !important; }
:root[data-theme='dark'] .bg-gray-100,
:root[data-theme='dark'] .bg-zinc-100,
:root[data-theme='dark'] .bg-neutral-100 { background-color: hsl(var(--muted-hsl) / 0.45) !important; }
:root[data-theme='dark'] .bg-gray-200,
:root[data-theme='dark'] .bg-zinc-200,
:root[data-theme='dark'] .bg-neutral-200 { background-color: hsl(var(--muted-hsl) / 0.65) !important; }

:root[data-theme='dark'] .text-gray-400,
:root[data-theme='dark'] .text-zinc-400,
:root[data-theme='dark'] .text-neutral-400,
:root[data-theme='dark'] .text-gray-500,
:root[data-theme='dark'] .text-zinc-500,
:root[data-theme='dark'] .text-neutral-500,
:root[data-theme='dark'] .text-gray-600,
:root[data-theme='dark'] .text-zinc-600,
:root[data-theme='dark'] .text-neutral-600 { color: hsl(var(--muted-foreground-hsl)) !important; }
:root[data-theme='dark'] .text-gray-700,
:root[data-theme='dark'] .text-zinc-700,
:root[data-theme='dark'] .text-neutral-700,
:root[data-theme='dark'] .text-gray-800,
:root[data-theme='dark'] .text-zinc-800,
:root[data-theme='dark'] .text-neutral-800,
:root[data-theme='dark'] .text-gray-900,
:root[data-theme='dark'] .text-zinc-900 { color: hsl(var(--foreground-hsl)) !important; }

:root[data-theme='dark'] .border-gray-200,
:root[data-theme='dark'] .border-gray-300,
:root[data-theme='dark'] .border-zinc-200,
:root[data-theme='dark'] .border-zinc-300 { border-color: hsl(var(--border-hsl)) !important; }

:root[data-theme='dark'] .divide-gray-200 > * + *,
:root[data-theme='dark'] .divide-slate-200 > * + *,
:root[data-theme='dark'] .divide-neutral-200 > * + *,
:root[data-theme='dark'] .divide-zinc-200 > * + * { border-color: hsl(var(--border-hsl)) !important; }

:root[data-theme='dark'] .hover\:bg-gray-50:hover,
:root[data-theme='dark'] .hover\:bg-zinc-50:hover,
:root[data-theme='dark'] .hover\:bg-neutral-50:hover { background-color: hsl(var(--muted-hsl) / 0.30) !important; }
:root[data-theme='dark'] .hover\:bg-gray-100:hover,
:root[data-theme='dark'] .hover\:bg-zinc-100:hover,
:root[data-theme='dark'] .hover\:bg-neutral-100:hover { background-color: hsl(var(--muted-hsl) / 0.50) !important; }

:root[data-theme='dark'] .hover\:bg-rose-50:hover,
:root[data-theme='dark'] .hover\:bg-red-50:hover { background-color: rgba(244, 63, 94, 0.18) !important; }
:root[data-theme='dark'] .hover\:bg-amber-50:hover { background-color: rgba(245, 158, 11, 0.18) !important; }
:root[data-theme='dark'] .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.18) !important; }

:root[data-theme='dark'] .hover\:text-red-700:hover,
:root[data-theme='dark'] .hover\:text-red-600:hover,
:root[data-theme='dark'] .hover\:text-red-500:hover,
:root[data-theme='dark'] .hover\:text-red-800:hover,
:root[data-theme='dark'] .hover\:text-rose-700:hover { color: #fecdd3 !important; }

/* ============================================================
   Light-mode interactive surface remap (2026-05-25).
   Mirror image of the dark-mode block above. In LIGHT mode the legacy
   `hover:bg-slate-50/100` greys (used on the topbar icon buttons, the
   notification menu items and row actions in layout-chrome.js) painted a
   flat grey hover slab that looked unintentional. Map the *interactive*
   grey hover utilities to a faint brand tint so hover/press affordances
   match the appearance accent. Resting near-white grey section backgrounds
   are deliberately left alone — they are non-interactive muted surfaces.
   `:root:not([data-theme='dark'])` scopes these to light mode only, so the
   dark overrides above (and dark mode generally) are preserved.
   ============================================================ */
:root:not([data-theme='dark']) .hover\:bg-slate-50:hover,
:root:not([data-theme='dark']) .hover\:bg-gray-50:hover,
:root:not([data-theme='dark']) .hover\:bg-zinc-50:hover,
:root:not([data-theme='dark']) .hover\:bg-neutral-50:hover,
:root:not([data-theme='dark']) .hover\:bg-stone-50:hover { background-color: hsl(var(--brand-hsl) / 0.06) !important; }
:root:not([data-theme='dark']) .hover\:bg-slate-100:hover,
:root:not([data-theme='dark']) .hover\:bg-gray-100:hover,
:root:not([data-theme='dark']) .hover\:bg-zinc-100:hover,
:root:not([data-theme='dark']) .hover\:bg-neutral-100:hover,
:root:not([data-theme='dark']) .hover\:bg-stone-100:hover { background-color: hsl(var(--brand-hsl) / 0.10) !important; }
:root:not([data-theme='dark']) .hover\:bg-slate-200:hover,
:root:not([data-theme='dark']) .hover\:bg-gray-200:hover,
:root:not([data-theme='dark']) .hover\:bg-zinc-200:hover,
:root:not([data-theme='dark']) .hover\:bg-neutral-200:hover,
:root:not([data-theme='dark']) .hover\:bg-stone-200:hover { background-color: hsl(var(--brand-hsl) / 0.14) !important; }

/* ============================================================
   Light-mode: muted surfaces carry NO fill (2026-05-25).
   Parity with apps/web/src/globals.css. In LIGHT mode every `bg-muted`
   surface (panels, segmented controls, view switchers, chips, hovers,
   "field" backgrounds across the static pages) shows the page/card behind
   it instead of a grey fill. Zeroes the background for all `bg-muted`
   utilities (resting, `bg-muted/NN`, and `hover:`/`focus:`/`active:`
   variants). `bg-muted-foreground` is excluded. Dark mode is untouched.
   ============================================================ */
:root:not([data-theme='dark']):not(.dark) [class*="bg-muted"]:not([class*="bg-muted-foreground"]) {
  background-color: transparent !important;
}
/* Keep loading skeletons visible (they pulse a muted fill). */
:root:not([data-theme='dark']):not(.dark) .animate-pulse[class*="bg-muted"]:not([class*="bg-muted-foreground"]) {
  background-color: hsl(214.3 31.8% 91%) !important;
}

/* ============================================================
   Shared shell sidebar — single source of truth for collapsed,
   expanded, and auto-collapse states. Augments the partial
   rules emitted by tailwind.css.
   Selectors mirror the JS state model in layout-chrome.js:
     - body[data-sidebar-collapsed="true"]      → manual collapsed
     - body[data-sidebar-auto-collapse="true"]  → auto-collapse mode
     - .wn-sidebar.is-collapsed / .is-expanded / .is-auto-collapse
   ============================================================ */
:root {
  --sidebar-expanded-width: 18rem;
  --sidebar-collapsed-width: 4.5rem;
  --wn-shell-bg: hsl(var(--background-hsl));
}

/* Accent-aware shell tint: keep the base neutral layout, but softly blend in
   the selected appearance accent so page chrome visibly matches user settings. */
:root[data-user-accent]:not([data-user-accent='default']) {
  --wn-shell-bg: color-mix(in oklab, var(--user-accent) 10%, hsl(var(--background-hsl)));
}

:root[data-theme='dark'][data-user-accent]:not([data-user-accent='default']) {
  --wn-shell-bg: color-mix(in oklab, var(--user-accent) 14%, hsl(var(--background-hsl)));
}

.wn-shell,
.wn-shell-body,
.wn-shell-main {
  background-color: var(--wn-shell-bg) !important;
}

/* Aside is a flex column. Inner <nav> scrolls; bottom block stays pinned. */
.wn-shell-sidebar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wn-shell-sidebar > nav#moduleLinks {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.wn-shell-sidebar .ce-navigator__bottom-menu {
  margin-top: auto;
  flex-shrink: 0;
}

/* Default: collapsed-only controls hidden in expanded mode. */
.sidebar-collapsed-only { display: none !important; }

/* Smooth width transition on the aside on desktop. */
@media (min-width: 1024px) {
  .wn-shell-sidebar {
    transition: width 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
}

/* Sidebar icon visibility — readable in both light and dark mode. */
.wn-shell-sidebar .nav-icon {
  background: color-mix(in srgb, var(--accent, #4f46e5) 14%, transparent);
  color: var(--accent, #4f46e5);
  opacity: 1;
}
:root[data-theme='dark'] .wn-shell-sidebar .nav-icon {
  background: rgba(129, 140, 248, 0.20);
  color: #c7d2fe;
}

/* ── Manual / persistent collapsed state (desktop) ── */
@media (min-width: 1024px) {
  body[data-sidebar-collapsed="true"] .wn-shell-sidebar,
  .wn-shell-sidebar.is-collapsed {
    width: var(--sidebar-collapsed-width, 4.5rem);
  }
  body[data-sidebar-collapsed="true"] .wn-shell-sidebar .sidebar-hideable,
  .wn-shell-sidebar.is-collapsed .sidebar-hideable {
    display: none !important;
  }
  body[data-sidebar-collapsed="true"] .wn-shell-sidebar .sidebar-collapsed-only,
  .wn-shell-sidebar.is-collapsed .sidebar-collapsed-only {
    display: inline-flex !important;
  }
  body[data-sidebar-collapsed="true"] .wn-shell-sidebar .nav-link,
  .wn-shell-sidebar.is-collapsed .nav-link {
    justify-content: center;
    gap: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  body[data-sidebar-collapsed="true"] .wn-shell-sidebar .nav-icon,
  .wn-shell-sidebar.is-collapsed .nav-icon {
    margin-inline: auto;
  }
  body[data-sidebar-collapsed="true"] .wn-shell-sidebar .submenu-inline,
  .wn-shell-sidebar.is-collapsed .submenu-inline {
    display: none !important;
  }
  body[data-sidebar-collapsed="true"] .wn-shell-sidebar .ce-navigator__bottom-menu > div,
  .wn-shell-sidebar.is-collapsed .ce-navigator__bottom-menu > div {
    justify-content: center;
    gap: 0;
  }
}

/* ── Auto-collapse mode: collapsed at rest, expand on hover/focus ── */
@media (min-width: 1024px) {
  body[data-sidebar-auto-collapse="true"] .wn-shell-body {
    padding-left: var(--sidebar-collapsed-width, 4.5rem);
  }
  body[data-sidebar-auto-collapse="true"] .wn-shell-sidebar:not(:hover):not(:focus-within) {
    width: var(--sidebar-collapsed-width, 4.5rem);
  }
  body[data-sidebar-auto-collapse="true"] .wn-shell-sidebar:not(:hover):not(:focus-within) .sidebar-hideable {
    display: none !important;
  }
  body[data-sidebar-auto-collapse="true"] .wn-shell-sidebar:not(:hover):not(:focus-within) .sidebar-collapsed-only {
    display: inline-flex !important;
  }
  body[data-sidebar-auto-collapse="true"] .wn-shell-sidebar:not(:hover):not(:focus-within) .nav-link {
    justify-content: center;
    gap: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  body[data-sidebar-auto-collapse="true"] .wn-shell-sidebar:not(:hover):not(:focus-within) .nav-icon {
    margin-inline: auto;
  }
  body[data-sidebar-auto-collapse="true"] .wn-shell-sidebar:not(:hover):not(:focus-within) .submenu-inline {
    display: none !important;
  }
  body[data-sidebar-auto-collapse="true"] .wn-shell-sidebar:not(:hover):not(:focus-within) .ce-navigator__bottom-menu > div {
    justify-content: center;
    gap: 0;
  }
  body[data-sidebar-auto-collapse="true"] .wn-shell-sidebar:hover,
  body[data-sidebar-auto-collapse="true"] .wn-shell-sidebar:focus-within {
    width: var(--sidebar-expanded-width, 18rem);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
  }
}

/* ============================================================
   END shared shell sidebar rules
   ============================================================ */

/* ============================================================
   Clickable-feedback baseline — applies to every page that
   loads globals.css. Fixes the #1 UX complaint: users couldn't
   tell whether a click registered because the browser's default
   `<button>` cursor is `default`, not `pointer`.
   The rules below make every clickable element show:
     - hand cursor when enabled
     - not-allowed when disabled
     - wait/progress cursor when an action is in flight
     - a subtle pressed feedback on :active
     - a visible focus ring on keyboard focus
   The rules are written so they DON'T change anything that
   already had explicit Tailwind utilities on it (e.g. existing
   buttons that already say `cursor-pointer disabled:opacity-50`),
   they just close the gaps where styling was missing.
   ============================================================ */

/* Clickable cursors. */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]):not([disabled]),
[type="submit"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="button"]:not(:disabled),
a[href]:not([aria-disabled="true"]),
label[for],
summary,
.wn-clickable {
  cursor: pointer;
}

button:disabled,
[role="button"][aria-disabled="true"],
[role="button"][disabled],
a[aria-disabled="true"],
[type="submit"]:disabled,
[type="reset"]:disabled,
[type="button"]:disabled,
fieldset:disabled button,
.wn-clickable[aria-disabled="true"] {
  cursor: not-allowed;
}

/* Pending/in-flight cursor for loading buttons. */
button[aria-busy="true"],
button[data-loading="true"],
[role="button"][aria-busy="true"],
[role="button"][data-loading="true"],
[data-loading="true"] {
  cursor: wait;
}

/* Subtle tactile feedback on press for buttons that don't already
   ship with their own active styling. Native `<button>` only — we
   intentionally don't transform anchors or table rows. */
button:not(:disabled):not([aria-busy="true"]):not([data-loading="true"]):active,
[role="button"]:not([aria-disabled="true"]):not([aria-busy="true"]):active {
  transform: translateY(1px);
}

/* Smooth the press transition only for the elements we touch above
   so pages with custom `transition-*` keep their own values. */
button,
[role="button"] {
  transition: transform 0.1s ease, background-color 0.15s ease,
    border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease,
    opacity 0.15s ease;
}

/* Disabled controls must NOT look hoverable. Strip hover transforms /
   color shifts on disabled native buttons. Page-level utilities can
   still override this with higher specificity if needed. */
button:disabled,
[role="button"][aria-disabled="true"] {
  filter: none;
  transform: none;
}

/* Keyboard focus ring fallback when no Tailwind ring class is present.
   This is :focus-visible only so mouse users don't see a ring on click. */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
.wn-clickable:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent, #4f46e5);
  outline-offset: 2px;
}

/* The shared sidebar nav-link is a <button> for parents and an <a> for
   leaves; both should look unmistakably clickable in expanded mode and
   not look clickable when collapsed-disabled (rare). */
.wn-shell-sidebar .nav-link,
#moduleLinks .nav-link {
  cursor: pointer;
}
.wn-shell-sidebar .nav-link[aria-disabled="true"],
#moduleLinks .nav-link[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Anchors with no href don't navigate — make sure they don't masquerade
   as clickable. (Some legacy pages still use `<a>` as a non-link.) */
a:not([href]):not([role="button"]):not(.wn-clickable) {
  cursor: default;
}
/* ============================================================
   END clickable-feedback baseline
   ============================================================ */

/* ============================================================
   Theme-aware form fields (2026-05-21)

   Root cause: the HSL theme tokens consumed by Tailwind utilities
   (`bg-card`, `bg-background`, `border-border`, `text-foreground`,
   `text-muted-foreground`, `bg-input`) are defined with light
   values in shared/styles/tokens.css and were never overridden for
   dark mode on the static svc-tenant pages — only the React build
   (apps/web/src/globals.css) had a `.dark { … }` block. On top of
   that, many legacy `<input>` / `<select>` / `<textarea>` elements
   ship with `border border-border` but NO `bg-*` utility, so they
   fell back to the user-agent stylesheet (white) in dark mode.

   Fix: mirror the React-side dark token overrides so Tailwind
   utilities theme correctly, plus add safe element-level rules so
   *unclassed* editable form controls pick up theme tokens. The
   element selectors use `:where()` to stay at specificity 0,0,1 —
   any page that opts in to its own background via a Tailwind
   utility (e.g. `bg-card`, `bg-input`, `bg-white`) still wins.
   ============================================================ */

:root[data-theme='dark'],
.dark {
  --background-hsl: 222.2 47.4% 11.2%;
  --foreground-hsl: 210 40% 98%;
  --card-hsl: 222.2 47.4% 14%;
  --muted-hsl: 217.2 32.6% 17.5%;
  --muted-foreground-hsl: 215 20.2% 65.1%;
  --border-hsl: 217.2 32.6% 22%;
  --input-hsl: 217.2 32.6% 17.5%;
  --ring-hsl: 224.3 76.3% 60%;
}

/* Element-level baseline for editable form controls in dark mode.
  Use :is() (not :where()) so this wins over Tailwind's form base
  defaults that otherwise keep white input backgrounds in dark mode. */
:root[data-theme='dark'] :is(
  input:not([type]),
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='tel'],
  input[type='url'],
  input[type='number'],
  input[type='search'],
  input[type='date'],
  input[type='datetime-local'],
  input[type='time'],
  input[type='month'],
  input[type='week'],
  select,
  textarea
) {
  background-color: hsl(var(--card-hsl)) !important;
  color: hsl(var(--foreground-hsl)) !important;
  border-color: hsl(var(--border-hsl)) !important;
  caret-color: hsl(var(--foreground-hsl)) !important;
}

.dark :is(
  input:not([type]),
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='tel'],
  input[type='url'],
  input[type='number'],
  input[type='search'],
  input[type='date'],
  input[type='datetime-local'],
  input[type='time'],
  input[type='month'],
  input[type='week'],
  select,
  textarea
) {
  background-color: hsl(var(--card-hsl)) !important;
  color: hsl(var(--foreground-hsl)) !important;
  border-color: hsl(var(--border-hsl)) !important;
  caret-color: hsl(var(--foreground-hsl)) !important;
}

:root[data-theme='dark'] :is(
  input:not([type]),
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='tel'],
  input[type='url'],
  input[type='number'],
  input[type='search'],
  input[type='date'],
  input[type='datetime-local'],
  input[type='time'],
  input[type='month'],
  input[type='week'],
  textarea
)::placeholder {
  color: hsl(var(--muted-foreground-hsl)) !important;
  /* Firefox halves placeholder opacity by default; clamp it so dark
     mode placeholders stay readable. */
  opacity: 1;
}

.dark :is(
  input:not([type]),
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='tel'],
  input[type='url'],
  input[type='number'],
  input[type='search'],
  input[type='date'],
  input[type='datetime-local'],
  input[type='time'],
  input[type='month'],
  input[type='week'],
  textarea
)::placeholder {
  color: hsl(var(--muted-foreground-hsl)) !important;
  opacity: 1;
}

:root[data-theme='dark'] :is(
  input:not([type]),
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='tel'],
  input[type='url'],
  input[type='number'],
  input[type='search'],
  input[type='date'],
  input[type='datetime-local'],
  input[type='time'],
  input[type='month'],
  input[type='week'],
  select,
  textarea
):disabled {
  background-color: hsl(var(--muted-hsl)) !important;
  color: hsl(var(--muted-foreground-hsl)) !important;
  cursor: not-allowed;
  opacity: 0.7;
}

.dark :is(
  input:not([type]),
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='tel'],
  input[type='url'],
  input[type='number'],
  input[type='search'],
  input[type='date'],
  input[type='datetime-local'],
  input[type='time'],
  input[type='month'],
  input[type='week'],
  select,
  textarea
):disabled {
  background-color: hsl(var(--muted-hsl)) !important;
  color: hsl(var(--muted-foreground-hsl)) !important;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Chromium paints autofilled inputs with a hardcoded yellow-ish
   background that ignores `background-color`. Use an inset shadow
   to mask the autofill canvas with the current theme surface, and
   force the text fill so the value stays legible. Applies in both
   modes — light autofill needs the same trick to match `--card-hsl`. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px hsl(var(--card-hsl)) inset !important;
  -webkit-text-fill-color: hsl(var(--foreground-hsl)) !important;
  caret-color: hsl(var(--foreground-hsl)) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Native date/time picker indicator is rendered by the browser as
   a dark glyph; on a dark surface it disappears. Invert just the
   indicator in dark mode so the icon stays visible. */
:root[data-theme='dark'] input[type='date']::-webkit-calendar-picker-indicator,
:root[data-theme='dark'] input[type='datetime-local']::-webkit-calendar-picker-indicator,
:root[data-theme='dark'] input[type='time']::-webkit-calendar-picker-indicator,
:root[data-theme='dark'] input[type='month']::-webkit-calendar-picker-indicator,
:root[data-theme='dark'] input[type='week']::-webkit-calendar-picker-indicator,
.dark input[type='date']::-webkit-calendar-picker-indicator,
.dark input[type='datetime-local']::-webkit-calendar-picker-indicator,
.dark input[type='time']::-webkit-calendar-picker-indicator,
.dark input[type='month']::-webkit-calendar-picker-indicator,
.dark input[type='week']::-webkit-calendar-picker-indicator {
  filter: invert(1) hue-rotate(180deg) brightness(1.2);
}
/* ============================================================
   END theme-aware form fields
   ============================================================ */