/* Sentra staff site. Palette from Company_Business_Templates.xlsx: navy headers, teal "type here",
   amber accent, cool grey ground. Light and dark follow the device setting. */
:root{
  --ground:#F2F7F9; --surface:#FFFFFF; --sunken:#E7EFF2; --ink:#1B2430; --muted:#5F6B76; --line:#D5E0E5;
  --navy:#0B1F4B; --rail-ink:#DCE6F2; --teal:#0B7A8A; --teal-soft:#DDF0F2; --on-teal:#FFFFFF;
  --amber:#F5A623; --amber-soft:#FDF0D8;
  --ok:#1E7A4C; --ok-soft:#DFF2E7; --warn:#9A5B00; --warn-soft:#FBEBCF; --bad:#B3261E; --bad-soft:#F8DEDC;
  --info:#285FA8; --info-soft:#E0EAF7;
  --f-display:"Saira Semi Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r:6px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --ground:#091428; --surface:#0F1E3A; --sunken:#0C1830; --ink:#E4ECF2; --muted:#93A4B6; --line:#1F3256;
  --navy:#06102A; --rail-ink:#C9D6E6; --teal:#3FB8C7; --teal-soft:#0E3340; --on-teal:#04161A;
  --amber:#F7B547; --amber-soft:#3A2C10;
  --ok:#5FCB92; --ok-soft:#123425; --warn:#F0B95A; --warn-soft:#3A2A0E; --bad:#F08A82; --bad-soft:#3D1715;
  --info:#86B2EE; --info-soft:#14284A;
  color-scheme:dark;
}}

