/* ============================================================
 * gruber-theme.css — OHIF v3 overlay (Gruber Darker palette)
 *
 * Loaded last via <link> injected into index.html by
 * sam-patch-entrypoint.sh. Overrides OHIF's compiled Tailwind
 * tokens (primary / secondary / common / aqua / indigo /
 * customblue / customgreen) with the rexim/gruber-darker theme.
 *
 * Strategy:
 *   1) :root vars expose the full palette + alias OHIF tokens.
 *   2) Utility-class overrides for every mapped token/property.
 *   3) Component fallbacks (scrollbars, focus, selection, modal).
 *
 * All rules are !important and scoped under :root to outrank
 * the base bundle. Accents-only — dark chrome is preserved.
 * ============================================================ */

/* === 1. Palette tokens (CSS variables) ===================== */

:root {
  /* Gruber Darker — canonical hex */
  --gruber-fg:        #e4e4ef;
  --gruber-fg-1:      #f4f4ff;
  --gruber-fg-2:      #f5f5f5;
  --gruber-white:     #ffffff;
  --gruber-black:     #000000;
  --gruber-bg--1:     #101010;
  --gruber-bg:        #181818;
  --gruber-bg-1:      #282828;
  --gruber-bg-2:      #453d41;
  --gruber-bg-3:      #484848;
  --gruber-bg-4:      #52494e;
  --gruber-red--1:    #c73c3f;
  --gruber-red:       #f43841;
  --gruber-red-1:     #ff4f58;
  --gruber-green:     #73c936;
  --gruber-yellow:    #ffdd33;
  --gruber-brown:     #cc8c3c;
  --gruber-quartz:    #95a99f;
  --gruber-niagara-2: #303540;
  --gruber-niagara-1: #565f73;
  --gruber-niagara:   #96a6c8;
  --gruber-wisteria:  #9e95c7;

  /* OHIF token aliases (no-op if bundle doesn't read them,
     but resilient against future per-token CSS variables). */
  --overlay:           rgba(16, 16, 16, 0.85);
  --indigo-dark:       var(--gruber-bg--1);
  --aqua-pale:         var(--gruber-niagara);
  --primary-light:     var(--gruber-niagara);
  --primary-main:      var(--gruber-niagara-1);
  --primary-dark:      var(--gruber-bg-1);
  --primary-active:    var(--gruber-yellow);
  --secondary-light:   var(--gruber-wisteria);
  --secondary-main:    var(--gruber-niagara-2);
  --secondary-dark:    var(--gruber-bg--1);
  --secondary-active:  var(--gruber-bg-1);
  --common-bright:     var(--gruber-fg);
  --common-light:      var(--gruber-quartz);
  --common-main:       var(--gruber-fg-1);
  --common-dark:       var(--gruber-bg-4);
  --common-active:     var(--gruber-niagara-1);
  --customgreen-100:   var(--gruber-green);
  --customblue-100:    var(--gruber-fg-1);
  --customblue-200:    var(--gruber-niagara);
}

/* === 2. Utility-class overrides ============================
 * Per token we redefine: bg, text, border, ring, fill, stroke,
 * outline, placeholder. Pseudo-class variants (hover/focus/
 * active/group-hover/focus-visible) share the same color, so
 * we group selectors with commas to keep the file compact.
 * ============================================================ */

/* --- overlay ---------------------------------------------- */
:root .bg-overlay,
:root .hover\:bg-overlay:hover { background-color: rgba(16, 16, 16, 0.85) !important; }

/* --- indigo.dark ------------------------------------------ */
:root .bg-indigo-dark,
:root .hover\:bg-indigo-dark:hover { background-color: var(--gruber-bg--1) !important; }
:root .text-indigo-dark { color: var(--gruber-bg--1) !important; }
:root .border-indigo-dark { border-color: var(--gruber-bg--1) !important; }

