/* ═══════════════════════════════════════════════════════════════════════
   eQMS console — venue portal and platform admin.

   One stylesheet, one shell, two surfaces. A venue manager and a platform
   admin see the same furniture in the same places; only the navigation and
   an accent differ, so neither has to learn a second product.

   The layout rule everything follows: the TABLE is the subject. Metrics
   compress into a dark band under the title rather than taking a column,
   because the console's working pages are read on whatever PC is bolted to
   a counter desk, and at 1366px a right-hand metrics rail costs a third of
   the width the data needs.

   On the IT Solutions Pad ramp, shared with the customer app and the
   marketing site.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#050a16; --navy-900:#070d1e; --navy-800:#0b1329; --navy-700:#101c3b;
  --navy-600:#16264f; --blue-700:#0a4fb0; --blue-600:#0a63d6; --blue-500:#1272e8;
  --blue-400:#2e8bff; --cyan-400:#56c8f5; --amber-400:#f0a93b; --amber-300:#f6c56a;
  --paper:#eef4ff;
  --s0:#fff; --s1:#fafbfc; --s2:var(--paper); --s3:#e1eaf8;
  --bd:#dce6f5; --bd2:#c3d2ea; --bd3:#8fa6c8;
  --tp:var(--navy-800); --ts:#3f4a5f; --tm:#5d7091;
  --ac:var(--blue-400); --ac-deep:var(--blue-700); --ac-soft:#e8f1fe;
  --ok:#2e7d57; --ok-soft:#eaf5ef; --wn:#8a5a12; --wn-soft:#fff8ec;
  --dgr:#c0392b; --dgr-soft:#fbedeb;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
  --focus:0 0 0 3px rgba(46,139,255,.45);
  --rail:212px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--s0);color:var(--tp);
  font:14px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--ac-deep)}
h1{font-size:25px;letter-spacing:-.02em;margin:0}
h2{font-size:17px;margin:0 0 13px;letter-spacing:-.01em}
h3{font-size:14.5px;margin:22px 0 8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ═══ shell ══════════════════════════════════════════════════════════ */
.shell{display:flex;min-height:100vh;align-items:stretch}

/* ── navigation rail ─────────────────────────────────────────────── */
.rail{flex:0 0 var(--rail);background:var(--navy-800);color:#fff;
  padding:15px 11px;display:flex;flex-direction:column;position:sticky;top:0;
  height:100vh;overflow:auto}
.is-admin .rail{background:var(--navy-900);
  box-shadow:inset -3px 0 0 var(--amber-400)}
.rail .brand{display:flex;align-items:center;gap:9px;padding:5px 9px 14px;
  font-weight:800;font-size:15.5px;letter-spacing:-.01em;color:#fff;
  text-decoration:none}
.rail .brand i{width:19px;height:19px;border-radius:6px;background:var(--blue-400);
  flex:none;position:relative}
.is-admin .rail .brand i{background:var(--amber-400)}
.rail .brand i::after{content:"";position:absolute;right:5px;top:5px;width:7px;
  height:7px;border-radius:2px;background:var(--navy-800)}
.rail .org{font-size:11.5px;color:rgba(255,255,255,.52);padding:0 9px 12px;
  margin-top:-10px;line-height:1.4}
.rail p.grp{font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.36);margin:15px 9px 5px;font-weight:700}
.rail p.grp:first-of-type{margin-top:4px}
.rail ul{list-style:none;margin:0;padding:0}
.rail a.nv{display:flex;align-items:center;gap:9px;padding:7px 9px;
  border-radius:8px;color:rgba(255,255,255,.76);text-decoration:none;
  font-size:13.5px;margin-bottom:1px}
