:root{
  /* ------ Electric Teal ------
     Two teals, because one cannot do both jobs. --electric is the brand you
     see: vivid, and far too light to put white text on (2.2:1), so it only
     ever carries DARK text. --brand is the one that does the reading: the same
     hue two stops down, where white sits on it at 5.06:1. */
  --brand:#0B7C74;          /* primary — buttons, links, anything with white text */
  --brand-dark:#046C64;     /* hover */
  --brand-deep:#04564F;     /* headings/accents */
  --electric:#00C2B8;       /* the accent — active nav, focus, highlights. dark text only */
  --electric-ink:#062A28;   /* what goes on top of --electric */
  --brand-tint:#E6F7F5;     /* light fill */
  --brand-tint2:#C9EDE9;
  --navy:#071A1C;           /* sidebar and the dark doors */
  --navy2:#0B2A2C;
  --navy3:#12403F;
  --bg:#F5F8F8; --card:#ffffff;
  --ink:#0F1F22; --ink2:#4E6366; --ink3:#849699;
  --line:#E4EDEC; --line2:#EFF5F4;
  --good:#0b9a4a; --good-bg:#E8F7EE; --good-ink:#087a3a;
  /* amber was #b07800 on #fdf4dd — only 3.46:1, which nobody could read.
     Darkened to 5.4:1; same amber at a glance, legible up close. */
  --warn:#8A5D00; --warn-bg:#FBF0D6;
  --serious:#a8461f; --serious-bg:#FCEDE6;
  --crit:#C0392B; --crit-bg:#FCEBE9;
  --blue:#2563EB; --blue-bg:#E8EFFE;   /* freed up: blue now means "on the road", nothing else */
  --radius:18px;
  --shadow:0 1px 2px rgba(7,26,28,.03),0 8px 24px rgba(7,26,28,.05);
  --shadow-lift:0 14px 40px rgba(7,26,28,.11);
  --ring:0 0 0 3px rgba(0,194,184,.32);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink)}
a{color:var(--brand);text-decoration:none;cursor:pointer}
a:hover{color:var(--brand-dark)}

