/* ==========================================================================
   Kardiax OHIF Viewer Theme
   ========================================================================== */

/* --- Override BOTH :root AND .dark (OHIF uses .dark class which beats :root) --- */
:root,
.dark,
html.dark,
body.dark,
[data-theme="dark"] {
  --highlight: 16 87% 55% !important;
  --background: 223 57% 8% !important;
  --foreground: 210 40% 95% !important;
  --card: 223 57% 12% !important;
  --card-foreground: 0 0% 98% !important;
  --popover: 223 57% 12% !important;
  --popover-foreground: 0 0% 98% !important;
  --primary: 198 99% 30% !important;
  --primary-foreground: 0 0% 98% !important;
  --secondary: 203 87% 22% !important;
  --secondary-foreground: 200 50% 84% !important;
  --muted: 223 50% 14% !important;
  --muted-foreground: 200 30% 65% !important;
  --accent: 203 87% 22% !important;
  --accent-foreground: 0 0% 98% !important;
  --border: 223 40% 20% !important;
  --input: 223 45% 20% !important;
  --ring: 198 99% 30% !important;
  --destructive: 0 62.8% 30.6% !important;
  --destructive-foreground: 0 0% 98% !important;
}

/* --- Override hardcoded Tailwind RGBA backgrounds --- */
.bg-primary-dark { background-color: #0d1730 !important; }
.bg-primary-main { background-color: #016996 !important; }
.bg-primary-active { background-color: #016996 !important; }
.bg-primary-light { background-color: #58c4e6 !important; }
.bg-secondary-dark { background-color: #0a1225 !important; }
.bg-secondary-main { background-color: #074367 !important; }
.bg-secondary-light { background-color: #1e3a5f !important; }
.bg-customblue-30 { background-color: #0d1730 !important; }
.bg-customblue-40 { background-color: #0f1e3d !important; }
.bg-customblue-400 { background-color: #64748b !important; }
.bg-black { background-color: #070d1a !important; }

/* Border overrides */
.border-primary-dark { border-color: #0d1730 !important; }
.border-primary-main { border-color: #016996 !important; }
.border-primary-active { border-color: #016996 !important; }
.border-secondary-dark { border-color: #0a1225 !important; }
.border-secondary-main { border-color: #074367 !important; }
.border-customblue-10 { border-color: #0a1225 !important; }

/* Text overrides */
.text-primary-main { color: #016996 !important; }
.text-primary-active { color: #58c4e6 !important; }
.text-primary-light { color: #58c4e6 !important; }

/* ============================================================
   Logo: force larger size (OHIF constrains the container)
   ============================================================ */
/* Target the whiteLabeling logo image -- 5x size */
img[alt="Kardiax"] {
  height: 150px !important;
  width: auto !important;
  max-height: none !important;
  min-height: 150px !important;
}
/* Expand the logo's parent containers to fit larger logo */
a:has(img[alt="Kardiax"]) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
/* Ensure the toolbar row accommodates the larger logo */
a:has(img[alt="Kardiax"]),
a:has(img[alt="Kardiax"]) > *,
img[alt="Kardiax"] {
  max-width: none !important;
  max-height: none !important;
}

/* ============================================================
   Hide "Investigational Use Only" banner
   ============================================================ */
/* Bottom notification bar -- multiple selectors for reliability */
div[class*="bottom-"][class*="z-50"],
div[class*="absolute"][class*="bottom-0"],
div[class*="bg-customblue-30"][class*="absolute"] {
  display: none !important;
}

/* ============================================================
   Hide "About OHIF" modal and trigger
   ============================================================ */
button[data-cy="aboutModal"],
button[title="About"],
button[aria-label="About"],
a[href*="github.com/OHIF"] {
  display: none !important;
}
/* Hide the modal when it opens */
div[role="dialog"]:has(a[href*="OHIF"]) {
  display: none !important;
}

/* ============================================================
   Hide 3D/Volume/MPR tools
   ============================================================ */
button[title*="3D"],
button[aria-label*="3D"],
button[title*="Volume"],
button[aria-label*="Volume"],
button[title*="MPR"],
button[aria-label*="MPR"] {
  display: none !important;
}

/* ============================================================
   Hide DICOM tag browser
   ============================================================ */
button[title*="DICOM"],
button[title*="Tags"],
button[title*="Tag Info"],
button[aria-label*="DICOM Tag"],
button[aria-label*="Tag Browser"] {
  display: none !important;
}

/* ============================================================
   Active tool highlight with orange
   ============================================================ */
button[class*="active"] svg,
[class*="active"] [class*="text-primary"] {
  color: #f05d26 !important;
}

/* ============================================================
   Thumbnails
   ============================================================ */
[class*="thumbnail"] {
  border-color: #1e3a5f !important;
}
[class*="thumbnail"][class*="active"],
[class*="thumbnail"]:hover {
  border-color: #016996 !important;
}

/* ============================================================
   Viewport: pure black for medical imaging
   ============================================================ */
canvas {
  background-color: #000 !important;
}

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a1225; }
::-webkit-scrollbar-thumb { background: #1e3a5f; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #016996; }

/* ============================================================
   Kardiax custom buttons container
   ============================================================ */
#kardiax-toolbar-buttons {
  z-index: 100;
}

/* ============================================================
   KDX-72: Hide non-functional language dropdown in user prefs
   (OHIF localization is incomplete -- shows numeric values
   instead of language names. Hidden until full i18n is wired up.)
   ============================================================ */
[id="language"],
label[for="language"],
div:has(> [id="language"]) {
  display: none !important;
}

/* ============================================================
   KDX-73: Vertically center pagination "Results per page" label
   with its select dropdown (Study List footer).
   ============================================================ */
[class*="StudyListPagination"],
[class*="pagination"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
}
[class*="StudyListPagination"] label,
[class*="pagination"] label,
[class*="pagination"] > span {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  line-height: 1 !important;
}
[class*="StudyListPagination"] select,
[class*="pagination"] select {
  vertical-align: middle !important;
  margin: 0 !important;
}

/* ============================================================
   KDX-74: Date range inputs need enough width for DD/MM/YYYY
   without clipping characters. Increase min-width on filter
   date inputs in the Study List.
   ============================================================ */
input[type="date"],
input[placeholder*="DD"],
input[placeholder*="MM"],
input[placeholder*="YY"],
input[name*="StudyDate"],
input[name*="studyDate"] {
  min-width: 130px !important;
  width: auto !important;
  padding-right: 8px !important;
  box-sizing: content-box !important;
}
[class*="StudyListFilter"] input[type="text"][placeholder*="/"] {
  min-width: 130px !important;
}

/* ============================================================
   KDX-70: Add "Kardiax Diagnostic Viewer" caption next to the
   logo. The whiteLabeling logo component renders an <img>; this
   pseudo-element appends the platform name for clearer branding.
   ============================================================ */
a:has(> img[alt="Kardiax"])::after {
  content: 'Diagnostic Viewer';
  display: inline-block;
  margin-left: 12px;
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.02em;
  align-self: center;
  padding-bottom: 8px;
}

/* ============================================================
   Kardiax Reporting --- lock down the broken browser-side SR path
   ============================================================
   OHIF's stock "+ Create SR" / "Create Report" buttons in the
   Tracked Measurements panel call cornerstone-dicom-sr to
   generate an SR client-side, which produced empty UIDs for our
   nginx-proxied build (RFC-002). We hide all of these so users
   only see our Kardiax "Submit Report to RIS" toolbar button.
   The buttons themselves are detected by their label text. */
.measurementTable button:has(> *:where(svg, span, i)):where(:has-text("Create SR"), :has-text("Create Report")),
button[data-cy="create-sr"],
button[data-cy*="createSr" i],
button[data-cy*="createReport" i],
[class*="MeasurementTable" i] button[class*="primaryAction" i],
[class*="MeasurementsPanel" i] button[class*="primaryAction" i] {
  display: none !important;
  visibility: hidden !important;
}

/* Fallback: hide any button whose visible text is exactly
   "Create SR" or "Create Report" inside a measurements panel.
   The :has(...) selector with text checks isn't standard CSS
   yet; this CSS-only approach catches the data-cy variants
   above. The kardiax-reporting.js extension also flags the
   bare-text buttons via DOM observation. */
button.kdx-stock-sr-action {
  display: none !important;
}

/* Hide rogue SR thumbnails in the Studies sidebar (see
   kardiax-reporting.js tagRogueSRs). Anything with SR modality
   that isn't ours gets the .kdx-sr-rogue class and is removed
   from the panel so users never click into a stale SR. */
.kdx-sr-rogue,
[class*="thumbnailDoubleClick" i].kdx-sr-rogue,
[data-modality="SR"].kdx-sr-rogue {
  display: none !important;
}