/* Tech Machers — Proctor wizard & in-exam dialog theme override. v2: dark
   "security console" concept (previewed at the artifact link shared with the
   team) — fully dark ground, cyan as the interactive accent, mint as a
   distinct semantic "pass" signal, monospace for diagnostic data.

   Everything here is scoped under .proctordialog, the SDK's own fixed-position
   overlay root (see supervisor.js) — this cannot bleed into the admin dashboard.
   !important is required throughout: the vendor SDK injects its own <style>
   tags into <head> at runtime, after this stylesheet has already loaded, so a
   plain override would lose the cascade tie. Same defensive pattern already
   used in tm-login.css for the TAO login page.

   A few selectors below use the vendor's CSS-module hash classes (e.g.
   "._2hxKFN4KzoQcPfNcFWX30H") because there is no readable/durable
   alternative for state-specific hooks (pass/fail icon state, per-step
   preview containers). These are only guaranteed stable for the exact
   supervisor.js/video_assessment.js build currently deployed — if that
   bundle is ever rebuilt, these specific rules (clearly marked below) would
   need re-checking. Everything else uses stable, non-hashed selectors. */

.proctordialog {
  --primary-color: #00d4ff !important;
  --danger-color: #ff5c72 !important;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --display: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Vendor hardcodes both the outer card and the left panel to a fixed
   height:550px (container hash _1bZElbi2ajK-F05_zVpFyK). That's not quite
   tall enough for 8 rules across 2 columns without scrolling — bump both
   together so the card stays visually balanced (left panel and content
   panel must match heights, they're side-by-side flex children). */
.proctordialog .leftsec,
.proctordialog ._1bZElbi2ajK-F05_zVpFyK {
  height: 620px !important;
}

/* ── Left panel: dark, brand mark on it ── */
.proctordialog .leftsec {
  background: linear-gradient(160deg, #0b1420 0%, #16213e 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.proctordialog .leftsec .iconimg {
  background-image: url(/brandico.png) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  width: 96px !important;
  height: 96px !important;
}

/* Reused lockout-modal copy ("Not Permitted During the Test") — not
   meaningful in the wizard context, hidden per product decision. */
.proctordialog .leftsec span {
  display: none !important;
}

/* ── Whole card is dark now (was: dark header + light body) ── */
.proctordialog .rightsec,
.proctordialog .contentsec {
  background: radial-gradient(140% 160% at 88% -10%, #16283f 0%, #0a0f1a 60%) !important;
  color: #b9c8dc !important;
}

/* The vendor's CSS-module hash for this dialog's "header" slot
   (_3K27iVTDNektzTbeAEAjqS) happens to carry the exact same rule as
   .leftsec — width:300px;height:550px;background:gradient. That's almost
   certainly a vendor authoring mistake (reusing one CSS-module source
   across two unrelated component slots), but the practical effect is real:
   the header was a flex sibling of the body area fighting it for a fixed
   550px of height, which is why the rules/readiness/face/ID content kept
   getting squeezed into a sliver regardless of how tall we made the
   overall card. Resetting size explicitly here is the actual fix — the
   card height bump alone was treating a symptom, not the cause. */
.proctordialog .headerarea {
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.18) !important;
  color: #ffffff !important;
  padding: 18px 28px !important;
  align-items: center !important;
}

.proctordialog .heading3,
.proctordialog .heading4 {
  color: #ffffff !important;
  font-family: var(--display) !important;
}

/* ── Theme toggle button (injected by tm-proctor-wizard-theme.js) ── */
.proctordialog button.tm-theme-toggle {
  all: unset !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  margin-left: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}
.proctordialog button.tm-theme-toggle:hover {
  border-color: rgba(0, 212, 255, 0.6) !important;
}

/* Step-count pill: glass badge, monospace — reads as a console readout
   rather than a form label. */
.proctordialog .stepcount {
  background: rgba(0, 212, 255, 0.12) !important;
  border: 1px solid rgba(0, 212, 255, 0.45) !important;
  color: #00d4ff !important;
  font-family: var(--mono) !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
}

/* ── Buttons: glowing cyan, single accent everywhere ── */
.proctordialog button {
  background: linear-gradient(180deg, #21e0ff, #00b8dd) !important;
  color: #04222b !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.5), 0 8px 20px -8px rgba(0, 212, 255, 0.55) !important;
}

.proctordialog button:disabled {
  background: #28364d !important;
  color: #5b6b80 !important;
  box-shadow: none !important;
}

/* Vendor rule ".proctordialog button>span{filter:grayscale(1) invert(1)
   brightness(2)}" was designed to turn black label/icon text white against
   the ORIGINAL black ID-verification button. Cancel it — color now comes
   from the rule above, on a dark-navy tone that reads on bright cyan. */
.proctordialog button > span {
  filter: none !important;
  -webkit-filter: none !important;
  color: #04222b !important;
}

/* Same invert-filter trick shows up on several other text blocks — each
   one originally read "color:var(--background-color)" (white) then
   inverted via filter to appear black on an assumed white/light ground.
   Against our dark theme that renders as near-black text on dark navy,
   i.e. invisible: the "System readiness" description, each readiness
   card's label (Browser/Webcam/...), and the instruction copy on the
   Face verification and ID verification steps. These are the exact
   vendor selectors (not durable across a rebuild, but stable for this
   deployed build) — using the same selector as the vendor guarantees we
   win the cascade regardless of injection order, since none of the
   vendor declarations here carry !important. */
.proctordialog ._3xVK6xWDYbTgEoTg-YePAU > div,
.proctordialog ._1Du2zJjZLlxaLOyTZ1Npv_ > .tCykPGRYleBTSr5oMuYGp > .L_ia7bm-IJm2Y-qiYatVW > .FCyHkTNCINgD2S7ak3mD0,
.proctordialog ._3z4mu4CR7orxxv1y1QyAir > div,
.proctordialog ._1a4CxAJ8l5emmSuxTml1xt > div,
.proctordialog ._1xUjLmnhgVJkSyW4Vwxd8w,
.proctordialog ._1xtRc0TZsYICEH_HBZoE_1 {
  filter: none !important;
  -webkit-filter: none !important;
  color: #dfe8f2 !important;
}

/* ── Device-readiness cards: glass tiles, glow on pass/fail state ── */
.proctordialog .card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(148, 187, 223, 0.16) !important;
  border-radius: 12px !important;
}

.proctordialog .card .txt {
  color: #dfe8f2 !important;
}

/* Pass/fail glow on the readiness tile — hash-based, see note at top.
   xr.passed / xr.error from the "System readiness" module. */
.proctordialog .card:has(._2hxKFN4KzoQcPfNcFWX30H) {
  border-color: rgba(52, 231, 176, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(52, 231, 176, 0.18), 0 0 22px -6px rgba(52, 231, 176, 0.45) !important;
}
.proctordialog .card:has(._1dENSdLOu_5jCKHrRn5ZQ7) {
  border-color: rgba(255, 92, 114, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(255, 92, 114, 0.18), 0 0 22px -6px rgba(255, 92, 114, 0.45) !important;
}

/* ── Face-verification live preview: scan-frame corner brackets ──
   Hash-based (Rr.preview from the "Face verification" module). */
.proctordialog ._1Y7ZxT1H0zIt9fPCae6jwz {
  position: relative !important;
  border: 1px solid rgba(0, 212, 255, 0.22) !important;
}
.proctordialog ._1Y7ZxT1H0zIt9fPCae6jwz::before,
.proctordialog ._1Y7ZxT1H0zIt9fPCae6jwz::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid #34e7b0;
  pointer-events: none;
  z-index: 2;
}
.proctordialog ._1Y7ZxT1H0zIt9fPCae6jwz::before {
  top: 10px;
  left: 10px;
  border-right: none;
  border-bottom: none;
}
.proctordialog ._1Y7ZxT1H0zIt9fPCae6jwz::after {
  bottom: 10px;
  right: 10px;
  border-left: none;
  border-top: none;
}

/* ── ID-verification preview: sweeping scan beam ──
   Hash-based (Ur.preview from the "ID verification" module). */
.proctordialog ._1SQlFWaroEvSKaabiAzlNC {
  position: relative !important;
  border: 1px solid rgba(0, 212, 255, 0.22) !important;
  overflow: hidden !important;
}
.proctordialog ._1SQlFWaroEvSKaabiAzlNC::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 40%;
  top: -40%;
  background: linear-gradient(180deg, rgba(0, 212, 255, 0) 0%, rgba(0, 212, 255, 0.25) 50%, rgba(0, 212, 255, 0) 100%);
  border-bottom: 1px solid rgba(0, 212, 255, 0.8);
  animation: tm-beam-sweep 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes tm-beam-sweep {
  0% { top: -40%; }
  50% { top: 100%; }
  100% { top: -40%; }
}
@media (prefers-reduced-motion: reduce) {
  .proctordialog ._1SQlFWaroEvSKaabiAzlNC::after {
    animation: none;
    opacity: 0.35;
  }
}

/* ── Face-verification checklist icons — brand-colored, dark glass tiles.
   Pass/fail badge colors below are left untouched — that's a safety
   signal, not a brand choice. ── */
.proctordialog .imageplace {
  background-color: rgba(255, 255, 255, 0.04) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 56px 56px !important;
}
.proctordialog .imageplace.blur    { background-image: url(/assets/icons/check-blurred.svg) !important; }
.proctordialog .imageplace.face    { background-image: url(/assets/icons/check-face-cut.svg) !important; }
.proctordialog .imageplace.uneven  { background-image: url(/assets/icons/check-uneven-light.svg) !important; }
.proctordialog .imageplace.looking { background-image: url(/assets/icons/check-looking-away.svg) !important; }
.proctordialog .imageplace.correct { background-image: url(/assets/icons/check-correct.svg) !important; }
.proctordialog .imageplace.uneven:before { display: none !important; }

.proctordialog .check.done { background-color: #32ba7c !important; }
.proctordialog .check.warn { background-color: #be2020 !important; }

/* ============================================================
   LIGHT THEME — toggled via .proctordialog.tm-light (see
   tm-proctor-wizard-theme.js). Every rule below has higher
   specificity than its dark-theme counterpart above (extra
   .tm-light class), so no source-order dependency either way.
   Contrast checked: body text #16213e on #f5f8fb background
   (~12:1), button text #ffffff on #0090b8 gradient (~4.7:1).
   ============================================================ */

.proctordialog.tm-light .leftsec {
  background: linear-gradient(160deg, #0b1420 0%, #16213e 100%) !important;
}

.proctordialog.tm-light .rightsec,
.proctordialog.tm-light .contentsec {
  background: #f5f8fb !important;
  color: #16213e !important;
}

.proctordialog.tm-light .headerarea {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 130, 165, 0.2) !important;
  color: #0b1420 !important;
}

.proctordialog.tm-light .heading3,
.proctordialog.tm-light .heading4 {
  color: #0b1420 !important;
}

.proctordialog.tm-light button.tm-theme-toggle {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  color: #16213e !important;
}
.proctordialog.tm-light button.tm-theme-toggle:hover {
  border-color: #0090b8 !important;
}

.proctordialog.tm-light .stepcount {
  background: rgba(0, 130, 165, 0.1) !important;
  border: 1px solid rgba(0, 130, 165, 0.35) !important;
  color: #006a8a !important;
}

.proctordialog.tm-light button {
  background: linear-gradient(180deg, #00c2ef, #0090b8) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(0, 130, 165, 0.4), 0 8px 18px -10px rgba(0, 130, 165, 0.45) !important;
}
.proctordialog.tm-light button > span {
  color: #ffffff !important;
}
.proctordialog.tm-light button:disabled {
  background: #dfe6ee !important;
  color: #93a1b0 !important;
  box-shadow: none !important;
}

.proctordialog.tm-light .card {
  background: #ffffff !important;
  border: 1px solid #dbe4ee !important;
}
.proctordialog.tm-light .card .txt {
  color: #243447 !important;
}
.proctordialog.tm-light .card:has(._2hxKFN4KzoQcPfNcFWX30H) {
  border-color: rgba(27, 163, 120, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(27, 163, 120, 0.16), 0 0 16px -6px rgba(27, 163, 120, 0.4) !important;
}
.proctordialog.tm-light .card:has(._1dENSdLOu_5jCKHrRn5ZQ7) {
  border-color: rgba(214, 58, 79, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(214, 58, 79, 0.16), 0 0 16px -6px rgba(214, 58, 79, 0.4) !important;
}

.proctordialog.tm-light ._1Y7ZxT1H0zIt9fPCae6jwz {
  border-color: rgba(0, 130, 165, 0.28) !important;
}
.proctordialog.tm-light ._1Y7ZxT1H0zIt9fPCae6jwz::before,
.proctordialog.tm-light ._1Y7ZxT1H0zIt9fPCae6jwz::after {
  border-color: #1ba378 !important;
}

.proctordialog.tm-light ._1SQlFWaroEvSKaabiAzlNC {
  border-color: rgba(0, 130, 165, 0.28) !important;
}
.proctordialog.tm-light ._1SQlFWaroEvSKaabiAzlNC::after {
  background: linear-gradient(180deg, rgba(0, 130, 165, 0) 0%, rgba(0, 130, 165, 0.2) 50%, rgba(0, 130, 165, 0) 100%) !important;
  border-bottom-color: rgba(0, 130, 165, 0.75) !important;
}

.proctordialog.tm-light .imageplace {
  background-color: #eef3f6 !important;
}

.proctordialog.tm-light ._3xVK6xWDYbTgEoTg-YePAU > div,
.proctordialog.tm-light ._1Du2zJjZLlxaLOyTZ1Npv_ > .tCykPGRYleBTSr5oMuYGp > .L_ia7bm-IJm2Y-qiYatVW > .FCyHkTNCINgD2S7ak3mD0,
.proctordialog.tm-light ._3z4mu4CR7orxxv1y1QyAir > div,
.proctordialog.tm-light ._1a4CxAJ8l5emmSuxTml1xt > div,
.proctordialog.tm-light ._1xUjLmnhgVJkSyW4Vwxd8w,
.proctordialog.tm-light ._1xtRc0TZsYICEH_HBZoE_1 {
  color: #243447 !important;
}