*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:15px/1.55 var(--f-body);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
img{max-width:100%}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.15;letter-spacing:.01em}
h1{font-size:1.9rem;font-weight:700} h2{font-size:1.25rem;font-weight:600} h3{font-size:1.05rem;font-weight:600}
p{margin:0}
a{color:var(--teal)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.eyebrow{font:600 .72rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hint{font-size:.82rem;color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:9px 16px;border-radius:var(--r);cursor:pointer;font-weight:500;font-size:.93rem;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--teal)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.sm{padding:5px 10px;font-size:.84rem}
.btn.block{width:100%}
.btn.ghost-dark{background:transparent;border-color:rgba(255,255,255,.25);color:var(--rail-ink)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.linkbtn{all:unset;cursor:pointer;color:var(--teal);font-size:.88rem;text-decoration:underline}
.linkbtn:focus-visible{outline:2px solid var(--amber)}

/* forms */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font:600 .72rem/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;color:var(--teal);width:100%;min-width:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--teal-soft)}
.field input[readonly]{color:var(--muted);background:var(--sunken)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.form-grid .full{grid-column:1/-1}
.code-input{font:500 1.6rem/1 var(--f-mono)!important;letter-spacing:.35em;text-align:center}

/* auth screens */
.auth{min-height:100vh;display:grid;place-items:center;padding-block:32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:linear-gradient(160deg,var(--navy) 0 38%,var(--ground) 38%)}
.auth-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 50px rgba(11,31,75,.18);overflow:hidden}
.auth-card .head{padding:22px 26px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.auth-card .head .logo{background:#fff;border-radius:var(--r);padding:8px 14px}
.auth-card .head img{height:58px;width:auto;display:block}
.auth-card .brandbar{height:4px;width:100%;background:linear-gradient(90deg,#0B1F4B,#0B7A8A 55%,#22C3DE 86%,#F5A623 86%)}
.auth-card .body{padding:22px 26px 26px;display:flex;flex-direction:column;gap:14px}
.auth-card .body h1{font-size:1.45rem}
.steps{display:flex;gap:6px}
.steps span{flex:1;height:4px;border-radius:2px;background:var(--line)}
.steps span.on{background:var(--teal)}
.qr{display:flex;justify-content:center;background:#fff;border-radius:var(--r);padding:10px;border:1px solid var(--line)}
.qr img{width:200px;height:200px;max-width:100%}
.secret{font:500 .85rem/1.4 var(--f-mono);word-break:break-all;background:var(--sunken);padding:8px 10px;border-radius:var(--r)}
.msg{font-size:.88rem;padding:9px 12px;border-radius:var(--r);border:1px solid}
.msg.err{background:var(--bad-soft);color:var(--bad);border-color:var(--bad)}
.msg.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.msg.info{background:var(--info-soft);color:var(--ink);border-color:var(--info)}
ol.plain{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}

/* shell */
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.rail{background:var(--navy);color:var(--rail-ink);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px;
  padding:18px 14px 16px max(14px,env(safe-area-inset-left,0px))}
.brand{display:flex;flex-direction:column;gap:12px}
.logo-chip{background:#fff;border-radius:var(--r);padding:8px 12px;display:flex;justify-content:center}
.logo-chip img{height:52px;width:auto}
.branch-pick{display:flex;flex-direction:column;gap:6px}
.branch-pick .eyebrow{color:var(--rail-ink);opacity:.7}
.branch-pick select{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:var(--r);padding:8px 10px;font-weight:600}
.branch-pick select option{color:#1B2430}
nav.tabs{display:flex;flex-direction:column;gap:2px}
nav.tabs a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r);font:500 .95rem/1.2 var(--f-body);color:var(--rail-ink);text-decoration:none}
nav.tabs a:hover{background:rgba(255,255,255,.07)}
nav.tabs a[aria-current="page"]{background:rgba(127,214,230,.14);color:#fff;box-shadow:inset 3px 0 0 var(--amber)}
nav.tabs .soon{margin-left:auto;font:600 .62rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.me{font-size:.85rem;line-height:1.35}
.me b{display:block;color:#fff}
.me span{opacity:.75;font-size:.78rem}

main{min-width:0;padding-block:28px 64px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
.view{max-width:1120px;display:flex;flex-direction:column;gap:22px}
.view-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.view-head .lede{color:var(--muted);max-width:64ch;margin-top:6px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.panel-pad{padding:18px 20px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.tile .val{font:600 1.5rem/1.1 var(--f-mono)}

/* tables */
.tbl-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th{font:600 .7rem/1.2 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--sunken);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}

/* key/value list */
.kvlist{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr)}
.kvlist>div{padding:10px 16px;border-bottom:1px solid var(--line);min-width:0;overflow-wrap:anywhere}
.kvlist .k{font:600 .72rem/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center}

.pill{display:inline-block;font:600 .72rem/1 var(--f-body);letter-spacing:.04em;padding:5px 9px;border-radius:999px;white-space:nowrap}
.pill.miss{background:var(--warn-soft);color:var(--warn)}
.pill.dir{background:var(--amber-soft);color:var(--warn)}
.pill.staff{background:var(--teal-soft);color:var(--teal)}
.pill.off{background:var(--sunken);color:var(--muted)}
.banner{padding:10px 14px;border-radius:var(--r);font-size:.9rem;border:1px solid}
.banner.warn{background:var(--warn-soft);border-color:var(--warn)}
.banner.info{background:var(--info-soft);border-color:var(--info)}
.empty{padding:28px 20px;text-align:center;color:var(--muted);display:flex;flex-direction:column;gap:8px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.check{display:inline-flex;align-items:center;gap:6px;font-size:.88rem}

.toast{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--r);font-size:.9rem;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:20;max-width:calc(100vw - 36px)}

@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;z-index:5;
    padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
  .brand{flex-direction:row;align-items:center;flex:1 1 auto}
  .logo-chip{padding:4px 8px}.logo-chip img{height:30px}
  .branch-pick{flex-direction:row;align-items:center}
  .branch-pick .eyebrow{display:none}
  nav.tabs{order:3;flex-direction:row;width:100%;overflow-x:auto;gap:2px}
  nav.tabs a{white-space:nowrap;padding:8px 10px;font-size:.88rem}
  nav.tabs a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--amber)}
  .rail-foot{margin-top:0;flex-direction:row;align-items:center}
  .me{display:none}
  main{padding-block:20px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .grid2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  h1{font-size:1.55rem}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .kvlist{grid-template-columns:minmax(0,1fr)}
  .kvlist .k{border-bottom:0;padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- A4 document (matches the Excel templates and example/invoice_example.pdf) ----------
   Always light, like paper, in both themes. */
.pp{--pn:#0B1F4B;--pt:#0B7A8A;--pa:#F5A623;--pg:#F2F7F9;--pl:#D5E0E5;--pm:#5F6B76;--pi:#1B2430;
  background:#fff;color:var(--pi);width:210mm;max-width:100%;min-height:297mm;margin:0 auto;padding:9mm 11mm 12mm;
  font:9.6pt/1.4 "IBM Plex Sans","Calibri",system-ui,sans-serif;position:relative;display:flex;flex-direction:column;box-shadow:0 2px 6px rgba(0,0,0,.08),0 12px 32px rgba(11,31,75,.12)}
.pp .r{text-align:right}
.pp-bar{height:2.2mm;background:linear-gradient(100deg,#0B1F4B 0 30%,#0B5F7A 55%,#22C3DE 86%,#F5A623 86.2%);margin:0 0 4mm}
.pp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:6mm}
.pp-logo{height:24mm;width:auto}
.pp-co{text-align:right;font-size:8.2pt;color:var(--pm);line-height:1.55}
.pp-coname{font:700 12.5pt/1.3 "Saira Semi Condensed","Calibri",sans-serif;color:var(--pn);letter-spacing:.02em;margin-bottom:1mm}
.pp-rule{height:1px;background:var(--pl);margin:4mm 0}
.pp-titlerow{display:flex;justify-content:space-between;align-items:stretch;gap:6mm}
.pp-title{font:700 19pt/1.1 "Saira Semi Condensed","Calibri",sans-serif;color:var(--pn);margin:2mm 0 2mm;letter-spacing:.02em}
.pp-tick{display:flex;gap:0}.pp-tick i{display:block;height:1.4mm;width:9mm;background:var(--pn)}.pp-tick i:nth-child(2){background:var(--pt);width:5mm}.pp-tick i:nth-child(3){background:var(--pa);width:4mm}
.pp-docno{background:var(--pn);border-left:1.2mm solid var(--pa);color:#fff;padding:3mm 5mm;min-width:66mm;display:flex;flex-direction:column;justify-content:center;gap:1.5mm}
.pp-lbl2{font:700 7pt/1 "IBM Plex Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7FD6E6}
.pp-no{font:700 12pt/1.1 "IBM Plex Sans",sans-serif;color:var(--pa);letter-spacing:.02em}
.pp-parties{display:grid;grid-template-columns:1.45fr 1fr;gap:5mm;margin-top:5mm}
.pp-to{background:var(--pg);border-left:1mm solid var(--pt);padding:3mm 4mm;display:flex;flex-direction:column;gap:1.2mm}
.pp-lbl{font:700 7pt/1.2 "IBM Plex Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--pn)}
.pp-name{font-weight:700;color:var(--pt);font-size:10.5pt}
.pp-in{color:var(--pt)}
.pp-kv{display:grid;grid-template-columns:auto 1fr;margin:0;align-content:start}
.pp-kv dt,.pp-kv dd{margin:0;padding:1.6mm 0 1.4mm;border-bottom:1px solid var(--pl)}
.pp-kv dt{font:600 7pt/1.5 "IBM Plex Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--pm);padding-right:4mm}
.pp-kv dd{color:var(--pt)}
.pp-ph{color:#B9C4CC}
.pp-subject{display:grid;grid-template-columns:auto 1fr;gap:6mm;align-items:baseline;margin:4mm 0 2mm}
.pp-subj{font-weight:700;font-size:10.5pt}
.pp-tbl{width:100%;border-collapse:collapse;margin-top:2mm;font-size:9pt}
.pp-tbl th{background:var(--pn);color:#fff;font:700 7pt/1.25 "IBM Plex Sans",sans-serif;letter-spacing:.05em;text-transform:uppercase;padding:2.4mm 2mm;text-align:left;border:0;white-space:normal}
.pp-tbl th.r{text-align:right}
.pp-tbl td{padding:2.2mm 2mm;border-bottom:1px solid var(--pl);vertical-align:top}
.pp-tbl td:first-child{font-weight:700;color:var(--pt);width:7mm}
.pp-tbl tbody tr:nth-child(even){background:var(--pg)}
.pp-blank td{height:6mm}
.pp-bottom{display:grid;grid-template-columns:1fr 78mm;gap:6mm;margin-top:4mm;align-items:start}
.pp-words{font-size:8.8pt;color:var(--pi)}
.pp-words .pp-lbl{display:block;margin-bottom:1mm}
.pp-trow{display:flex;justify-content:space-between;gap:4mm;padding:1.5mm 0;border-bottom:1px solid var(--pl);font-size:8.8pt}
.pp-trow span:first-child{color:var(--pm);text-align:right;flex:1}
.pp-trow span:last-child{min-width:26mm;text-align:right;font-variant-numeric:tabular-nums}
.pp-grand{display:flex;justify-content:space-between;background:var(--pn);color:#fff;padding:2.6mm 3mm;margin-top:1.5mm;font-weight:700}
.pp-grand span:last-child{color:var(--pa);font-size:12pt;font-variant-numeric:tabular-nums}
.pp-sec{margin-top:5mm}
.pp-sech{display:flex;align-items:center;gap:2mm;font:700 7.5pt/1 "IBM Plex Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--pt);margin-bottom:2mm}
.pp-sech i{display:block;width:2mm;height:2mm;background:var(--pa)}
.pp-tcs{margin:0;padding-left:5mm;font-size:8.4pt;color:#3A4652;display:flex;flex-direction:column;gap:.6mm}
.pp-note{font-size:8.4pt;color:#3A4652;margin:5mm 0 0}
.pp-pay{background:var(--pg);border-left:1mm solid var(--pt);padding:2.5mm 4mm;display:flex;flex-direction:column;gap:1mm}
.pp-grid4{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:1.2mm 4mm;font-size:8.6pt}
.pp-grid4 span{color:var(--pm)}.pp-grid4 b{font-weight:500;color:var(--pt)}
.pp-small{font-size:7.8pt;color:var(--pm)}
.pp-sigs{display:grid;gap:8mm;margin-top:auto;padding-top:8mm}
.pp-sigs-1,.pp-sigs-2{grid-template-columns:1fr 1fr}.pp-sigs-3{grid-template-columns:1fr 1fr 1fr}
.pp-boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2mm 4mm;font-size:8.6pt;margin-bottom:1.5mm}
.pp-box{white-space:nowrap}
.pp-age{margin-top:0}
.box-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px 16px}
.pp-sig .pp-lbl{color:var(--pt)}
.pp-sigline{height:14mm;border-bottom:1.5px solid var(--pn);margin-bottom:1mm}
.pp-foot{display:flex;justify-content:space-between;font-size:7.4pt;color:var(--pm);margin-top:7mm}

/* on-screen preview: scale the A4 sheet to fit narrow panels */
.paper-wrap{overflow-x:auto;background:var(--sunken);border-radius:var(--r);padding:12px}
@media (max-width:900px){.paper-wrap .pp{width:210mm;max-width:none;zoom:.48}}

#print-root{display:none}
@page{size:A4;margin:0}
@media print{
  body{background:#fff!important;padding:0!important}
  body > :not(#print-root){display:none!important}
  #print-root{display:block}
  #print-root .pp{box-shadow:none;margin:0;width:210mm;min-height:297mm;max-width:none}
  .pp,.pp *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- document builder ---------- */
.doc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.doc-grid aside{position:sticky;top:16px}
.doc-grid .paper-wrap .pp{zoom:.62}
td.r,th.r,input.r{text-align:right}
.items-tbl td{padding:4px 6px}
.items-tbl input{border:1px solid transparent;background:transparent;padding:6px;width:100%;min-width:60px;color:var(--teal);border-radius:4px}
.items-tbl input:hover{border-color:var(--line)}
.items-tbl input:focus{border-color:var(--teal);outline:none;background:var(--surface)}
.items-tbl td:nth-child(2) input{min-width:200px}
.mini{width:80px;border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:var(--surface);color:var(--teal)}
.x{all:unset;cursor:pointer;color:var(--muted);padding:4px 8px;border-radius:4px}.x:hover{color:var(--bad)}.x:focus-visible{outline:2px solid var(--amber)}
.totals-box{padding:10px 20px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px;margin-left:auto;width:min(360px,100%)}
.totals-box>div{display:flex;justify-content:space-between;gap:12px;font-size:.92rem}
.totals-box>div span:first-child{color:var(--muted)}
.totals-box .grand{border-top:2px solid var(--ink);padding-top:6px;margin-top:4px;font-weight:700}
.totals-box .grand span:first-child{color:var(--ink)}
.filters select,select[aria-label]{border:1px solid var(--line);border-radius:6px;padding:7px 10px;background:var(--surface)}
textarea{font:inherit}
@media (max-width:1250px){.doc-grid{grid-template-columns:minmax(0,1fr)}.doc-grid aside{position:static}.doc-grid .paper-wrap .pp{zoom:.75}}
@media (max-width:900px){.doc-grid .paper-wrap .pp{zoom:.45}}