/* Estilos personalizados para OHIF - NextViewer 3.0 */

/* Variables de color morado y fuentes */
:root {
  --primary-purple: #1f0922;
  --secondary-purple: #380c41;
  --light-purple: #8a2a9d;
  --hover-purple: #391758;
  --border-purple: #8942e1;
  
  /* Colores de texto morado */
  --text-purple-light: #b388ff;
  --text-purple-main: #9c6fd9;
  --text-purple-dark: #7c4dbd;
}

/* Header principal y barra de navegación */
header,
[class*="Header"],
[class*="header"],
.ohif-header,
nav[class*="bg-"] {
  background-color: var(--primary-purple) !important;
  background: var(--primary-purple) !important;
}

/* Toolbar superior */
[class*="Toolbar"],
[class*="toolbar"],
div[class*="bg-primary"],
div[class*="bg-secondary"] {
  background-color: var(--primary-purple) !important;
}

/* Panel lateral izquierdo */
[class*="SidePanel"],
[class*="sidepanel"],
aside {
  background-color: #1a1a2e !important;
}

/* Miniaturas del panel lateral - sobrescribir clases Tailwind */
/* Sobrescribir TODOS los bg-primary-dark, bg-primary-* de Tailwind en el panel lateral */
aside [class*="bg-primary"],
aside [class*="bg-secondary"],
aside .bg-primary-dark,
aside .bg-primary-main,
aside .bg-secondary-dark,
aside .bg-secondary-main,
[class*="thumbnail"],
[class*="Thumbnail"],
[class*="series"],
[class*="Series"],
.thumbnail-item,
[class*="study-browser"] > div,
[class*="StudyBrowser"] > div,
[class*="study-browser"] div,
[class*="StudyBrowser"] div,
aside div,
aside button,
[class*="sidepanel"] div,
[class*="sidepanel"] button,
aside [class*="rounded"],
aside [class*="flex"] {
  background-color: #000000 !important;
  background: #000000 !important;
}

/* Contenedor de las miniaturas */
[class*="thumbnail-list"],
[class*="series-list"],
[class*="study-browser-series"],
aside > div,
aside section,
aside [class*="overflow"] {
  background-color: #000000 !important;
}

/* Item de miniatura individual - forzar negro con borde gris */
[class*="thumbnail"] > div,
[class*="series-item"],
button[class*="series"],
button[class*="thumbnail"],
aside div[class*="flex"],
aside div[class*="rounded"],
aside button[class*="rounded"] {
  background-color: #000000 !important;
  border: 1px solid #2a2a2a !important;
}

/* Miniatura seleccionada - borde morado */
[class*="thumbnail"][class*="active"],
[class*="series"][class*="active"],
button[class*="series"][class*="active"],
aside button[class*="active"],
aside div[class*="active"],
aside [class*="border-primary"],
aside .border-primary-active {
  background-color: #000000 !important;
  border: 2px solid var(--light-purple) !important;
  box-shadow: 0 0 8px var(--light-purple) !important;
}

/* Hover en miniaturas */
[class*="thumbnail"]:hover,
[class*="series"]:hover,
button[class*="thumbnail"]:hover,
aside button:hover,
aside div:hover {
  background-color: #1a1a1a !important;
  border-color: var(--secondary-purple) !important;
}

/* Eliminar TODOS los bordes cyan/aqua de viewport activo */
div[style*="border"][style*="rgb"],
div[style*="border"][style*="cyan"],
div[style*="border-color: rgb"],
[style*="border: 2px solid rgb"],
[style*="border: 3px solid rgb"],
[style*="border-color: cyan"],
[style*="border-color: aqua"],
canvas[style*="border"],
[data-viewport-uid][style*="border"] {
  border-color: var(--light-purple) !important;
  border-style: solid !important;
  border-width: 3px !important;
}

/* Personalizar botones - mismo color que el header */
button,
button[class*="primary"],
button[class*="Primary"],
.btn-primary,
[class*="Button"],
[role="button"] {
  background-color: var(--primary-purple) !important;
  border-color: var(--primary-purple) !important;
  color: white !important;
}

/* Botón seleccionado/activo */
button[class*="active"],
button[aria-pressed="true"],
button[class*="selected"],
.btn-active {
  background-color: var(--light-purple) !important;
  border-color: var(--light-purple) !important;
}

/* Hover sobre botones */
button:hover,
button[class*="primary"]:hover {
  background-color: var(--secondary-purple) !important;
  border-color: var(--secondary-purple) !important;
}

/* Botones secundarios */
button[class*="secondary"],
button[class*="Secondary"],
.btn-secondary {
  border-color: var(--secondary-purple) !important;
  color: var(--secondary-purple) !important;
}