/* --- aqua.pale -------------------------------------------- */
:root .bg-aqua-pale,
:root .hover\:bg-aqua-pale:hover { background-color: var(--gruber-niagara) !important; }
:root .text-aqua-pale,
:root .hover\:text-aqua-pale:hover { color: var(--gruber-niagara) !important; }
:root .border-aqua-pale { border-color: var(--gruber-niagara) !important; }
:root .fill-aqua-pale { fill: var(--gruber-niagara) !important; }
:root .stroke-aqua-pale { stroke: var(--gruber-niagara) !important; }

/* --- primary.light ---------------------------------------- */
:root .bg-primary-light,
:root .hover\:bg-primary-light:hover,
:root .focus\:bg-primary-light:focus,
:root .group:hover .group-hover\:bg-primary-light { background-color: var(--gruber-niagara) !important; }
:root .text-primary-light,
:root .hover\:text-primary-light:hover,
:root .focus\:text-primary-light:focus,
:root .group:hover .group-hover\:text-primary-light { color: var(--gruber-niagara) !important; }
:root .border-primary-light,
:root .hover\:border-primary-light:hover,
:root .focus\:border-primary-light:focus { border-color: var(--gruber-niagara) !important; }
:root .ring-primary-light,
:root .focus\:ring-primary-light:focus { --tw-ring-color: var(--gruber-niagara) !important; }
:root .fill-primary-light,
:root .hover\:fill-primary-light:hover { fill: var(--gruber-niagara) !important; }
:root .stroke-primary-light,
:root .hover\:stroke-primary-light:hover { stroke: var(--gruber-niagara) !important; }
:root .outline-primary-light { outline-color: var(--gruber-niagara) !important; }
:root .placeholder-primary-light::placeholder { color: var(--gruber-niagara) !important; }

/* --- primary.main ----------------------------------------- */
:root .bg-primary-main,
:root .hover\:bg-primary-main:hover,
:root .focus\:bg-primary-main:focus,
:root .group:hover .group-hover\:bg-primary-main { background-color: var(--gruber-niagara-1) !important; }
:root .text-primary-main,
:root .hover\:text-primary-main:hover { color: var(--gruber-niagara-1) !important; }
:root .border-primary-main,
:root .hover\:border-primary-main:hover,
:root .focus\:border-primary-main:focus { border-color: var(--gruber-niagara-1) !important; }
:root .ring-primary-main,
:root .focus\:ring-primary-main:focus { --tw-ring-color: var(--gruber-niagara-1) !important; }
:root .fill-primary-main { fill: var(--gruber-niagara-1) !important; }
:root .stroke-primary-main { stroke: var(--gruber-niagara-1) !important; }

/* --- primary.dark ----------------------------------------- */
:root .bg-primary-dark,
:root .hover\:bg-primary-dark:hover { background-color: var(--gruber-bg-1) !important; }
:root .text-primary-dark { color: var(--gruber-bg-1) !important; }
:root .border-primary-dark { border-color: var(--gruber-bg-1) !important; }

/* --- primary.active (Gruber yellow — signature accent) ---- */
:root .bg-primary-active,
:root .hover\:bg-primary-active:hover,
:root .focus\:bg-primary-active:focus,
:root .active\:bg-primary-active:active,
:root .group:hover .group-hover\:bg-primary-active { background-color: var(--gruber-yellow) !important; }
:root .text-primary-active,
:root .hover\:text-primary-active:hover,
:root .focus\:text-primary-active:focus,
:root .active\:text-primary-active:active,
:root .group:hover .group-hover\:text-primary-active { color: var(--gruber-yellow) !important; }
:root .border-primary-active,
:root .hover\:border-primary-active:hover,
:root .focus\:border-primary-active:focus,
:root .active\:border-primary-active:active { border-color: var(--gruber-yellow) !important; }
:root .ring-primary-active,
:root .focus\:ring-primary-active:focus,
:root .focus-visible\:ring-primary-active:focus-visible { --tw-ring-color: var(--gruber-yellow) !important; }
:root .fill-primary-active,
:root .hover\:fill-primary-active:hover,
:root .group:hover .group-hover\:fill-primary-active { fill: var(--gruber-yellow) !important; }
:root .stroke-primary-active,
:root .hover\:stroke-primary-active:hover { stroke: var(--gruber-yellow) !important; }
:root .outline-primary-active,
:root .focus\:outline-primary-active:focus { outline-color: var(--gruber-yellow) !important; }
:root .caret-primary-active { caret-color: var(--gruber-yellow) !important; }
:root .accent-primary-active { accent-color: var(--gruber-yellow) !important; }