/* ---------- Layout ---------- */
#app{display:flex;min-height:100vh}
#sidebar{width:232px;background:linear-gradient(180deg,#071A1C 0%,#0B2A2C 60%,#12403F 100%);color:#fff;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.logo{display:flex;align-items:center;gap:11px;padding:20px 18px 18px}
.logo-mark{height:40px;width:auto;flex-shrink:0;display:block}
.logo-name{font-weight:800;font-size:13.5px;letter-spacing:.7px;line-height:1.25;color:#fff}
.logo-sub{font-size:10px;color:#7FA3A2;letter-spacing:.4px;margin-top:2px}
nav.sidenav{padding:8px 12px;flex:1;overflow-y:auto}
.nav-btn{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;color:#B3C9C8;padding:10px 13px;border-radius:10px;font-size:13.5px;font-weight:550;margin-bottom:3px;transition:background .12s,color .12s}
.nav-btn .nav-ic{display:flex;align-items:center}
.nav-btn svg{width:17px;height:17px;flex-shrink:0;opacity:.9}
.nav-btn:hover{background:rgba(255,255,255,.08);color:#fff}
/* The one place the electric teal is a fill: it takes dark text, never white. */
.nav-btn.active{background:var(--electric);color:var(--electric-ink);font-weight:700;box-shadow:0 4px 16px rgba(0,194,184,.30)}
.side-foot{padding:14px 18px;font-size:11px;color:#93B0AF;border-top:1px solid rgba(255,255,255,.09);line-height:1.55}
.side-foot-lbl{display:block;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#5E807E;margin-bottom:3px}

#main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:15px 28px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:40}
.page-title{font-size:19px;font-weight:750;letter-spacing:-.2px}
.page-sub{font-size:12.5px;color:var(--ink2);margin-top:1px}
.topbar-right{margin-left:auto;display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.view{padding:24px 28px 64px;max-width:1240px;width:100%}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8.5px 15px;border-radius:11px;font-size:13px;font-weight:600;white-space:nowrap;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s}
.btn:hover{background:#F2F7F6;border-color:#CFE0DE;transform:translateY(-1px)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 3px 12px rgba(4,86,79,.26)}
.btn.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.dark:hover{background:var(--navy3);border-color:var(--navy3)}
.btn.danger{color:var(--crit);border-color:#f2c6c6}
.btn.danger:hover{background:var(--crit-bg)}
.btn.sm{padding:5.5px 11px;font-size:12px;border-radius:8px}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink2)}
.btn.ghost:hover{background:var(--line2);color:var(--ink)}
.btn.open{color:var(--brand);border-color:var(--brand-tint2);background:var(--brand-tint);font-weight:650}
.btn.open:hover{background:var(--brand-tint2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.wa{color:#0a7d0a;border-color:#bfe5bf}
.btn.wa:hover{background:var(--good-bg)}

/* ---------- Cards / KPI ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line2)}
.card-title{font-size:13.5px;font-weight:700;letter-spacing:.1px}
.card-head .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.card-body{padding:18px 20px}
.grid{display:grid;gap:16px}
.grid2{display:grid;gap:16px;grid-template-columns:1fr 1fr}
/* grid children default to min-width:auto, which lets a wide table push the
   whole page sideways — this keeps wide tables scrolling inside their card */
.grid>*,.grid2>*{min-width:0}
/* 215px, not 185: a KPI card spends 85px on the icon, gap and padding, so a
   narrower card leaves under 100px for the number — enough for "6" but not for
   a real money figure like GH₵ 186,400.00, which then spilled out and clipped. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 17px;display:flex;gap:13px;align-items:flex-start;transition:box-shadow .16s,transform .16s}
.kpi:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.kpi-ic{width:38px;height:38px;border-radius:11px;background:var(--brand-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kpi-ic svg{width:19px;height:19px}
.kpi .lbl{font-size:10.5px;font-weight:650;letter-spacing:.62px;text-transform:uppercase;color:var(--ink2)}
/* overflow-wrap: a figure in the millions still has to stay inside its card —
   wrapping onto a second line is ugly, spilling over the edge loses digits and
   can misread as a smaller number. tabular-nums keeps the columns aligned. */
/* matched to .dpanel-val, so a figure looks the same wherever it is shown */
.kpi .val{font-size:25px;font-weight:800;margin-top:4px;letter-spacing:-.8px;line-height:1.15;
  overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.kpi .sub{font-size:11.5px;color:var(--ink3);margin-top:3px}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--ink2);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);background:#F4F9F8;white-space:nowrap;font-weight:650}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .1s}
.tbl tbody tr:hover{background:var(--brand-tint)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl th.num{text-align:right}
.tbl .strong{font-weight:650}
.rowlink{cursor:pointer}
.muted{color:var(--ink3)}
.small{font-size:12px}
.mono{font-variant-numeric:tabular-nums}

/* ---------- Pills / badges ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;padding:3.5px 10px;border-radius:99px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-created{background:#EDF3F2;color:#4A6260}
.p-dispatched{background:var(--blue-bg);color:var(--brand-dark)}
.p-delivered{background:var(--warn-bg);color:var(--warn)}
.p-completed{background:var(--good-bg);color:var(--good-ink)}
.p-cancelled{background:#f1f1f4;color:#9AA4A4}
.p-unpaid{background:var(--crit-bg);color:var(--crit)}
.p-part{background:var(--warn-bg);color:var(--warn)}
.p-paid{background:var(--good-bg);color:var(--good-ink)}
.p-overdue{background:var(--crit-bg);color:var(--crit)}
.p-avail{background:var(--good-bg);color:var(--good-ink)}
.p-onroad{background:var(--blue-bg);color:var(--brand-dark)}
.p-shop{background:var(--serious-bg);color:var(--serious)}
.badge{display:inline-block;font-size:11px;font-weight:650;padding:2.5px 9px;border-radius:7px}
.b-warn{background:var(--warn-bg);color:var(--warn)}
.b-crit{background:var(--crit-bg);color:var(--crit)}
.b-ok{background:var(--good-bg);color:var(--good-ink)}

/* ---------- Forms ---------- */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px 15px}
.fgrid .full{grid-column:1/-1}
.fgrid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px 15px}
label.f{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:5px}
label.f .req{color:var(--crit)}
.inp,select.inp,textarea.inp{width:100%;border:1px solid var(--line);border-radius:11px;padding:9px 12px;background:#fff;font-size:13.5px;transition:border-color .12s,box-shadow .12s}
.inp:focus{outline:none;border-color:var(--electric);box-shadow:var(--ring)}
textarea.inp{resize:vertical;min-height:60px}
.hint{font-size:11.5px;color:var(--ink3);margin-top:4px}
.form-sec{font-size:11px;font-weight:750;letter-spacing:.8px;text-transform:uppercase;color:var(--brand-deep);margin:8px 0 2px;grid-column:1/-1;border-bottom:1px solid var(--line2);padding-bottom:5px}
.check{display:flex;gap:8px;align-items:center;font-size:13px}
input[type="checkbox"]{accent-color:var(--brand);width:15px;height:15px}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed;inset:0;z-index:100}
.modal-bg{position:absolute;inset:0;background:rgba(10,30,66,.55);backdrop-filter:blur(2px)}
.modal{position:relative;max-width:720px;margin:4vh auto;background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(10,30,66,.35);max-height:92vh;display:flex;flex-direction:column;width:calc(100% - 32px);animation:mup .16s ease}
@keyframes mup{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.modal.wide{max-width:880px}
.modal-head{display:flex;align-items:center;padding:17px 22px;border-bottom:1px solid var(--line)}
.modal-title{font-size:15.5px;font-weight:750}
.modal-x{margin-left:auto;background:none;border:0;font-size:22px;color:var(--ink3);line-height:1;padding:2px 7px;border-radius:8px}
.modal-x:hover{background:var(--line2);color:var(--ink)}
.modal-body{padding:20px 22px;overflow-y:auto}
.modal-foot{display:flex;gap:9px;justify-content:flex-end;padding:15px 22px;border-top:1px solid var(--line)}

/* ---------- Toast ---------- */
#toast-root{position:fixed;bottom:22px;right:22px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--navy);color:#fff;padding:12px 17px;border-radius:11px;font-size:13px;font-weight:550;box-shadow:0 10px 28px rgba(10,30,66,.35);display:flex;gap:9px;align-items:center;animation:tin .18s ease}
.toast.err{background:#a02222}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Misc ---------- */
.empty{padding:38px 22px;text-align:center;color:var(--ink3)}
.empty .big{font-size:15px;font-weight:650;color:var(--ink2);margin-bottom:5px}
.searchbar{display:flex;gap:9px;align-items:center;margin-bottom:15px;flex-wrap:wrap}
.range-chips{display:inline-flex;gap:5px;flex-wrap:wrap;background:var(--surface-2,#EEF9F9);padding:3px;border-radius:10px}
.inline-date{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink2)}
.inline-date .inp{width:auto;padding:6px 9px;font-size:12.5px}
.note-strip{background:var(--brand-tint);border:1px solid var(--brand-tint2);color:var(--brand-deep);
  border-radius:10px;padding:10px 13px;font-size:12.5px;line-height:1.5}

/* empty-container return — the demurrage clock */
.empty-card{border-left:4px solid var(--ink3)}
.empty-card.soon{border-left-color:var(--warn);background:var(--warn-bg)}
.empty-card.late{border-left-color:var(--crit);background:var(--crit-bg)}
.empty-card.done{border-left-color:var(--good);background:var(--good-bg)}
.empty-row{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.empty-kicker{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--ink2)}
.empty-headline{font-size:17px;font-weight:750;margin-top:3px;letter-spacing:-.2px}
.empty-card.late .empty-headline{color:var(--crit)}
.empty-card.soon .empty-headline{color:var(--warn)}
.empty-card.done .empty-headline{color:var(--good-ink)}
.empty-sub{font-size:12.5px;color:var(--ink2);margin-top:4px}
.searchbar .inp{width:260px}
.searchbar select.inp{width:auto}
.status-steps{display:flex;gap:0;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;color:var(--ink3);padding:5px 12px;background:#F1FAFA;border:1px solid var(--line)}
.step:first-child{border-radius:9px 0 0 9px}
.step:last-child{border-radius:0 9px 9px 0}
.step.on{background:var(--good-bg);color:var(--good-ink);border-color:#cde9cd}
.step.now{background:var(--brand);color:#fff;border-color:var(--brand)}
.dl{display:grid;grid-template-columns:150px 1fr;gap:7px 12px;font-size:13px}
.dl dt{color:var(--ink2);font-weight:550}
.dl dd{font-weight:600}
.alert-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line2);font-size:12.5px}
.alert-item:last-child{border-bottom:0}
.alert-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.welcome{max-width:640px;margin:8vh auto;text-align:center}
.welcome .logo-mark{width:60px;height:60px;font-size:24px;border-radius:16px;margin:0 auto 18px}
.welcome h1{font-size:22px;margin-bottom:8px;font-weight:800}
.welcome p{color:var(--ink2);margin-bottom:22px}
.legend-note{font-size:11.5px;color:var(--ink3)}
.match-box{box-shadow:none;background:#F1F9F8;margin-bottom:12px;border-color:var(--brand-tint2)}

/* ---------- Notifications ---------- */
.nav-badge{margin-left:auto;background:#ef4444;color:#fff;font-size:10.5px;font-weight:750;min-width:19px;height:19px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;box-shadow:0 2px 8px rgba(239,68,68,.5)}
.notif-row{display:flex;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line2);align-items:flex-start}
.notif-row:last-child{border-bottom:0}
.notif-row.unread{background:#F4FFFF}
.notif-row .nt{font-weight:650;font-size:13px}
.notif-row .nb{font-size:12.5px;color:var(--ink2);margin-top:2px}
.notif-row .nw{font-size:11px;color:var(--ink3);margin-top:4px}
.notif-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex-shrink:0}

/* ---------- Attachments ---------- */
.att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:11px}
.att-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;position:relative;cursor:pointer;box-shadow:var(--shadow);transition:box-shadow .15s}
.att-card:hover{box-shadow:var(--shadow-lift)}
.att-card img{width:100%;height:90px;object-fit:cover;display:block;background:#EDF3F2}
.att-card .pdfic{height:90px;display:flex;align-items:center;justify-content:center;font-size:30px;background:#f5f7fc}
.att-card .nm{font-size:10.5px;padding:6px 9px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-card .ax{position:absolute;top:6px;right:6px;background:rgba(10,30,66,.68);color:#fff;border:0;border-radius:7px;font-size:11px;padding:2px 7px;cursor:pointer}
.att-card .ax:hover{background:var(--crit)}

@media(max-width:900px){
  #sidebar{width:66px}
  .logo{padding:16px 13px}
  .logo-name,.logo-sub,.nav-btn span.nav-txt,.side-foot{display:none}
  .nav-btn{justify-content:center;padding:12px 0;position:relative}
  .nav-badge{position:absolute;transform:translate(10px,-10px)}
  .fgrid,.fgrid3{grid-template-columns:1fr}
  .view{padding:16px 14px 60px}
  .topbar{padding:12px 14px;flex-wrap:wrap}
  .grid,.grid2{grid-template-columns:1fr!important}
  .dl{grid-template-columns:120px 1fr}
  .searchbar .inp{width:100%}
  .modal{margin:2vh auto}
}

/* Phone: list tables become stacked cards so Status and the Open button are
   never hidden off-screen (they used to require sideways scrolling). */
@media(max-width:700px){
  table.tbl.cards, table.tbl.cards tbody, table.tbl.cards tr, table.tbl.cards td{display:block;width:100%}
  table.tbl.cards{min-width:0;table-layout:fixed}
  table.tbl.cards thead{display:none}
  table.tbl.cards tr{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:11px;background:#fff;box-shadow:var(--shadow)}
  table.tbl.cards tr:hover{background:#fff}
  /* overflow-wrap + min-width:0 let long routes and addresses wrap instead of
     forcing the card wider than the phone screen */
  table.tbl.cards td{border:0;padding:3px 0;display:flex;gap:10px;align-items:flex-start;justify-content:space-between;text-align:right;overflow-wrap:anywhere;min-width:0}
  table.tbl.cards td::before{content:attr(data-label);color:var(--ink2);font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.5px;text-align:left;flex:0 1 auto;max-width:40%;padding-top:2px}
  table.tbl.cards td:empty{display:none}
  table.tbl.cards td.num{text-align:right}
  table.tbl.cards td.cell-open{justify-content:stretch;margin-top:9px;padding-top:10px;border-top:1px solid var(--line2)}
  table.tbl.cards td.cell-open::before{display:none}
  table.tbl.cards td.cell-open .btn{width:100%;justify-content:center;padding:9px 14px}
  table.tbl.cards td.cell-title{font-size:15px;font-weight:750;padding-bottom:6px}
  table.tbl.cards td.cell-title::before{display:none}
}

/* ---------- PRINT ---------- */
#print-root{display:none}
@media print{
  @page{size:A4;margin:13mm}
  body{background:#fff}
  #root,#toast-root{display:none!important}
  #print-root{display:block!important}
}
.doc{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#111;font-size:12.5px;line-height:1.5}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.doc-co{display:flex;gap:12px}
.doc-mark{width:52px;height:52px;border-radius:12px;background:#046C64;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;flex-shrink:0}
.doc-co h1{font-size:19px;letter-spacing:.4px;margin-bottom:2px}
.doc-co .tag{font-size:11px;color:#04564F;font-weight:650;letter-spacing:.3px}
.doc-co .adr{font-size:11px;color:#444;margin-top:4px;line-height:1.45}
.doc-meta{text-align:right;flex-shrink:0}
.doc-meta .dt{font-size:21px;font-weight:800;letter-spacing:1.5px;color:#071A1C}
.doc-meta .no{font-size:13px;font-weight:700;margin-top:4px}
.doc-meta .d{font-size:11.5px;color:#444;margin-top:2px}
.doc-rule{height:3px;background:#046C64;margin:12px 0 16px;border-radius:2px}
.doc h3{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:#04564F;margin:14px 0 6px}
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.doc table.dt2{width:100%;border-collapse:collapse;font-size:12px}
.doc table.dt2 td{padding:4px 0;vertical-align:top}
.doc table.dt2 td:first-child{color:#555;width:132px;font-weight:550}
.doc table.dt2 td:last-child{font-weight:600}
.doc table.items{width:100%;border-collapse:collapse;margin-top:6px;font-size:12px}
.doc table.items th{border:1px solid #123B39;background:#071A1C;color:#fff;padding:7px 9px;text-align:left;font-size:11px;letter-spacing:.4px}
.doc table.items td{border:1px solid #555;padding:7px 9px;vertical-align:top}
.doc table.items .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.doc .veh-box{border:2.5px solid #071A1C;border-radius:10px;padding:9px 14px;display:inline-block;margin-top:4px;margin-right:12px}
.doc .veh-box .l{font-size:10px;letter-spacing:1px;color:#555;text-transform:uppercase}
.doc .veh-box .v{font-size:19px;font-weight:800;letter-spacing:1px}
.doc .sig-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-top:34px}
.doc .sig-row.two{grid-template-columns:1fr 1fr}
.doc .sig{font-size:11px;color:#333}
.doc .sig .ln{border-top:1.5px solid #333;margin-top:34px;padding-top:5px;font-weight:650}
.doc .totals{width:290px;margin-left:auto;margin-top:12px;font-size:12.5px}
.doc .totals .tr{display:flex;justify-content:space-between;padding:4.5px 2px;border-bottom:1px solid #e2e2e2}
.doc .totals .tr.grand{border-top:2px solid #071A1C;border-bottom:2px solid #071A1C;font-weight:800;font-size:13.5px;margin-top:3px}
.doc .totals .tr.due{font-weight:800;color:#b3261e;font-size:13.5px}
.doc .note-box{border:1px solid #999;border-radius:8px;padding:9px 12px;margin-top:12px;font-size:11.5px;color:#333}
.doc .foot{margin-top:26px;padding-top:10px;border-top:1px solid #ccc;font-size:10.5px;color:#666;display:flex;justify-content:space-between;gap:14px}
.doc .wm{font-size:10px;color:#999;letter-spacing:.5px;text-transform:uppercase}

/* ---------- Sign in / setup / password pages ---------- */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;
  background:radial-gradient(1200px 600px at 80% -10%,#0E5C57 0%,transparent 60%),linear-gradient(180deg,#071A1C 0%,#0B2A2C 60%,#12403F 100%)}
.auth-card{background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(3,12,40,.45);padding:30px 30px 26px;width:100%;max-width:420px}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.auth-brand img{height:34px;width:auto}
.auth-brand span{font-weight:800;font-size:12.5px;letter-spacing:.8px;color:var(--brand-deep)}
.auth-kicker{font-size:11px;font-weight:750;letter-spacing:.9px;text-transform:uppercase;color:var(--ink3)}
.auth-title{font-size:22px;font-weight:800;letter-spacing:-.3px;margin:2px 0 4px;color:var(--ink)}
.auth-sub{font-size:13px;color:var(--ink2);margin:0 0 18px;line-height:1.5}
.auth-form{display:flex;flex-direction:column;gap:13px}
.auth-field span{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:5px}
.auth-note{background:#F5F8F8;color:#48605F;border:1px solid #E4EDEC;border-radius:10px;padding:9px 12px;font-size:12.5px;line-height:1.5}
.auth-err{background:var(--crit-bg);color:var(--crit);border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:600}
.auth-btn{justify-content:center;padding:11px 16px;font-size:14px;margin-top:4px}
.auth-help{font-size:12px;color:var(--ink3);margin:16px 0 0;line-height:1.5}
.auth-help a{cursor:pointer}
.auth-foot{margin-top:18px;font-size:11.5px;color:#7FA3A2;letter-spacing:.2px}
.auth-loading{color:#B3C9C8;font-size:14px}

/* ---------- sidebar: signed-in user ---------- */
.side-user{border-top:1px solid rgba(255,255,255,.09);padding:10px 12px 12px;position:relative}
.side-user-btn{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:#fff;padding:7px 8px;border-radius:10px;text-align:left}
.side-user-btn:hover{background:rgba(255,255,255,.08)}
.side-avatar{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;letter-spacing:.3px}
.side-user-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.side-user-name{font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user-role{font-size:10.5px;color:#7FA3A2}
.side-user-caret{color:#7FA3A2;font-size:11px}
.side-menu{position:absolute;left:12px;right:12px;bottom:calc(100% - 4px);background:#fff;border-radius:12px;box-shadow:var(--shadow-lift);padding:6px;display:flex;flex-direction:column;z-index:60}
.side-menu a{display:block;padding:9px 11px;border-radius:8px;font-size:13px;color:var(--ink);font-weight:550;cursor:pointer}
.side-menu a:hover{background:var(--brand-tint);color:var(--brand-deep)}
.nav-btn.plat{color:#ffd166}
.nav-btn.plat.active{background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(0,194,184,.32)}

/* ---------- users / platform ---------- */
.temp-pw{background:#fff8e1;border:1px solid #f3dd9a;border-radius:12px;padding:14px 16px;margin-bottom:16px}
.temp-pw-lbl{font-size:11px;font-weight:750;letter-spacing:.8px;text-transform:uppercase;color:#8a5a00;margin-bottom:6px}
.temp-pw-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.temp-pw-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;font-weight:700;background:#fff;border:1px dashed #e0c570;border-radius:8px;padding:6px 12px;letter-spacing:.5px;color:#4a3300}
.company-avatar{width:40px;height:40px;border-radius:12px;background:var(--brand-tint);color:var(--brand-deep);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.company-row:hover{background:#F7FBFA}
.tbl.mini td{padding:8px 8px;vertical-align:middle;border-bottom:1px solid var(--line2)}
.tbl.mini tr:last-child td{border-bottom:0}
.roles-dl div{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--line2);font-size:13px}
.roles-dl div:last-child{border-bottom:0}
.roles-dl dt{font-weight:700;color:var(--brand-deep)}
.roles-dl dd{margin:0;color:var(--ink2)}
@media (max-width:860px){.platform-grid{grid-template-columns:1fr}.roles-dl div{grid-template-columns:1fr;gap:2px}}
.auth-code{font-size:22px;letter-spacing:8px;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.plat-usage{display:flex;gap:14px 22px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);background:var(--line2);border-radius:10px;padding:10px 14px;margin-bottom:16px;align-items:center}
.plat-usage b{color:var(--ink)}
.nav-sec{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#5E807E;padding:14px 13px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addr-box{background:var(--line2);padding:7px 12px;border-radius:8px;font-size:14px;font-weight:650;word-break:break-all}
.kpi.clickable{cursor:pointer}
.kpi.clickable:hover{box-shadow:var(--shadow-lift);border-color:var(--brand-tint2)}
.kpi.clickable:focus-visible{outline:none;box-shadow:var(--ring)}
/* ---------- impersonation ribbon (platform staff inside a company) ---------- */
#app-wrap{display:flex;flex-direction:column;min-height:100vh}
.imp-bar{position:sticky;top:0;z-index:80;display:flex;align-items:center;gap:9px;
  background:#0E3331;color:#C9EDE9;font-size:12.5px;padding:8px 16px;box-shadow:0 1px 0 rgba(255,255,255,.08)}
.imp-bar b{color:#fff}
.imp-dot{width:8px;height:8px;border-radius:50%;background:#ffd166;flex-shrink:0;animation:imp-pulse 2s infinite}
@keyframes imp-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.imp-exit{margin-left:auto;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;
  padding:4.5px 12px;border-radius:8px;font-size:12px;font-weight:650;white-space:nowrap}
.imp-exit:hover{background:rgba(255,255,255,.22)}
#app.with-bar #sidebar{height:calc(100vh - 37px);top:37px}
#app.with-bar .topbar{top:37px}
.sys-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0;color:var(--ink2)}
.sys-row b{color:var(--ink)}
.disk-bar{height:8px;background:var(--line2);border-radius:99px;overflow:hidden;margin:4px 0 6px}
.disk-fill{height:100%;border-radius:99px;transition:width .4s}
@media (max-width:1000px){.grid[style*="1.55fr"]{grid-template-columns:1fr !important}}

/* a suspended company's people see this instead of the sign-in form */
.auth-susp{background:var(--crit-bg);border:1px solid #f3c9c9;border-radius:12px;padding:14px 16px;margin-bottom:4px}
.auth-susp .t{font-weight:750;color:var(--crit);margin-bottom:6px}
.auth-susp p{font-size:13.5px;color:#5a4444;line-height:1.6}
.auth-susp .ways{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.auth-susp .ways .btn{text-decoration:none}

/* a convoy that is not ready to bill yet */
.convoy-wait{font-size:12.5px;color:var(--ink2);background:var(--warn-bg);border:1px solid #f0dcae;
  border-radius:9px;padding:7px 11px;display:inline-block}
.convoy-wait a{font-weight:650}

/* login: the 'or' between signing in with a password and asking for a code */
.auth-or{display:flex;align-items:center;gap:10px;margin:13px 0 2px;color:var(--ink3);font-size:11.5px;font-weight:650;letter-spacing:.6px;text-transform:uppercase}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* billing panel: the two facts first — what they pay, and when it is next due */
.bill-head{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--brand-tint);
  border:1px solid var(--brand-tint2);border-radius:12px;padding:15px 18px;margin-bottom:15px}
.bill-head.soon{background:var(--warn-bg);border-color:#f0dcb4}
.bill-head.late{background:var(--crit-bg);border-color:#f2c6c6}
.bill-lbl{font-size:10.5px;font-weight:650;letter-spacing:.6px;text-transform:uppercase;color:var(--ink2)}
.bill-val{font-size:23px;font-weight:800;letter-spacing:-.4px;margin-top:2px;line-height:1.15}
.bill-head.late .bill-val{color:var(--crit)}
.bill-sub{font-size:11.5px;color:var(--ink3);margin-top:2px}
.bill-fee{display:flex;gap:10px;align-items:flex-end}

/* Running-cost strip on the maintenance modal: what this truck has swallowed in
   garage bills and store parts. Same shape as the billing head above, three
   across, and it warms to amber while a workshop is still owed money.
   .bill-lbl / .bill-val / .bill-sub are shared with it. */
.cost-head{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;background:var(--brand-tint);
  border:1px solid var(--brand-tint2);border-radius:12px;padding:15px 18px;margin-bottom:15px}
.cost-head.owing{background:var(--warn-bg);border-color:#f0dcb4}
.cost-head .bill-val{font-size:20px}

/* A select sitting inside a table row, where a full-height input would shove
   the row about. */
.inp.sm{padding:5px 9px;font-size:12px;border-radius:8px;width:auto}

/* ---------- pay page (public: no sidebar, no session) ----------
   Opened from an email by someone who may never have seen Fleet Flow. One
   card, one number, one button — nothing to read and nothing to learn. */
.pay-wrap{min-height:100vh;display:grid;place-items:center;padding:28px 16px;
  background:linear-gradient(180deg,#071A1C 0%,#0B2A2C 60%,#154A48 100%)}
.pay-card{background:#fff;border-radius:20px;box-shadow:0 24px 70px rgba(10,30,66,.35);
  padding:34px 32px;width:100%;max-width:440px;text-align:center}
.pay-brand{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:26px}
.pay-brand img{height:30px;width:auto}
.pay-brand b{font-size:13px;font-weight:800;letter-spacing:.9px;color:var(--brand-deep)}
.pay-kicker{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.pay-title{font-size:22px;font-weight:800;letter-spacing:-.4px;margin-top:5px}
.pay-sub{font-size:13.5px;color:var(--ink2);margin-top:7px;line-height:1.6}
.pay-lead{font-size:16px;font-weight:700;margin-top:12px}
.pay-amount{font-size:42px;font-weight:800;letter-spacing:-1.4px;margin-top:22px;line-height:1.05;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pay-alert{background:var(--crit-bg);color:var(--crit);border-radius:11px;padding:11px 14px;
  font-size:12.5px;font-weight:600;margin-top:14px;text-align:left;line-height:1.55}
.pay-card label.f{text-align:left}
.pay-btn{width:100%;justify-content:center;margin-top:14px;padding:13px 20px;font-size:15px}
.pay-err{color:var(--crit);font-size:12.5px;margin-top:10px;font-weight:600}
.pay-foot{font-size:11.5px;color:var(--ink3);margin-top:16px;line-height:1.6}
.pay-ok{width:52px;height:52px;border-radius:50%;background:var(--good-bg);color:var(--good-ink);
  display:grid;place-items:center;font-size:26px;font-weight:800;margin:20px auto 0}

/* The company's own pay link, on the staff billing panel. */
.pay-link{border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:15px}
.pay-link-row{display:flex;gap:9px;align-items:center;margin-top:6px}
.pay-link-row code{flex:1;min-width:0;font-size:12px;background:var(--brand-tint);color:var(--brand-deep);
  padding:7px 10px;border-radius:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The way out of a billing suspension, on the page where they are stuck. */
.auth-susp .pay-now{width:100%;justify-content:center;margin:14px 0 4px;padding:12px 16px;font-size:14px}
.auth-susp .ways{margin-top:10px}
.pay-go{width:100%;justify-content:center;margin-top:18px;padding:12px 16px;font-size:14px}
.pay-foot{font-size:12px;color:var(--ink3);text-align:center;margin-top:9px}

/* ---------- Dashboard ----------
   Three questions, three kinds of block: where the trucks are, what is going
   wrong, and whether the money is coming in. The old grid of nine identical
   tiles gave every number the same voice, so nothing led. */
/* 236px, not 252: four panels plus their gaps have to fit the 1052px that is
   left of a 1340px window once the sidebar and padding are taken, or the
   fourth drops to a row of its own and leaves a hole. */
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:16px;margin-bottom:18px}
.dpanel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px 20px 16px;display:flex;flex-direction:column;transition:box-shadow .16s,transform .16s}
.dpanel:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
/* A panel in trouble says so along its edge, not with a coloured number. */
.dpanel.crit{box-shadow:inset 3px 0 0 var(--crit),var(--shadow)}
.dpanel.warn{box-shadow:inset 3px 0 0 var(--warn),var(--shadow)}
.dpanel-top{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer}
.dpanel-lbl{display:block;font-size:10.5px;font-weight:650;letter-spacing:.62px;text-transform:uppercase;color:var(--ink2)}
/* 25px, not 29: "GH₵ 36,420.00" has to sit on one line inside a quarter-width
   panel. A figure that wraps mid-number reads as two smaller figures. */
.dpanel-val{display:block;font-size:25px;font-weight:800;letter-spacing:-.8px;line-height:1.15;margin-top:5px;
  color:var(--ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
@media(min-width:1500px){.dpanel-val{font-size:28px}}
.dpanel-val em{font-style:normal;font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink3);
  display:block;margin-top:3px}

/* the fleet, as one bar instead of three numbers to add up in your head */
.fbar{display:flex;height:9px;border-radius:99px;overflow:hidden;background:var(--line2);margin:15px 0 11px;gap:2px}
.fbar-seg{display:block;height:100%;border-radius:99px}
.fbar-seg.road{background:var(--electric)}
.fbar-seg.free{background:var(--good)}
.fbar-seg.shop{background:var(--warn)}
.fkey{display:flex;flex-wrap:wrap;gap:5px 13px;font-size:11px;color:var(--ink2)}
.fkey span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fkey i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.fkey i.road{background:var(--electric)}
.fkey i.free{background:var(--good)}
.fkey i.shop{background:var(--warn)}

/* the lines that qualify the big number — each one goes where it happened */
.dstats{display:flex;flex-direction:column;gap:1px;margin-top:14px}
.dstat{display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;background:none;border:0;
  padding:6px 8px;margin:0 -8px;border-radius:9px;cursor:pointer;transition:background .16s}
.dstat:hover{background:var(--brand-tint)}
.dstat-v{font-size:14.5px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--ink);min-width:1.4em}
.dstat-l{font-size:12.5px;color:var(--ink2)}
.dstat.crit .dstat-v{color:var(--crit)}
.dstat.warn .dstat-v{color:var(--warn)}
.dfx{font-size:11.5px;color:var(--ink3);margin-top:9px;padding-top:9px;border-top:1px solid var(--line2)}

/* alerts: grouped by how much they matter, whole row clickable */
.alist{display:flex;flex-direction:column}
.arow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line2);padding:13px 20px;cursor:pointer;font:inherit;font-size:12.8px;
  color:var(--ink);border-left:3px solid transparent;transition:background .16s,border-color .16s}
.arow:last-child{border-bottom:0}
.arow:hover{background:var(--brand-tint)}
.arow.crit{border-left-color:var(--crit)}
.arow.warn{border-left-color:var(--warn)}
.arow.info{border-left-color:var(--brand-tint2)}
.arow-t{flex:1;line-height:1.45}
.arow-go{color:var(--ink3);font-size:18px;line-height:1}
.arow:hover .arow-go{color:var(--brand)}
.card-head .right .badge{margin-right:2px}

@media(max-width:520px){
  /* On a phone the urgent count and the All button crowd the title into two
     words on two lines. Let the head wrap as a block instead. */
  .card-head{flex-wrap:wrap;gap:8px}
  .card-head .right{margin-left:0;width:100%}
  .dpanel-val{font-size:27px}
}

/* ---------- Talk to Zotoma ----------
   Built from the same parts as every other page: a .card with a .card-head, a
   .card-title, the app's pills and its .hint. The first version invented its
   own header, its own gradient and its own uppercase headings, and read as a
   different product bolted on. The only thing genuinely new here is a bubble,
   and it is sized to the app's 13px body text, not to a chat app's. */
/* Fill the width available rather than leaving a margin on the right, and let
   a bubble grow to most of the column instead. Narrowing the page fixed the gap
   beside the messages by opening a bigger one beside the page. */
.chat-view{max-width:100%}
.chat-wrap{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:16px;align-items:start}
@media(max-width:1080px){.chat-wrap{grid-template-columns:1fr}}

.chat-panel{display:flex;flex-direction:column;height:calc(100vh - 205px);min-height:430px;
  overflow:hidden;position:relative}
.chat-panel.dropping{border-color:var(--electric);box-shadow:0 0 0 3px rgba(0,194,184,.22),var(--shadow)}
.chat-av{width:30px;height:30px;border-radius:10px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:750;font-size:13px;flex-shrink:0}

.chat{flex:1;overflow-y:auto;padding:16px 20px 6px;display:flex;flex-direction:column}
.chat-empty{margin:auto;text-align:center;color:var(--ink3);font-size:12.5px;max-width:34ch;line-height:1.6}

.chat-day{display:flex;align-items:center;gap:11px;margin:14px 0 10px;color:var(--ink3);
  font-size:10.5px;font-weight:650;letter-spacing:.5px;text-transform:uppercase}
.chat-day::before,.chat-day::after{content:"";flex:1;height:1px;background:var(--line2)}

.msg{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.msg.run{margin-top:2px}
.msg.mine{flex-direction:row-reverse}
.msg-av{width:24px;height:24px;border-radius:50%;background:var(--brand-tint);color:var(--brand-deep);
  font-size:9.5px;font-weight:750;display:grid;place-items:center;flex-shrink:0;margin-bottom:15px}
.msg.mine .msg-av{background:var(--brand);color:#fff}
.msg-av.zo{background:var(--brand);color:#fff}
.msg .msg-av.blank,.msg.mine .msg-av.blank{background:none;box-shadow:none;color:transparent}
/* 80% of the column, capped at a readable 38rem — wide enough that a row
   does not look half empty, short enough that a line stays readable. */
.msg-main{min-width:0;max-width:min(38rem,80%);display:flex;flex-direction:column}
.msg.mine .msg-main{align-items:flex-end}
.msg-who{font-size:10px;font-weight:650;letter-spacing:.4px;text-transform:uppercase;
  color:var(--ink3);margin:0 3px 3px}

/* 13px to match the tables and forms — a bubble is not a headline. */
.bub{background:var(--line2);border:1px solid var(--line);border-radius:13px 13px 13px 4px;
  padding:8px 12px;font-size:13px;line-height:1.5;color:var(--ink);overflow:hidden}
.msg.mine .bub{background:var(--brand);border-color:var(--brand);color:#fff;border-radius:13px 13px 4px 13px}
.bub-body{white-space:pre-wrap;overflow-wrap:anywhere}
.msg-when{font-size:10px;color:var(--ink3);margin:3px 4px 0}

.bub-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.bub-files.bare{margin-top:0}
.shot{display:block;line-height:0}
.shot img{max-width:230px;max-height:180px;border-radius:9px;display:block;background:var(--card)}
.bub-doc{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  background:rgba(0,0,0,.06);color:inherit;border-radius:8px;padding:6px 10px}
.msg.mine .bub-doc{background:rgba(255,255,255,.18)}

/* ---- the box you write in: the app's .inp, given a clip and a send ---- */
.composer{border-top:1px solid var(--line);padding:12px 16px 10px;background:var(--card);
  border-radius:0 0 var(--radius) var(--radius)}
.comp-row{display:flex;gap:7px;align-items:flex-end;border:1px solid var(--line);border-radius:11px;
  background:var(--card);padding:3px 4px 3px 6px;transition:border-color .16s,box-shadow .16s}
.comp-row:focus-within{border-color:var(--electric);box-shadow:var(--ring)}
.comp-text{flex:1;border:0;background:none;font:inherit;font-size:13.5px;line-height:1.5;color:var(--ink);
  resize:none;padding:8px 2px;max-height:132px;overflow-y:auto}
.comp-text:focus{outline:none}
.comp-clip,.comp-send{width:31px;height:31px;border:0;border-radius:9px;flex-shrink:0;cursor:pointer;
  display:grid;place-items:center;transition:background .16s,color .16s,opacity .16s}
.comp-clip{background:none;color:var(--ink3)}
.comp-clip:hover{background:var(--brand-tint);color:var(--brand)}
.comp-clip svg,.comp-send svg{width:16px;height:16px}
.comp-send{background:var(--brand);color:#fff}
.comp-send:hover:not(:disabled){background:var(--brand-dark)}
.comp-send:disabled{opacity:.38;cursor:default}
.comp-hint{text-align:center;margin-top:8px}

.comp-files{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:9px}
.comp-thumb{position:relative;width:70px}
.comp-thumb img{width:70px;height:54px;object-fit:cover;border-radius:9px;border:1px solid var(--line);display:block}
.comp-pdf{width:70px;height:54px;border-radius:9px;border:1px solid var(--line);background:var(--line2);
  display:grid;place-items:center;font-size:10.5px;font-weight:750;color:var(--ink2)}
.comp-thumb button{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--card);background:var(--ink);color:#fff;font-size:11px;line-height:1;cursor:pointer;padding:0}
.comp-name{display:block;font-size:9.5px;color:var(--ink3);margin-top:3px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.drop-veil{position:absolute;inset:0;background:rgba(0,194,184,.09);display:grid;place-items:center;
  pointer-events:none;border-radius:var(--radius)}
.drop-veil div{background:var(--card);border:2px dashed var(--electric);color:var(--brand-deep);
  font-size:13px;font-weight:700;padding:14px 24px;border-radius:12px;box-shadow:var(--shadow-lift)}

/* ---- the rail: ordinary cards ---- */
/* The rail runs out before the conversation does. Sticking it to the top
   keeps it beside the messages you are reading instead of stranding it. */
.chat-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:88px}
.side-steps{margin:0;padding:15px 20px 17px 35px;display:flex;flex-direction:column;gap:9px;
  font-size:12.5px;line-height:1.55;color:var(--ink2)}
.side-steps li::marker{color:var(--brand);font-weight:750}
.side-note{font-size:12.5px;color:var(--ink2);line-height:1.55;margin:-2px 0 12px}
.side-ways{display:flex;flex-direction:column;gap:8px}
.side-ways .btn{width:100%;justify-content:center}

/* the staff inbox down the left of the platform page */
.arow.on{background:var(--brand-tint);border-left-color:var(--brand)}
.arow .nav-badge{position:static;margin-left:auto}

@media(max-width:600px){
  .msg-main{max-width:84%}
  .shot img{max-width:190px}
  .chat-panel{height:calc(100vh - 178px)}
}

/* ---------- too small for the desk work ---------- */
.small-gate{min-height:100vh;display:grid;place-items:center;padding:26px 20px;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 60%,var(--navy3) 100%)}
.small-card{background:var(--card);border-radius:20px;box-shadow:0 24px 60px rgba(7,26,28,.4);
  padding:34px 26px 28px;max-width:420px;text-align:center}
.small-mark{height:52px;width:auto;margin:0 auto 16px;display:block}
.small-card h1{font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1.25;margin-bottom:12px}
.small-card p{font-size:13.5px;line-height:1.6;color:var(--ink2)}
.small-sub{margin-top:11px;font-size:12.5px;color:var(--ink3)}
.small-ways{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.small-ways .btn{width:100%;justify-content:center}

/* ================= preview-only ==================
   The real product has none of this. It is the scaffolding that makes a
   demonstration honest: a standing reminder that nothing is being saved, and
   a role picker so a visitor can see the same screens through each desk's
   eyes without five sets of login details. */
.demo-banner{background:var(--brand-tint);border-bottom:1px solid var(--brand-tint2);
  color:var(--brand-deep);font-size:12.5px;padding:9px 28px;line-height:1.5}
.demo-banner b{font-weight:750}
.demo-banner a{margin-left:6px;font-weight:650;text-decoration:underline}
.demo-role{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:650;
  letter-spacing:.5px;text-transform:uppercase;color:var(--ink3)}
.demo-role select.inp{width:auto;padding:6px 10px;font-size:12.5px;font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--ink)}
.btn.sm{padding:5.5px 11px;font-size:12px;border-radius:8px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.inp.sm{padding:5px 9px;font-size:12px;border-radius:8px;width:auto}
.card-body.alerts{padding:6px 20px 12px}

@media (max-width:900px){
  #sidebar{width:64px}
  .logo-name,.logo-sub,.nav-txt,.side-foot,.side-user-txt{display:none}
  .logo{justify-content:center;padding:16px 0}
  .nav-btn{justify-content:center;padding:11px 0}
  .view,.topbar,.demo-banner{padding-left:16px;padding-right:16px}
}