/* ============================================================
   AL MUBARAK Trip Control — shadcn/ui-style theme (RIGIT)
   zinc neutrals · navy primary · gold accent · Inter stack
   ============================================================ */
:root {
  --background:#fafafa; --card:#ffffff; --foreground:#09090b;
  --muted:#f4f4f5; --muted-fg:#71717a; --border:#e4e4e7; --input:#e4e4e7;
  --primary:#0e2a47; --primary-fg:#ffffff; 
  --primary-hover:#16385c;
  --gold:#c9a227; --gold-d:#a3831c; --gold-soft:#fdf6e3;
  --ok:#16a34a; --ok-soft:#f0fdf4; --bad:#dc2626; --bad-soft:#fef2f2;
  --warn:#d97706; --warn-soft:#fffbeb; --ring:rgba(14,42,71,.25);
  --radius:10px; --shadow:0 1px 2px rgba(0,0,0,.05);
  --navy:#0e2a47; --mut:#71717a; --line:#e4e4e7;   /* legacy aliases */
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font:14px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--background); color:var(--foreground);
  -webkit-font-smoothing:antialiased;
}
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { font-size:22px; font-weight:600; letter-spacing:-.02em; margin:18px 0 14px; }
h2 { font-size:16px; font-weight:600; letter-spacing:-.01em; margin:14px 0 10px; }
h3 { font-size:14px; font-weight:600; margin:14px 0 8px; }
.hint { color:var(--muted-fg); font-size:12.5px; font-weight:400; }

