/* ============================================================
   Ontellus Theme Overrides — OHIF Core Style Overrides Only
   ============================================================
   This file is loaded as static CSS (not processed by Tailwind).

   DO NOT use this file for new styles. Tailwind first.
   This file exists ONLY for rules that:
     1. Override OHIF core component DOM, AND
     2. Cannot be expressed as Tailwind utilities/tokens, AND
     3. Cannot be moved into a component we already touch.
   Every rule must carry a WHY: comment.

   Brand colors are defined as Tailwind tokens in:
     - platform/ui-next/tailwind.config.js  (ontellus-* color tokens)
     - platform/ui-next/src/tailwind.css    (--primary etc. CSS custom properties)
   Hex values below MUST stay in sync with those token definitions.
   Canonical values:
     Ontellus primary:        #ff8200
     Ontellus primary dark:   #e67700
     Ontellus primary 15%:    rgba(255, 130, 0, 0.15)
     Ontellus primary 20%:    rgba(255, 130, 0, 0.20)
     Ontellus gray dark:      #3a3a3a
     Ontellus gray light:     #707070
     Ontellus bg dark:        #1a1a1a
     Ontellus bg medium:      #2a2a2a
   ============================================================ */


/* ============================================================
   NATIVE FORM ELEMENTS
   Pseudo-elements Tailwind does not cover.
   ============================================================ */

/* WHY: `accent-color` has no Tailwind utility; native control tint. */
input[type='checkbox']:checked,
input[type='radio']:checked {
  accent-color: #ff8200;
}

/* WHY: ::-webkit-scrollbar-thumb is a pseudo-element with no Tailwind utility. */
::-webkit-scrollbar-thumb {
  background: #ff8200;
}

::-webkit-scrollbar-thumb:hover {
  background: #e67700;
}

/* WHY: ::-webkit-calendar-picker-indicator is a pseudo-element with no Tailwind utility.
   Inverts the default black calendar icon so it is visible on dark date inputs. */
input[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}


/* ============================================================
   OHIF STUDY LIST TABLE
   These selectors target DOM emitted by @ohif/ui StudyListTable /
   StudyListExpandedRow / StudyListPagination. Moving these into the
   component files would require forking @ohif/ui and increase upgrade
   friction. Scoped overrides are the deliberate trade-off.
   ============================================================ */

/* WHY: OHIF StudyListTable rows use a CSS-Modules background that is too light
   against the Ontellus dark theme. Force readable white text + dark row bg. */
table tbody tr {
  background: #2a2a2a !important;
}

table tbody tr td,
table tbody tr td div,
table tbody tr td span {
  color: #ffffff !important;
}

/* WHY: Row hover state — use Ontellus orange tint to match the rest of the theme. */
table tbody tr:hover {
  background: rgba(255, 130, 0, 0.15) !important;
}

/* WHY: OHIF marks the expanded row with class containing `bg-secondary-dark`.
   Override to a deeper Ontellus background so the expand state is visually distinct. */
table tbody tr[class*='bg-secondary-dark'] {
  background: #1a1a1a !important;
}

/* WHY: Table headers — OHIF uses muted text; we want Ontellus orange + bold for
   clearer column labels on the dark theme. */
table thead th,
table thead th span {
  color: #ff8200 !important;
  font-weight: 600 !important;
}


/* ============================================================
   STUDY LIST FILTER INPUTS (in table thead)
   ============================================================ */

/* WHY: OHIF filter inputs render unstyled native inputs/buttons that look broken
   against the Ontellus dark theme. Scoped to `table thead` so we don't affect
   inputs elsewhere. */
table thead input[type='text'],
table thead input[type='search'],
table thead input[type='date'],
table thead select {
  background: #2a2a2a !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  padding: 8px 12px !important;
}

table thead input[type='text']:focus,
table thead input[type='search']:focus,
table thead input[type='date']:focus,
table thead select:focus {
  border-color: #ff8200 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 130, 0, 0.20) !important;
  background: #1a1a1a !important;
}

table thead input[type='text']::placeholder,
table thead input[type='search']::placeholder {
  color: #707070 !important;
  opacity: 0.7 !important;
}

table thead select option {
  background: #2a2a2a !important;
  color: #ffffff !important;
}

/* WHY: OHIF renders combobox-style filter triggers as <button>. Style them to
   match the text inputs above. */
table thead button,
table thead [role='combobox'] {
  background: #2a2a2a !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  min-height: 36px !important;
}

table thead button:hover,
table thead [role='combobox']:hover {
  border-color: #ff8200 !important;
  background: #1a1a1a !important;
}


/* ============================================================
   STUDY LIST EXPANDED ROW (series details)
   ============================================================ */

/* WHY: OHIF StudyListExpandedRow renders a CSS-Modules container with class
   matching [class*='expandedContent']. Overrides keep the expanded panel
   visually anchored to the parent row on the Ontellus dark theme. */
[class*='expandedContent'] {
  background: #1a1a1a !important;
  border-top: 1px solid #ff8200 !important;
  color: #ffffff !important;
  padding: 16px !important;
}

[class*='expandedContent'] table thead {
  background: #2a2a2a !important;
}

[class*='expandedContent'] table thead th {
  color: #ff8200 !important;
  font-weight: 600 !important;
  padding: 12px !important;
  border-bottom: 2px solid #ff8200 !important;
}

[class*='expandedContent'] table tbody tr {
  background: #1a1a1a !important;
  border-bottom: 1px solid #3a3a3a !important;
}

[class*='expandedContent'] table tbody td {
  color: #ffffff !important;
  padding: 12px !important;
}

/* WHY: OHIF renders the "Open Viewer" mode buttons inside expanded rows with
   class `bg-primary-main`. Since we keep OHIF core untouched, force the Ontellus
   primary on these buttons here. */
[class*='expandedContent'] button,
button.bg-primary-main {
  background: #ff8200 !important;
  border: 1px solid #ff8200 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

[class*='expandedContent'] button:hover,
button.bg-primary-main:hover {
  background: #e67700 !important;
  border-color: #e67700 !important;
  color: #ffffff !important;
}

[class*='expandedContent'] button:disabled {
  background: #3a3a3a !important;
  border-color: #3a3a3a !important;
  color: #707070 !important;
  opacity: 0.6 !important;
}

[class*='expandedContent'] button:not(:disabled) svg {
  color: #ffffff !important;
  fill: currentColor !important;
}

[class*='expandedContent'] button:disabled svg {
  fill: currentColor !important;
}


/* ============================================================
   PAGINATION
   ============================================================ */

/* WHY: OHIF StudyListPagination renders with class containing 'Pagination'.
   Scoped to that class to avoid catching unrelated components. */
[class*='Pagination'] {
  color: #ffffff !important;
}

[class*='Pagination'] button {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #ff8200 !important;
}

[class*='Pagination'] button:hover {
  background: rgba(255, 130, 0, 0.15) !important;
  border-color: #ff8200 !important;
}