/* Staff portal: utilitarian work surface in the company colors. Sidebar + work area; documents render as true A4 sheets. */
:root{
  --navy:#0F2340; --navy-2:#1B3560; --gold:#B8902A; --gold-soft:#F3EAD3; --red:#A3322B;
  --bg:#F2F4F7; --card:#FFFFFF; --line:#DCE1E8; --ink:#16202E; --muted:#5A667A;
  --ok:#1F7A4D; --ok-bg:#E3F2EA; --warn:#8A5A00; --warn-bg:#FCEFD2; --info:#1D4E89; --info-bg:#E2ECF8; --bad-bg:#F8E1DF;
  --f-display:"Archivo","Arial Narrow",Arial,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --f-logo:"Cinzel",Georgia,"Times New Roman",serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14.5px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:var(--info)}
:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
h1,h2,h3{font-family:var(--f-display);font-stretch:80%;margin:0;line-height:1.1;text-wrap:balance}
.boot{padding:40px;color:var(--muted)}
.mono{font-family:var(--f-mono)}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* Logo */
.logo{display:inline-flex;flex-direction:column;align-items:center;line-height:1;text-decoration:none}
.logo .w{font:700 22px/1 var(--f-logo);letter-spacing:.04em;color:var(--gold)}
.logo .s{font:700 7.5px/1 var(--f-logo);letter-spacing:.22em;color:#fff;margin-top:4px}
.logo .bars{display:flex;gap:4px;margin-top:5px}
.logo .bars i{width:14px;height:3px;border-radius:2px;background:#5C7FB8}
.logo .bars i:nth-child(2){background:var(--red)} .logo .bars i:nth-child(3){background:var(--gold)}

/* Auth */
.auth{min-height:100%;display:grid;place-items:center;padding:32px 16px;background:var(--navy)}
.auth-card{background:var(--card);border-radius:8px;width:100%;max-width:420px;padding:32px;display:grid;gap:16px}
.auth-card .logo .s{color:var(--navy)}
.auth-card h1{font-size:28px;text-transform:uppercase}
.linkbtn{background:none;border:0;color:var(--info);padding:0;font:inherit;cursor:pointer;text-decoration:underline}

/* Shell */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100%}
.side{background:var(--navy);color:#fff;padding:22px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}
.side nav{display:grid;gap:2px}
.side nav a{color:#D3DBE8;text-decoration:none;padding:9px 12px;border-radius:5px;font-weight:500;display:flex;justify-content:space-between;align-items:center}
.side nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side nav a.on{background:rgba(184,144,42,.18);color:#fff;box-shadow:inset 3px 0 0 var(--gold)}
.side .count{background:var(--gold);color:var(--navy);border-radius:10px;font:600 11px/1 var(--f-mono);padding:3px 6px}
.side .who{margin-top:auto;font-size:12.5px;color:#AFBBCE;display:grid;gap:6px;word-break:break-all}
.side .who button{justify-self:start;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:4px;padding:6px 10px;font:500 12.5px var(--f-body);cursor:pointer}
.side .sitelink{font-size:12.5px;color:#AFBBCE}
.main{min-width:0;padding:28px 32px 80px}
.demo-bar{background:var(--warn-bg);color:var(--warn);border:1px solid #EBD39A;border-radius:6px;padding:10px 14px;margin-bottom:20px;font-size:13.5px}
.topbar{display:none}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:250px;z-index:50;transform:translateX(-100%);transition:transform .2s;height:100%}
  .side.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .topbar{display:flex;align-items:center;gap:12px;background:var(--navy);padding:10px 16px;position:sticky;top:env(safe-area-inset-top,0px);z-index:40}
  .topbar button{background:none;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:4px;padding:7px 10px;font:600 13px var(--f-body)}
  .main{padding:20px 16px 80px}
}

/* Page header */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.ph h1{font-size:34px;text-transform:uppercase;font-weight:800}
.ph .sub{color:var(--muted);margin-top:4px}
.ph .acts{display:flex;gap:8px;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:5px;padding:9px 14px;font:600 14px/1 var(--f-body);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-pri{background:var(--navy);color:#fff}.btn-pri:hover{background:var(--navy-2)}
.btn-gold{background:var(--gold);color:var(--navy)}.btn-gold:hover{background:#CFA43A}
.btn-sec{background:var(--card);color:var(--ink);border-color:#C5CCD7}.btn-sec:hover{border-color:var(--navy)}
.btn-bad{background:var(--card);color:var(--red);border-color:#E3B9B5}.btn-bad:hover{background:var(--bad-bg)}
.btn-sm{padding:6px 10px;font-size:13px}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* Cards / panels */
.panel{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px;min-width:0}
.panel h2{font-size:19px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.stack{display:grid;gap:18px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.tile .k{font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tile .n{font:800 34px/1.1 var(--f-display);font-stretch:80%;margin-top:6px}
@media (max-width:900px){.tiles{grid-template-columns:1fr 1fr}}

/* Tables */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--card)}
table.list{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.list th{text-align:left;font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:#FAFBFC}
table.list td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.list tr:last-child td{border-bottom:0}
table.list tr.click{cursor:pointer} table.list tr.click:hover td{background:#F7F9FC}
table.list .r{text-align:right}
.empty{padding:36px;text-align:center;color:var(--muted)}
.pill{display:inline-block;font:600 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 7px;border-radius:3px;white-space:nowrap}
.st-Booked{background:var(--info-bg);color:var(--info)}
.st-Loading{background:var(--warn-bg);color:var(--warn)}
.st-Shipped{background:#E7E3F6;color:#4B3A8C}
.st-Docs{background:#E0F0F4;color:#1C6576}
.st-Paid,.st-Closed{background:var(--ok-bg);color:var(--ok)}
.st-New{background:var(--gold-soft);color:#7A5C10}
.st-Contacted{background:var(--info-bg);color:var(--info)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.filters input,.filters select{max-width:280px}

/* Forms */
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 14px}
.fgrid .s2{grid-column:span 2}.fgrid .s4{grid-column:1/-1}
@media (max-width:1100px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}.fgrid .s2{grid-column:auto}}
label.f{display:grid;gap:5px;font-size:12.5px;font-weight:600;color:#334055;min-width:0}
label.f small{font-weight:400;color:var(--muted)}
input,select,textarea{font:14px/1.35 var(--f-body);padding:8px 10px;border:1px solid #C5CCD7;border-radius:5px;background:#fff;color:var(--ink);width:100%;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--navy);outline:2px solid rgba(15,35,64,.15)}
textarea{resize:vertical;min-height:70px}
.hint{font-size:12.5px;color:var(--muted)}

/* Booking editor */
.editor{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.editor .rail{position:sticky;top:16px;display:grid;gap:14px}
@media (max-width:1180px){.editor{grid-template-columns:1fr}.editor .rail{position:static}}
.sumrow{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);gap:10px}
.sumrow:last-child{border-bottom:0}
.sumrow b{font-family:var(--f-mono);font-weight:500}
.sumrow.big b{font-size:18px;color:var(--navy)}
.docbtns{display:grid;gap:6px}
.docbtns a{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:5px;text-decoration:none;color:var(--ink);font-weight:500}
.docbtns a:hover{border-color:var(--navy);background:#F7F9FC}
.docbtns a span{font:500 11px var(--f-mono);color:var(--muted)}
.cons-card{background:#F7F9FC;border:1px dashed #C5CCD7;border-radius:6px;padding:12px 14px;font-size:13.5px;white-space:pre-line}
table.ct{width:100%;border-collapse:collapse}
table.ct th{font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 6px}
table.ct td{padding:4px 6px}
table.ct td.x{width:36px}
table.ct input.bad{border-color:var(--red);background:var(--bad-bg)}
.checks{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:13px}
.checks li{padding:7px 10px;border-radius:5px}
.checks .w{background:var(--warn-bg);color:var(--warn)}
.checks .g{background:var(--ok-bg);color:var(--ok)}
.files{display:grid;gap:6px}
.file{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:5px;font-size:13.5px}
.file a{word-break:break-all}
.drop{border:2px dashed #C5CCD7;border-radius:6px;padding:16px;text-align:center;color:var(--muted);cursor:pointer}
.drop.on{border-color:var(--gold);background:var(--gold-soft)}
.savebar{position:sticky;bottom:0;z-index:5;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--bg) 30%)}

/* Toast */
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 16px;border-radius:6px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s;z-index:100;max-width:calc(100% - 32px)}
#toast.show{opacity:1}
#toast.err{background:var(--red)}

/* Document viewer */
.docbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.doctabs{display:flex;gap:4px;flex-wrap:wrap}
.doctabs a{padding:7px 10px;border-radius:5px;text-decoration:none;color:var(--ink);border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:500}
.doctabs a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.docstage{overflow-x:auto;padding-bottom:20px}
.docstage .sheet{margin:0 auto 18px;box-shadow:0 4px 18px rgba(15,35,64,.15)}

/* ================= A4 DOCUMENTS ================= */
.sheet{width:210mm;min-height:297mm;background:#fff;color:#000;padding:9mm 13mm 12mm;font-family:Arial,Helvetica,sans-serif;font-size:7.4pt;line-height:1.28;position:relative}
.d-title{font:700 13.5pt/1 Arial,Helvetica,sans-serif;text-align:center;margin:0 0 1.2mm;letter-spacing:.01em}
.grid-doc table.g{width:100%;border-collapse:collapse;table-layout:fixed}
.grid-doc table.g + table.g{margin-top:-0.6pt}
.grid-doc table.g td{border:0.6pt solid #000;padding:0.9mm 1.2mm;vertical-align:top}
.grid-doc .lb{font-weight:400}
.grid-doc .v{font-weight:700}
.grid-doc .r{text-align:right}.grid-doc .c{text-align:center}.grid-doc .b{font-weight:700}
.grid-doc .two{display:grid;grid-template-columns:1fr 1fr;gap:2mm}
.grid-doc td.e{height:5mm}
.grid-doc td.pg{height:9mm}
.grid-doc .exp-wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:2mm}
.grid-doc .exp .d-logo{margin-top:3mm}
.grid-doc td.cons{height:31mm}
.grid-doc td.cons.short{height:27mm}
.grid-doc tr.h td{text-align:center;font-weight:400;padding-block:.6mm}
.grid-doc tr.body > td{padding:0;height:75mm;border-bottom:0.6pt solid #000}
.grid-doc table.pl tr.body > td{height:92mm}
.grid-doc.has-sub table.pl tr.body > td{height:86mm}
.d-sub{text-align:center;font:700 8.4pt/1 Arial,Helvetica,sans-serif;color:#A3322B;letter-spacing:.06em;margin:-0.4mm 0 1.6mm}
.grid-doc table.doo tr.body > td{height:88mm}
.grid-doc table.si tr.body > td{height:68mm}
.grid-doc table.inner{width:100%;border-collapse:collapse;table-layout:fixed}
.grid-doc table.inner td{border:0;padding:1.1mm 1.2mm .2mm;font-weight:700;vertical-align:top}
.grid-doc table.inner td.r{text-align:right}
.grid-doc tr.t td{padding-block:.6mm;border-left:0;border-right:0}
.grid-doc tr.t td:first-child{border-left:0.6pt solid #000}.grid-doc tr.t td:last-child{border-right:0.6pt solid #000}
.grid-doc td.tot{display:table-cell}
.grid-doc td.tot{position:relative}
.grid-doc td.tot span:last-child{position:absolute;right:1.2mm;top:.9mm}
.grid-doc td.addl{height:auto}
.grid-doc td.bank{vertical-align:bottom}
.grid-doc td.sig{height:22mm}
.grid-doc td.spacer{height:6mm}
.grid-doc td.cert .v{font-size:7.6pt;padding-top:.5mm}
.grid-doc td.big{height:22mm}
.grid-doc td.big .bigtxt{font-size:11.5pt;line-height:1.15;margin-top:4mm;font-weight:400}
.grid-doc td.sig .d-stamp{margin-top:2mm}
.grid-doc td.bldesc{height:30mm}
.d-logo{display:inline-flex;flex-direction:column;align-items:center;line-height:1;flex:none}
.d-logo .w{font:700 17pt/1 "Cinzel",Georgia,"Times New Roman",serif;color:#C9A23A;letter-spacing:.03em}
.d-logo .s{font:400 5.6pt/1 Georgia,"Times New Roman",serif;color:#55627A;letter-spacing:.14em;margin-top:2.2mm}
.d-logo .bars{display:flex;gap:1.1mm;margin-top:1.4mm}
.d-logo .bars i{width:4.2mm;height:.8mm;border-radius:.4mm;background:#1F3B66}
.d-logo .bars i:nth-child(2){background:#A3322B}.d-logo .bars i:nth-child(3){background:#C9A23A}
.d-stamp{margin:1.2mm auto 0;width:96%;border:0.7mm solid #2E6DB4;box-shadow:inset 0 0 0 0.6mm #fff,inset 0 0 0 0.9mm #2E6DB4;padding:2mm 4mm 2.4mm;text-align:center;color:#2E6DB4}
.d-stamp .t{font:600 8.4pt/1 Arial,Helvetica,sans-serif;letter-spacing:.12em}
.d-stamp .ln{height:0;border-top:0.25mm solid #2E6DB4;margin:2.6mm 4mm 2mm}
.d-stamp .n{font:400 5.8pt/1 Arial,Helvetica,sans-serif;color:#3E5E9C}
.d-stamp.img{border:0;box-shadow:none;padding:0}
.d-stamp.img img{max-height:18mm;max-width:100%;display:inline-block}

/* Letterhead declarations */
.lh-doc{display:flex;flex-direction:column;font-family:Helvetica,Arial,sans-serif;padding:10mm 14mm 10mm}
.lh-head{text-align:center;padding-bottom:2.4mm;border-bottom:0.35mm solid #C9A23A}
.lh-head .d-logo .w{font-size:19pt}
.lh-head .d-logo .s{font:700 7pt/1 Georgia,"Times New Roman",serif;color:#1F3B66;letter-spacing:.06em;margin-top:1.4mm}
.lh-head .d-logo .bars{margin-top:2.4mm}
.lh-head .d-logo .bars i{width:6mm;height:1mm}
.lh-addr{font-size:7pt;color:#4C5566;margin-top:2.2mm;line-height:1.5}
.lh-title{font:700 12pt/1 Helvetica,Arial,sans-serif;color:#13294B;text-align:center;margin:3mm 0 4mm}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:1.4mm 10mm;font-size:7.2pt}
.kv div{display:grid;grid-template-columns:22mm 1fr}
.kv span{font-weight:700;color:#000}.kv b{font-weight:400}
.cust{margin-top:8mm;border:0.3mm solid #C9D3E3}
.cust .ch{background:#EEF2F8;border-bottom:0.3mm solid #C9D3E3;font-weight:700;font-size:6.8pt;padding:1.4mm 2.4mm}
.cust .cb{padding:2mm 2.4mm 2.4mm;font-size:7pt}
.cust .cb b{font-size:7.6pt}
.cust .ad{font-size:6.4pt;margin-top:.6mm}
.cust .ids{font-weight:700;font-size:6.4pt;margin-top:6mm}
.certify{margin-top:8mm;background:#13294B;color:#fff;text-align:center;padding:3.4mm 6mm 4.2mm}
.certify .h{font-weight:700;font-size:8.6pt;margin-bottom:2.6mm}
.certify .p{font-size:7pt;margin-top:1.4mm}.certify .p.b{font-weight:700}
.further{font-style:italic;color:#3B4F75;font-size:6.4pt;margin:2.2mm 1mm 0;line-height:1.45}
.lh-cont{width:100%;border-collapse:collapse;margin-top:6mm;font-size:7pt}
.lh-cont th{background:#EEF2F8;text-align:left;padding:1.2mm 2mm;border:0.3mm solid #C9D3E3}
.lh-cont td{padding:1mm 2mm;border:0.3mm solid #C9D3E3}
.lh-cont .r{text-align:right}.lh-cont tr.tt td{font-weight:700}
.lh-sign{margin:36mm 0 0 auto;width:60mm;text-align:center}
.lh-sign .for{font-weight:700;font-size:7.2pt;text-align:left;margin-left:-8mm;margin-bottom:1.6mm}
.lh-sign .d-stamp{width:100%;margin:0}
.lh-sign .as{font-weight:700;font-size:6.6pt;margin-top:3.6mm}
.lh-sign .ss{font-size:6.2pt}
.lh-foot{margin-top:auto;background:#13294B;color:#fff;font-size:6.6pt;padding:1.4mm 4mm;text-align:right}

@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff!important;height:auto}
  .side,.topbar,.docbar,.demo-bar,.ph,.noprint{display:none!important}
  .shell{display:block;min-height:0}
  .main{padding:0!important}
  .docstage{overflow:visible;padding:0}
  .docstage .sheet{margin:0;box-shadow:none;break-after:page;page-break-after:always;height:297mm;overflow:hidden}
  .docstage .sheet:last-child{break-after:auto;page-break-after:auto}
  #toast{display:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---- v2: users, logins, SI page, declarations ---- */
.navlabel{font:500 10.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#7F8DA6;padding:14px 12px 4px}
.side .who small{color:#8E9AB0}
.rowacts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pwrow{display:flex;gap:6px;margin-top:6px;justify-content:flex-end}
.pwrow input{max-width:240px}
.cred{margin-top:14px;background:var(--ok-bg);border:1px solid #BFE0CC;border-radius:6px;padding:12px 14px;display:grid;gap:4px;justify-items:start}
.credline{font-size:14px}
.pend{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 14px;border:1px solid #EBD39A;background:#FFFBF0;border-radius:6px}
.warnline{color:var(--warn);font-size:13px;font-weight:500}
.docgrp{font:500 10.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:8px 0 2px}
.docgrp:first-child{margin-top:0}
.docbtns a.docall{background:var(--navy);color:#fff;border-color:var(--navy)}
.docbtns a.docall span{color:#C9D3E3}
.split{display:grid;grid-template-columns:minmax(380px,1fr) auto;gap:18px;align-items:start}
.stagewrap{position:sticky;top:12px;min-width:0}
.stagebar{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:8px 12px;font-size:13.5px;margin-bottom:10px;max-width:calc(210mm * .72)}
.split .docstage .sheet{zoom:.72}
@media (max-width:1320px){.split{grid-template-columns:1fr}.stagewrap{position:static}.stagebar{max-width:none}}
@media (max-width:900px){.split .docstage .sheet{zoom:.45}}
.vers{display:grid;gap:8px}
.ver{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:6px}
.ver.on{border-color:var(--gold);background:var(--gold-soft)}
.issue{border-color:#E6D3A3}
@media print{
  .split{display:block}
  .stagewrap{position:static}
  .split .docstage .sheet{zoom:1}
  .stagebar{display:none}
}