/*
 * DARK MODE OVERRIDES
 * ===================
 * Everything in here is scoped to html.dark and loaded LAST on every page, so
 * light mode is untouched by construction. theme.css already flips every
 * token-driven rule; this file covers what is not token-driven:
 *
 *   (a) Tailwind colour utilities that light-theme.css does not remap
 *       (bg-white, border-gray-200, text-slate-*, emerald tints, ...). These
 *       need !important: light-theme.css remaps its utilities with !important,
 *       and on the Tailwind Play-CDN pages (journal manager, sysadmin) the
 *       generated sheet is appended at the end of <head>, after this file.
 *   (b) Tailwind preflight's default border colour.
 *   (c) the app shell (sidebar, header, forms, scrollbars, flash).
 *   (d) dark twins for light rules that carry a pseudo-class - a light
 *       `:hover` rule keeps matching in dark, so it needs a dark `:hover` too.
 *   (e) per-page leftovers, grouped by page.
 *
 * `@media screen` wraps everything colour-related: light-theme.css already
 * forces white paper in print, and an html.dark rule would outrank it.
 */

/* Toggle button icons - outside the media block on purpose (print hides
   neither). Show the icon for the theme you can switch TO. */
html:not(.dark) .theme-icon-sun,
html.dark .theme-icon-moon {
  display: none !important;
}

