/* ═══════════════════════════════════════════════════════════════════════════
   ChiroVision — HUD skin (Phase A: Cervical only)

   Rules scoped to  body.cv-theme-hud  so they don't leak into Legacy or
   GlassVision. Turning HUD on:
     · hides the legacy header / dashboard / import chrome
     · promotes the .xray-container to fill the entire viewport
     · loads a cyan-neon color palette + monospace type
     · shows floating HUD panels that chirovision-hud-cervical.js injects
       and wires as proxies for the existing hidden buttons

   All existing tool logic (measurement math, save, calibration, snap-to-
   edge, voice) keeps running underneath — the skin is purely presentation.
   ═══════════════════════════════════════════════════════════════════════════ */

body.cv-theme-hud {
  --hud-void: #060810;
  --hud-panel: rgba(6, 12, 22, 0.72);
  --hud-panel-solid: rgba(9, 16, 26, 0.92);
  --hud-cyan: #22d3ee;
  --hud-cyan-glow: rgba(34, 211, 238, 0.55);
  --hud-ink: #dff5ff;
  --hud-ink-mute: #7ba7b8;
  --hud-amber: #f59e0b;
  --hud-magenta: #f0abfc;
  --hud-red: #ef4444;
  background: var(--hud-void) !important;
  color: var(--hud-ink);
  overflow: hidden;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Kill legacy chrome across the page */
body.cv-theme-hud .header,
body.cv-theme-hud .dash,
body.cv-theme-hud .dashboard,
body.cv-theme-hud .dashboard-header,
body.cv-theme-hud .footer,
body.cv-theme-hud .patient-controls,
body.cv-theme-hud .import-section,
body.cv-theme-hud .options-actions-bar,
body.cv-theme-hud .instructions-panel,
body.cv-theme-hud .cv-utility-footer,
body.cv-theme-hud .image-info-display,
body.cv-theme-hud .voice-command-list,
body.cv-theme-hud .cv-msg-fab,
body.cv-theme-hud .toggle-tools-btn,
body.cv-theme-hud .toggle-measurements-btn,
body.cv-theme-hud .floating-tools-panel,
body.cv-theme-hud .floating-measurements-panel,
body.cv-theme-hud .nav-arrows-panel-1,
body.cv-theme-hud .nav-arrows-panel-2,
body.cv-theme-hud .cv-tp-sheet,
body.cv-theme-hud .voice-control-container,
body.cv-theme-hud .cv-patient-gallery {
  display: none !important;
}

/* Promote the xray container to the viewport */
body.cv-theme-hud .container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
body.cv-theme-hud .xray-panel,
body.cv-theme-hud .xray-container {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--hud-void) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
body.cv-theme-hud .xray-container #patient-xray {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  z-index: 1 !important;
}
body.cv-theme-hud .xray-container #measurement-canvas {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: auto !important;
  z-index: 10 !important;
}

/* Scanlines overlay for CRT feel — decorative, non-interactive */
body.cv-theme-hud::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8500;
  background: repeating-linear-gradient(180deg, transparent 0, transparent 2px, rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 3px);
  mix-blend-mode: overlay;
}

/* HUD panel — shared skin */
body.cv-theme-hud .hud-panel {
  position: fixed;
  background: var(--hud-panel);
  border: 1px solid var(--hud-cyan);
  color: var(--hud-ink);
  padding: 10px 14px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9000;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
}
body.cv-theme-hud .hud-panel .label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hud-cyan);
  font-weight: 700;
  margin-bottom: 4px;
}
body.cv-theme-hud .hud-panel .value {
  font-size: 14px;
  color: var(--hud-ink);
  font-weight: 500;
}
body.cv-theme-hud .hud-panel .value strong {
  font-size: 20px;
  font-weight: 700;
}

body.cv-theme-hud .hud-tl { top: 60px; left: 18px; min-width: 220px; }
body.cv-theme-hud .hud-tr {
  top: 60px; right: 18px; min-width: 220px; text-align: right;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
body.cv-theme-hud .hud-tr .measure-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 3px 0; font-size: 12px; text-align: right;
}
body.cv-theme-hud .hud-tr .measure-row .lbl {
  color: var(--hud-ink-mute); text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em;
}
body.cv-theme-hud .hud-tr .measure-row .val {
  color: var(--hud-cyan); font-weight: 700;
}
body.cv-theme-hud .hud-tr .measure-row .val.warn { color: var(--hud-amber); }
body.cv-theme-hud .hud-tr .measure-row .val.critical { color: var(--hud-red); }