/* --- secondary.light -------------------------------------- */
:root .bg-secondary-light,
:root .hover\:bg-secondary-light:hover { background-color: var(--gruber-wisteria) !important; }
:root .text-secondary-light { color: var(--gruber-wisteria) !important; }
:root .border-secondary-light { border-color: var(--gruber-wisteria) !important; }
:root .fill-secondary-light { fill: var(--gruber-wisteria) !important; }

/* --- secondary.main --------------------------------------- */
:root .bg-secondary-main,
:root .hover\:bg-secondary-main:hover { background-color: var(--gruber-niagara-2) !important; }
:root .text-secondary-main { color: var(--gruber-niagara-2) !important; }
:root .border-secondary-main { border-color: var(--gruber-niagara-2) !important; }

/* --- secondary.dark --------------------------------------- */
:root .bg-secondary-dark,
:root .hover\:bg-secondary-dark:hover { background-color: var(--gruber-bg--1) !important; }
:root .text-secondary-dark { color: var(--gruber-bg--1) !important; }
:root .border-secondary-dark { border-color: var(--gruber-bg--1) !important; }

/* --- secondary.active ------------------------------------- */
:root .bg-secondary-active,
:root .hover\:bg-secondary-active:hover { background-color: var(--gruber-bg-1) !important; }
:root .text-secondary-active { color: var(--gruber-bg-1) !important; }
:root .border-secondary-active { border-color: var(--gruber-bg-1) !important; }

/* --- common.bright ---------------------------------------- */
:root .bg-common-bright { background-color: var(--gruber-fg) !important; }
:root .text-common-bright,
:root .hover\:text-common-bright:hover { color: var(--gruber-fg) !important; }
:root .border-common-bright { border-color: var(--gruber-fg) !important; }
:root .fill-common-bright { fill: var(--gruber-fg) !important; }

/* --- common.light ----------------------------------------- */
:root .bg-common-light { background-color: var(--gruber-quartz) !important; }
:root .text-common-light,
:root .hover\:text-common-light:hover { color: var(--gruber-quartz) !important; }
:root .border-common-light { border-color: var(--gruber-quartz) !important; }
:root .fill-common-light { fill: var(--gruber-quartz) !important; }
:root .placeholder-common-light::placeholder { color: var(--gruber-quartz) !important; }

/* --- common.main ------------------------------------------ */
:root .bg-common-main { background-color: var(--gruber-fg-1) !important; }
:root .text-common-main,
:root .hover\:text-common-main:hover { color: var(--gruber-fg-1) !important; }
:root .border-common-main { border-color: var(--gruber-fg-1) !important; }
:root .fill-common-main { fill: var(--gruber-fg-1) !important; }
:root .stroke-common-main { stroke: var(--gruber-fg-1) !important; }

/* --- common.dark ------------------------------------------ */
:root .bg-common-dark,
:root .hover\:bg-common-dark:hover { background-color: var(--gruber-bg-4) !important; }
:root .text-common-dark { color: var(--gruber-bg-4) !important; }
:root .border-common-dark { border-color: var(--gruber-bg-4) !important; }

/* --- common.active ---------------------------------------- */
:root .bg-common-active,
:root .hover\:bg-common-active:hover { background-color: var(--gruber-niagara-1) !important; }
:root .text-common-active { color: var(--gruber-niagara-1) !important; }
:root .border-common-active { border-color: var(--gruber-niagara-1) !important; }

