/* ============================================================
   OHIF VIEWER — Glassmorphism dark (cohesive sama study browser)
   Inject ke OHIF index.html via sub_filter (theme/ dir-mount, live).
   Viewport (bg-background) tetap HITAM buat diagnostik.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* Surface navy + aksen (HSL triplet) */
:root, .dark {
  --card: 222 44% 11%;
  --popover: 222 46% 12%;
  --muted: 222 38% 15%;
  --border: 205 40% 28%;
  --input: 217 42% 24%;
  --highlight: 189 92% 58%;   /* medical cyan crisp (active tool / accent) */
  --ring: 199 89% 55%;
}

/* ---- Glass: top toolbar / header ---- */
.bg-popover {
  background-color: hsl(222 46% 12% / 0.66) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.045), transparent 42%);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  border-bottom: 1px solid rgba(34,211,238,0.16);
}

/* ---- Glass: panels & cards ---- */
.bg-card {
  background-color: hsl(222 44% 11% / 0.58) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.bg-muted { background-color: hsl(222 38% 16% / 0.5) !important; }

.text-primary { color: #5fb0ff !important; }

/* ============================================================
   PRO POLISH
   ============================================================ */

/* Font cohesive (OHIF icon = SVG, aman) */
body, button, input, select, textarea { font-family: 'Manrope', sans-serif !important; }

/* Scrollbar tipis dark */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,166,192,0.22); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(34,211,238,0.40); }

/* Panel divider halus */
.border-background { border-color: rgba(255,255,255,0.06) !important; }

/* ---- Info overlay di viewport: chip dark glass biar selalu kebaca ---- */
.overlay-item {
  font-family: 'Manrope', sans-serif !important;
  font-variant-numeric: tabular-nums;
  background: rgba(7,11,20,0.40);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  padding: 1px 7px; margin: 1px 0; border-radius: 5px; width: fit-content;
  border: 1px solid rgba(255,255,255,0.05);
  letter-spacing: .01em;
}

/* ---- Thumbnail panel kiri ---- */
.bg-muted.cursor-pointer {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px !important;
  transition: border-color .14s ease, transform .14s ease;
}
.bg-muted.cursor-pointer:hover {
  border-color: rgba(34,211,238,0.38);
  transform: translateY(-1px);
}