/* vx-head.css - V4.0 2026-08-09. Header pinned, plus office / entity / job. */
header.top{position:sticky!important;top:0!important;z-index:1200!important;background:var(--panel,#0f1420)!important}
body{padding-top:0}
.vx-org{display:flex;align-items:center;gap:6px;margin-left:8px}
.vx-org select{background:var(--panel,#0f1420);color:var(--text,#e8eef8);border:1px solid var(--line,#1e2636);border-radius:8px;font-size:11.5px;padding:5px 8px;max-width:230px}
.vx-org select:focus{outline:none;border-color:var(--cyan,#22d3ee)}
.vx-org label{font-size:9.5px;letter-spacing:.06em;color:var(--dim,#8794a8);text-transform:uppercase}
.vx-org .vx-org-col{display:flex;flex-direction:column;gap:2px}
.vx-jv-gate{font-size:9.5px;color:var(--amber,#e5a04d);max-width:230px;line-height:1.25}
.vx-jv-gate.ok{color:var(--green,#3ecf8e)}
.vx-newjob{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:1500;background:var(--panel,#0f1420);border:1px solid var(--line2,#28324a);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:330px;box-shadow:0 26px 70px -28px rgba(0,0,0,.65)}
.vx-newjob b{font-size:13px;color:var(--text,#e8eef8)}
.vx-newjob input{background:var(--bg2,#0b0f18);color:var(--text,#e8eef8);border:1px solid var(--line,#1e2636);border-radius:8px;padding:7px 9px;font-size:12px}
.vx-nj-row{display:flex;gap:8px}
.vx-newjob button{flex:1;padding:7px 10px;border-radius:8px;border:1px solid var(--line2,#28324a);background:var(--bg2,#0b0f18);color:var(--text,#e8eef8);font-size:12px;cursor:pointer}
#vxNjGo{border-color:var(--cyan,#22d3ee)}
.vx-nj-msg{font-size:10px;color:var(--dim,#8794a8);line-height:1.35;max-width:330px}
/* U1 - "footer spread out, organised". It was bunched into the left 45% with
   dead space and a stray tile at the far right. Scoped to footer.status so the
   copy that lives inside the admin floater is untouched. */
footer.status .schedbar{display:flex!important;flex-wrap:nowrap!important;width:100%!important;justify-content:space-between!important;align-items:center!important;gap:10px!important;padding:0 18px!important;box-sizing:border-box!important}
footer.status .schedbar > *{flex:0 0 auto!important;margin:0!important}
/* the JV gate is a badge now, not a paragraph */
.vx-jv-gate{max-width:none;white-space:nowrap;font-size:10px;padding:3px 8px;border-radius:999px;border:1px solid var(--line2,#28324a);cursor:help}
.vx-jv-gate.warn{color:var(--amber,#e5a04d);border-color:var(--amber,#e5a04d)}
.vx-jv-gate.ok{color:var(--green,#3ecf8e);border-color:var(--line2,#28324a)}
/* The job picker is built by picker() with background:transparent;color:inherit,
   so the native dropdown list rendered light-on-white and the job names were
   unreadable. Force both the closed control and the open option list. */
#vJobSelect{background:var(--panel,#0f1420)!important;color:var(--text,#e8eef8)!important;border-radius:8px!important;padding:4px 6px!important}
#vJobSelect option{background:#0f1420!important;color:#e8eef8!important;padding:4px 6px!important}
#vJobSelect option:checked{background:#1b2740!important;color:#ffffff!important}
/* A blank job shows blanks. CSS draws the dash so no repaint can undo it. */
.vl[data-vx-blank="1"]{position:relative!important;color:transparent!important;text-shadow:none!important}
.vl[data-vx-blank="1"]::before{content:"\2014";position:absolute;left:0;top:0;color:var(--dim,#8794a8)}
.ft[data-vx-blankft="1"]{position:relative!important;color:transparent!important}
.ft[data-vx-blankft="1"]::before{content:"no data on this job yet";position:absolute;left:0;top:0;white-space:nowrap;color:var(--dim,#8794a8)}
[data-vx-blankft="2"]{display:none!important}
/* Blank job, enforced in CSS from one flag on body. Survives every repaint. */
body[data-vx-jobempty="1"] .vl{position:relative!important;color:transparent!important;text-shadow:none!important}
body[data-vx-jobempty="1"] .vl::before{content:"\2014";position:absolute;left:0;top:0;color:var(--dim,#8794a8)}
body[data-vx-jobempty="1"] .ft{position:relative!important;color:transparent!important}
body[data-vx-jobempty="1"] .ft::before{content:"no data on this job yet";position:absolute;left:0;top:0;white-space:nowrap;color:var(--dim,#8794a8)}
body[data-vx-jobempty="1"] .vxk-stack{display:none!important}
/* The footer is the job's schedule strip - data date, update, completion,
   field percent, float, the billed bar and the turnover milestones. On a job
   with nothing loaded every one of those is the ARCHIVE's schedule. Blanked
   from the same body flag, so it cannot be repainted back. */
body[data-vx-jobempty="1"] footer.status .sb-v,
body[data-vx-jobempty="1"] footer.status .sb-t{position:relative!important;color:transparent!important}
body[data-vx-jobempty="1"] footer.status .sb-v::before{content:"\2014";position:absolute;left:0;top:0;color:var(--dim,#8794a8)}
body[data-vx-jobempty="1"] footer.status .tv{display:none!important}
body[data-vx-jobempty="1"] footer.status .sb-prog{visibility:hidden!important}
body[data-vx-jobempty="1"] footer.status .num{position:relative!important;color:transparent!important}
body[data-vx-jobempty="1"] footer.status .num::before{content:"\2014";position:absolute;left:0;top:0;color:var(--dim,#8794a8)}
/* Every data chart lives in section.chartcard > .bd - cash flow, earned value,
   margin by cost code, cash position. On an empty job all of them plot the
   ARCHIVE. Icons live in headers and nav, so those are untouched. */
body[data-vx-jobempty="1"] section.chartcard > .bd{position:relative!important;min-height:72px!important}
body[data-vx-jobempty="1"] section.chartcard > .bd > *{display:none!important}
body[data-vx-jobempty="1"] section.chartcard > .bd::before{content:"no data on this job yet";position:absolute;left:14px;top:26px;color:var(--dim,#8794a8);font-size:12px}
/* Data grids and chart labels across all 22 screens. On a job with nothing
   loaded, every row and every axis label belongs to the archive. Headers stay
   so the shape of the screen is still legible; the rows go. */
body[data-vx-jobempty="1"] .screen table tbody tr{display:none!important}
body[data-vx-jobempty="1"] .screen table{position:relative!important}
body[data-vx-jobempty="1"] .screen table::after{content:"no data on this job yet";display:block;padding:8px 4px;color:var(--dim,#8794a8);font-size:11px}
body[data-vx-jobempty="1"] .screen svg text,
body[data-vx-jobempty="1"] .screen svg tspan{display:none!important}
/* Nav badges - Risk Heat Map 15, and every other count in the sub menu. */
body[data-vx-jobempty="1"] aside.nav .cnt,
body[data-vx-jobempty="1"] nav.rail .cnt{display:none!important}