.rail a.nv:hover{background:rgba(255,255,255,.08);color:#fff}
.rail a.nv[aria-current="page"]{background:var(--blue-700);color:#fff;font-weight:600}
.is-admin .rail a.nv[aria-current="page"]{background:var(--navy-600)}
.rail a.nv .pip{margin-left:auto;background:var(--dgr);color:#fff;font-size:10px;
  font-weight:700;min-width:16px;height:16px;border-radius:8px;display:grid;
  place-items:center;padding:0 5px}
.rail .railfoot{margin-top:auto;padding-top:12px;background:transparent;
  border-top:1px solid rgba(255,255,255,.1)}
.rail .me{display:flex;align-items:center;gap:9px;padding:7px 9px;font-size:13px;
  color:rgba(255,255,255,.88)}
.rail .me .av{width:26px;height:26px;border-radius:50%;background:var(--blue-600);
  display:grid;place-items:center;font-size:10.5px;font-weight:700;flex:none}
.rail .me em{display:block;font-style:normal;font-size:11px;
  color:rgba(255,255,255,.5)}
.rail .railfoot a{display:block;padding:6px 9px;border-radius:7px;font-size:12.5px;
  color:rgba(255,255,255,.62);text-decoration:none}
.rail .railfoot a:hover{background:rgba(255,255,255,.08);color:#fff}

/* ── main column ─────────────────────────────────────────────────── */
.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.topline{display:flex;align-items:center;gap:12px;padding:20px 24px 0;flex-wrap:wrap}
.topline .sp{flex:1}
.lede{color:var(--ts);max-width:74ch;margin:7px 0 0;padding:0 24px}
main.wrap{flex:1 1 auto;padding:18px 24px 56px;min-width:0}
main.wrap.narrow{max-width:560px;margin:0 auto}
.foot{display:flex;gap:14px;align-items:center;padding:12px 24px;
  border-top:1px solid var(--bd);font-size:12px;color:var(--tm);background:var(--s1)}
.foot .sp{flex:1}

@media(max-width:900px){
  .shell{display:block}
  .rail{position:static;height:auto;flex-basis:auto;padding:12px 14px}
  .rail ul{display:flex;flex-wrap:wrap;gap:4px}
  .rail p.grp{margin:12px 0 5px}
  .rail .railfoot{display:flex;gap:10px;align-items:center}
  .rail .me{margin-right:auto}
}

/* ═══ the metric band ════════════════════════════════════════════════
   Dark, so it reads as a header rather than as content, and so the eye
   lands on the table below it rather than grazing a row of cards. */
.band{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;
  background:var(--navy-800);color:#fff;padding:14px 24px;margin-top:16px}
.is-admin .band{background:var(--navy-900)}
.band .m{min-width:92px}
.band .m span{display:block;font-size:10px;text-transform:uppercase;
  letter-spacing:.09em;color:rgba(255,255,255,.55);font-weight:700}
.band .m b{display:block;font-size:20px;letter-spacing:-.02em;margin-top:2px;
  font-weight:700}
.band .m em{display:block;font-style:normal;font-size:11px;
  color:rgba(255,255,255,.5);margin-top:1px}
.band .m.warn b{color:var(--amber-300)}
.band .m.good b{color:#7fd3a6}
.band .m.bad b{color:#ff9d8f}
.band .wide{margin-left:auto;min-width:210px;max-width:320px}
.band .sbar{display:flex;height:7px;border-radius:4px;overflow:hidden;margin-top:7px;
  background:rgba(255,255,255,.14)}
.band .sbar i{display:block}
.band .key{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px;font-size:11px;
  color:rgba(255,255,255,.72)}
.band .key i{width:7px;height:7px;border-radius:2px;display:inline-block;
  margin-right:5px}

/* ═══ filter chips ═══════════════════════════════════════════════════ */
.chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;
  padding:14px 24px 0;margin:0}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bd2);
  background:var(--s0);border-radius:999px;padding:5px 12px;font-size:13px;
  font-weight:600;color:var(--ts);margin:0}
.chip select{appearance:none;background:transparent;border:0;font:inherit;
  font-size:13px;font-weight:600;color:var(--ac-deep);padding:0 16px 0 2px;
  cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--bd3) 50%),
    linear-gradient(135deg,var(--bd3) 50%,transparent 50%);
  background-position:right 6px top 55%,right 2px top 55%;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.chip select:focus{outline:0;box-shadow:var(--focus);border-radius:4px}
.chip.on{border-color:var(--ac-deep);background:var(--ac-soft)}
.chip .n{background:var(--navy-800);color:#fff;font-size:10px;min-width:16px;
  height:16px;border-radius:8px;display:grid;place-items:center;padding:0 4px}

/* ═══ buttons ════════════════════════════════════════════════════════ */
.btn{appearance:none;border:1px solid var(--bd2);background:var(--s0);color:var(--tp);
  font:inherit;font-size:13px;font-weight:600;padding:7px 13px;border-radius:8px;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--bd3);background:var(--s1)}
.btn:focus-visible{outline:0;box-shadow:var(--focus)}
.btn.pri,button[type="submit"]:not(.ghost):not(.sec){background:var(--navy-800);
  border-color:var(--navy-800);color:#fff}
.btn.pri:hover,button[type="submit"]:not(.ghost):not(.sec):hover{background:var(--navy-700)}
.btn.warn{background:var(--dgr);border-color:var(--dgr);color:#fff}
.btn.warn:hover{background:#a53022}
.btn.ghost,.btn.sec{background:transparent}
.btn.tiny{padding:4px 9px;font-size:12px}
.btn.wide{width:100%;justify-content:center}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.inline{display:inline-block;margin:0 8px 8px 0}

/* ═══ tables ═════════════════════════════════════════════════════════ */
.tablecard{border:1px solid var(--bd);border-radius:11px;overflow:hidden;
  margin:16px 0;background:var(--s0)}
.tablecard .th{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--bd);background:var(--s1);font-weight:700;
  font-size:13.5px}
.tablecard .th .sp{flex:1}
.tablecard .tf{padding:10px 14px;border-top:1px solid var(--bd);background:var(--s1);
  font-size:12.5px;color:var(--tm)}
.scroll{overflow:auto;max-width:100%}
table.grid{width:100%;border-collapse:collapse;font-size:13.5px}
table.grid thead th{position:sticky;top:0;z-index:1;background:var(--s0);
  text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tm);font-weight:700;padding:9px 12px;white-space:nowrap;
  border-bottom:1px solid var(--bd2)}
table.grid td{padding:10px 12px;border-bottom:1px solid var(--bd);
  vertical-align:middle}
table.grid tbody tr:last-child td{border-bottom:0}
table.grid tbody tr:hover{background:var(--s1)}
table.grid .right,table.grid td.right,table.grid th.right{text-align:right}
table.grid td.bad,.mono.bad{color:var(--dgr);font-weight:700}
.mono{font-family:var(--mono);font-size:12.5px}
.dim{color:var(--tm)}
.who{display:flex;align-items:center;gap:9px}
.av{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:700;color:#fff;flex:none;background:var(--navy-600)}

/* ═══ pills ══════════════════════════════════════════════════════════ */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pill.on{background:var(--ok-soft);color:var(--ok)}
.pill.off{background:var(--dgr-soft);color:var(--dgr)}
.pill.wait{background:var(--wn-soft);color:var(--wn)}
.pill.dim{background:var(--s2);color:var(--tm)}
.pill.mfa{background:var(--ac-soft);color:var(--ac-deep)}
.pill.spon{background:var(--amber-300);color:#1f1403}
.pill.pri{background:#efe6fb;color:#5b2d94}

/* ═══ cards, facts, forms ════════════════════════════════════════════ */
.card{background:var(--s0);border:1px solid var(--bd);border-radius:11px;
  padding:19px 21px;margin:16px 0}
.card.danger{border-color:#f0c8c3}
.card.empty{background:var(--s1)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px}
dl.facts{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:14px}
dl.facts div{border-left:3px solid var(--bd2);padding-left:11px}
dl.facts dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tm);font-weight:700}
dl.facts dd{margin:3px 0 0;font-size:15px}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:13px}
.stat{background:var(--s0);border:1px solid var(--bd);border-radius:10px;
  padding:14px 16px}
.stat.warn{border-color:#eddcb4;background:var(--wn-soft)}
.stat .k{display:block;font-size:11px;color:var(--tm);text-transform:uppercase;
  letter-spacing:.06em;font-weight:700}
.stat .v{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;
  margin-top:4px}

.stack{display:flex;flex-direction:column;gap:14px;max-width:52ch}
.stack.narrow{max-width:34ch}
label{display:block;font-size:13px;font-weight:600;margin-bottom:13px}
input,select,textarea{font:inherit;font-size:14px}
.stack input,.stack select,.stack textarea,.card>label input,.card>label select,
.card>form input,.card>form select{display:block;width:100%;margin-top:5px;
  padding:8px 11px;border:1px solid var(--bd2);border-radius:8px;background:var(--s0);
  color:var(--tp)}
.stack input:focus,.stack select:focus,.card input:focus,.card select:focus{
  outline:0;box-shadow:var(--focus);border-color:var(--ac)}
.stack input:disabled,input:disabled{background:var(--s2);color:var(--tm)}
label .row input{width:8ch;margin-top:0}
label.check{display:flex;align-items:flex-start;gap:9px}
label.check input{width:auto;margin:3px 0 0}
.hint{display:block;font-weight:400;font-size:12.5px;color:var(--tm);margin-top:5px;
  line-height:1.5}
.filters{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin:0 0 4px}

/* ═══ flash and alerts ═══════════════════════════════════════════════ */
.flash{padding:10px 14px;border-radius:9px;font-size:13.5px;margin:16px 24px 0}
.flash.ok{background:var(--ok-soft);color:var(--ok);border:1px solid #bfe0cd}
.flash.err{background:var(--dgr-soft);color:var(--dgr);border:1px solid #f0c8c3}
.flash.warn{background:var(--wn-soft);color:#5d3d08;border:1px solid #eddcb4}
.alert{border-radius:10px;padding:12px 15px;margin:14px 0;font-size:13.5px;
  line-height:1.6}
.alert.warn{background:var(--wn-soft);border:1px solid #eddcb4;color:#5d3d08}
.alert.ok{background:var(--ok-soft);border:1px solid #bfe0cd}
.alert strong{font-weight:700}
.note{border-radius:9px;padding:11px 14px;margin:12px 0;font-size:13px}
.note.warn{background:var(--wn-soft);border:1px solid #eddcb4}
.state{font-weight:700}
.state.on::before,.state.off::before{content:"";display:inline-block;width:9px;
  height:9px;border-radius:50%;margin-right:8px}
.state.on::before{background:var(--ok)}
.state.off::before{background:var(--tm)}

/* A secret shown exactly once: a pairing code, a temporary counter PIN.
   Big, monospaced and widely spaced because it gets transcribed by hand,
   usually by someone reading it off a screen across a desk. */
.bigcode{display:inline-block;font-family:var(--mono);font-size:27px;
  font-weight:700;letter-spacing:.18em;background:var(--s0);
  border:1px solid var(--bd2);border-radius:9px;padding:8px 15px;
  margin:6px 0;user-select:all}
.alert .bigcode{vertical-align:middle;margin-left:8px}

/* Numbered procedure. Used where the order genuinely matters and a bulleted
   list would imply it does not. */
ol.steps{margin:10px 0 0;padding-left:21px;font-size:13.5px;line-height:1.65}
ol.steps li{margin-bottom:8px}
ol.steps li:last-child{margin-bottom:0}

/* ═══ support view banner ════════════════════════════════════════════
   Loud, not dismissible, and sitting above the rail so it is the first
   thing on the page. The moment you forget whose data you are looking at
   is the moment it matters that you cannot. */
.vabar{display:flex;align-items:center;gap:13px;flex-wrap:wrap;background:#8A5A12;
  color:#fff;padding:9px 20px;font-size:13px;line-height:1.5;position:sticky;top:0;
  z-index:30;box-shadow:0 1px 0 #6b450d}
.vabar strong{font-weight:700;white-space:nowrap}
.vabar b{font-weight:700}
.vabar .vaout{margin-left:auto;background:#fff;color:#6b450d;text-decoration:none;
  font-weight:700;padding:4px 12px;border-radius:7px;white-space:nowrap}
.vabar .vaout:hover{background:#ffeccd}
/* A session that can actually change the customer's data reads as a warning,
   not as a status line. Amber says "you are elsewhere"; red says "and what
   you do here is real". */
.vabar.writing{background:#9B2C1B}
.vabar.writing .vaout{color:#7d2415}
.vabar.writing .vaout:hover{background:#ffe2dd}

/* ═══ charts: tables with bars painted over them ═════════════════════ */
table.chart{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
table.chart caption{text-align:left;font-size:12.5px;color:var(--tm);
  padding-bottom:8px}
table.chart th[scope="row"]{text-align:left;font-weight:600;white-space:nowrap;
  padding:4px 12px 4px 0;width:1%}
table.chart td{padding:4px 0}
table.chart .barcell{min-width:90px}
table.chart .bar{display:block;height:14px;border-radius:3px;background:var(--ac);
  min-width:2px}
table.chart .bar.warn{background:var(--dgr)}
table.chart .num{font-family:var(--mono);text-align:right;padding-left:12px;
  white-space:nowrap;width:1%}
table.chart .note{color:var(--tm);font-size:12px;padding-left:14px}
@media(max-width:700px){table.chart .note{display:none}}

/* ═══ lists ══════════════════════════════════════════════════════════ */
.planlist,.exports,ul.comments{list-style:none;margin:0;padding:0}
.planlist li{display:grid;grid-template-columns:1fr auto auto;gap:16px;
  align-items:center;padding:12px 0;border-bottom:1px solid var(--bd)}
.planlist li.current{background:var(--ac-soft);border-radius:8px;padding-inline:12px}
.planlist .price{font-family:var(--mono);font-weight:700;text-align:right}
.exports li{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:12px 0;border-bottom:1px solid var(--bd)}
.exports li:last-child{border-bottom:0}
.pendinglist li{opacity:.7}
ul.comments{display:grid;gap:9px;margin-top:10px}
ul.comments li{background:var(--s1);border:1px solid var(--bd);border-radius:9px;
  padding:10px 13px;font-size:13px;line-height:1.55}
ul.comments q{display:block;font-style:italic}
ul.comments .dim{display:block;margin-top:5px;font-size:11.5px}
ul.willshow{margin:10px 0 0;padding-left:19px;line-height:1.8;color:var(--ts)}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:11px}
.kpi div{background:var(--s1);border:1px solid var(--bd);border-radius:9px;padding:11px}
.kpi b{display:block;font-family:var(--mono);font-size:20px;font-weight:700}
.kpi span{font-size:11px;color:var(--tm)}

/* ═══ MFA ════════════════════════════════════════════════════════════ */
.qrbox{background:#fff;border:1px solid var(--bd2);border-radius:11px;padding:13px;
  width:226px;margin:13px 0}
.qrbox svg{display:block;width:100%;height:auto}
code.secret{display:inline-block;font-family:var(--mono);font-size:15px;
  letter-spacing:.09em;background:var(--s2);border:1px solid var(--bd2);
  border-radius:7px;padding:8px 11px;margin-top:5px;user-select:all}
ul.codes{list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:8px;margin:13px 0;
  padding:0}
ul.codes li{font-family:var(--mono);font-size:14px;letter-spacing:.06em;
  background:var(--s0);border:1px solid var(--bd2);border-radius:7px;padding:8px 10px;
  text-align:center;user-select:all}

/* ═══ sign-in and other railless pages ═══════════════════════════════ */
body.plain{background:var(--s2);display:flex;flex-direction:column;min-height:100vh}
body.plain main.wrap{max-width:430px;margin:0 auto;padding-top:7vh}
.auth,body.plain .card{max-width:430px;margin:0 auto}
.auth .sub,.sub{color:var(--tm);font-size:13.5px;margin:5px 0 0}
.auth .alt{margin-top:16px;font-size:13px}
details.help{margin-top:18px;font-size:13px}
details.help summary{cursor:pointer;color:var(--ac-deep)}
.muted{color:var(--tm);font-size:13px}

/* ═══ invoice document ═══════════════════════════════════════════════ */
.doc{max-width:78ch;margin:0 auto;background:var(--s0);border:1px solid var(--bd);
  border-radius:11px;padding:32px 36px}
.dochead{display:flex;justify-content:space-between;gap:24px;
  border-bottom:2px solid var(--tp);padding-bottom:15px}
.dochead p{margin:0}
.docname{font-size:22px;font-weight:700;letter-spacing:-.01em}
.docnum{font-size:13.5px;color:var(--tm);margin-top:3px!important}
.docmeta{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:20px 0 24px}
.docmeta p{margin:0 0 3px}
.docmeta .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tm);margin-top:11px}
.docmeta>div>.k:first-child{margin-top:0}
table.lines{width:100%;border-collapse:collapse;font-size:13.5px}
table.lines th,table.lines td{padding:9px 8px;text-align:left}
table.lines thead th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tm);border-bottom:1px solid var(--bd2)}
table.lines tbody td{border-bottom:1px solid var(--bd)}
table.lines tfoot th{font-weight:400;color:var(--ts)}
table.lines tfoot tr.total th,table.lines tfoot tr.total td{
  border-top:2px solid var(--tp);font-size:15.5px;padding-top:11px}
.docnote{margin-top:20px;font-size:13px}
.docfoot{margin-top:24px;font-size:12px;line-height:1.6}

/* ═══ print ══════════════════════════════════════════════════════════ */
@media print{
  .rail,.foot,.noprint,.flash,.chips,.band,.topline .btn{display:none!important}
  .shell{display:block}
  .vabar{background:#fff;color:#000;box-shadow:none;border-bottom:1px solid #000}
  .doc{border:0;padding:0;max-width:none}
  body{background:#fff}
  table.grid thead th{position:static}
}