/* ===========================================================================
   Viewer skin — removes all upstream branding and applies your own.
   ===========================================================================
   Injected by nginx (see nginx/portal.conf). Two token layers must BOTH be
   set or the retheme only half-lands:

   1. shadcn tokens, which expect BARE HSL TRIPLETS ("174 77% 35%"). A hex
      value here silently does nothing.
   2. a legacy Tailwind palette with literal rgb() values (.bg-primary-dark is
      rgb(9,12,41)). The panel chrome uses THESE, not the tokens -- override
      only the tokens and you get teal accents on navy panels.

   Verified against OHIF v3.9.2. Re-check both layers on upgrade.

   Note on licence: MIT permits removing upstream branding from the UI. The
   copyright notice must stay in the SOURCE files, which it does -- nothing
   here touches that.
   ========================================================================= */

:root {
  --brand-primary:  #14a08a;
  --brand-ink:      #ffffff;
  --brand-bg:       #0b1418;
  --brand-panel:    #10202a;
}

html, :root, body, .dark, [data-theme="dark"] {
  --primary:              174 77% 35% !important;
  --primary-foreground:     0  0% 100% !important;
  --ring:                 174 77% 35% !important;
  --highlight:            174 77% 35% !important;
  --background:           196 45%  7% !important;
  --foreground:           180 24% 96% !important;
  --card:                 199 45% 12% !important;
  --card-foreground:      180 24% 96% !important;
  --popover:              199 45% 12% !important;
  --popover-foreground:   180 24% 96% !important;
  --secondary:            199 40% 16% !important;
  --secondary-foreground: 180 24% 96% !important;
  --muted:                199 40% 16% !important;
  --muted-foreground:     198 17% 63% !important;
  --accent:               199 45% 20% !important;
  --accent-foreground:    180 24% 96% !important;
  --border:               199 35% 20% !important;
  --input:                199 35% 20% !important;
  --chart-1: 210 74% 56%; --chart-2:  16 82% 56%; --chart-3: 160 73% 36%;
  --chart-4:  40 100% 46%; --chart-5: 341 65% 58%;
}