body.cv-theme-hud .hud-br {
  bottom: 90px; right: 18px; min-width: 200px;
}
body.cv-theme-hud .hud-br .action-row {
  display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap;
}
body.cv-theme-hud .hud-br .action-row button {
  background: transparent; border: 1px solid var(--hud-cyan); color: var(--hud-ink);
  font-family: inherit; font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 5px 8px; cursor: pointer;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  transition: all 0.15s;
}
body.cv-theme-hud .hud-br .action-row button:hover {
  background: var(--hud-cyan); color: var(--hud-void);
}

/* Tool strip — bottom center */
body.cv-theme-hud .hud-tools {
  position: fixed;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 5px;
  background: var(--hud-panel-solid);
  border: 1px solid var(--hud-cyan);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  z-index: 9001;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: 96vw; overflow-x: auto;
  scrollbar-width: none;
}
body.cv-theme-hud .hud-tools::-webkit-scrollbar { display: none; }
body.cv-theme-hud .hud-tools button {
  background: transparent; border: none; color: var(--hud-ink);
  font-family: inherit; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 8px 12px; cursor: pointer;
  white-space: nowrap; transition: all 0.15s;
  border-right: 1px solid rgba(34,211,238,0.15);
}
body.cv-theme-hud .hud-tools button:last-child { border-right: none; }
body.cv-theme-hud .hud-tools button:hover {
  background: rgba(34,211,238,0.15); color: var(--hud-cyan);
}
body.cv-theme-hud .hud-tools button.active {
  background: var(--hud-cyan); color: var(--hud-void); font-weight: 700;
}

/* Center reticle — pure decoration */
body.cv-theme-hud .hud-reticle {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100px; height: 100px; z-index: 8600; pointer-events: none;
}
body.cv-theme-hud .hud-reticle::before,
body.cv-theme-hud .hud-reticle::after {
  content: ""; position: absolute; background: var(--hud-cyan); opacity: 0.4;
}
body.cv-theme-hud .hud-reticle::before {
  top: 50%; left: 0; right: 0; height: 1px;
  transform: translateY(-0.5px);
}
body.cv-theme-hud .hud-reticle::after {
  left: 50%; top: 0; bottom: 0; width: 1px;
  transform: translateX(-0.5px);
}
body.cv-theme-hud .hud-reticle .box {
  position: absolute; inset: 15px;
  border: 1px solid var(--hud-cyan);
  opacity: 0.55;
  clip-path: polygon(
    0 0, 15px 0, 15px 1px, 1px 1px, 1px 15px, 0 15px,
    0 calc(100% - 15px), 1px calc(100% - 15px), 1px calc(100% - 1px), 15px calc(100% - 1px), 15px 100%, 0 100%,
    calc(100% - 15px) 100%, calc(100% - 15px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 15px), 100% calc(100% - 15px), 100% 100%,
    100% 0, 100% 15px, calc(100% - 1px) 15px, calc(100% - 1px) 1px, calc(100% - 15px) 1px, calc(100% - 15px) 0
  );
}

/* Corner nav frame — decorative brackets in each corner */
body.cv-theme-hud .hud-frame {
  position: fixed; inset: 8px;
  pointer-events: none;
  z-index: 8700;
}
body.cv-theme-hud .hud-frame::before,
body.cv-theme-hud .hud-frame::after {
  content: ""; position: absolute;
  width: 24px; height: 24px;
  border: 1px solid var(--hud-cyan);
  opacity: 0.4;
}
body.cv-theme-hud .hud-frame::before {
  top: 0; left: 0; border-right: none; border-bottom: none;
}
body.cv-theme-hud .hud-frame::after {
  bottom: 0; right: 0; border-left: none; border-top: none;
}

/* Reposition existing utility chips so they don't collide with HUD panels */
body.cv-theme-hud #cv-idle-btn { bottom: 68px !important; left: 12px !important; right: auto !important; }
body.cv-theme-hud #cv-vl-mic { bottom: 68px !important; right: 12px !important; }
body.cv-theme-hud #cv-snap-badge { bottom: 68px !important; }
body.cv-theme-hud #cv-cal-badge { top: 60px !important; left: auto !important; right: 250px !important; }

/* File input must remain clickable in HUD even though its parent is hidden.
   Browsers block programmatic click on display:none <input type=file>, so
   we render it invisibly instead. */
body.cv-theme-hud #xray-upload {
  display: block !important;
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* HUD Prior-images strip — sits on the left edge, vertical column of
   numbered thumbnails from the current patient's cervical library */
