/*
 * Osteodata OHIF Theme — GREEN + BLACK
 *
 * OHIF v3.12 ships TWO blue systems, both overridden here:
 *   1. shadcn HSL custom properties (--primary etc.) defined on :root AND .dark
 *   2. Legacy Tailwind classes with LITERAL rgb/hex blues compiled into the
 *      bundle (.bg-primary-main, .text-primary-active, ...) — these are NOT
 *      variables, so each class is overridden explicitly.
 *
 * This file is injected AFTER app.bundle.css (see Dockerfile) and every rule
 * uses !important, so it wins the cascade even against the bundle's own
 * !important rules.
 *
 * Brand green ramp (replaces OHIF blue light/active/main/dark):
 *   light  #6EE7D2   active #2DD4BF   main #3BA39C   dark #1B524E
 */

/* ── shadcn / Tailwind HSL tokens (no hsl() wrapper — OHIF wraps them) ── */
:root,
.dark {
  /* Primary — brand teal-green #3BA39C */
  --primary: 176 47% 43% !important;
  --primary-foreground: 0 0% 100% !important;
  --ring: 176 47% 43% !important;

  /* Selection / measurement highlight — vivid teal-green (was blue) */
  --highlight: 174 60% 52% !important;

  /* Secondary — neutral dark (was blue) */
  --secondary: 0 0% 15% !important;
  --secondary-foreground: 0 0% 98% !important;

  /* Surfaces — black / near-black */
  --background: 0 0% 6% !important;
  --foreground: 0 0% 98% !important;
  --card: 0 0% 9% !important;
  --card-foreground: 0 0% 98% !important;
  --popover: 0 0% 8% !important;
  --popover-foreground: 0 0% 98% !important;
  --muted: 0 0% 14% !important;
  --muted-foreground: 0 0% 64% !important;

  /* Accent — dark teal tint */
  --accent: 174 35% 18% !important;
  --accent-foreground: 0 0% 98% !important;

  /* Borders / inputs */
  --border: 0 0% 18% !important;
  --input: 0 0% 18% !important;

  --neutral: 0 0% 46% !important;
}

/* ── Legacy Tailwind primary-* classes (literal blues in bundle) ── */
/* backgrounds */
.bg-primary-light  { background-color: #6EE7D2 !important; }
.bg-primary-active { background-color: #2DD4BF !important; }
.bg-primary-main   { background-color: #3BA39C !important; }
.bg-primary-dark   { background-color: #1B524E !important; }

/* text */
.text-primary-light  { color: #6EE7D2 !important; }
.text-primary-active { color: #2DD4BF !important; }
.text-primary-main   { color: #3BA39C !important; }
.text-primary-dark   { color: #1B524E !important; }

/* borders */
.border-primary-light  { border-color: #6EE7D2 !important; }
.border-primary-active { border-color: #2DD4BF !important; }
.border-primary-main   { border-color: #3BA39C !important; }
.border-primary-dark   { border-color: #1B524E !important; }

/* hover / focus / group-hover variants */
.hover\:bg-primary-main:hover,
.focus\:bg-primary-main:focus,
.group-hover\:bg-primary-main   { background-color: #3BA39C !important; }
.hover\:bg-primary-light:hover,
.focus\:bg-primary-light:focus  { background-color: #6EE7D2 !important; }
.hover\:bg-primary-dark:hover   { background-color: #1B524E !important; }
.hover\:text-primary-light:hover { color: #6EE7D2 !important; }
.hover\:text-primary:hover,
.group-hover\:text-primary       { color: #3BA39C !important; }
.hover\:border-primary-light:hover { border-color: #6EE7D2 !important; }

/* arbitrary one-off blue classes (#348cfd) */
.\!bg-\[\#348cfd\]   { background-color: #2DD4BF !important; }
.\!text-\[\#348cfd\] { color: #2DD4BF !important; }

/* secondary stroke (#3a3f99) used by some tool icons */
.stroke-secondary-light { stroke: #2DD4BF !important; }

/* ── Structural navy surfaces (bg-secondary-dark #041c4a) ── */
/* Panel section-headers / bars: retint navy → dark neutral (kept dark) */
.bg-secondary-dark { background-color: #151515 !important; }

/* THE TOP NAVBAR specifically (NavBar root = bg-secondary-dark.z-20, unique).
   Brand green with WHITE icons + text. The compound selector outranks the
   rule above, so only the navbar turns green — panel headers stay dark. */
.bg-secondary-dark.z-20 {
  background-color: #3BA39C !important;
  border-color: #2C8079 !important;
}
.bg-secondary-dark.z-20,
.bg-secondary-dark.z-20 * {
  color: #ffffff !important;        /* text + currentColor-based SVG icons */
}
.bg-secondary-dark.z-20 svg {
  color: #ffffff !important;
}

/* secondary-light (#3a3f99 indigo) — button hover bg → dark teal */
.bg-secondary-light { background-color: #1B524E !important; }
.hover\:bg-secondary-light:hover,
.focus\:bg-secondary-light:focus { background-color: #1B524E !important; }
.text-secondary-light { color: #6EE7D2 !important; }

/* ── react-select dropdown blues (#0944b3) ── */
.customSelect__menu-portal .customSelect__menu-list::-webkit-scrollbar-thumb {
  background-color: #3BA39C !important;
}
/* element+class beats the bundle's class-only !important on this one */
div.customSelect__option--is-focused,
.customSelect__menu-portal .customSelect__option:hover {
  background-color: rgba(59, 163, 156, 0.57) !important;
}
.customSelect__menu-portal .customSelect__menu {
  border-color: #3BA39C !important;
}

/* ── scrollbars (#041c4a navy) ── */
.ohif-scrollbar::-webkit-scrollbar-thumb {
  background-color: #1B524E !important;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f0f0f; }
::-webkit-scrollbar-thumb { background: #1B524E; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3BA39C; }

/* ── Keep the image viewport / canvas pure black for medical contrast ── */
.viewport-element,
[class*="cornerstone"],
canvas {
  background-color: #000 !important;
}