/* legacy palette — the panel chrome actually uses these */
.bg-primary-dark    { background-color: #10202a !important; }
.bg-secondary-dark  { background-color: #0b1418 !important; }
.bg-primary-main    { background-color: #0f7d6c !important; }
.bg-primary-active  { background-color: #14a08a !important; }
.bg-primary-light   { background-color: #5ad2c0 !important; }
.bg-secondary-main  { background-color: #14505e !important; }
.bg-secondary-light { background-color: #2a7d8c !important; }
.text-primary-active{ color: #14a08a !important; }
.text-primary-light { color: #5ad2c0 !important; }
.text-primary-main  { color: #14a08a !important; }
.border-primary-dark   { border-color: #10202a !important; }
.border-primary-main,
.border-primary-active { border-color: #14a08a !important; }
.border-secondary-dark { border-color: #17323d !important; }
.border-secondary-main { border-color: #14505e !important; }
.border-secondary-light{ border-color: #2a7d8c !important; }

/* --- identity ------------------------------------------------------------
   Deliberately NO separate fixed bar. An earlier revision injected one above
   #root; the app's own header is positioned at top:0, so it ignored the body
   padding and the two overlapped -- the toolbar and patient name ended up
   half-hidden behind it. Identity is carried by whiteLabeling inside the
   app's real header (see ohif/app-config.js), which cannot collide with the
   layout because it IS the layout. */

/* ===========================================================================
   SHARP & CLEAN  —  deliberately minimal and low-risk
   ===========================================================================
   A previous, more aggressive polish visually broke controls: it put
   overflow:hidden and inset rings on broad [class*="viewport"] /
   [class*="thumbnail"] wildcards, which clipped flyouts and hid elements.
   This layer touches NONE of that. It changes only:
     - text rendering (sharper glyphs)
     - corner radius token (a touch tighter)
     - existing border colours (crisper hairlines -- colour only)
     - scrollbars
     - button hover transition
   No overflow, no box-model, no viewport/thumbnail/background rules. It cannot
   clip or hide a control.
   ========================================================================= */

/* Sharper text everywhere. */
* {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Slightly tighter corners read "sharper" without going hard-edged. */
:root, .dark, [data-theme="dark"] { --radius: 0.375rem !important; }

/* Crisper hairline dividers -- COLOUR ONLY, no new borders, no geometry. */
.border-secondary-dark,
.border-secondary-main { border-color: rgba(255,255,255,0.08) !important; }

/* Smooth, quiet hover on buttons only (no layout, no transform). */
button, [class*="ToolbarButton"] {
  transition: background-color .14s ease, color .14s ease,
              border-color .14s ease !important;
}

/* Thin, quiet scrollbars -- purely cosmetic. */
*::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
*::-webkit-scrollbar-track { background: transparent !important; }
*::-webkit-scrollbar-thumb {
  background: rgba(143,168,178,0.20) !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(20,160,138,0.5) !important;
  background-clip: padding-box !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   VIEWER POLISH — toolbar, thumbnails, panels, study list.
   ═══════════════════════════════════════════════════════════════════════════
   SAFE by construction: no overflow:hidden, no rings on viewport/thumbnail
   wildcards, no box-model changes to the canvas. Only padding, radius, colour,
   hover/active state, and spacing — the things that read "premium" without
   clipping flyouts or hiding controls. Verified against OHIF v3.9.2.
   ═════════════════════════════════════════════════════════════════════════ */

/* --- toolbar buttons: comfortable hit targets, rounded hover, teal active -- */
[class*="ToolbarButton"] {
  border-radius: 8px !important;
  transition: background-color .14s ease, color .14s ease, box-shadow .14s ease !important;
}
[class*="ToolbarButton"]:hover {
  background-color: rgba(255,255,255,0.07) !important;
}
[class*="ToolbarButton"][class*="active"],
[class*="ToolbarButton"][class*="Active"] {
  background-color: rgba(20,160,138,0.16) !important;
  color: #2fd0b5 !important;
  box-shadow: inset 0 0 0 1px rgba(20,160,138,0.4) !important;
}

/* --- thumbnails: rounded, quiet border, teal ring when selected -----------
   border-radius + box-shadow ONLY (no overflow:hidden — that clipped things). */
[class*="thumbnail"], [class*="Thumbnail"] {
  border-radius: 8px !important;
  transition: box-shadow .14s ease !important;
}
[class*="thumbnail"]:hover, [class*="Thumbnail"]:hover {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14) !important;
}
[class*="thumbnail"][class*="active"], [class*="thumbnail"][class*="selected"],
[class*="Thumbnail"][class*="active"], [class*="Thumbnail"][class*="selected"] {
  box-shadow: inset 0 0 0 2px rgba(20,160,138,0.85) !important;
}

/* --- panels & headers: crisper section headers, calmer dividers ------------ */
[class*="panel-header"], [class*="PanelHeader"] {
  letter-spacing: 0.02em !important;
}

/* --- study list rows (the WorkList table): airier + clear row hover -------- */
tr[class*="cursor-pointer"]:hover,
[class*="StudyListTableRow"]:hover,
tr:hover td { background-color: rgba(20,160,138,0.06) !important; }
table[class] td, table[class] th { padding-top: 10px !important; padding-bottom: 10px !important; }

/* --- primary buttons in the viewer: subtle depth --------------------------- */
.bg-primary-main, .bg-primary-active {
  box-shadow: 0 4px 12px -6px rgba(20,160,138,0.5) !important;
}

/* --- inputs / selects in the study list filters: rounded, consistent ------- */
input[class], select[class] {
  border-radius: 7px !important;
}