/*
 * 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').
 *
 * Palette: page #0b1220, surface #111827, raised #1f2937, border #374151,
 *          text #e5e7eb, secondary #9ca3af, muted #6b7280, link #93c5fd
 */

html.dark {
  color-scheme: dark;
  --dm-page: #0b1220;
  --dm-surface: #111827;
  --dm-raised: #1f2937;
  --dm-border: #374151;
  --dm-text: #e5e7eb;
  --dm-text-strong: #f9fafb;
  --dm-text-secondary: #9ca3af;
  --dm-muted: #6b7280;
  --dm-link: #93c5fd;
}

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"]),
html.dark select,
html.dark textarea,
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: #2563eb; border-color: #2563eb; }
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);
}

/* Lexxy rich text editor and content */
html.dark {
  --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: #2563eb; color: #fff; }

/* 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); }