/* Radison branding overrides for OHIF Viewer (dark theme — preserved).
 * Loaded via the 40-radison-brand.sh entrypoint patch, which injects
 * <link rel="stylesheet" href="/branding/radison.css"> into index.html.
 *
 * Strategy: OHIF v3 uses Tailwind utility classes with hard-coded RGB triplets
 * (not CSS variables we can swap). We override each class one-by-one so the
 * dark surfaces stay dark and only the accent/indigo tones shift to Radison's
 * blue. The Tailwind tokens we touch (verified against the bundled CSS):
 *   primary-active = rgb(52 140 253)  — active toolbar button
 *   primary-light  = rgb(90 204 230)  — cyan accents (Studies pill etc.)
 *   primary-main   = rgb(9 68 179)    — buttons, primary surfaces
 *   primary-dark   = rgb(9 12 41)     — header strip (keep as-is, dark navy)
 *   secondary-dark = rgb(4 28 74)     — banner bg (keep as-is)
 *   secondary-light= rgb(58 63 153)   — indigo, used on inputs + SVGs
 *   inputfield-main= rgb(58 63 153)   — indigo border on every text input
 *   inputfield-focus=rgb(90 204 230)  — cyan border on focused input
 */

/* ---- Font: match the reporting-ui (Inter is already bundled by OHIF) ---- */
html,
body,
input,
button,
select,
textarea {
  font-family: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif !important;
}

/* ---- Radison palette (reference) ---- */
:root {
  --radison-blue-400: #60a5fa;
  --radison-blue-500: #3b82f6;
  --radison-blue-600: #2563eb;
  --radison-blue-700: #1d4ed8;
  --radison-blue-800: #1e40af;
}

/* ============================================================
 * Accent classes — primary/secondary tokens
 * ============================================================ */
.bg-primary-active,
.hover\:bg-primary-active:hover {
  background-color: #3b82f6 !important;
}
.text-primary-active {
  color: #60a5fa !important;
}
.border-primary-active {
  border-color: #3b82f6 !important;
}

.bg-primary-light {
  background-color: #60a5fa !important;
}
.text-primary-light {
  color: #60a5fa !important;
}
.border-primary-light,
.stroke-primary-light {
  border-color: #60a5fa !important;
  stroke: #60a5fa !important;
}

.bg-primary-main {
  background-color: #2563eb !important;
}
.text-primary-main {
  color: #2563eb !important;
}
.border-primary-main {
  border-color: #2563eb !important;
}

.bg-secondary-light,
.hover\:bg-secondary-light:hover {
  background-color: #1e40af !important;
}
.text-secondary-light {
  color: #60a5fa !important;
}
.border-secondary-light {
  border-color: #1e40af !important;
}
.stroke-secondary-light {
  stroke: #3b82f6 !important;
}
.border-secondary-main {
  border-color: #1e3a8a !important;
}

/* ============================================================
 * Form inputs — replace the indigo border with Radison blue
 * (kept subtle on the default state, bright on focus)
 * ============================================================ */
.border-inputfield-main,
.border-inputfield-main:focus {
  border-color: #1e40af !important;
}
.focus\:border-inputfield-focus:focus {
  border-color: #3b82f6 !important;
}
.disabled\:border-inputfield-disabled:disabled {
  border-color: #1e3a8a !important;
}

/* react-select used in the dropdowns shares the same look */
.customSelect__control {
  border-color: #1e40af !important;
}
.customSelect__control--is-focused {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 1px #3b82f6 !important;
}

/* SVG illustrations (the "no studies" magnifier, etc.) hard-code the indigo
 * as an attribute (e.g. <g stroke="#3A3F99">) rather than via a class —
 * catch those with case-insensitive attribute selectors. */
svg [stroke='#3a3f99' i],
svg [stroke='rgb(58, 63, 153)' i] {
  stroke: #3b82f6 !important;
}
svg [fill='#3a3f99' i],
svg [fill='rgb(58, 63, 153)' i] {
  fill: #3b82f6 !important;
}

/* ============================================================
 * Focus rings — Radison blue instead of OHIF cyan
 * ============================================================ */
.focus\:ring-primary-active:focus,
.focus\:ring-primary-light:focus,
.focus-visible\:ring-1:focus-visible {
  --tw-ring-color: rgba(59, 130, 246, 0.55) !important;
}

/* ============================================================
 * OHIF "investigational use only" banner — hide it (we're Radison-branded
 * and this is a default OHIF marketing nag that doesn't fit our product).
 * Selector fingerprint comes from the compiled DOM: a rounded-lg div with
 * the secondary-dark bg + primary-dark border, 90% wide.
 * ============================================================ */
div.bg-secondary-dark.border-primary-dark.rounded-lg.border-2 {
  display: none !important;
}

/* ============================================================
 * Logo polish — vertical-centre and size right inside the header
 * ============================================================ */
.header-logo {
  display: inline-flex !important;
  align-items: center;
  height: 100%;
}
.header-logo img {
  max-height: 26px;
  width: auto;
  display: block;
}

/* ============================================================
 * Subtle refinements — softer corners, smoother transitions
 * ============================================================ */
button,
.btn {
  transition:
    background-color 120ms ease,
    color 120ms ease,
    border-color 120ms ease;
}

/* Inputs: a hair more rounded for a friendlier feel without breaking the
 * dense info-density of the worklist table. */
input.rounded,
.customSelect__control {
  border-radius: 6px !important;
}

/* Selected study row in the StudyList — Radison blue stripe accent. */
tr[data-cy='studyRow'].bg-primary-main,
tr[data-cy='studyRow'][aria-selected='true'] {
  background-color: rgba(37, 99, 235, 0.18) !important;
  border-left: 3px solid #3b82f6 !important;
}

/* Thinner scrollbars, Radison-tinted thumb (Chrome/Edge only). */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.28);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(96, 165, 250, 0.5);
}
*::-webkit-scrollbar-track {
  background: transparent;
}