/* Veridex Platform Shell v2
 * Shared visual frame for the platform, with Extraction as the first fully
 * integrated module. This file is intentionally presentation-only: existing
 * routes, permissions, evidence contracts and page controllers remain the
 * behavioural authority.
 */
:root{
  --vx2-topbar-h:52px;
  --vx2-side-w:188px;
  --vx2-navy:#08284b;
  --vx2-navy-2:#0b315b;
  --vx2-blue:#1769ff;
  --vx2-blue-soft:#edf4ff;
  --vx2-page:#f5f7fb;
  --vx2-panel:#ffffff;
  --vx2-line:#dfe6ef;
  --vx2-muted:#68758a;
  --vx2-shadow:0 1px 2px rgba(16,34,58,.05),0 8px 24px rgba(16,34,58,.04);
}
html[data-theme="dark"]{
  --vx2-page:#0f1724;
  --vx2-panel:#152032;
  --vx2-line:#29364a;
  --vx2-muted:#9bacbf;
  --vx2-blue-soft:rgba(23,105,255,.14);
}

/* ── global top navigation ─────────────────────────────────────────────── */
.vx2-topbar{
  position:fixed;inset:0 0 auto 0;height:var(--vx2-topbar-h);z-index:1200;
  display:flex;align-items:center;gap:18px;padding:0 18px;
  background:linear-gradient(90deg,#06213e 0%,#0a315a 100%);
  border-bottom:1px solid rgba(255,255,255,.08);color:#fff;
  box-shadow:0 1px 8px rgba(0,16,35,.18);
}
.vx2-brand{display:flex;align-items:center;gap:9px;min-width:170px;white-space:nowrap}
.vx2-brand-mark{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(135deg,#2f7dff,#5fc8ff);font:700 13px/1 var(--font-head,inherit);color:#fff}
.vx2-brand-copy{display:flex;flex-direction:column;line-height:1}
.vx2-brand-name{font:700 17px/1 var(--font-head,inherit);letter-spacing:.02em}
.vx2-brand-tag{font-size:8px;opacity:.68;margin-top:3px;letter-spacing:.025em}
.vx2-topnav{display:flex;align-items:center;gap:4px;min-width:0}
.vx2-topnav-btn{height:34px;display:flex;align-items:center;gap:7px;border:0;border-radius:6px;
  background:transparent;color:rgba(255,255,255,.78);padding:0 11px;font:500 12px/1 var(--font-body,inherit);cursor:pointer}
.vx2-topnav-btn svg{width:15px;height:15px}
.vx2-topnav-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.vx2-topnav-btn.active{background:#1769ff;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.vx2-topbar-spacer{flex:1 1 auto}
.vx2-command{height:31px;min-width:260px;max-width:360px;display:flex;align-items:center;gap:8px;
  padding:0 12px;border:1px solid rgba(255,255,255,.09);border-radius:6px;background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.72);font-size:11px;cursor:pointer;text-align:left}
.vx2-command:hover{background:rgba(255,255,255,.14);color:#fff}
.vx2-top-icon{width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:rgba(255,255,255,.76);cursor:pointer;font-size:14px}
.vx2-top-icon:hover{background:rgba(255,255,255,.09);color:#fff}
.vx2-user{display:flex;align-items:center;gap:8px;max-width:190px;min-width:0}
.vx2-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#1769ff;color:#fff;font-size:10px;font-weight:700;flex:0 0 auto}
.vx2-user-copy{min-width:0;display:flex;flex-direction:column;line-height:1.15}
.vx2-user-name{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vx2-user-role{font-size:9px;color:rgba(255,255,255,.52);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── left module navigation ───────────────────────────────────────────── */
.vx-shell{min-height:100vh}
.vx-rail{display:none!important}
.vx-panel{
  position:fixed!important;left:0!important;top:var(--vx2-topbar-h)!important;bottom:0!important;
  width:var(--vx2-side-w)!important;height:auto!important;z-index:1000!important;
  background:linear-gradient(180deg,var(--vx2-navy) 0%,#092542 100%)!important;
  border-right:1px solid rgba(255,255,255,.06)!important;box-shadow:none!important;
  display:flex!important;flex-direction:column!important;
}
.vx-brand{padding:18px 16px 12px!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
.vx-brand-name{font-size:15px!important;letter-spacing:.02em!important}
.vx-brand-tag{font-size:9px!important;opacity:.55!important}
.vx-panel-body{padding:10px 8px!important;overflow:auto!important}
.vx-panel-title{color:#fff!important;font-size:12px!important;font-weight:600!important;padding:7px 8px 10px!important}
.vx-panel-list{gap:3px!important}
.vx-page-btn{
  min-height:38px!important;border-radius:6px!important;padding:0 10px!important;
  color:rgba(255,255,255,.72)!important;font-size:11px!important;border:1px solid transparent!important;
  display:flex!important;align-items:center!important;gap:8px!important;
}
.vx-page-btn:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
.vx-page-btn.active{background:#1769ff!important;color:#fff!important;border-color:rgba(255,255,255,.08)!important;box-shadow:0 4px 12px rgba(0,56,170,.22)!important}
.vx-page-btn.locked{opacity:.46!important}
.nav-bottom{margin-top:auto!important;padding:10px 12px 14px!important;border-top:1px solid rgba(255,255,255,.07)!important}
.vx-bar-toggle,.vx-bar-mask{display:none!important}

/* ── content frame ───────────────────────────────────────────────────── */
.vx-page-area{margin-left:var(--vx2-side-w)!important;padding-top:var(--vx2-topbar-h)!important;min-height:100vh;background:var(--vx2-page)!important}
.vx-whoami{display:none!important}
.main{padding:16px 18px 24px!important;max-width:none!important;background:transparent!important}
.page{max-width:none!important}
.page-header{margin:0 0 10px!important;padding:0!important}
.page-title{font-size:20px!important;font-weight:700!important;letter-spacing:-.01em!important;color:var(--text)!important}
.page-title em{font-style:normal!important;color:inherit!important}
.page-sub{margin-top:3px!important;font-size:11px!important;color:var(--vx2-muted)!important}
.card{border-color:var(--vx2-line)!important;border-radius:8px!important;box-shadow:var(--vx2-shadow)!important}
.btn{border-radius:6px!important}
.btn.accent{background:var(--vx2-blue)!important;border-color:var(--vx2-blue)!important}

/* ── Extraction journey: same chrome on Survey / Criteria / Upload /
      Results / Review. The backend flow remains the source of truth. ───── */
.vx2-extraction-page>.page-header{position:relative;padding-right:10px!important}
.vx2-extraction-page>.page-header:before{
  content:'Extraction';display:block;margin-bottom:3px;color:var(--vx2-blue);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em
}
.vx2-extraction-page .vx-flow{margin:0 0 14px!important}
.vx2-extraction-page .vx-flow-bar{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important;
  background:var(--vx2-panel)!important;border:1px solid var(--vx2-line)!important;border-radius:8px!important;
  overflow:hidden!important;box-shadow:var(--vx2-shadow)!important
}
.vx2-extraction-page .vx-flow-step{
  min-height:54px!important;padding:9px 11px!important;gap:8px!important;border:0!important;border-right:1px solid var(--vx2-line)!important;
  position:relative!important;background:transparent!important
}
.vx2-extraction-page .vx-flow-step:last-child{border-right:0!important}
.vx2-extraction-page .vx-flow-step.current{background:var(--vx2-blue-soft)!important}
.vx2-extraction-page .vx-flow-step:hover:not(.locked){background:var(--surface2)!important}
.vx2-extraction-page .vx-flow-num{width:22px!important;min-width:22px!important;height:22px!important;padding:0!important;border-radius:50%!important;font-size:9px!important}
.vx2-extraction-page .vx-flow-step.current .vx-flow-num{background:var(--vx2-blue)!important;border-color:var(--vx2-blue)!important;color:#fff!important}
.vx2-extraction-page .vx-flow-step.done .vx-flow-num{background:#12a34a!important;border-color:#12a34a!important;color:#fff!important}
.vx2-extraction-page .vx-flow-title{font-size:10px!important;font-weight:650!important}
.vx2-extraction-page .vx-flow-sub{font-size:8.5px!important;line-height:1.25!important;margin-top:1px!important}

/* Results: tighten the existing screen into the approved workbench language
   without changing its data model or event handlers. */
#page-results.vx2-extraction-page .stats-row{gap:8px!important;margin-bottom:10px!important}
#page-results.vx2-extraction-page .stat-card{border-radius:7px!important;box-shadow:none!important;border-color:var(--vx2-line)!important}
#page-results.vx2-extraction-page table{font-size:11px!important}
#page-results.vx2-extraction-page th{font-size:9px!important;text-transform:none!important;letter-spacing:0!important;color:var(--vx2-muted)!important}
#page-results.vx2-extraction-page td{border-color:var(--vx2-line)!important}
#page-results.vx2-extraction-page tr:hover td{background:var(--vx2-blue-soft)!important}

/* Review: preserve the specialised workbench, unify only its outer shell. */
#page-review.vx2-extraction-page{padding:0!important;background:transparent!important}
#page-review.vx2-extraction-page>.page-header{margin-bottom:10px!important;padding:0!important;min-height:auto!important;border-bottom:0!important}
#page-review.vx2-extraction-page .rv-shell{border:1px solid var(--vx2-line)!important;border-radius:8px!important;overflow:hidden!important;box-shadow:var(--vx2-shadow)!important;background:var(--vx2-panel)!important}

/* Survey / criteria / upload share the same card rhythm. */
#page-drawing-survey.vx2-extraction-page .card,
#page-drawing-criteria.vx2-extraction-page .card,
#page-upload.vx2-extraction-page .card{margin-bottom:10px!important}

/* Small semantic badges used by Shell v2 additions. */
.vx2-chip{display:inline-flex;align-items:center;gap:5px;height:23px;padding:0 8px;border-radius:999px;border:1px solid var(--vx2-line);background:var(--vx2-panel);font-size:9px;color:var(--vx2-muted)}
.vx2-chip.ok{background:#eaf8ef;border-color:#c9ead4;color:#19753a}
html[data-theme="dark"] .vx2-chip.ok{background:rgba(31,155,74,.15);border-color:rgba(31,155,74,.32);color:#7fd69d}

@media(max-width:1100px){
  :root{--vx2-side-w:164px}
  .vx2-command{min-width:170px;max-width:230px}
  .vx2-brand{min-width:145px}
  .vx2-topnav-btn{padding:0 8px}
  .vx2-extraction-page .vx-flow-sub{display:none!important}
}
@media(max-width:820px){
  .vx2-topnav{display:none}
  .vx2-command{display:none}
  .vx-panel{transform:translateX(-100%);transition:transform .18s ease}
  html.nav-open .vx-panel{transform:translateX(0)}
  .vx-page-area{margin-left:0!important}
  .vx-bar-toggle{display:grid!important;position:fixed!important;top:9px!important;left:9px!important;z-index:1300!important}
  .vx2-brand{margin-left:34px}
  .main{padding:12px!important}
  .vx2-extraction-page .vx-flow-bar{grid-template-columns:repeat(5,minmax(88px,1fr))!important;overflow-x:auto!important}
}


/* Shell v2.1 — single header + floating contextual drawer
   The previous platform header remains alive off-screen as a compatibility
   controller for project context and legacy routes, but it no longer paints.
   The module panel is an overlay drawer and never consumes workspace width. */
#vx-platform-header{display:none!important}
.vx-page-area{
  margin-left:0!important;
  padding-top:var(--vx2-topbar-h)!important;
  min-width:0!important;
}
.vx-bar{
  position:fixed!important;
  left:12px!important;
  top:calc(var(--vx2-topbar-h) + 10px)!important;
  bottom:12px!important;
  width:236px!important;
  height:auto!important;
  z-index:1190!important;
  transform:translateX(calc(-100% - 28px))!important;
  transition:transform .18s ease!important;
  pointer-events:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
html.vx-bar-open .vx-bar{
  transform:translateX(0)!important;
  pointer-events:auto!important;
}
.vx-panel{
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  top:0!important;
  left:0!important;
  bottom:0!important;
  border-radius:12px!important;
  overflow:hidden!important;
  box-shadow:0 18px 48px rgba(2,18,40,.28),0 2px 8px rgba(2,18,40,.18)!important;
  transform:none!important;
}
.vx-bar-mask{
  display:block!important;
  position:fixed!important;
  inset:var(--vx2-topbar-h) 0 0 0!important;
  z-index:1180!important;
  background:transparent!important;
  opacity:0!important;
  pointer-events:none!important;
}
html.vx-bar-open .vx-bar-mask{
  opacity:1!important;
  pointer-events:auto!important;
}
.vx2-menu{
  width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;
  border:0;border-radius:6px;background:transparent;color:rgba(255,255,255,.78);cursor:pointer
}
.vx2-menu:hover,.vx2-menu[aria-expanded="true"]{background:rgba(255,255,255,.10);color:#fff}
.vx2-menu svg{width:16px;height:16px}
.vx2-brand{min-width:145px}
.vx2-project{
  position:relative;width:168px;min-width:145px;height:34px;flex:0 0 auto
}
.vx2-project-label{
  position:absolute;left:9px;top:4px;z-index:1;pointer-events:none;
  color:rgba(255,255,255,.48);font-size:7.5px;line-height:1;text-transform:uppercase;letter-spacing:.06em
}
.vx2-project select{
  width:100%;height:34px;appearance:none;padding:12px 25px 2px 9px;
  border:1px solid rgba(255,255,255,.10);border-radius:6px;
  background:rgba(255,255,255,.08);color:#fff;outline:none;
  font:500 10px/1 var(--font-body,inherit);cursor:pointer
}
.vx2-project select:focus{border-color:rgba(94,155,255,.72);box-shadow:0 0 0 2px rgba(23,105,255,.18)}
.vx2-project select:disabled{opacity:.55;cursor:default}
.vx2-project select option{color:#111827;background:#fff}
.vx2-project:after{
  content:'⌄';position:absolute;right:9px;top:9px;color:rgba(255,255,255,.62);font-size:10px;pointer-events:none
}
@media(max-width:1450px){
  .vx2-command{display:none}
  .vx2-project{width:150px;min-width:132px}
}
@media(max-width:1050px){
  .vx2-project{display:none}
}
@media(max-width:820px){
  .vx-bar{left:8px!important;top:calc(var(--vx2-topbar-h) + 8px)!important;bottom:8px!important;width:min(260px,calc(100vw - 24px))!important}
  .vx2-brand{margin-left:0!important}
}