button[class*="secondary"]:hover,
button[class*="Secondary"]:hover {
  background-color: var(--hover-purple) !important;
}

/* Iconos de la toolbar activos */
button[class*="active"],
[class*="active"] button,
.active {
  background-color: var(--secondary-purple) !important;
  color: white !important;
}

/* Elementos seleccionados */
[class*="selected"],
.selected,
[aria-selected="true"] {
  background-color: var(--secondary-purple) !important;
  border-color: var(--light-purple) !important;
}

/* Lista de estudios - hover */
[class*="StudyListItem"]:hover,
[class*="study-list"] tr:hover,
tbody tr:hover {
  background-color: var(--hover-purple) !important;
}

/* Links */
a {
  color: var(--secondary-purple) !important;
}

a:hover {
  color: var(--light-purple) !important;
}

/* Tabs activos */
[role="tab"][aria-selected="true"],
.tab-active,
[class*="tab-active"] {
  border-bottom-color: var(--secondary-purple) !important;
  color: var(--secondary-purple) !important;
}

/* Scrollbar personalizada */
::-webkit-scrollbar-thumb {
  background-color: #291739 !important;
}

::-webkit-scrollbar-track {
  background-color: #0a0a0a !important;
}

.ohif-scrollbar::-webkit-scrollbar-thumb {
  background-color: #291739 !important;
}

/* Input focus */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--secondary-purple) !important;
  box-shadow: 0 0 0 1px var(--secondary-purple) !important;
}

/* Checkboxes y radio buttons */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--secondary-purple) !important;
  border-color: var(--secondary-purple) !important;
}

/* Progress bars */
[class*="progress"],
.progress-bar {
  background-color: var(--secondary-purple) !important;
}

/* Tooltips */
[class*="Tooltip"],
.tooltip {
  background-color: var(--primary-purple) !important;
}

/* Badges */
[class*="badge"],
.badge {
  background-color: var(--secondary-purple) !important;
}

/* Dropdowns */
[class*="Dropdown"]:hover,
[class*="dropdown"]:hover,
.dropdown-item:hover {
  background-color: var(--hover-purple) !important;
}

/* Panel de herramientas laterales */
[class*="ToolPanel"],
[class*="toolpanel"] {
  border-color: var(--secondary-purple) !important;
}

/* Eliminar elementos azules residuales */
[class*="bg-blue"],
[class*="text-blue"],
.text-primary,
.bg-primary {
  background-color: var(--secondary-purple) !important;
  color: white !important;
}

/* Bordes y outline azules */
[class*="border-blue"],
.border-primary {
  border-color: var(--secondary-purple) !important;
}

/* SVG e iconos con color azul */
svg[class*="text-blue"],
svg.text-primary,
[class*="Icon"] svg {
  color: var(--secondary-purple) !important;
  fill: var(--secondary-purple) !important;
}

/* Números de serie e instancias azules */
[class*="StudyBrowser"] [class*="text-"],
[class*="studybrowser"] [class*="text-"] {
  color: inherit !important;
}

/* Links y números en azul */
[class*="text-aqua"],
[class*="text-cyan"],
.text-info {
  color: var(--light-purple) !important;
}

/* Ocultar mensaje "SOLO USO PARA INVESTIGACIÓN" */
.text-common-light.mr-3.text-lg,
span.text-common-light.mr-3.text-lg,
[class*="research"],
[class*="Research"],
[class*="investigacion"],
[class*="Investigacion"] {
  display: none !important;
}

/* Ocultar cualquier span con ese texto específico */
span.mr-3.text-lg {
  display: none !important;
}

/* Viewport activo - cambiar borde celeste/cyan a morado */
[class*="viewport"][class*="active"],
[class*="Viewport"][class*="active"],
.viewport-active,
.active-viewport,
[class*="cornerstone"][class*="active"],
div[class*="active"] canvas {
  border-color: var(--light-purple) !important;
  outline-color: var(--light-purple) !important;
}

/* Borde del viewport */
[class*="viewport-wrapper"],
[class*="ViewportWrapper"],
.viewport,
[class*="viewport"] {
  border-color: var(--secondary-purple) !important;
}

/* Overlay del viewport (bordes cyan) */
[style*="border"][style*="cyan"],
[style*="border"][style*="aqua"],
[style*="border: 2px"],
[style*="border: 3px"] {
  border-color: var(--light-purple) !important;
}

/* Canvas y elementos con borde activo */
canvas[style*="border"],
div[data-viewport-uid] {
  border-color: var(--light-purple) !important;
}