/* ============================================================
   Technik Bio Médica — tema do OHIF Viewer (dark)
   Override por CSS dos tokens do app.bundle.css (sem rebuild).
   Carregar SEMPRE depois do bundle (index.html) pra vencer a cascata.
   ============================================================ */

/* ---- 1) Variaveis CSS (componentes "ui-next" do OHIF) ---- */
:root {
  --background: 210 14% 9%;
  --foreground: 30 12% 92%;
  --card: 210 14% 12%;
  --card-foreground: 30 12% 92%;
  --popover: 210 14% 12%;
  --popover-foreground: 30 12% 92%;
  --primary: 144 40% 66%;
  --primary-foreground: 210 14% 9%;
  --ring: 144 40% 66%;
  --highlight: 144 40% 66%;
  --secondary: 210 12% 16%;
  --secondary-foreground: 30 12% 92%;
  --muted: 210 12% 16%;
  --muted-foreground: 28 10% 70%;
  --accent: 144 24% 22%;
  --accent-foreground: 30 12% 92%;
  --neutral: 28 10% 70%;
  --border: 210 10% 20%;
  --input: 210 10% 20%;
}

/* ---- 2) Paleta FIXA (utilitarios primary, secondary, inputfield) ---- */

/* navies / fundos escuros -> superficie escura Technik (ex.: navbar) */
.bg-primary-dark, .bg-secondary-dark, .bg-indigo-dark { background-color: hsl(210 14% 12%) !important; }
.border-primary-dark, .border-secondary-dark          { border-color: hsl(210 10% 20%) !important; }
.text-primary-dark                                     { color: hsl(210 12% 16%) !important; }

/* azuis / teal (accent) -> verde Technik */
.bg-primary-main, .bg-primary-active, .bg-primary-light       { background-color: hsl(144 40% 62%) !important; }
.text-primary-main, .text-primary-active, .text-primary-light { color: hsl(144 40% 66%) !important; }
.border-primary-main, .border-primary-active, .border-primary-light { border-color: hsl(144 40% 60%) !important; }

/* indigos / roxos (secondary-light/main, inputfield) -> neutro */
.bg-secondary-light, .bg-secondary-main { background-color: hsl(210 13% 18%) !important; }
.border-secondary-light, .border-secondary-main, .border-inputfield-main { border-color: hsl(210 10% 30%) !important; }
.text-secondary-light { color: hsl(28 10% 70%) !important; }

/* foco do input -> verde */
.focus\:border-inputfield-focus:focus { border-color: hsl(144 40% 60%) !important; }
input:focus, select:focus { border-color: hsl(144 40% 60%) !important; }

/* ---- 3) SVGs com cor de marca INLINE (ex.: lupa do "no studies") ---- */
[stroke="#3A3F99" i] { stroke: hsl(210 8% 45%) !important; }
[fill="#3A3F99" i]   { fill: hsl(210 8% 45%) !important; }
[fill="#06081D" i]   { fill: hsl(210 14% 10%) !important; }
[stroke="#5ACCE6" i] { stroke: hsl(144 40% 62%) !important; }
[stroke="#348CFD" i] { stroke: hsl(144 40% 62%) !important; }
[stroke="#0944B3" i] { stroke: hsl(144 40% 62%) !important; }

/* ---- 4) react-select (dropdowns como "Modality") ---- */
.customSelect__control { background-color: hsl(210 14% 10%) !important; border-color: hsl(210 10% 30%) !important; }
.customSelect__control--is-focused { border-color: hsl(144 40% 60%) !important; box-shadow: 0 0 0 1px hsl(144 40% 60%) !important; }
.customSelect__menu { background-color: hsl(210 14% 12%) !important; border: 1px solid hsl(210 10% 22%) !important; }
.customSelect__option--is-focused { background-color: hsl(210 13% 20%) !important; }
.customSelect__option--is-selected { background-color: hsl(144 36% 40%) !important; color: hsl(30 12% 95%) !important; }
.customSelect__single-value, .customSelect__input-container, .customSelect__placeholder { color: hsl(30 12% 88%) !important; }

/* ---- 5) scrollbars (eram navy #041c4a / azul #0944b3) -> cinza Technik ---- */
::-webkit-scrollbar-thumb { background-color: hsl(210 10% 30%) !important; }

/* ---- 6) worklist: cantos SUPERIORES arredondados na barra de filtros ---- */
.sticky.border-b-4.border-black > .bg-primary-dark.pt-3.pb-3 {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}

/* ---- 7) aviso "uso investigacional": vira modal de alerta central + texto PT ---- */
/* wrapper (era barra full-width colada embaixo) -> overlay centralizado c/ leve escurecido */
.fixed.bottom-2.z-50 {
  inset: 0 !important;
  height: 100% !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.45) !important;
}
/* card -> compacto, empilhado e centralizado */
.fixed.bottom-2.z-50 > div {
  width: auto !important;
  max-width: 360px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 10px !important;
  padding: 22px 24px !important;
}
/* grupo (icone + textos) -> coluna, icone em cima */
.fixed.bottom-2.z-50 .flex.items-center.gap-4 {
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}
/* icone menor */
.fixed.bottom-2.z-50 svg { width: 46px !important; height: 46px !important; }
/* linha 1 -> titulo (PT) */
.fixed.bottom-2.z-50 .text-\[19px\] { font-size: 0 !important; line-height: 0 !important; }
.fixed.bottom-2.z-50 .text-\[19px\]::after {
  content: "Uso investigacional";
  font-size: 16px; line-height: 1.3; font-weight: 600; color: #ffffff;
}
/* linha 2 (era "Learn more...") -> subtexto (PT) */
.fixed.bottom-2.z-50 .text-\[13px\] { font-size: 0 !important; line-height: 0 !important; pointer-events: none !important; }
.fixed.bottom-2.z-50 .text-\[13px\]::after {
  content: "Este visualizador não substitui o laudo médico oficial.";
  font-size: 12.5px; line-height: 1.35; font-weight: 400; color: hsl(28 8% 75%);
}
/* botao -> "Ciente" */
.fixed.bottom-2.z-50 button { font-size: 0 !important; margin-top: 4px !important; }
.fixed.bottom-2.z-50 button::after { content: "Ciente"; font-size: 14px; font-weight: 600; }

/* ---- 8) worklist: enxugar modos do estudo expandido -> so "Visualizar" ---- */
/* esconde os modos nao usados (DX/CR): Segmentation, TMTV, Microscopy, Preclinical 4D */
[data-cy^="mode-segmentation-"],
[data-cy^="mode-tmtv-"],
[data-cy^="mode-microscopy-"],
[data-cy^="mode-dynamic-volume-"] { display: none !important; }
/* renomeia "Basic Viewer" -> "Visualizar" (mantendo o icone de seta) */
[data-cy^="mode-viewer-"] { font-size: 0 !important; }
[data-cy^="mode-viewer-"] svg { width: 15px !important; height: 15px !important; }
[data-cy^="mode-viewer-"]::after { content: "Visualizar"; font-size: 13px; font-weight: 600; }