/*
 * Data Helix Ops dark theme.
 *
 * The interface is styled with the Tailwind Play CDN, so rather than adding a
 * dark: variant to every element in every template, this sheet re-points the
 * small set of colour utilities the application actually uses when the root
 * element carries the .dark class. Each selector is more specific than the
 * generated utility it overrides, so it wins regardless of injection order,
 * and light mode is left exactly as it was.
 *
 * Layout, spacing, radius, and typography are never touched here.
 */

:root {
  color-scheme: light;
}

.dark {
  color-scheme: dark;

  /* Surfaces, from the page backdrop up to raised panels. */
  --dh-bg: #0b1220;
  --dh-surface: #121b2c;
  --dh-surface-translucent: rgba(18, 27, 44, 0.95);
  --dh-surface-2: #182338;
  --dh-surface-3: #1f2c44;
  --dh-surface-hover: rgba(31, 44, 68, 0.55);

  /* Borders and hairlines. */
  --dh-border: #26344c;
  --dh-border-soft: #1c2740;
  --dh-border-strong: #3a4a66;

  /* Foreground ramp, mirroring the slate scale used in light mode. */
  --dh-text: #edf2f8;
  --dh-text-2: #dbe3ee;
  --dh-text-3: #c2cddc;
  --dh-text-4: #a9b6c8;
  --dh-muted: #8e9db3;
  --dh-muted-2: #76859b;

  /* Brand accent, lightened so it stays legible on a dark surface. */
  --dh-brand-text: #7cc9fb;
  --dh-brand-text-strong: #a5daff;
  --dh-brand-soft: rgba(19, 133, 214, 0.16);
  --dh-brand-soft-strong: rgba(19, 133, 214, 0.26);
  --dh-brand-ring: rgba(89, 192, 251, 0.32);
}

/* ---------------------------------------------------------------- base --- */

html.dark,
.dark body {
  background-color: var(--dh-bg);
  color: var(--dh-text-3);
}

/* ------------------------------------------------------------ surfaces --- */

.dark .bg-canvas {
  background-color: var(--dh-bg);
}

.dark .bg-white {
  background-color: var(--dh-surface);
}

.dark .bg-white\/95 {
  background-color: var(--dh-surface-translucent);
}

.dark .bg-slate-50,
.dark .bg-slate-50\/70 {
  background-color: var(--dh-surface-2);
}

.dark .bg-slate-100 {
  background-color: var(--dh-surface-3);
}

.dark .hover\:bg-slate-50\/70:hover,
.dark .hover\:bg-slate-100:hover,
.dark .focus-visible\:bg-slate-50\/70:focus-visible {
  background-color: var(--dh-surface-hover);
}

/* The signed out pages already sit on a near-black backdrop; keep it. */
.dark .bg-slate-950 {
  background-color: #060b16;
}

/* The desktop sidebar sets its surface and border at the lg breakpoint. */
@media (min-width: 1024px) {
  .dark .lg\:bg-white {
    background-color: var(--dh-surface);
  }

  .dark .lg\:border-slate-200 {
    border-color: var(--dh-border);
  }
}

/* -------------------------------------------------------------- borders --- */

.dark .border-slate-200,
.dark .border-slate-100 {
  border-color: var(--dh-border);
}

.dark .border-slate-300 {
  border-color: var(--dh-border-strong);
}

.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--dh-border-soft);
}

.dark .ring-slate-200 {
  --tw-ring-color: var(--dh-border);
}

.dark .ring-slate-900\/5 {
  --tw-ring-color: rgba(148, 163, 184, 0.12);
}

.dark .hover\:border-slate-200:hover {
  border-color: var(--dh-border-strong);
}

/* ----------------------------------------------------------------- text --- */

.dark .text-slate-900 {
  color: var(--dh-text);
}

.dark .text-slate-800 {
  color: var(--dh-text-2);
}

.dark .text-slate-700 {
  color: var(--dh-text-3);
}

.dark .text-slate-600 {
  color: var(--dh-text-4);
}

.dark .text-slate-500 {
  color: var(--dh-muted);
}

.dark .text-slate-400 {
  color: var(--dh-muted-2);
}

.dark .placeholder\:text-slate-400::placeholder {
  color: var(--dh-muted-2);
}

.dark .hover\:text-slate-900:hover {
  color: var(--dh-text);
}

.dark .hover\:text-slate-700:hover {
  color: var(--dh-text-3);
}

.dark .group:hover .group-hover\:text-slate-500 {
  color: var(--dh-text-4);
}

/* ---------------------------------------------------------------- brand --- */

.dark .text-brand-600,
.dark .text-brand-700 {
  color: var(--dh-brand-text);
}

.dark .text-brand-800 {
  color: var(--dh-brand-text-strong);
}

.dark .hover\:text-brand-700:hover,
.dark .hover\:text-brand-800:hover,
.dark .focus\:text-brand-700:focus {
  color: var(--dh-brand-text-strong);
}

.dark .bg-brand-50,
.dark .bg-brand-50\/40 {
  background-color: var(--dh-brand-soft);
}

.dark .bg-brand-100 {
  background-color: var(--dh-brand-soft-strong);
}

.dark .hover\:bg-brand-50\/40:hover,
.dark .hover\:bg-brand-100:hover {
  background-color: var(--dh-brand-soft-strong);
}

.dark .ring-brand-100,
.dark .ring-brand-200 {
  --tw-ring-color: var(--dh-brand-ring);
}

.dark .border-brand-200 {
  border-color: var(--dh-brand-ring);
}

.dark .hover\:border-brand-200:hover {
  border-color: rgba(89, 192, 251, 0.45);
}