/* ---------- topbar ---------- */
.topbar {
  display:flex; align-items:center; gap:18px;
  background:var(--card); color:var(--foreground);
  border-bottom:1px solid var(--border);
  padding:0 20px; height:56px; position:sticky; top:0; z-index:40;
  padding-top:env(safe-area-inset-top);
}
.brand { display:flex; align-items:center; gap:9px; white-space:nowrap; }
.brand small { display:none; }
.brandname { font-weight:600; font-size:14.5px; letter-spacing:-.01em; }
.logo {
  background:var(--gold); color:var(--primary); font-weight:800;
  border-radius:8px; padding:5px 9px; font-size:13px; letter-spacing:.5px;
}
#mainnav { display:flex; gap:2px; flex:1; flex-wrap:wrap; }
#mainnav a {
  color:var(--muted-fg); padding:6px 11px; border-radius:8px;
  font-size:13.5px; font-weight:500;
}
#mainnav a:hover { color:var(--foreground); background:var(--muted); text-decoration:none; }
.userbox { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.uname { font-weight:600; font-size:13px; }
.role {
  background:var(--muted); color:var(--muted-fg); border:1px solid var(--border);
  padding:1px 8px; border-radius:999px; font-size:11px; font-weight:500; text-transform:lowercase;
}
.burger { display:none; cursor:pointer; padding:8px; }
.burger span { display:block; width:20px; height:2px; background:var(--foreground); margin:4px 0; border-radius:2px; transition:.2s; }

.wrap { max-width:1560px; margin:0 auto; padding:6px 26px 44px; }
footer { text-align:center; color:var(--muted-fg); font-size:12px; padding:18px; border-top:1px solid var(--border); margin-top:30px; }

/* ---------- buttons ---------- */
.btn, .btn-sm, button.btn, button.btn-sm {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:8px; border:1px solid var(--border); background:var(--card);
  color:var(--foreground); font:inherit; font-size:13.5px; font-weight:500;
  padding:7px 14px; cursor:pointer; box-shadow:var(--shadow);
  transition:background .15s, border-color .15s; text-decoration:none;
}
.btn:hover, .btn-sm:hover { background:var(--muted); text-decoration:none; }
.btn.gold, .btn-sm.gold {
  background:var(--primary); border-color:var(--primary); color:var(--primary-fg);
}
.btn.gold:hover, .btn-sm.gold:hover { background:var(--primary-hover); }
.btn.ghost { background:transparent; box-shadow:none; border-color:transparent; color:var(--muted-fg); }
.btn.ghost:hover { background:var(--muted); color:var(--foreground); }
.btn.danger { background:var(--bad); border-color:var(--bad); color:#fff; }
.btn.danger:hover { background:#b91c1c; }
.btn-sm { padding:3px 10px; font-size:12.5px; border-radius:7px; box-shadow:none; }
.btn:focus-visible, .btn-sm:focus-visible, input:focus-visible, select:focus-visible {
  outline:2px solid var(--ring); outline-offset:1px;
}

/* ---------- panels & cards ---------- */
.panel {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; margin:14px 0; box-shadow:var(--shadow);
}
.cards { display:flex; gap:12px; flex-wrap:wrap; margin:14px 0; }
.card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; min-width:150px; flex:1; box-shadow:var(--shadow);
}
.card .k { color:var(--muted-fg); font-size:12px; font-weight:500; }
.card .v { font-size:24px; font-weight:600; letter-spacing:-.02em; margin-top:3px; }
.card.ok { border-left:3px solid var(--ok); }
.card.bad { border-left:3px solid var(--bad); }
.card.warn { border-left:3px solid var(--warn); }
.bar { background:var(--muted); border-radius:999px; height:6px; margin-top:8px; overflow:hidden; }
.bar i { display:block; height:100%; background:var(--gold); border-radius:999px; }

/* ---------- forms ---------- */
input, select, textarea {
  font:inherit; font-size:16px; color:var(--foreground);
  border:1px solid var(--input); border-radius:8px; background:var(--card);
  padding:7px 10px; box-shadow:var(--shadow);
}
input::placeholder { color:var(--muted-fg); }
label { font-size:12.5px; font-weight:500; color:var(--foreground); display:inline-flex; flex-direction:column; gap:4px; }
.filters { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin:10px 0; }
.filters label { min-width:0; }
input[type="checkbox"] { width:16px; height:16px; accent-color:var(--primary); box-shadow:none; }
input[type="file"] { box-shadow:none; border-style:dashed; font-size:13px; }
input[readonly] { background:var(--muted); color:var(--muted-fg); }

/* ---------- tables ---------- */
.tscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -2px; }
table { border-collapse:collapse; width:100%; background:var(--card); font-size:13.5px; }
th {
  text-align:left; font-size:11.5px; font-weight:500; letter-spacing:.03em;
  color:var(--muted-fg); background:var(--muted);
  padding:9px 11px; border-bottom:1px solid var(--border); white-space:nowrap;
}
td { padding:9px 11px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:hover td { background:#fafafa; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.grid-entry input { box-shadow:none; padding:6px 8px; }
.grid-entry td, .grid-entry th { padding:5px 6px; }
.dupcell { background:var(--bad-soft) !important; }

/* ---------- badges & marks ---------- */
.badge {
  display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px;
  font-size:11.5px; font-weight:600; border:1px solid transparent;
}
.badge.PAID { background:var(--ok-soft); color:var(--ok); border-color:#bbf7d0; }
.badge.UNPAID { background:var(--bad-soft); color:var(--bad); border-color:#fecaca; }
.badge.LOADING { background:var(--ok-soft); color:var(--ok); border-color:#bbf7d0; }
.badge.FILLING { background:var(--gold-soft); color:var(--gold-d); border-color:#f5e6b8; }
.badge.REJECTED { background:var(--muted); color:var(--muted-fg); text-decoration:line-through; }
.ok-mark { color:var(--ok); font-weight:600; }
.bad-mark { color:var(--bad); font-weight:600; }
.warn-mark { color:var(--warn); font-weight:600; }
.chk { font-size:12px; }

/* ---------- flash ---------- */
.flash {
  padding:10px 14px; border-radius:var(--radius); margin:10px 0;
  font-size:13.5px; font-weight:500; border:1px solid;
}
.flash.ok { background:var(--ok-soft); color:#166534; border-color:#bbf7d0; }
.flash.err { background:var(--bad-soft); color:#991b1b; border-color:#fecaca; }
.flash.warn { background:var(--warn-soft); color:#92400e; border-color:#fde68a; }

/* ---------- login ---------- */
.login-wrap {
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:24px 16px; gap:20px;
}
.login-logo { text-align:center; }
.login-logo img { max-height:100px; max-width:280px; object-fit:contain; }
.login-logo .logo-big { font-size:26px; padding:12px 18px; display:inline-block; border-radius:12px; }
.login-company { margin-top:12px; font-weight:600; font-size:17px; letter-spacing:-.01em; }
.login-company small { display:block; font-weight:400; font-size:12.5px; color:var(--muted-fg); margin-top:3px; }
.login-box {
  width:100%; max-width:360px; background:var(--card);
  border:1px solid var(--border); border-radius:14px; padding:26px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.login-box form { display:flex; flex-direction:column; gap:10px; }

/* ---------- GPS trip ---------- */
.gps-steps { display:flex; flex-direction:column; gap:14px; }
.gps-step {
  border:1px dashed var(--border); border-radius:var(--radius);
  padding:14px; display:flex; flex-direction:column; gap:9px; background:#fcfcfd;
}
.gps-btn { width:100%; padding:13px; font-size:15px; }

/* ---------- reports / print ---------- */
.report-head { text-align:center; margin-bottom:8px; }
.report-meta { display:flex; gap:18px; flex-wrap:wrap; color:var(--muted-fg); font-size:12.5px; margin:8px 0 12px; }
.toolbar { display:flex; gap:8px; margin:10px 0; }
.sign-row { display:flex; justify-content:space-between; margin-top:52px; }
.sign-row div { border-top:1px solid var(--foreground); padding-top:5px; width:28%; text-align:center; font-size:12px; }
.pager { display:flex; gap:6px; align-items:center; margin:12px 0; }

@media print {
  .no-print, .topbar, footer { display:none !important; }
  body { background:#fff; font-size:12px; }
  .wrap { max-width:none; padding:0; }
  .panel { border:0; box-shadow:none; padding:0; }
  td, th { padding:5px 7px; }
  a { color:#000; }
}

/* ---------- responsive ---------- */
@media (max-width:960px) {
  .burger { display:block; margin-left:auto; }
  .brandname { max-width:44vw; overflow:hidden; text-overflow:ellipsis; }
  #mainnav {
    display:none; position:fixed; top:56px; left:0; right:0;
    background:var(--card); border-bottom:1px solid var(--border);
    flex-direction:column; padding:8px 12px 14px; gap:2px;
    box-shadow:0 12px 24px rgba(0,0,0,.08); max-height:calc(100vh - 56px); overflow:auto;
  }
  #navchk:checked ~ #mainnav { display:flex; }
  #mainnav a { padding:11px 12px; font-size:15px; border-radius:8px; }
  .userbox .uname, .userbox .role { display:none; }
  .wrap { padding:6px 12px 40px; }
  .cards { gap:9px; }
  .card { min-width:calc(50% - 5px); flex:1 1 calc(50% - 5px); padding:12px; }
  .card .v { font-size:20px; }
  .filters { gap:9px; }
  .filters label { flex:1 1 45%; }
  .filters input, .filters select { width:100%; }
  h1 { font-size:19px; }
  .login-wrap { padding:16px 12px; }
}
@media (max-width:520px) {
  .filters label { flex:1 1 100%; }
  .card { min-width:100%; }
}

/* ============================================================
   THEMES — default (light) above · pick via <html data-theme>
   ============================================================ */
[data-theme="sand"] {
  --background:#faf7f0; --card:#fffdf8; --foreground:#2a2317;
  --muted:#f3ecdd; --muted-fg:#8a7b5e; --border:#e8dfc9; --input:#e8dfc9;
  --primary:#8a5a00; --primary-fg:#ffffff; --primary-hover:#a06900;
  --gold:#c9a227; --gold-d:#a3831c; --gold-soft:#f7edd2;
  --ring:rgba(138,90,0,.25); --bg-chart:#fffdf8;
}
[data-theme="emerald"] {
  --background:#f4faf6; --card:#ffffff; --foreground:#0c1f16;
  --muted:#e8f4ec; --muted-fg:#5f7a6b; --border:#d8e9de; --input:#d8e9de;
  --primary:#047857; --primary-fg:#ffffff; --primary-hover:#059669;
  --gold:#0ea5a0; --gold-d:#0b807c; --gold-soft:#e0f5f4;
  --ring:rgba(4,120,87,.25);
}
[data-theme="midnight"] {
  --background:#0b1524; --card:#101d31; --foreground:#e7edf6;
  --muted:#182842; --muted-fg:#93a5bd; --border:#233650; --input:#233650;
  --primary:#c9a227; --primary-fg:#0e2a47; --primary-hover:#dab63f;
  --gold:#c9a227; --gold-d:#e3c257; --gold-soft:#2a3550;
  --ok:#34d399; --ok-soft:#0c2e22; --bad:#f87171; --bad-soft:#341418;
  --warn:#fbbf24; --warn-soft:#332508; --ring:rgba(201,162,39,.35);
  --shadow:0 1px 2px rgba(0,0,0,.5);
}
[data-theme="carbon"] {
  --background:#111113; --card:#19191c; --foreground:#ececee;
  --muted:#232327; --muted-fg:#9d9da6; --border:#2b2b31; --input:#2b2b31;
  --primary:#e4b52c; --primary-fg:#1a1503; --primary-hover:#f0c545;
  --gold:#e4b52c; --gold-d:#f0c545; --gold-soft:#2e2a1a;
  --ok:#4ade80; --ok-soft:#122b1c; --bad:#f87171; --bad-soft:#331519;
  --warn:#fbbf24; --warn-soft:#302408; --ring:rgba(228,181,44,.35);
  --shadow:0 1px 2px rgba(0,0,0,.6);
}
[data-theme="midnight"] .logo, [data-theme="carbon"] .logo { color:#0e2a47; }
[data-theme="midnight"] tr:hover td, [data-theme="carbon"] tr:hover td { background:var(--muted); }
[data-theme="midnight"] input[readonly], [data-theme="carbon"] input[readonly] { background:var(--muted); color:var(--muted-fg); }
[data-theme="midnight"] .flash.ok, [data-theme="carbon"] .flash.ok { color:var(--ok); }
[data-theme="midnight"] .flash.err, [data-theme="carbon"] .flash.err { color:var(--bad); }
[data-theme="midnight"] .flash.warn, [data-theme="carbon"] .flash.warn { color:var(--warn); }
[data-theme="midnight"] .badge.PAID, [data-theme="carbon"] .badge.PAID { border-color:transparent; }
[data-theme="midnight"] .badge.UNPAID, [data-theme="carbon"] .badge.UNPAID { border-color:transparent; }

/* chart palette (all themes can override) */
:root { --c1:#0e2a47; --c2:#c9a227; --c3:#0ea5e9; --c4:#16a34a; --c5:#e11d48; --c6:#8b5cf6; --c7:#f97316; --c8:#14b8a6; }
[data-theme="midnight"], [data-theme="carbon"] { --c1:#60a5fa; --c2:#e4b52c; --c3:#38bdf8; --c4:#4ade80; --c5:#fb7185; --c6:#a78bfa; --c7:#fb923c; --c8:#2dd4bf; }
[data-theme="emerald"] { --c1:#047857; --c2:#0ea5a0; --c3:#0284c7; --c4:#65a30d; --c5:#e11d48; --c6:#7c3aed; --c7:#ea580c; --c8:#0891b2; }
[data-theme="sand"] { --c1:#8a5a00; --c2:#c9a227; --c3:#b45309; --c4:#4d7c0f; --c5:#be123c; --c6:#7e22ce; --c7:#c2410c; --c8:#0f766e; }

/* theme picker */
.themesel { background:transparent; border:1px solid var(--border); color:var(--muted-fg);
  border-radius:8px; font-size:12px; padding:4px 6px; box-shadow:none; }

/* ============ dashboard rings / donut / round bars ============ */
.ringrow { display:flex; gap:12px; flex-wrap:wrap; margin:14px 0; }
.ringcard { flex:1; min-width:150px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px;
  display:flex; align-items:center; gap:13px; }
.ringcard svg { flex:none; }
.ringcard .rk { color:var(--muted-fg); font-size:12px; font-weight:500; }
.ringcard .rv { font-size:21px; font-weight:650; letter-spacing:-.02em; margin-top:1px; }
.ringcard .rs { font-size:11px; color:var(--muted-fg); margin-top:1px; }
.ringlbl { font-size:11px; fill:var(--muted-fg); }
.ringpct { font-weight:700; fill:var(--foreground); }

.pillbar { background:var(--muted); border-radius:999px; height:9px; overflow:hidden; min-width:90px; }
.pillbar i { display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--c2), var(--c4)); }

.donutwrap { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.legend { display:flex; flex-direction:column; gap:6px; font-size:12.5px; min-width:170px; }
.legend .li { display:flex; align-items:center; gap:8px; }
.legend .dot { width:10px; height:10px; border-radius:3px; flex:none; }
.legend .ln { flex:1; color:var(--foreground); }
.legend .lv { color:var(--muted-fg); font-variant-numeric:tabular-nums; }
.dotc { width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:6px; vertical-align:1px; }
@media (max-width:960px) { .ringcard { min-width:calc(50% - 6px); } }

/* report center cards */
.repgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; margin:10px 0 18px; }
.repcard { display:flex; flex-direction:column; gap:4px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); color:var(--foreground); }
.repcard:hover { text-decoration:none; border-color:var(--gold); background:var(--gold-soft); }
.repcard strong { font-size:14px; }

/* shadcn tabs */
.tabs { display:inline-flex; gap:2px; background:var(--muted); border:1px solid var(--border);
  border-radius:10px; padding:3px; margin:4px 0 14px; }
.tab { padding:6px 14px; border-radius:8px; font-size:13px; font-weight:500; color:var(--muted-fg); }
.tab:hover { color:var(--foreground); text-decoration:none; }
.tab.active { background:var(--card); color:var(--foreground); box-shadow:var(--shadow); }

/* report cards v2 */
.repcard { flex-direction:row; align-items:center; gap:12px; transition:border-color .15s, transform .15s; }
.repcard:hover { transform:translateY(-1px); background:var(--card); }
.repico { width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:var(--gold-soft); color:var(--gold-d); border:1px solid var(--border); }
.repico svg { width:19px; height:19px; }
.repbody { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.repgo { color:var(--muted-fg); font-weight:600; }
.repcard:hover .repgo { color:var(--gold-d); }

/* report view header */
.rephead { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap;
  border-bottom:1px solid var(--border); padding-bottom:12px; margin-bottom:12px; }
.chiprow { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.chip { display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px; font-size:11.5px;
  font-weight:500; background:var(--muted); color:var(--muted-fg); border:1px solid var(--border); }
.chip.gold { background:var(--gold-soft); color:var(--gold-d); }
.print-only { display:none; }
@media print { .print-only { display:block; } }

/* dashboard 3-panel grid */
.dashgrid { display:grid; grid-template-columns:1.25fr 1fr 1.1fr; gap:12px; margin:14px 0; align-items:stretch; }
@media (max-width:1100px) { .dashgrid { grid-template-columns:1fr 1fr; } }
@media (max-width:720px) { .dashgrid { grid-template-columns:1fr; } }

/* ============ mobile dashboard polish ============ */
@media (max-width:960px) {
  /* stat cards: ring on top, centered, compact 2-up */
  .ringrow { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .ringcard { flex-direction:column; text-align:center; gap:7px; padding:12px 8px; min-width:0; }
  .ringcard .rv { font-size:18px; }
  .ringcard .rk { font-size:11.5px; }
  .ringcard .rs { font-size:10.5px; }
  /* donut + diesel panels: center, scale donut down */
  .donutwrap { justify-content:center; gap:14px; }
  .donutwrap > div:first-child svg { width:132px; height:132px; }
  .dashgrid .panel { padding:14px; }
  h1 { margin:12px 0 10px; }
  /* theme select tighter in the bar */
  .themesel { font-size:11px; padding:3px 4px; max-width:86px; }
  .brandname { max-width:36vw; }
}
@media (max-width:520px) {
  /* dates & small filter fields sit two-up instead of one giant column */
  .filters label { flex:1 1 45%; }
  .filters button, .filters .btn { flex:1 1 100%; }
  .ringcard svg { width:52px; height:52px; }
}

/* ============ driver screen — giant, minimal ============ */
.driver-ui { max-width:440px; margin:6px auto; display:flex; flex-direction:column; gap:14px; }
.drv-head { display:flex; justify-content:space-between; align-items:center;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; }
.drv-truck { font-size:20px; font-weight:700; }
.drv-today { font-size:14px; color:var(--muted-fg); }
.drv-lbl { display:flex; flex-direction:column; gap:6px; font-size:15px; font-weight:600; }
.drv-sel { font-size:20px; padding:13px 12px; border-radius:12px; width:100%; }
.drv-btn { display:flex; align-items:center; justify-content:center; width:100%;
  font-size:22px; font-weight:800; padding:20px; border-radius:14px; border:0; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.12); margin-top:6px; letter-spacing:.3px; }
.drv-btn.go { background:#16a34a; color:#fff; }
.drv-btn.stop { background:#dc2626; color:#fff; }
.drv-btn.photo { background:var(--gold); color:var(--primary); }
.drv-btn:active { transform:scale(.985); }
.drv-open { background:var(--gold-soft); border:1px solid var(--gold); border-radius:var(--radius); padding:12px 14px; text-align:center; }
.drv-stat { font-weight:800; letter-spacing:1px; color:var(--gold-d); }
.drv-from { font-size:14px; margin-top:4px; }
.drv-photostate { text-align:center; font-size:14px; color:var(--muted-fg); }
form .drv-btn + .drv-btn { margin-top:10px; }
.driver-ui form { display:flex; flex-direction:column; gap:12px; }

/* ============ verify queue ============ */
.vcard { display:grid; grid-template-columns:300px 1fr; gap:16px; }
.vphoto img { width:100%; max-height:260px; object-fit:contain; border:1px solid var(--border); border-radius:10px; background:#fff; }
.vnophoto { border:1px dashed var(--border); border-radius:10px; padding:40px 10px; text-align:center; color:var(--muted-fg); }
.vmeta { display:flex; gap:6px; flex-wrap:wrap; }
.navbadge { background:var(--bad); color:#fff; border-radius:999px; padding:0 7px; font-size:11px; font-weight:700; margin-left:3px; }
@media (max-width:820px) { .vcard { grid-template-columns:1fr; } }

/* ============ PIN pad ============ */
.pindots { display:flex; justify-content:center; gap:10px; margin:6px 0 14px; }
.pindots i { width:14px; height:14px; border-radius:50%; background:var(--muted); border:1px solid var(--border); }
.pindots i.on { background:var(--gold); border-color:var(--gold); }
.pinpad { display:grid; grid-template-columns:repeat(3, 1fr); gap:9px; }
.pinpad button { font-size:26px; font-weight:700; min-height:60px; padding:0; border-radius:12px;
  border:1px solid var(--border); background:var(--card); color:var(--foreground); cursor:pointer; box-shadow:var(--shadow);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
  display:flex; align-items:center; justify-content:center; width:100%; line-height:1; }
.pinpad button:active { background:var(--muted); transform:scale(.97); }
.pinpad .pgo { background:#16a34a; border-color:#16a34a; color:#fff; }

/* ============ pure-responsive hard pass ============ */
@media (max-width:960px) {
  html, body { overflow-x:hidden; }
  .wrap { padding:6px 10px 40px; }
  .panel { padding:13px; }
  table { font-size:12.5px; }
  td, th { padding:7px 8px; }
  .topbar { padding:0 10px; gap:8px; }
  .userbox { gap:5px; }
  .userbox .btn { padding:5px 9px; font-size:12px; }
  .filters input, .filters select { max-width:100%; min-width:0; }
  .filters label { min-width:0; }
  h1 { font-size:18px; }
  .toolbar { flex-wrap:wrap; }
}

/* android tap hardening for all big touch controls */
.drv-btn, .drv-sel, .tabs .tab, .btn, .btn-sm { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.pindots { user-select:none; }
#f-driver { display:none; flex-direction:column; gap:12px; }
.login-box .tabs { display:flex; width:100%; margin:0 0 14px; }
.login-box .tab { flex:1; text-align:center; padding:10px 0; font-size:14px; }

/* role badges */
.rolebadge { display:inline-flex; padding:2px 10px; border-radius:999px; font-size:11.5px; font-weight:600; border:1px solid transparent; }
.rolebadge.r-admin { background:var(--gold-soft); color:var(--gold-d); border-color:var(--gold); }
.rolebadge.r-clerk { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.rolebadge.r-viewer { background:var(--muted); color:var(--muted-fg); border-color:var(--border); }
.rolebadge.r-supervisor { background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; }
.rolebadge.r-driver { background:var(--ok-soft); color:var(--ok); border-color:#bbf7d0; }
.rolebadge.r-vendor { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
[data-theme="midnight"] .rolebadge.r-clerk, [data-theme="carbon"] .rolebadge.r-clerk { background:#172554; color:#93c5fd; border-color:transparent; }
[data-theme="midnight"] .rolebadge.r-supervisor, [data-theme="carbon"] .rolebadge.r-supervisor { background:#2e1065; color:#c4b5fd; border-color:transparent; }
[data-theme="midnight"] .rolebadge.r-vendor, [data-theme="carbon"] .rolebadge.r-vendor { background:#431407; color:#fdba74; border-color:transparent; }
.inlineassign select { padding:5px 8px; font-size:13px; }
.useracts { white-space:nowrap; }
.useracts input { font-size:13px; padding:5px 8px; }

/* ============ Users page — mobile stacked cards (no side-scroll) ============ */
@media (max-width:820px) {
  .usertable, .usertable tbody, .usertable tr, .usertable td { display:block; width:100%; }
  .usertable thead { display:none; }
  .usertable tr { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:10px;
    padding:10px 12px; background:var(--card); box-shadow:var(--shadow); }
  .usertable td { border:0; padding:5px 0; display:flex; align-items:center; gap:8px; }
  .usertable td::before { content:attr(data-l); flex:0 0 84px; color:var(--muted-fg); font-size:11.5px;
    font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
  .usertable td.useracts { flex-wrap:wrap; gap:6px; padding-top:9px; border-top:1px dashed var(--border); margin-top:5px; }
  .usertable td.useracts::before { flex-basis:100%; }
  .usertable select, .usertable input { width:100%; max-width:190px; }
}
.usertable .inlineassign { display:flex; align-items:center; gap:5px; margin:0; }
.usertable .inlineassign select { min-width:120px; }
.useracts { white-space:nowrap; }
.useracts form { display:inline-flex; gap:4px; align-items:center; }

/* ============ page head + user tabs + modal ============ */
.pagehead { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:16px 0 10px; }
.utabs { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.utabs .tab { background:var(--muted); border:1px solid var(--border); border-radius:999px; padding:6px 14px; }
.utabs .tab.active { background:var(--primary); color:var(--primary-fg); border-color:var(--primary); box-shadow:none; }
.tabnum { display:inline-block; margin-left:5px; font-size:11px; opacity:.75; font-weight:700; }
.usearch { margin-left:auto; display:flex; gap:6px; align-items:center; }
.usearch input { min-width:220px; font-size:14px; }

dialog.mdlg { border:1px solid var(--border); border-radius:14px; padding:0; width:min(460px, 94vw);
  background:var(--card); color:var(--foreground); box-shadow:0 20px 50px rgba(0,0,0,.28); }
dialog.mdlg::backdrop { background:rgba(9,9,11,.45); backdrop-filter:blur(2px); }
.mdlg-form { display:flex; flex-direction:column; }
.mdlg-head { display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--border); font-size:15px; }
.mdlg-x { color:var(--muted-fg); font-size:16px; text-decoration:none; padding:2px 6px; border-radius:6px; }
.mdlg-x:hover { background:var(--muted); text-decoration:none; }
.mdlg-body { padding:16px; display:flex; flex-direction:column; gap:12px; }
.mdlg-body label { gap:5px; }
.mdlg-body input, .mdlg-body select { width:100%; }
.mdlg-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--border); background:var(--muted); border-radius:0 0 13px 13px; }
@media (max-width:600px) { .usearch { margin-left:0; width:100%; } .usearch input { min-width:0; flex:1; } }

/* period quick chips */
.pchips { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 4px; }
.pchip { padding:5px 12px; border-radius:999px; border:1px solid var(--border); background:var(--card);
  color:var(--muted-fg); font-size:12.5px; font-weight:500; box-shadow:var(--shadow); }
.pchip:hover { color:var(--foreground); background:var(--muted); text-decoration:none; }
.pchip.active { background:var(--primary); border-color:var(--primary); color:var(--primary-fg); }

/* ============ colourful dashboard cards ============ */
.ringcard { position:relative; overflow:hidden; border-radius:14px; }
.ringcard::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:14px 0 0 14px; }
.ringcard::after { content:""; position:absolute; right:-38px; top:-38px; width:104px; height:104px;
  border-radius:50%; opacity:.10; }
.ringcard .rv { font-size:25px; }

.t-gold   { background:linear-gradient(135deg, rgba(201,162,39,.13), rgba(201,162,39,.03) 62%); border-color:rgba(201,162,39,.35); }
.t-gold::before, .t-gold::after   { background:var(--c2); }
.t-red    { background:linear-gradient(135deg, rgba(225,29,72,.13), rgba(225,29,72,.03) 62%); border-color:rgba(225,29,72,.32); }
.t-red::before, .t-red::after     { background:var(--c5); }
.t-green  { background:linear-gradient(135deg, rgba(22,163,74,.13), rgba(22,163,74,.03) 62%); border-color:rgba(22,163,74,.32); }
.t-green::before, .t-green::after { background:var(--c4); }
.t-blue   { background:linear-gradient(135deg, rgba(14,165,233,.13), rgba(14,165,233,.03) 62%); border-color:rgba(14,165,233,.32); }
.t-blue::before, .t-blue::after   { background:var(--c3); }
.t-orange { background:linear-gradient(135deg, rgba(249,115,22,.14), rgba(249,115,22,.03) 62%); border-color:rgba(249,115,22,.32); }
.t-orange::before, .t-orange::after { background:var(--c7); }
.ringcard > * { position:relative; z-index:1; }
.ringcard .rk { text-transform:uppercase; letter-spacing:.04em; font-size:10.5px; font-weight:700; opacity:.8; }

/* panel top accent bars */
.pnl { position:relative; overflow:hidden; }
.pnl::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; }
.pnl-blue::before  { background:linear-gradient(90deg, var(--c3), var(--c6)); }
.pnl-gold::before  { background:linear-gradient(90deg, var(--c2), var(--c7)); }
.pnl-green::before { background:linear-gradient(90deg, var(--c4), var(--c8)); }
.pnl > strong { font-size:13.5px; }

/* dark themes: deepen tints so they read as colour, not wash */
[data-theme="midnight"] .t-gold, [data-theme="carbon"] .t-gold     { background:linear-gradient(135deg, rgba(228,181,44,.20), transparent 65%); }
[data-theme="midnight"] .t-red, [data-theme="carbon"] .t-red       { background:linear-gradient(135deg, rgba(251,113,133,.20), transparent 65%); }
[data-theme="midnight"] .t-green, [data-theme="carbon"] .t-green   { background:linear-gradient(135deg, rgba(74,222,128,.18), transparent 65%); }
[data-theme="midnight"] .t-blue, [data-theme="carbon"] .t-blue     { background:linear-gradient(135deg, rgba(56,189,248,.18), transparent 65%); }
[data-theme="midnight"] .t-orange, [data-theme="carbon"] .t-orange { background:linear-gradient(135deg, rgba(251,146,60,.20), transparent 65%); }

/* route/site sync hint sits on its own line so the filter row stays aligned */
.routehint { flex:1 0 100%; margin-top:-2px; }
.filters > label { align-self:flex-end; }

#ratepanel { scroll-margin-top:70px; border-color:var(--gold); }
tr.rowsel td { background:var(--gold-soft) !important; box-shadow:inset 3px 0 0 var(--gold); }

/* projects picker stays wide even when the list is empty or names are short */
.filters label.wide-field { flex:1 1 360px; max-width:520px; }
.filters select.wide-sel { min-width:100%; width:100%; }
@media (max-width:960px) {
  .filters label.wide-field { flex:1 1 100%; max-width:none; }
  .filters select.wide-sel { min-width:0; }
}