/*
 * Dark mode for the website (html.dark, set by shared/_theme_head and theme_controller.js).
 *
 * Most views were built light-only, so instead of adding dark: variants to every view this maps the
 * neutral Tailwind/Bootstrap colors they use onto a dark palette. Brand blues and status colors stay
 * as they are. New views can use Tailwind's dark: variants directly (darkMode: 'class').
 *
 * The palette comes from the design tokens in application.tailwind.css, so clients and signed-out
 * pages get My Hairola's dark palette (page #0b1220, surface #111827, raised #1f2937, border #374151,
 * text #e5e7eb, secondary #9ca3af) and providers Hairola Pro's onyx. It's set on body as well as
 * html so the provider tokens (on body[data-role]) take effect.
 * Pages built on the tokens (bg-surface, hl-card, hl-input...) don't need any of this.
 */

html.dark { color-scheme: dark; }
html.dark,
html.dark body {
  --dm-page: rgb(var(--hl-page));
  --dm-surface: rgb(var(--hl-surface));
  --dm-raised: rgb(var(--hl-raised));
  --dm-border: rgb(var(--hl-line));
  --dm-text: rgb(var(--hl-fg));
  --dm-text-strong: #f9fafb;
  --dm-text-secondary: rgb(var(--hl-fg-muted));
  --dm-muted: #6b7280;
  --dm-link: #93c5fd;
  --dm-accent: rgb(var(--hl-accent));
  --dm-on-accent: rgb(var(--hl-on-accent));
}
html.dark body[data-role="provider"] {
  --dm-text-strong: #fbf8f2;
  --dm-muted: #7d786d;
  --dm-link: rgb(var(--hl-accent-ink));
}

html.dark body { background-color: var(--dm-page); color: var(--dm-text); }

/* Backgrounds */
html.dark .bg-white,
html.dark .bg-gray-999,
html.dark .bg-gray-989 { background-color: var(--dm-surface) !important; }
html.dark .bg-gray-50,
html.dark .bg-slate-50,
html.dark .bg-zinc-50,
html.dark .bg-gray-100,
html.dark .bg-slate-100,
html.dark .bg-zinc-100,
html.dark .bg-neutral-100 { background-color: var(--dm-page) !important; }
html.dark .bg-gray-200,
html.dark .bg-slate-200,
html.dark .bg-zinc-200 { background-color: var(--dm-raised) !important; }
html.dark .bg-gray-300,
html.dark .bg-slate-300 { background-color: var(--dm-border) !important; }
html.dark .bg-blue-50,
html.dark .bg-sky-50,
html.dark .bg-indigo-50 { background-color: rgba(59, 130, 246, 0.12) !important; }
html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.2) !important; }
html.dark .bg-green-50,
html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.15) !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-100 { background-color: rgba(245, 158, 11, 0.15) !important; }
html.dark .bg-red-50,
html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.15) !important; }