body.cv-theme-hud .hud-prior {
  position: fixed;
  left: 18px;
  top: 190px;
  bottom: 90px;
  width: 76px;
  padding: 8px 6px;
  background: var(--hud-panel);
  border: 1px solid var(--hud-cyan);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9000;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
body.cv-theme-hud .hud-prior::-webkit-scrollbar { display: none; }
body.cv-theme-hud .hud-prior .label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hud-cyan);
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
  position: sticky;
  top: 0;
  background: var(--hud-panel);
  padding-bottom: 4px;
}
body.cv-theme-hud .hud-prior .thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 6px;
  cursor: pointer;
  border: 1.5px solid rgba(34,211,238,0.3);
  background: #000;
  transition: all 0.15s;
  overflow: hidden;
}
body.cv-theme-hud .hud-prior .thumb:hover { border-color: var(--hud-cyan); box-shadow: 0 0 8px rgba(34,211,238,0.4); }
body.cv-theme-hud .hud-prior .thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
body.cv-theme-hud .hud-prior .thumb .n {
  position: absolute; top: 2px; right: 2px;
  background: rgba(6,12,22,0.9);
  color: var(--hud-cyan);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px;
  letter-spacing: 0.04em;
}
body.cv-theme-hud .hud-prior .empty {
  color: var(--hud-ink-mute);
  font-size: 9px;
  text-align: center;
  padding: 12px 4px;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

/* Print — hide HUD chrome */
@media print {
  body.cv-theme-hud .hud-panel,
  body.cv-theme-hud .hud-tools,
  body.cv-theme-hud .hud-reticle,
  body.cv-theme-hud .hud-frame,
  body.cv-theme-hud::after { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIVERSAL HUD SKIN
   Rules below apply to ANY tool page that flips to the HUD theme, not just
   Cervical. They recolor generic widgets (buttons, panels, headings, forms,
   tables) so tools that don't have a bespoke HUD injection layer still feel
   "HUD-themed" instead of legacy-blue.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Body wash + type */
body.cv-theme-hud {
  background: radial-gradient(ellipse at top, #0b1424 0%, var(--hud-void) 60%) fixed !important;
}
body.cv-theme-hud * {
  scrollbar-width: thin;
  scrollbar-color: var(--hud-cyan) rgba(6,12,22,0.6);
}
body.cv-theme-hud *::-webkit-scrollbar { width: 8px; height: 8px; }
body.cv-theme-hud *::-webkit-scrollbar-track { background: rgba(6,12,22,0.6); }
body.cv-theme-hud *::-webkit-scrollbar-thumb {
  background: var(--hud-cyan); opacity: 0.5; border-radius: 4px;
}

/* Generic page containers — cards, sections, panels */
body.cv-theme-hud .card,
body.cv-theme-hud .panel,
body.cv-theme-hud .section,
body.cv-theme-hud .control-section,
body.cv-theme-hud .options-section,
body.cv-theme-hud .settings-panel,
body.cv-theme-hud .patient-info-card,
body.cv-theme-hud .billing-card,
body.cv-theme-hud .list-panel,
body.cv-theme-hud .form-panel,
body.cv-theme-hud .info-box,
body.cv-theme-hud fieldset {
  background: var(--hud-panel) !important;
  color: var(--hud-ink) !important;
  border: 1px solid var(--hud-cyan) !important;
  border-radius: 0 !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 0 20px rgba(34,211,238,0.08) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Headings + labels */
body.cv-theme-hud h1,
body.cv-theme-hud h2,
body.cv-theme-hud h3,
body.cv-theme-hud h4,
body.cv-theme-hud .section-title,
body.cv-theme-hud .card-title,
body.cv-theme-hud legend {
  color: var(--hud-cyan) !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 0 8px var(--hud-cyan-glow);
}
body.cv-theme-hud label,
body.cv-theme-hud .field-label {
  color: var(--hud-ink-mute) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}

/* Generic buttons — the "HUD button" clip-path treatment */
body.cv-theme-hud button:not(.hud-panel button):not(.hud-tools button):not(.hud-br button):not(.hud-prior *):not(#cv-bug-btn):not(#cv-bug-modal button):not(.cv-theme-chip):not(.cv-back-to-cv),
body.cv-theme-hud .btn,
body.cv-theme-hud .action-btn,
body.cv-theme-hud input[type="button"],
body.cv-theme-hud input[type="submit"] {
  background: transparent !important;
  color: var(--hud-ink) !important;
  border: 1px solid var(--hud-cyan) !important;
  border-radius: 0 !important;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
  transition: all 0.15s ease-out;
  text-shadow: none !important;
}
body.cv-theme-hud button:not(.hud-panel button):not(.hud-tools button):not(.hud-br button):not(.hud-prior *):not(#cv-bug-btn):not(#cv-bug-modal button):not(.cv-theme-chip):not(.cv-back-to-cv):hover,
body.cv-theme-hud .btn:hover,
body.cv-theme-hud .action-btn:hover {
  background: var(--hud-cyan) !important;
  color: var(--hud-void) !important;
  box-shadow: 0 0 12px var(--hud-cyan-glow);
}
body.cv-theme-hud .btn.primary,
body.cv-theme-hud .btn.success,
body.cv-theme-hud .action-btn.primary {
  background: var(--hud-cyan) !important;
  color: var(--hud-void) !important;
  font-weight: 700 !important;
}
body.cv-theme-hud .btn.danger,
body.cv-theme-hud .action-btn.danger {
  border-color: var(--hud-red) !important;
  color: var(--hud-red) !important;
}
body.cv-theme-hud .btn.danger:hover,
body.cv-theme-hud .action-btn.danger:hover {
  background: var(--hud-red) !important;
  color: var(--hud-void) !important;
}

/* Text inputs, selects, textareas */
body.cv-theme-hud input[type="text"],
body.cv-theme-hud input[type="number"],
body.cv-theme-hud input[type="date"],
body.cv-theme-hud input[type="email"],
body.cv-theme-hud input[type="tel"],
body.cv-theme-hud input[type="search"],
body.cv-theme-hud input[type="password"],
body.cv-theme-hud select,
body.cv-theme-hud textarea {
  background: rgba(6,12,22,0.6) !important;
  color: var(--hud-ink) !important;
  border: 1px solid rgba(34,211,238,0.4) !important;
  border-radius: 0 !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  padding: 6px 10px !important;
}
body.cv-theme-hud input:focus,
body.cv-theme-hud select:focus,
body.cv-theme-hud textarea:focus {
  outline: none !important;
  border-color: var(--hud-cyan) !important;
  box-shadow: 0 0 0 2px rgba(34,211,238,0.25) !important;
}

/* Tables */
body.cv-theme-hud table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--hud-panel) !important;
  color: var(--hud-ink) !important;
  border: 1px solid var(--hud-cyan) !important;
}
body.cv-theme-hud th {
  background: rgba(34,211,238,0.15) !important;
  color: var(--hud-cyan) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  border-bottom: 1px solid var(--hud-cyan) !important;
}
body.cv-theme-hud td {
  border-bottom: 1px solid rgba(34,211,238,0.1) !important;
}
body.cv-theme-hud tr:hover td {
  background: rgba(34,211,238,0.06) !important;
}

/* Headers that aren't tool-specific */
body.cv-theme-hud .header:not(.cv-header-legacy),
body.cv-theme-hud .top-bar,
body.cv-theme-hud .app-header {
  background: var(--hud-panel-solid) !important;
  border-bottom: 1px solid var(--hud-cyan) !important;
  color: var(--hud-ink) !important;
  box-shadow: 0 0 20px rgba(34,211,238,0.15);
}

/* Links */
body.cv-theme-hud a { color: var(--hud-cyan); }
body.cv-theme-hud a:hover { color: var(--hud-magenta); text-shadow: 0 0 6px var(--hud-cyan-glow); }

/* Modal dialogs */
body.cv-theme-hud .modal,
body.cv-theme-hud .dialog,
body.cv-theme-hud .modal-content,
body.cv-theme-hud .dialog-content {
  background: var(--hud-panel-solid) !important;
  color: var(--hud-ink) !important;
  border: 1px solid var(--hud-cyan) !important;
  border-radius: 0 !important;
}

/* Bug button + modal keep their legacy amber look in HUD — deliberately
   pop against the cyan chrome so it's easy to find */

/* Nav / footer */
body.cv-theme-hud .cv-nav-tabs,
body.cv-theme-hud .cv-nav-menu {
  background: var(--hud-panel-solid) !important;
  border-color: var(--hud-cyan) !important;
}
body.cv-theme-hud .cv-nav-tabs a,
body.cv-theme-hud .cv-nav-menu a {
  color: var(--hud-ink) !important;
  border-color: transparent !important;
}
body.cv-theme-hud .cv-nav-tabs a:hover,
body.cv-theme-hud .cv-nav-tabs a.active,
body.cv-theme-hud .cv-nav-menu a:hover {
  color: var(--hud-cyan) !important;
  border-color: var(--hud-cyan) !important;
  background: rgba(34,211,238,0.08) !important;
}