/* Light mode: GLOBAL (affects Studio + ModelMap + all overlays) */
body.vd-light {
  /* Global inversion approach (kept as you designed it) */
  filter: invert(1) hue-rotate(180deg) saturate(0.9) contrast(1.05);
  background: #ffffff;
}

/* True “undo” for media (inverse of the body filter) */
body.vd-light img,
body.vd-light video,
body.vd-light canvas {
  /* invert + hue-rotate cancel by repeating,
     saturate/contrast must be the reciprocal to cancel */
  filter: invert(1) hue-rotate(180deg) saturate(1.111111) contrast(0.952381) !important;
  mix-blend-mode: normal !important;
}

/* Fullscreen video fix (Chrome/Edge use vendor fullscreen state) */
body.vd-light video:fullscreen,
body.vd-light video:-webkit-full-screen {
  filter: invert(1) hue-rotate(180deg) saturate(1.111111) contrast(0.952381) !important;
  mix-blend-mode: normal !important;
}

/* -------- Font size bump (small + safe) -------- */
.vd-ui {
  font-size: 14px; /* overall readable baseline */
}

/* Inputs/controls are the main pain points */
.vd-ui select,
.vd-ui textarea,
.vd-ui input {
  font-size: 14px !important;
}

/* Buttons too (but keep icons fine) */
.vd-ui button {
  font-size: 13px;
}

/* Larger text mode */
body.vd-large .vd-ui {
  font-size: 16px;
}

body.vd-large .vd-ui select,
body.vd-large .vd-ui textarea,
body.vd-large .vd-ui input,
body.vd-large .vd-ui button {
  font-size: 15px !important;
}

/* ============================= */
/* 7.5 – Targeted UI Readability */
/* ============================= */

/* Section labels */
.vd-ui span[class*="uppercase"] {
  letter-spacing: 0.12em;
}

/* Supplier / Speed / Duration / Sentiment labels */
.vd-ui .text-\[7px\],
.vd-ui .text-\[8px\],
.vd-ui .text-\[9px\] {
  font-size: 13px !important;
}

/* Dropdown text */
.vd-ui select {
  font-size: 14px !important;
  font-weight: 600;
}

/* Textarea (narrative input) */
.vd-ui textarea {
  font-size: 15px !important;
  line-height: 1.5;
}

/* Identity Vault voice buttons */
.vd-ui button[class*="rounded-xl"] {
  font-size: 13px !important;
}

/* Execute Render button */
.vd-ui button[class*="Execute"],
.vd-ui button:has(i.fa-play),
.vd-ui button:has(i.fa-forward-step) {
  font-size: 14px !important;
}


/* ============================== */
/* 7.6 — Dark mode contrast tuning */
/* ============================== */

/* Override the dark palette slightly (index.html defines these first; index.css loads after) */
:root {
  --bg: #060913;                 /* deeper but not crushed */
  --surface: #0b1220;            /* clearer separation from bg */
  --panel: #101a2b;              /* panels read better */
  --border: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.18);

  --text: #f4f6fb;
  --text-muted: rgba(244,246,251,0.78);
  --text-dim: rgba(244,246,251,0.62);
  --placeholder: rgba(244,246,251,0.48);

  --backdrop: rgba(0,0,0,0.78);
}

/* Make common “dim” Tailwind zinc text more readable in dark mode */
body:not(.vd-light) .text-zinc-500 { color: var(--text-muted) !important; }
body:not(.vd-light) .text-zinc-400 { color: rgba(244,246,251,0.82) !important; }
body:not(.vd-light) .text-zinc-300 { color: rgba(244,246,251,0.88) !important; }

/* Inputs: slightly clearer background + borders in dark mode */
body:not(.vd-light) textarea,
body:not(.vd-light) select,
body:not(.vd-light) input {
  background-color: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: var(--text) !important;
}

body:not(.vd-light) textarea::placeholder,
body:not(.vd-light) input::placeholder {
  color: var(--placeholder) !important;
}


/* ================================ */
/* Fullscreen video fix (vd-light)  */
/* ================================ */

/* When a VIDEO is fullscreen, disable global invert so the video cannot go negative */
body.vd-light.vd-fs-media {
  filter: none !important;
  background: #ffffff;
}

/* Safety: ensure the fullscreen media itself is not filtered */
body.vd-light.vd-fs-media video,
body.vd-light.vd-fs-media img,
body.vd-light.vd-fs-media canvas {
  filter: none !important;
}