/* --- customgreen.100 (success / segmentations) ------------ */
:root .bg-customgreen-100,
:root .hover\:bg-customgreen-100:hover { background-color: var(--gruber-green) !important; }
:root .text-customgreen-100,
:root .hover\:text-customgreen-100:hover { color: var(--gruber-green) !important; }
:root .border-customgreen-100 { border-color: var(--gruber-green) !important; }
:root .fill-customgreen-100 { fill: var(--gruber-green) !important; }
:root .stroke-customgreen-100 { stroke: var(--gruber-green) !important; }

/* --- customblue.100 --------------------------------------- */
:root .bg-customblue-100 { background-color: var(--gruber-fg-1) !important; }
:root .text-customblue-100 { color: var(--gruber-fg-1) !important; }
:root .border-customblue-100 { border-color: var(--gruber-fg-1) !important; }

/* --- customblue.200 --------------------------------------- */
:root .bg-customblue-200,
:root .hover\:bg-customblue-200:hover { background-color: var(--gruber-niagara) !important; }
:root .text-customblue-200,
:root .hover\:text-customblue-200:hover { color: var(--gruber-niagara) !important; }
:root .border-customblue-200 { border-color: var(--gruber-niagara) !important; }
:root .fill-customblue-200 { fill: var(--gruber-niagara) !important; }

/* === 3. Component fallbacks ================================ */

/* Scrollbars — match Gruber dark chrome */
:root ::-webkit-scrollbar { background: var(--gruber-bg) !important; }
:root ::-webkit-scrollbar-track { background: var(--gruber-bg) !important; }
:root ::-webkit-scrollbar-thumb { background: var(--gruber-bg-3) !important; border-radius: 4px; }
:root ::-webkit-scrollbar-thumb:hover { background: var(--gruber-bg-4) !important; }
:root ::-webkit-scrollbar-corner { background: var(--gruber-bg) !important; }
* { scrollbar-color: var(--gruber-bg-3) var(--gruber-bg); }

/* Text selection — signature Gruber yellow on dark ink */
::selection { background-color: var(--gruber-yellow) !important; color: var(--gruber-bg--1) !important; }

/* Generic focus-visible ring — yellow for keyboard nav */
:root *:focus-visible {
  outline-color: var(--gruber-yellow) !important;
  outline-offset: 2px;
}

/* Modal / dialog backdrop — translucent Gruber bg-1 */
:root .bg-black\/50,
:root .bg-black\/60,
:root .bg-black\/70,
:root .bg-black\/80,
:root [role="dialog"] > .fixed.inset-0,
:root [data-radix-popper-content-wrapper] ~ .fixed.inset-0 {
  background-color: rgba(16, 16, 16, 0.85) !important;
}

/* Body / app shell — only act if OHIF didn't set its own bg */
html, body, #root, #app, .ohif-app { background-color: var(--gruber-bg) !important; color: var(--gruber-fg) !important; }

/* Input fields — paint to match the dark chrome */
:root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root textarea,
:root select {
  background-color: var(--gruber-bg-1) !important;
  color: var(--gruber-fg) !important;
  border-color: var(--gruber-bg-3) !important;
}
:root input:focus, :root textarea:focus, :root select:focus {
  border-color: var(--gruber-yellow) !important;
  outline-color: var(--gruber-yellow) !important;
}

/* Range slider thumbs (windowing, timeline, zoom) */
:root input[type="range"] { accent-color: var(--gruber-yellow) !important; }

/* Links — niagara, hover yellow */
:root a { color: var(--gruber-niagara) !important; }
:root a:hover { color: var(--gruber-yellow) !important; }

/* Disabled state — quartz on bg+2 */
:root [disabled], :root [aria-disabled="true"] {
  color: var(--gruber-quartz) !important;
  background-color: var(--gruber-bg-2) !important;
  cursor: not-allowed;
}