/* Booker & Best global dark-mode overrides
   Add this file at: static/css/dark-mode.css
   It is intentionally broad so existing page templates do not need dark: classes everywhere. */

html.dark {
  color-scheme: dark;
}

html.dark body {
  background: #07111f !important;
  color: #e5e7eb !important;
}

html.dark ::selection {
  background: rgba(101, 215, 223, 0.35);
}

/* Common light backgrounds used across existing templates */
html.dark .bg-white,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .bg-\[\#fff\],
html.dark .bg-\[\#ffffff\],
html.dark .bg-\[\#f7f8fb\],
html.dark .bg-\[\#f6f2ea\],
html.dark .bg-\[\#e8f8fa\] {
  background-color: #0f172a !important;
}

html.dark .bg-slate-200,
html.dark .bg-slate-300 {
  background-color: #1e293b !important;
}

html.dark .bg-white\/95 {
  background-color: rgba(15, 23, 42, 0.95) !important;
}

html.dark .bg-white\/90 {
  background-color: rgba(15, 23, 42, 0.9) !important;
}

html.dark .bg-white\/80 {
  background-color: rgba(15, 23, 42, 0.8) !important;
}

/* Brand blocks that are already dark should stay on-brand */
html.dark .bg-\[\#004A99\],
html.dark .bg-\[\#003A78\],
html.dark .bg-\[\#002B59\],
html.dark .bg-\[\#103b5d\] {
  color: #ffffff !important;
}

/* Text colours from the light templates */
html.dark .text-slate-950,
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700,
html.dark .text-slate-600,
html.dark .text-\[\#103b5d\],
html.dark .text-\[\#003A78\],
html.dark .text-\[\#004A99\] {
  color: #e5e7eb !important;
}

html.dark .text-slate-500,
html.dark .text-slate-400 {
  color: #cbd5e1 !important;
}

html.dark .text-slate-300 {
  color: #e2e8f0 !important;
}

/* Keep accents bright */
html.dark .text-\[\#139faa\],
html.dark .text-\[\#65d7df\] {
  color: #65d7df !important;
}

/* Borders, rings and dividers */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .ring-slate-100,
html.dark .ring-slate-200,
html.dark .ring-slate-300 {
  border-color: rgba(148, 163, 184, 0.25) !important;
  --tw-ring-color: rgba(148, 163, 184, 0.25) !important;
}

html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(148, 163, 184, 0.25) !important;
}

/* Cards/panels */
html.dark .shadow-sm,
html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-2xl {
  --tw-shadow-color: rgba(0, 0, 0, 0.45) !important;
}

/* Light hover states */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-\[\#e8f8fa\]:hover,
html.dark details.hover\:bg-\[\#e8f8fa\]:hover {
  background-color: #1e293b !important;
}

html.dark .hover\:text-\[\#103b5d\]:hover,
html.dark .hover\:text-slate-700:hover,
html.dark .hover\:text-slate-800:hover {
  color: #ffffff !important;
}

/* Inputs/forms, useful across contact pages */
html.dark input,
html.dark textarea,
html.dark select {
  background-color: #0f172a !important;
  color: #e5e7eb !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #94a3b8 !important;
}

/* Tables */
html.dark table,
html.dark thead,
html.dark tbody,
html.dark tr,
html.dark th,
html.dark td {
  border-color: rgba(148, 163, 184, 0.25) !important;
}

html.dark thead,
html.dark .bg-slate-50 thead {
  background-color: #111827 !important;
}

/* Overlays/absolute decorative blocks from the homepage */
html.dark .absolute.bg-\[\#e8f8fa\] {
  background-color: #0b1220 !important;
}

/* Dropdowns and mobile nav */
html.dark [aria-haspopup="true"] + div,
html.dark [data-mobile-menu] {
  background-color: #0f172a !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}

/* Logo tiles: keep images readable, but soften the panels in dark mode */
html.dark img {
  opacity: 0.96;
}

html.dark .object-contain {
  filter: none;
}

/* Skip link */
html.dark .focus\:bg-white:focus {
  background-color: #0f172a !important;
}


.dark h1.text-blue-950,
.dark h2.text-blue-950,
.dark h3.text-blue-950 {
  color: #ffffff !important;
}


/* Amber / cream callout boxes */
.dark .bg-amber-50,
.dark .bg-yellow-50,
.dark .bg-orange-50 {
  background-color: #1f2937 !important;
}

.dark .ring-amber-100,
.dark .ring-yellow-100,
.dark .ring-orange-100 {
  --tw-ring-color: rgba(255, 255, 255, 0.14) !important;
}

/* Text inside those callout boxes */
.dark .bg-amber-50 .text-blue-950,
.dark .bg-yellow-50 .text-blue-950,
.dark .bg-orange-50 .text-blue-950 {
  color: #ffffff !important;
}

.dark .bg-amber-50 .text-slate-700,
.dark .bg-yellow-50 .text-slate-700,
.dark .bg-orange-50 .text-slate-700 {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Blue text used for stats/headings */
.dark .text-blue-950 {
  color: #ffffff !important;
}
/* Polished component overrides introduced in the homepage refresh */
html.dark .bb-panel,
html.dark .bb-sector-card {
  background: #0f172a !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}

html.dark .bb-panel {
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.32) !important;
}

html.dark .bb-sector-card {
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.28) !important;
}

html.dark .bb-sector-card:hover,
html.dark .bb-sector-card:focus-visible {
  box-shadow: 0 1.25rem 2.75rem rgba(0, 0, 0, 0.42) !important;
}

html.dark .bb-logo-tile {
  border-color: rgba(148, 163, 184, 0.25) !important;
}

html.dark .bb-section-kicker {
  color: #65d7df !important;
}