/* Primary buttons keep the brand fill: white on brand-600 stays legible. */
.dark .bg-brand-600 {
  background-color: #1585d8;
}

.dark .hover\:bg-brand-700:hover {
  background-color: #1a97f0;
}

/* --------------------------------------------------------- form controls --- */

.dark input,
.dark select,
.dark textarea {
  background-color: var(--dh-surface-2);
  color: var(--dh-text-2);
}

.dark input[readonly] {
  color: var(--dh-muted);
}

.dark .focus\:bg-white:focus {
  background-color: var(--dh-surface-2);
}

.dark .focus\:border-brand-500:focus {
  border-color: #3aa6ee;
}

.dark .focus\:ring-brand-200:focus,
.dark .focus\:ring-brand-500:focus {
  --tw-ring-color: rgba(58, 166, 238, 0.35);
}

/* Checkboxes keep the brand accent without a white box. */
.dark input[type="checkbox"] {
  background-color: var(--dh-surface-3);
  border-color: var(--dh-border-strong);
}

/* ------------------------------------------------- semantic status colours --- */

/*
 * Status meaning is preserved: green stays green, amber stays amber, red stays
 * red. Only the tint and contrast are adjusted for a dark surface.
 */

.dark .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.14);
}
.dark .text-emerald-600,
.dark .text-emerald-700,
.dark .text-emerald-800 {
  color: #6ee7b7;
}
.dark .ring-emerald-200 {
  --tw-ring-color: rgba(16, 185, 129, 0.32);
}
.dark .border-emerald-200 {
  border-color: rgba(16, 185, 129, 0.32);
}
.dark .hover\:bg-emerald-50:hover {
  background-color: rgba(16, 185, 129, 0.2);
}
.dark .hover\:text-emerald-700:hover {
  color: #34d399;
}
.dark .hover\:border-emerald-200:hover {
  border-color: rgba(16, 185, 129, 0.45);
}

.dark .bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.14);
}
.dark .text-amber-600,
.dark .text-amber-700,
.dark .text-amber-800 {
  color: #fcd34d;
}
.dark .ring-amber-200 {
  --tw-ring-color: rgba(245, 158, 11, 0.32);
}
.dark .border-amber-200 {
  border-color: rgba(245, 158, 11, 0.32);
}

/* High severity sits between amber and rose; without this it stayed a near
 * white chip on the dark table. */
.dark .bg-orange-50 {
  background-color: rgba(249, 115, 22, 0.14);
}
.dark .text-orange-600,
.dark .text-orange-700,
.dark .text-orange-800 {
  color: #fdba74;
}
.dark .ring-orange-200 {
  --tw-ring-color: rgba(249, 115, 22, 0.32);
}
.dark .border-orange-200 {
  border-color: rgba(249, 115, 22, 0.32);
}

.dark .bg-rose-50 {
  background-color: rgba(244, 63, 94, 0.14);
}
.dark .text-rose-600,
.dark .text-rose-700,
.dark .text-rose-800 {
  color: #fda4af;
}
.dark .ring-rose-200 {
  --tw-ring-color: rgba(244, 63, 94, 0.32);
}
.dark .border-rose-200 {
  border-color: rgba(244, 63, 94, 0.32);
}
.dark .hover\:bg-rose-50:hover,
.dark .focus-visible\:bg-rose-50:focus-visible {
  background-color: rgba(244, 63, 94, 0.2);
}
.dark .hover\:text-rose-700:hover,
.dark .hover\:text-rose-600:hover {
  color: #fb7185;
}
.dark .hover\:border-rose-200:hover {
  border-color: rgba(244, 63, 94, 0.45);
}

.dark .bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.16);
}
.dark .text-indigo-700 {
  color: #a5b4fc;
}
.dark .ring-indigo-200 {
  --tw-ring-color: rgba(99, 102, 241, 0.32);
}

.dark .bg-violet-50 {
  background-color: rgba(139, 92, 246, 0.16);
}
.dark .text-violet-700 {
  color: #c4b5fd;
}
.dark .ring-violet-200 {
  --tw-ring-color: rgba(139, 92, 246, 0.32);
}

.dark .bg-cyan-50 {
  background-color: rgba(6, 182, 212, 0.16);
}
.dark .text-cyan-700 {
  color: #67e8f9;
}
.dark .ring-cyan-200 {
  --tw-ring-color: rgba(6, 182, 212, 0.32);
}

/* Solid indicator dots and progress fills stay vivid; no override needed. */

/* -------------------------------------------------------------- shadows --- */

.dark .shadow-panel {
  box-shadow:
    0 1px 2px 0 rgba(0, 0, 0, 0.35),
    0 1px 3px 0 rgba(0, 0, 0, 0.25);
}

.dark .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
}

.dark .shadow-lg,
.dark .shadow-2xl,
.dark .shadow-lift {
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.75);
}

/* ------------------------------------------------------ theme switching --- */

/*
 * The logo and the toggle icon swap purely in CSS, so they change the instant
 * the root class changes and never flash the wrong asset.
 */

[data-logo="dark"] {
  display: none;
}

.dark [data-logo="dark"] {
  display: block;
}

.dark [data-logo="light"] {
  display: none;
}

[data-theme-icon="sun"] {
  display: none;
}

.dark [data-theme-icon="sun"] {
  display: block;
}

.dark [data-theme-icon="moon"] {
  display: none;
}

/* Scrollbars inside scrollable tables follow the theme. */
.dark .table-scroll::-webkit-scrollbar-thumb {
  background: var(--dh-border-strong);
}