:root{
  --ink:#0f1114; --ink-2:#1b1e23; --line:#d7dbdf; --line-2:#e9edf0;
  --bg:#eceef1; --card:#fff; --text:#15181c; --muted:#697079;
  --red:#d2101e; --green:#127a4e; --amber:#8a5c0b; --slate:#3b434d;
  --display:'Archivo',system-ui,-apple-system,"Segoe UI",sans-serif;
  --label:'Barlow Condensed','Archivo',system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --r:3px;
  --lift:0 1px 2px rgba(15,17,20,.05),0 8px 22px rgba(15,17,20,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:14px/1.55 var(--display);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em}
p{margin:0}
button,input,select{font:inherit}

/* ---------- layout ---------- */
.shell{display:flex;min-height:100vh}
.side{width:212px;flex:none;background:var(--ink);color:#c8cdd4;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:18px;border-bottom:1px solid #2a2e36;display:flex;align-items:center;gap:9px}
.brand i{width:10px;height:20px;background:var(--red);transform:skewX(-12deg);display:block}
.brand b{color:#fff;font-family:var(--label);font-size:17px;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.side nav{padding:10px 0;display:flex;flex-direction:column}
.side nav button{background:none;border:0;color:#a8b0ba;text-align:left;padding:10px 18px;
  font-family:var(--label);font-size:15px;letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;
  border-left:3px solid transparent;transition:background .12s,color .12s}
.side nav button:hover{color:#fff;background:#1b1e24}
.side nav button.on{color:#fff;background:#1b1e24;border-left-color:var(--red)}
.count{font:11px/1 var(--mono);background:#2c313a;color:#c8cdd4;padding:3px 6px;border-radius:9px}
.side .foot{margin-top:auto;padding:14px 18px;font-size:11px;color:#6f7783;border-top:1px solid #2a2e36}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px}
.dot.off{background:var(--red)}

main{flex:1;min-width:0;padding:22px 26px 60px;position:relative}
main::before{
  content:"";position:fixed;left:212px;right:0;top:0;bottom:0;
  z-index:0;pointer-events:none;
  background:linear-gradient(115deg,
    rgba(0,0,0,0) 0 46%,
    rgba(15,17,20,.045) 46% 71%,
    rgba(0,0,0,0) 71% 100%);
}
main > *{position:relative;z-index:1}
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:18px;flex-wrap:wrap}
.head h1{font-size:26px;letter-spacing:-.025em}
.head p{margin-top:3px;color:var(--muted);font-size:13px}

/* ---------- pieces ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--lift)}
.card .ch{padding:12px 16px;border-bottom:1px solid var(--line-2);
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.card .ch h2{font-family:var(--label);font-size:15px;text-transform:uppercase;letter-spacing:.12em}
.card .cb{padding:16px}
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;box-shadow:var(--lift)}
.kpi .k{font-family:var(--label);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);font-weight:600}
.kpi .k::before{content:"";display:inline-block;width:13px;height:2px;
  background:var(--red);vertical-align:middle;margin:-2px 8px 0 0}
.kpi .v{font-size:31px;font-weight:600;letter-spacing:-.03em;margin-top:8px;font-variant-numeric:tabular-nums}
.kpi .v.money{color:var(--red)}
.kpi .s{font-size:12px;color:var(--muted);margin-top:2px}

table{width:100%;border-collapse:collapse}
th{font-family:var(--label);font-size:12px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--text);text-align:left;font-weight:600;padding:12px 14px 0;
  border-bottom:1px solid var(--line);white-space:nowrap;background:transparent}
th > span{display:inline-block;padding-bottom:7px;border-bottom:2px solid var(--red)}
td{padding:9px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#f7f9fb}
tbody tr.sel{background:#fff5f5}
td.r,th.r{text-align:right}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sub{display:block;color:var(--muted);font-size:12px}
.wrap{overflow-x:auto}

.pill{display:inline-block;font-family:var(--label);font-size:12px;font-weight:600;
  padding:2px 9px;border-radius:2px;white-space:nowrap;text-transform:uppercase;letter-spacing:.1em}
.p-grey{background:#e4e8ec;color:#59616b}
.p-blue{background:var(--slate);color:#fff}
.p-amber{background:#fdf3e2;color:var(--amber)}
.p-green{background:#e6f4ed;color:var(--green)}
.p-red{background:#fdecec;color:var(--red)}

.btn{border:1px solid var(--line);background:#fff;color:var(--text);padding:7px 13px;
  border-radius:var(--r);cursor:pointer;transition:background .12s,border-color .12s}
.btn:hover{border-color:#b9c0c8;background:#fafbfc}
.btn.pri{background:var(--red);border-color:var(--red);color:#fff}
.btn.pri:hover{background:#b10d19;border-color:#b10d19}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.dark:hover{background:var(--ink-2)}
.btn.sm{padding:4px 9px;font-size:12.5px;border-radius:2px}
/* destructive actions read as such before they are pressed */
.btn.danger{color:var(--red);border-color:#eab9bd}
.btn.danger:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.acts{margin-top:14px}
.mini{border:1px solid var(--line);border-radius:var(--r);padding:5px 8px;background:#fff}

label.f{display:flex;flex-direction:column;gap:5px;font-family:var(--label);font-size:12.5px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
label.f input,label.f select{border:1px solid var(--line);border-radius:var(--r);padding:7px 9px;
  background:#fff;color:var(--text);font-weight:400;font-size:13.5px}
label.f input:focus,label.f select:focus{outline:2px solid rgba(210,16,30,.28);outline-offset:-1px;border-color:var(--slate)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}
.fgrid[hidden]{display:none}
[hidden]{display:none!important}
.chk{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;cursor:pointer}
.crew{margin-top:12px;font-size:12.5px;color:var(--muted)}
.crew b{color:var(--text)}

.msg{padding:10px 14px;border-radius:var(--r);font-size:13px;margin-bottom:12px;display:none}
.msg.err{display:block;background:#fdecec;color:#8e0b15;border:1px solid #f5c9cc}
.msg.ok{display:block;background:#e6f4ed;color:#0d5c3b;border:1px solid #bfe0d0}
.empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:13px}
.view{display:none}
.view.on{display:block}
.split{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:14px;align-items:start}
@media(max-width:1100px){.split{grid-template-columns:1fr}}

.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;
  border-bottom:1px solid var(--line-2);font-size:13px}
.kv:last-of-type{border-bottom:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:right}
.tot{border-top:2px solid var(--ink);margin-top:6px;padding-top:9px;font-size:15px;font-weight:600}
.tot .due{color:var(--red)}
.paylist{margin:10px 0 0;padding:0;list-style:none}
.paylist li{border:1px solid var(--line-2);border-radius:var(--r);padding:9px 11px;margin-bottom:8px;background:#fafbfc}
.paylist .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.paylist .meta{color:var(--muted);font-size:12px;margin-top:2px}

/* ---------- confirmation ---------- */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(12,14,18,.45);padding:20px}
.modal .sheet{background:#fff;border-radius:10px;max-width:430px;width:100%;
  padding:20px 22px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.modal h2{font-size:16px;margin-bottom:8px}
.modal p{font-size:13.5px;color:var(--muted);line-height:1.55}
.modal p b{color:var(--text)}
.askrow{justify-content:flex-end}

.whoami{color:#c8cdd4;font-size:12px;margin-bottom:8px;word-break:break-all}
.signout{background:none;border:1px solid #2f343c;color:#a8b0ba;border-radius:2px;
  padding:5px 10px;font-size:12px;cursor:pointer;width:100%;margin-bottom:10px}
.signout:hover{color:#fff;border-color:#464c55}
.apistate{font-size:11px;color:#6f7783}

.subhead{font-family:var(--label);font-size:12.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-top:18px}
.trail{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line);
  font-size:11.5px;color:var(--muted);line-height:1.6}
.paylist li.gone{opacity:.7;background:#fff;border-style:dashed}
/* the TRA slip on file, shown the same way as a banked payment */
.slipbox{border:1px solid var(--line-2);border-radius:var(--r);padding:9px 11px;
  margin:10px 0 0;background:#fafbfc}
.slipbox .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.slipbox .meta{color:var(--muted);font-size:12px;margin:2px 0 0}
.slipbox a.btn{text-decoration:none}

/* ---- invoice detail: one thing at a time ----------------------------------
   The panel is read far more often than it is typed into, so the two forms
   stay shut until asked for and the money leads.                            */
.detail .actbar{padding:10px 16px;border-bottom:1px solid var(--line-2)}
.detail .cb{padding:14px 16px}

.hero{border:1px solid var(--line-2);border-radius:var(--r);padding:12px 14px;background:#fafbfc}
.hero .lbl{margin:0;font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;
  font-size:11.5px;color:var(--muted)}
.hero .big{margin:1px 0 0;font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.hero .brk{margin:6px 0 0;font-size:12px;color:var(--muted)}
.hero.owing{border-color:#eab9bd;background:#fdf6f6}
.hero.owing .big{color:var(--red)}
.hero.clear{border-color:#bfe0cd;background:#f4faf6}
.hero.clear .big{color:#127a4e}

/* reference details, deliberately quiet - two to a row */
.ref{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:14px 0 0}
.ref > div{min-width:0}
.ref dt{font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;
  font-size:11px;color:var(--muted)}
.ref dd{margin:1px 0 0;font-size:13px;overflow-wrap:anywhere}

/* a titled block with its own action on the right */
.sect{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2)}
.secthead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.secthead h3{margin:0;font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;
  font-size:12.5px;color:var(--muted);font-weight:600}
.sect.quiet{border-top-style:dashed}

/* forms that open on demand */
.drawer{margin-top:12px;padding:12px;border:1px solid var(--line-2);border-radius:var(--r);
  background:#fafbfc}
.drawer .acts{margin-top:12px}
.f.wide{grid-column:1/-1}
.f .opt{text-transform:none;letter-spacing:0;font-size:11px;color:var(--muted);font-style:italic}

/* the empty line inside a section */
.none{margin:8px 0 0;color:var(--muted);font-size:12.5px}
.paylist li.none{border:0;background:0;padding:8px 0 0}

/* the deletion log, folded away by default */
.removed{margin-top:8px}
.removed summary{cursor:pointer;color:var(--muted);font-size:12px;list-style:none;
  display:inline-flex;align-items:center;gap:5px;padding:3px 0}
.removed summary::-webkit-details-marker{display:none}
.removed summary::before{content:"";width:0;height:0;border-left:4px solid currentColor;
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;transition:transform .12s}
.removed[open] summary::before{transform:rotate(90deg)}
.removed summary:hover{color:var(--text)}

.paylist li.gone b{text-decoration:line-through;color:var(--muted)}

.btn.wa{background:#25D366;border-color:#25D366;color:#0b3d20;font-weight:600}
.btn.wa:hover{background:#1eb257;border-color:#1eb257}

tbody tr.rowsel{cursor:pointer}
.linky{border-bottom:1px solid var(--red);padding-bottom:1px}
tbody tr:hover .linky{color:var(--red)}

/* ---------- phones and small tablets ----------
   The sidebar becomes a top bar: brand and account on one line, the sections
   on a scrollable strip below. Anything wider keeps the desktop layout. */
@media(max-width:860px){
  .shell{flex-direction:column}
  .side{
    width:auto;height:auto;position:sticky;top:0;z-index:40;
    flex-direction:row;flex-wrap:wrap;align-items:center;
  }
  .brand{order:1;flex:1;padding:11px 14px;border-bottom:0;min-width:0}
  .brand b{font-size:17px}
  .side .foot{
    order:2;margin:0;border-top:0;padding:8px 14px;
    display:flex;align-items:center;gap:9px;flex:none;max-width:56%;
  }
  .whoami{margin:0;font-size:11px;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;max-width:130px}
  .signout{width:auto;margin:0;padding:6px 11px;white-space:nowrap}
  .apistate{margin:0}
  .apistate span:not(.dot){display:none}

  .side nav{
    order:3;flex-basis:100%;flex-direction:row;padding:0;
    overflow-x:auto;border-top:1px solid #2a2e36;
    scrollbar-width:none;
  }
  .side nav::-webkit-scrollbar{display:none}
  .side nav button{
    border-left:0;border-bottom:3px solid transparent;
    padding:12px 13px;white-space:nowrap;justify-content:flex-start;gap:6px;
  }
  .side nav button.on{border-left-color:transparent;border-bottom-color:var(--red)}

  main{padding:16px 14px 46px}
  main::before{left:0}
  .head h1{font-size:22px}
  .card .cb,.detail-cols > section{padding:14px}
  .detail-cols > section{border-left:0;border-top:1px solid var(--line-2)}
  .detail-cols > section:first-child{border-top:0}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .modal .sheet{padding:18px}
}

/* Touch targets, and 16px inputs so iOS does not zoom the page on focus. */
@media(pointer:coarse){
  .btn{padding:10px 15px}
  .btn.sm{padding:8px 12px;font-size:13px}
  label.f input,label.f select,.mini{font-size:16px;padding:9px 11px}
  .side nav button{padding:14px 14px}
  tbody td{padding:12px 14px}
}

/* Wherever a wide table still scrolls sideways - which includes an iPad in
   landscape, where the sidebar stays - pin the action column to the right edge
   so the row's buttons are never pushed out of reach. */
@media(max-width:1150px){
  #t-trips tr > *:last-child,
  #t-parties tr > *:last-child,
  #t-users tr > *:last-child,
  #t-owed tr > *:last-child,
  #v-trips thead th:last-child,
  #v-parties thead th:last-child,
  #v-users thead th:last-child,
  #v-dash thead th:last-child{
    position:sticky;right:0;z-index:2;
    background:var(--card);
    border-left:1px solid var(--line);
    box-shadow:-6px 0 10px -6px rgba(15,17,20,.18);
  }
  #v-trips thead th:last-child,
  #v-parties thead th:last-child,
  #v-users thead th:last-child,
  #v-dash thead th:last-child{background:var(--card)}
  /* the pinned cell keeps its own solid backing, so the stripe stops there */
  tbody tr:nth-child(even) > *:last-child{background:var(--card)}
}

/* ---------- phone column priority ----------
   Nine columns will not fit 360px. On a phone each table keeps only what you
   scan for; the full detail is one tap away on the record itself. */
@media(max-width:640px){
  /* Trips: container, route, status, action */
  #v-trips  tr > *:nth-child(3),#v-trips  tr > *:nth-child(4),
  #v-trips  tr > *:nth-child(5),#v-trips  tr > *:nth-child(6),
  #v-trips  tr > *:nth-child(7),
  /* Invoices: number, remaining, status */
  #v-invoices .split tr > *:nth-child(2),#v-invoices .split tr > *:nth-child(3),
  #v-invoices .split tr > *:nth-child(4),#v-invoices .split tr > *:nth-child(5),
  /* Outstanding: number, remaining, open */
  #t-owed tr > *:nth-child(2),#t-owed tr > *:nth-child(3),
  #t-owed tr > *:nth-child(4),#t-owed tr > *:nth-child(5),
  #v-dash thead th:nth-child(2),#v-dash thead th:nth-child(3),
  #v-dash thead th:nth-child(4),#v-dash thead th:nth-child(5),
  /* Movements: container, route, status */
  #t-active tr > *:nth-child(3),#t-active tr > *:nth-child(4),
  #t-active tr > *:nth-child(5),
  /* Fleet: horse, driver, phone */
  #v-fleet tr > *:nth-child(2),#v-fleet tr > *:nth-child(4),
  #v-fleet tr > *:nth-child(6),
  /* Customers: name, trips, action */
  #v-parties tr > *:nth-child(2),#v-parties tr > *:nth-child(3),
  #v-parties tr > *:nth-child(4),#v-parties tr > *:nth-child(5),
  /* Users: name, role, action - lockout is rare and a reset clears it anyway */
  #v-users tr > *:nth-child(3){
    display:none;
  }

  /* everything fits, so the action column no longer needs pinning */
  #t-trips tr > *:last-child,#t-parties tr > *:last-child,
  #t-users tr > *:last-child,#t-owed tr > *:last-child,
  #v-trips thead th:last-child,#v-parties thead th:last-child,
  #v-users thead th:last-child,#v-dash thead th:last-child{
    position:static;box-shadow:none;border-left:0;
  }
  table{min-width:0}
  .wrap table{min-width:0}
}

/* the last few pixels: tighter cells, and action buttons that stack rather
   than force the table wider than the screen */
@media(max-width:640px){
  th{padding:10px 9px 0;font-size:11px;letter-spacing:.1em}
  tbody td{padding:10px 9px}
  .sub{font-size:11px}
  .pill{font-size:11px;padding:2px 7px;letter-spacing:.06em}
  #t-users tr > *:last-child .row,
  #t-trips tr > *:last-child .row{flex-wrap:wrap;gap:5px;justify-content:flex-end}
  #t-users .btn.sm,#t-trips .btn.sm,#t-parties .btn.sm{padding:7px 9px;font-size:12px}
}