/* Text */
html.dark .text-black,
html.dark .text-gray-900,
html.dark .text-gray-979,
html.dark .text-slate-900,
html.dark .text-zinc-900,
html.dark .text-gray-800,
html.dark .text-slate-800,
html.dark .text-zinc-800 { color: var(--dm-text-strong) !important; }
html.dark .text-gray-700,
html.dark .text-slate-700,
html.dark .text-zinc-700,
html.dark .text-neutral-700 { color: var(--dm-text) !important; }
html.dark .text-gray-600,
html.dark .text-slate-600,
html.dark .text-zinc-600,
html.dark .text-zinc,
html.dark .text-neutral-600 { color: #d1d5db !important; }
html.dark .text-gray-500,
html.dark .text-slate-500,
html.dark .text-zinc-500 { color: var(--dm-text-secondary) !important; }
html.dark .text-blue-900,
html.dark .text-blue-800,
html.dark .text-indigo-900,
html.dark .text-indigo-800 { color: var(--dm-link) !important; }
html.dark .text-blue-700,
html.dark .text-indigo-700 { color: #60a5fa !important; }
html.dark .text-green-800,
html.dark .text-green-700 { color: #86efac !important; }
html.dark .text-red-800,
html.dark .text-red-700 { color: #fca5a5 !important; }
html.dark .text-yellow-800,
html.dark .text-yellow-700,
html.dark .text-amber-800,
html.dark .text-orange-700 { color: #fcd34d !important; }

/* Borders and dividers */
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .border-zinc-200,
html.dark .border-white { border-color: var(--dm-border) !important; }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: var(--dm-border) !important; }
html.dark hr { border-color: var(--dm-border); }
html.dark .ring-gray-200,
html.dark .ring-gray-300 { --tw-ring-color: var(--dm-border) !important; }

/* Hover / focus states used in menus and lists */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-gray-200:hover,
html.dark .focus\:bg-gray-200:focus,
html.dark .hover\:bg-slate-100:hover { background-color: var(--dm-raised) !important; }
html.dark .hover\:text-gray-900:hover,
html.dark .focus\:text-gray-900:focus,
html.dark .hover\:text-gray-700:hover { color: var(--dm-text-strong) !important; }

/* Form controls (Tailwind forms plugin, Bootstrap, simple_form) */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not(.hl-input),
html.dark select:not(.hl-input),
html.dark textarea:not(.hl-input),
html.dark .form-control {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--dm-muted) !important; }
html.dark input[type="checkbox"],
html.dark input[type="radio"] { background-color: var(--dm-surface); border-color: #4b5563; }
html.dark input[type="checkbox"]:checked,
html.dark input[type="radio"]:checked { background-color: var(--dm-accent); border-color: var(--dm-accent); }
html.dark input[type="file"] { color: var(--dm-text); }

/* Bootstrap-era components */
html.dark .panel,
html.dark .panel-body,
html.dark .card,
html.dark .well,
html.dark .modal-content,
html.dark .dropdown-menu,
html.dark .list-group-item,
html.dark .jconfirm .jconfirm-box { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
html.dark .table,
html.dark table { color: var(--dm-text); }
html.dark .table > :not(caption) > * > * { background-color: transparent; color: inherit; border-color: var(--dm-border); }
html.dark .alert-danger { background-color: rgba(239, 68, 68, 0.15); color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); }

/* Shadows read as halos on dark backgrounds; soften them */
html.dark .shadow,
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl { --tw-shadow-color: rgba(0, 0, 0, 0.5); }

/* Long-form text (terms, privacy, service descriptions): Tailwind typography */
html.dark .prose {
  --tw-prose-body: #d1d5db;
  --tw-prose-headings: var(--dm-text-strong);
  --tw-prose-lead: var(--dm-text-secondary);
  --tw-prose-links: var(--dm-link);
  --tw-prose-bold: var(--dm-text-strong);
  --tw-prose-counters: var(--dm-text-secondary);
  --tw-prose-bullets: var(--dm-muted);
  --tw-prose-hr: var(--dm-border);
  --tw-prose-quotes: var(--dm-text);
  --tw-prose-quote-borders: var(--dm-border);
  --tw-prose-captions: var(--dm-text-secondary);
  --tw-prose-code: var(--dm-text);
  --tw-prose-th-borders: var(--dm-border);
  --tw-prose-td-borders: var(--dm-raised);
}
/* Pages that pin a light-mode heading or link color with a typography modifier (prose-headings:text-gray-800,
   prose-a:text-blue-700: the guides and the Terms) would keep it in dark mode, dark on dark. Use the dark prose
   colors instead. Links with their own text color class (buttons, badges) and not-prose blocks keep theirs. */
html.dark .prose :is(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
}
html.dark .prose a:not([class*="text-"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--tw-prose-links);
}

/* Lexxy rich text editor and content */
html.dark,
html.dark body {
  --lexxy-color-canvas: var(--dm-surface);
  --lexxy-color-text: var(--dm-text);
  --lexxy-color-ink: var(--dm-text);
  --lexxy-color-ink-medium: #d1d5db;
  --lexxy-color-ink-light: var(--dm-text-secondary);
  --lexxy-color-ink-lighter: var(--dm-border);
  --lexxy-color-ink-lightest: var(--dm-raised);
  --lexxy-color-ink-inverted: var(--dm-surface);
  --lexxy-color-link: var(--dm-link);
}
html.dark lexxy-editor { background: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-border); }

/* Native dialogs (Add Service, search filters) and their backdrop */
html.dark dialog { background-color: var(--dm-surface); color: var(--dm-text); }

/* Theme switcher: selected option */
html.dark .theme-switcher [aria-pressed="true"] { background-color: var(--dm-accent); color: var(--dm-on-accent); }

/* Navbar (application.scss .landing-navbar-bg is white) */
html.dark .landing-navbar-bg { background: var(--dm-surface); border-bottom-color: var(--dm-border); }

/* The navy Hairola logo becomes white on dark backgrounds */
html.dark .hairola-logo { filter: brightness(0) invert(1); }