@media screen {

  /* ======================================================================
     (a) TAILWIND UTILITY REMAPS
     ====================================================================== */

  /* --- backgrounds --- */
  html.dark .bg-white,
  html.dark .hover\:bg-white:hover,
  html.dark .bg-gray-800 {
    background-color: var(--bg-secondary) !important;
  }

  html.dark .bg-gray-50,
  html.dark .bg-gray-100,
  html.dark .bg-slate-50,
  html.dark .bg-gray-900 {
    background-color: var(--bg-primary) !important;
  }

  /* Opacity-suffixed utilities (`bg-white/50`, `bg-slate-50/50`, ...). Tailwind
     composes these from --tw-bg-opacity, which a flat colour override cannot
     reach, so each translucent white needs saying separately. */
  html.dark .bg-white\/10 { background-color: rgba(255, 255, 255, 0.05) !important; }
  html.dark .bg-white\/20 { background-color: rgba(255, 255, 255, 0.07) !important; }
  html.dark .bg-white\/50 { background-color: rgba(255, 255, 255, 0.05) !important; }
  html.dark .bg-white\/60 { background-color: rgba(255, 255, 255, 0.06) !important; }
  html.dark .bg-white\/80 { background-color: var(--bg-secondary) !important; }
  html.dark .bg-slate-50\/50,
  html.dark .bg-gray-50\/50 { background-color: rgba(255, 255, 255, 0.03) !important; }
  html.dark .bg-emerald-50\/30,
  html.dark .bg-emerald-50\/50 { background-color: var(--brand-tint-1) !important; }

  /* Tailwind gradient utilities compose from --tw-gradient-* stops, so the flat
     colour overrides never reach them. email_verified's body is one of these. */
  html.dark .from-gray-50,
  html.dark .from-slate-50,
  html.dark .from-white { --tw-gradient-from: var(--bg-primary) !important; }
  html.dark .via-green-50\/30,
  html.dark .via-emerald-50\/30 { --tw-gradient-stops: var(--tw-gradient-from), var(--brand-tint-1), var(--tw-gradient-to, transparent) !important; }
  html.dark .to-gray-50,
  html.dark .to-slate-50,
  html.dark .to-white { --tw-gradient-to: var(--bg-primary) !important; }
  html.dark .border-opacity-40,
  html.dark .border-opacity-50,
  html.dark .border-white\/10,
  html.dark .border-white\/20,
  html.dark .border-white\/60,
  html.dark .border-slate-100\/80,
  html.dark .border-emerald-50\/50 { border-color: var(--border-light) !important; }
  html.dark .text-emerald-800\/60,
  html.dark .text-emerald-800\/80,
  html.dark .text-emerald-100\/60 { color: var(--text-secondary) !important; }

  html.dark .bg-gray-200,
  html.dark .bg-slate-100,
  html.dark .bg-gray-700 {
    background-color: var(--bg-tertiary) !important;
  }

  html.dark .bg-gray-300,
  html.dark .bg-slate-200,
  html.dark .bg-gray-600 {
    background-color: var(--bg-accent) !important;
  }

  html.dark .hover\:bg-gray-50:hover,
  html.dark .hover\:bg-gray-100:hover,
  html.dark .hover\:bg-gray-200:hover,
  html.dark .hover\:bg-slate-50:hover,
  html.dark .hover\:bg-slate-100:hover,
  html.dark .hover\:bg-gray-700:hover,
  html.dark .hover\:bg-gray-600:hover {
    background-color: var(--bg-accent) !important;
  }

  html.dark .bg-emerald-50,
  html.dark .bg-green-50,
  html.dark .hover\:bg-emerald-50:hover,
  html.dark .hover\:bg-green-50:hover {
    background-color: var(--brand-tint-2) !important;
  }

  html.dark .bg-emerald-100,
  html.dark .bg-green-100,
  html.dark .hover\:bg-emerald-100:hover,
  html.dark .hover\:bg-green-100:hover {
    background-color: var(--brand-tint-3) !important;
  }

  html.dark .bg-red-50,
  html.dark .bg-red-100 {
    background-color: rgba(248, 113, 113, 0.14) !important;
  }

  html.dark .bg-blue-50,
  html.dark .bg-blue-100,
  html.dark .bg-indigo-50,
  html.dark .bg-indigo-100 {
    background-color: rgba(96, 165, 250, 0.14) !important;
  }

  html.dark .bg-yellow-50,
  html.dark .bg-yellow-100,
  html.dark .bg-amber-50,
  html.dark .bg-amber-100,
  html.dark .bg-orange-50,
  html.dark .bg-orange-100 {
    background-color: rgba(251, 191, 36, 0.14) !important;
  }

  html.dark .bg-purple-50,
  html.dark .bg-purple-100 {
    background-color: rgba(192, 132, 252, 0.14) !important;
  }

  /* --- text --- */
  html.dark .text-gray-900,
  html.dark .text-gray-800,
  html.dark .text-gray-700,
  html.dark .text-gray-200,
  html.dark .text-slate-900,
  html.dark .text-slate-800,
  html.dark .text-slate-700,
  html.dark .text-black {
    color: var(--text-primary) !important;
  }

  html.dark .text-gray-600,
  html.dark .text-gray-300,
  html.dark .text-slate-600 {
    color: var(--text-secondary) !important;
  }

  /* The muted-label role, not the page's tertiary text: these labels often sit on
     a tinted tile inside a card, where --text-tertiary only reaches ~4.4:1. */
  html.dark .text-gray-500,
  html.dark .text-slate-500 {
    color: var(--text-gray-500) !important;
  }

  html.dark .text-gray-400,
  html.dark .text-slate-400 {
    color: var(--text-gray-400) !important;
  }

  html.dark .hover\:text-gray-900:hover,
  html.dark .hover\:text-gray-800:hover,
  html.dark .hover\:text-gray-700:hover,
  html.dark .hover\:text-white:hover {
    color: var(--text-primary) !important;
  }

  /* brand green as text: #0D4D3B is 1.45:1 on these surfaces */
  html.dark .text-\[\#0D4D3B\],
  html.dark .text-\[\#0d4d3b\],
  html.dark .text-emerald-700,
  html.dark .text-emerald-800,
  html.dark .text-emerald-900,
  html.dark .text-green-700,
  html.dark .text-green-800,
  html.dark .text-green-900,
  html.dark .hover\:text-emerald-700:hover,
  html.dark .hover\:text-emerald-800:hover {
    color: var(--brand-green) !important;
  }

  html.dark .text-emerald-500,
  html.dark .text-emerald-600,
  html.dark .text-green-500,
  html.dark .text-green-600,
  html.dark .hover\:text-emerald-600:hover,
  html.dark .hover\:text-green-600:hover {
    color: #34d399 !important;
  }

  html.dark .text-red-500,
  html.dark .text-red-600 {
    color: #f87171 !important;
  }

  html.dark .text-red-700,
  html.dark .text-red-800,
  html.dark .text-red-900,
  html.dark .hover\:text-red-700:hover,
  html.dark .hover\:text-red-800:hover {
    color: #fca5a5 !important;
  }

  html.dark .text-blue-500,
  html.dark .text-blue-600,
  html.dark .text-indigo-600 {
    color: #60a5fa !important;
  }

  /* The deep end of each status scale is the colour used ON that status's own
     tinted box (`bg-blue-50 text-blue-800`). The mid value only reaches ~4.4:1
     against that tint, so the deep shades get the lighter one. */
  html.dark .text-blue-700,
  html.dark .text-blue-800,
  html.dark .text-blue-900,
  html.dark .text-indigo-700,
  html.dark .text-indigo-800 {
    color: #93c5fd !important;
  }

  html.dark .text-yellow-600,
  html.dark .text-amber-600,
  html.dark .text-orange-600 {
    color: #fbbf24 !important;
  }

  html.dark .text-yellow-700,
  html.dark .text-yellow-800,
  html.dark .text-yellow-900,
  html.dark .text-amber-700,
  html.dark .text-amber-800,
  html.dark .text-orange-700,
  html.dark .text-orange-800 {
    color: #fcd34d !important;
  }

  html.dark .text-purple-600,
  html.dark .text-purple-700 {
    color: #c084fc !important;
  }

  html.dark .placeholder-gray-400::placeholder,
  html.dark .placeholder-gray-500::placeholder,
  html.dark ::placeholder {
    color: var(--text-muted) !important;
  }

  /* --- borders --- */
  html.dark .border-gray-100,
  html.dark .border-gray-200,
  html.dark .border-slate-100,
  html.dark .border-slate-200,
  html.dark .border-white,
  html.dark .border-gray-700 {
    border-color: var(--border-light) !important;
  }

  html.dark .border-gray-300,
  html.dark .border-slate-300,
  html.dark .border-gray-600 {
    border-color: var(--border-medium) !important;
  }

  html.dark .border-gray-400,
  html.dark .border-gray-500 {
    border-color: var(--border-strong) !important;
  }

  html.dark .border-emerald-100,
  html.dark .border-green-100,
  html.dark .border-emerald-200,
  html.dark .border-green-200 {
    border-color: var(--brand-tint-4) !important;
  }

  html.dark .border-red-200,
  html.dark .border-red-300 {
    border-color: rgba(248, 113, 113, 0.35) !important;
  }

  html.dark .border-blue-200,
  html.dark .border-blue-300,
  html.dark .border-indigo-200 {
    border-color: rgba(96, 165, 250, 0.35) !important;
  }

  html.dark .border-yellow-200,
  html.dark .border-yellow-300,
  html.dark .border-amber-200 {
    border-color: rgba(251, 191, 36, 0.35) !important;
  }

  html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
  html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
  html.dark .divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--border-light) !important;
  }

  /* --- shadows (Tailwind composes box-shadow from --tw-shadow) --- */
  html.dark .shadow-sm { --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); }
  html.dark .shadow { --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px 0 rgba(0, 0, 0, 0.3); }
  html.dark .shadow-md { --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3); }
  html.dark .shadow-lg { --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3); }
  html.dark .shadow-xl { --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3); }
  html.dark .shadow-2xl { --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); }

  /* ======================================================================
     (b) PREFLIGHT DEFAULT BORDER
     `*, ::before, ::after { border-color: #e5e7eb }` in Tailwind's reset.
     :where() keeps this at zero specificity so any border-* utility still
     wins; it beats the reset on source order alone.
     ====================================================================== */
  :where(html.dark) *,
  :where(html.dark) ::before,
  :where(html.dark) ::after {
    border-color: var(--border-default);
  }

  /* ======================================================================
     (c) APP SHELL
     ====================================================================== */
  html.dark #sidebar {
    background-color: #0e2721 !important;
    border-right-color: var(--border-light) !important;
  }

  html.dark #sidebar-branding,
  html.dark #sidebar-user-section {
    border-color: var(--border-light) !important;
  }

  html.dark #user-avatar {
    background-color: var(--brand-tint-3) !important;
  }

  html.dark #user-avatar i,
  html.dark #user-avatar svg {
    color: #34d399 !important;
  }

  html.dark #main-header {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border-light) !important;
  }

  /* secondary/outline buttons keep a white face in light-theme.css; the
     emerald-600 text they use is 3.6:1 here, emerald-400 is 7.4:1 */
  html.dark .btn-secondary,
  html.dark .button-secondary,
  html.dark .btn-outline,
  html.dark .client-selector-dropdown,
  html.dark #client-selector {
    color: #34d399 !important;
    border-color: rgba(52, 211, 153, 0.45) !important;
  }

  html.dark .btn-secondary:hover,
  html.dark .button-secondary:hover,
  html.dark .btn-outline:hover {
    color: #6ee7b7 !important;
  }

  html.dark select option {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
  }

  /* A control with no background utility falls through to the UA's own colours.
     `color-scheme: dark` handles the enabled state, but the DISABLED state stays
     a light grey (#6b6b6b on the journal manager's client/agent pickers), so it
     needs saying explicitly. light-theme.css does the same for #client-selector. */
  html.dark select:disabled,
  html.dark input:disabled,
  html.dark textarea:disabled {
    background-color: var(--input-disabled-bg) !important;
    color: var(--input-disabled-text) !important;
    border-color: var(--input-disabled-border) !important;
  }

  /* Bare controls (no bg-* utility) on pages that don't load light-theme.css. */
  html.dark select:not([class*="bg-"]),
  html.dark input:not([type="checkbox"]):not([type="radio"]):not([class*="bg-"]),
  html.dark textarea:not([class*="bg-"]) {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
  }

  html.dark input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
  }

  html.dark ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }

  html.dark ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  html.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
  }

  html.dark iframe {
    background-color: var(--bg-secondary);
  }

  /* light-theme.css `tr:hover` is a 3% dark-green tint - invisible here */
  html.dark tr:hover {
    background-color: var(--brand-tint-1) !important;
  }

  /* status text light-theme.css/style.css mute to greens in light mode;
     Tailwind's own yellow/red/orange would come through here otherwise */
  html.dark .text-yellow-400,
  html.dark .text-orange-400 {
    color: #fbbf24 !important;
  }

  html.dark .text-red-400 {
    color: #f87171 !important;
  }
}