/* ============================================================
   AL MUBARAK — shadcn/ui layer
   ------------------------------------------------------------
   Loaded AFTER style.css. Overrides looks only: no class name,
   no markup and no layout structure changes. Delete the single
   <link> tag that pulls this file in to go back to the old skin.

   Follows shadcn/ui (new-york, zinc base) conventions:
     · borders do the work, shadows are almost absent
     · one radius scale (lg 10 / md 8 / sm 6)
     · muted, uppercase table headers on a transparent row
     · 36px controls, 14px text, visible focus rings
   The navy/gold brand colour stays as the `primary` token.
   ============================================================ */

/* ---------- tokens ------------------------------------------------ */
:root {
  --radius-lg:10px; --radius-md:8px; --radius-sm:6px;
  --accent:#f4f4f5; --accent-fg:#18181b;
  --hover:rgba(9,9,11,.035);          /* table row hover */
  --shadow:0 1px 2px 0 rgba(9,9,11,.05);
  --shadow-md:0 4px 12px -2px rgba(9,9,11,.08);
  --shadow-lg:0 16px 40px -8px rgba(9,9,11,.22);
  --ring:rgba(14,42,71,.45);
  --sel-arrow:#71717a;
}
/* re-stated per theme: [data-theme] and :root have equal weight, so the
   last declaration wins — these must come after the ones in style.css. */
[data-theme="sand"]  { --accent:#f3ecdd; --accent-fg:#2a2317; --hover:rgba(42,35,23,.04);
                       --ring:rgba(138,90,0,.45); --sel-arrow:#8a7b5e; }
[data-theme="emerald"] { --accent:#e8f4ec; --accent-fg:#0c1f16; --hover:rgba(12,31,22,.04);
                       --ring:rgba(4,120,87,.45); --sel-arrow:#5f7a6b; }
[data-theme="midnight"] {
  --background:#09090f; --card:#101018; --foreground:#fafafa;
  --muted:#1c1c26; --muted-fg:#a1a1aa; --border:#26262f; --input:#26262f;
  --accent:#1c1c26; --accent-fg:#fafafa; --hover:rgba(250,250,250,.045);
  --shadow:0 1px 2px 0 rgba(0,0,0,.4); --shadow-md:0 4px 12px -2px rgba(0,0,0,.5);
  --shadow-lg:0 16px 40px -8px rgba(0,0,0,.7);
  --ring:rgba(201,162,39,.55); --sel-arrow:#a1a1aa;
}
[data-theme="carbon"] {
  --background:#09090b; --card:#111113; --foreground:#fafafa;
  --muted:#1f1f23; --muted-fg:#a1a1aa; --border:#27272a; --input:#27272a;
  --accent:#1f1f23; --accent-fg:#fafafa; --hover:rgba(250,250,250,.045);
  --shadow:0 1px 2px 0 rgba(0,0,0,.4); --shadow-md:0 4px 12px -2px rgba(0,0,0,.5);
  --shadow-lg:0 16px 40px -8px rgba(0,0,0,.7);
  --ring:rgba(228,181,44,.55); --sel-arrow:#a1a1aa;
}
[data-theme="midnight"], [data-theme="carbon"] { color-scheme:dark; }

/* ---------- base -------------------------------------------------- */
body { font-size:14px; line-height:1.5; letter-spacing:-.006em; }
h1 { font-size:24px; font-weight:600; letter-spacing:-.021em; margin:20px 0 4px; }
h2 { font-size:16px; font-weight:600; letter-spacing:-.012em; }
h3 { font-size:14px; font-weight:600; }
.hint { font-size:13px; color:var(--muted-fg); }
h1 .hint { font-size:13px; font-weight:400; }

/* ---------- top bar ----------------------------------------------- */
.topbar { height:56px; gap:14px; box-shadow:none; border-bottom:1px solid var(--border); }
.brandname { font-weight:600; font-size:14px; }
.logo { border-radius:var(--radius-md); font-size:12px; font-weight:700; padding:5px 8px; }
#mainnav a {
  font-size:13.5px; font-weight:500; padding:7px 11px; border-radius:var(--radius-sm);
  color:var(--muted-fg); transition:color .15s, background .15s;
}
#mainnav a:hover { background:var(--accent); color:var(--accent-fg); }
.role {
  background:transparent; border:1px solid var(--border); color:var(--muted-fg);
  border-radius:var(--radius-sm); font-size:11px; font-weight:500; padding:2px 7px;
}
.uname { font-size:13px; font-weight:500; }
.themesel { border-radius:var(--radius-sm); box-shadow:none; font-size:12px; }
footer { font-size:12px; color:var(--muted-fg); border-top:1px solid var(--border); }

/* ---------- buttons ------------------------------------------------ */
.btn, .btn-sm, button.btn, button.btn-sm {
  min-height:36px; padding:0 16px; font-size:14px; font-weight:500; line-height:1;
  border-radius:var(--radius-md); border:1px solid var(--border);
  background:var(--card); color:var(--foreground); box-shadow:var(--shadow);
  transition:background .15s, border-color .15s, color .15s, opacity .15s;
}
.btn:hover, button.btn:hover { background:var(--accent); color:var(--accent-fg); }
.btn.gold, button.btn.gold {
  background:var(--primary); border-color:var(--primary); color:var(--primary-fg);
}
.btn.gold:hover, button.btn.gold:hover { background:var(--primary-hover); border-color:var(--primary-hover); }
.btn.ghost { background:transparent; border-color:transparent; box-shadow:none; color:var(--muted-fg); }
.btn.ghost:hover { background:var(--accent); color:var(--accent-fg); }
.btn.danger { background:var(--bad); border-color:var(--bad); color:#fff; box-shadow:var(--shadow); }
.btn:active, .btn-sm:active { opacity:.9; }

/* small = shadcn size="sm", kept dense enough for table action cells */
.btn-sm, button.btn-sm, a.btn-sm {
  min-height:28px; padding:0 10px; font-size:12.5px; border-radius:var(--radius-sm);
  box-shadow:none;
}
.btn-sm:hover { background:var(--accent); color:var(--accent-fg); text-decoration:none; }
.btn-sm.gold { background:var(--primary); border-color:var(--primary); color:var(--primary-fg); }

/* ---------- inputs -------------------------------------------------- */
input, select, textarea {
  min-height:36px; padding:7px 11px; font-size:14px; line-height:1.35;
  border:1px solid var(--input); border-radius:var(--radius-md);
  background:var(--card); color:var(--foreground); box-shadow:none;
  transition:border-color .15s, box-shadow .15s;
}
/* phones zoom the page in on anything under 16px */
@media (max-width:768px) { input, select, textarea { font-size:16px; } }
input::placeholder, textarea::placeholder { color:var(--muted-fg); }
input:hover, select:hover, textarea:hover { border-color:var(--muted-fg); }
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--ring);
}
.btn:focus-visible, .btn-sm:focus-visible, button:focus-visible, a.tab:focus-visible {
  outline:none; box-shadow:0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}
input[type="checkbox"] { min-height:0; width:16px; height:16px; border-radius:4px; }
input[type="file"] { padding:6px 10px; border-style:dashed; font-size:13px; box-shadow:none; }
input[readonly] { background:var(--muted); color:var(--muted-fg); border-color:var(--border); }

/* native selects get shadcn's chevron instead of the OS triangle */
select {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center; background-size:15px;
}
[data-theme="midnight"] select, [data-theme="carbon"] select {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
select[multiple], select[size] { background-image:none; padding-right:11px; }
/* .themesel sets the `background` shorthand, which wipes the chevron — put it back */
.themesel {
  background-color:transparent;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 6px center; background-size:13px;
  padding-right:24px; min-height:32px;
}
[data-theme="midnight"] .themesel, [data-theme="carbon"] .themesel {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

label { font-size:13px; font-weight:500; gap:6px; color:var(--foreground); }
.filters { gap:14px; }

/* ---------- cards & panels ------------------------------------------ */
.panel {
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--card); box-shadow:var(--shadow); padding:20px;
}
.panel > strong { font-size:14px; font-weight:600; letter-spacing:-.011em; }
.card {
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--card); box-shadow:var(--shadow); padding:16px 18px;
}
.card .k { font-size:12.5px; font-weight:500; color:var(--muted-fg); letter-spacing:0; }
.card .v { font-size:26px; font-weight:600; letter-spacing:-.025em; margin-top:4px;
           font-variant-numeric:tabular-nums; }
.card.ok, .card.bad, .card.warn { border-left-width:1px; }
.card.ok { box-shadow:inset 3px 0 0 var(--ok), var(--shadow); }
.card.bad { box-shadow:inset 3px 0 0 var(--bad), var(--shadow); }
.card.warn { box-shadow:inset 3px 0 0 var(--warn), var(--shadow); }

/* ---------- tables -------------------------------------------------- */
table { font-size:14px; background:transparent; }
th {
  background:transparent; color:var(--muted-fg);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  padding:10px 12px; border-bottom:1px solid var(--border);
}
td { padding:11px 12px; border-bottom:1px solid var(--border); }
tbody tr:last-child td { border-bottom:0; }
tr:hover td { background:var(--hover); }
[data-theme="midnight"] tr:hover td, [data-theme="carbon"] tr:hover td { background:var(--hover); }
.panel > .tscroll > table { margin-top:2px; }
.grid-entry td, .grid-entry th { padding:6px 7px; }
.grid-entry input { min-height:32px; padding:5px 8px; font-size:13.5px; border-radius:var(--radius-sm); }
@media (max-width:768px) { .grid-entry input { font-size:16px; } }

/* ---------- badges, chips, role pills -------------------------------- */
.badge, .rolebadge, .chip {
  border-radius:var(--radius-sm); font-size:11.5px; font-weight:500;
  padding:3px 9px; letter-spacing:0; border:1px solid var(--border);
}
.rolebadge { font-weight:600; text-transform:capitalize; }
.chip { background:var(--muted); color:var(--muted-fg); }
.navbadge { border-radius:var(--radius-sm); font-size:10.5px; font-weight:600; padding:1px 6px; }

/* period chips = shadcn toggle group, outline variant */
.pchip {
  border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--card);
  box-shadow:none; font-size:12.5px; font-weight:500; padding:5px 11px;
}
.pchip:hover { background:var(--accent); color:var(--accent-fg); }
.pchip.active { background:var(--primary); border-color:var(--primary); color:var(--primary-fg); }

/* ---------- tabs ----------------------------------------------------- */
.tabs {
  background:var(--muted); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:4px; gap:4px;
}
.tab {
  border-radius:var(--radius-sm); font-size:13px; font-weight:500;
  padding:6px 13px; color:var(--muted-fg);
}
.tab.active { background:var(--card); color:var(--foreground); box-shadow:var(--shadow); }

/* the Users / Vendor page tab row is a plain flex list, so its items get the
   outline-toggle treatment rather than the segmented-control one */
.utabs { gap:6px; margin-bottom:12px; }
.utabs .tab {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:6px 12px; box-shadow:none; color:var(--muted-fg);
}
.utabs .tab:hover { background:var(--accent); color:var(--accent-fg); }
.utabs .tab.active {
  background:var(--primary); border-color:var(--primary); color:var(--primary-fg); box-shadow:none;
}
.tabnum { font-size:11px; font-weight:600; opacity:.7; margin-left:6px; font-variant-numeric:tabular-nums; }

/* ---------- flash / alerts -------------------------------------------- */
.flash {
  border-radius:var(--radius-md); padding:12px 15px; font-size:13.5px; font-weight:450;
  border:1px solid var(--border); background:var(--card); color:var(--foreground);
}
/* only the border carries the state colour — the text keeps style.css's darker,
   higher-contrast ink so it stays readable on the soft background */
.flash.ok   { border-color:var(--ok);   background:var(--ok-soft); }
.flash.err  { border-color:var(--bad);  background:var(--bad-soft); }
.flash.warn { border-color:var(--warn); background:var(--warn-soft); }

/* ---------- dialog ----------------------------------------------------- */
dialog.mdlg { border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
dialog.mdlg::backdrop { background:rgba(9,9,11,.55); backdrop-filter:blur(3px); }
.mdlg-head { padding:20px 22px 14px; border-bottom:0; font-size:16px; font-weight:600; letter-spacing:-.012em; }
.mdlg-body { padding:2px 22px 8px; gap:14px; }
.mdlg-foot {
  padding:16px 22px 20px; border-top:0; background:transparent; gap:10px; border-radius:0;
}
.mdlg-x { border-radius:var(--radius-sm); }

/* ---------- page head, search ------------------------------------------ */
.pagehead { margin:20px 0 14px; align-items:flex-start; }
.pagehead h1 { margin:0; }
.usearch input { min-width:230px; }

/* ---------- login screens ----------------------------------------------- */
.login-box {
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:28px 26px;
  border:1px solid var(--border);
}
.login-company { font-size:18px; font-weight:600; letter-spacing:-.015em; }
.login-box .btn { width:100%; min-height:40px; }
.pindots i { width:13px; height:13px; border:1px solid var(--border); background:var(--muted); }
.pindots i.on { background:var(--primary); border-color:var(--primary); }
.pinpad button {
  border-radius:var(--radius-md); border:1px solid var(--border); background:var(--card);
  box-shadow:none; font-size:24px; font-weight:600; min-height:58px;
}
.pinpad button:active { background:var(--accent); }
.pinpad .pgo { background:var(--primary); border-color:var(--primary); color:var(--primary-fg); }

/* ---------- driver screen ------------------------------------------------ */
.drv-head { border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.drv-truck { font-size:19px; font-weight:600; letter-spacing:-.02em; }
.drv-sel { border-radius:var(--radius-md); font-size:17px; min-height:52px; }
.drv-btn {
  border-radius:var(--radius-lg); box-shadow:none; font-size:19px; font-weight:600;
  letter-spacing:-.01em; padding:19px; border:1px solid transparent;
}
.drv-btn.go { background:var(--ok); border-color:var(--ok); color:#fff; }
.drv-btn.stop { background:var(--bad); border-color:var(--bad); color:#fff; }
.drv-btn.photo { background:var(--primary); border-color:var(--primary); color:var(--primary-fg); }
.drv-open { border-radius:var(--radius-lg); }

/* ---------- dashboard: flatten the gradient stat cards -------------------- */
.ringcard {
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  background:var(--card); border:1px solid var(--border); padding:16px 18px;
}
.ringcard::before { width:3px; border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
.ringcard::after { display:none; }               /* the big tinted circle reads as noise */
.t-gold, .t-red, .t-green, .t-blue, .t-orange { background:var(--card); border-color:var(--border); }
[data-theme="midnight"] .t-gold, [data-theme="carbon"] .t-gold,
[data-theme="midnight"] .t-red, [data-theme="carbon"] .t-red,
[data-theme="midnight"] .t-green, [data-theme="carbon"] .t-green,
[data-theme="midnight"] .t-blue, [data-theme="carbon"] .t-blue,
[data-theme="midnight"] .t-orange, [data-theme="carbon"] .t-orange { background:var(--card); }
.ringcard .rk { font-size:11px; font-weight:600; letter-spacing:.05em; opacity:1; color:var(--muted-fg); }
.ringcard .rv { font-size:24px; font-weight:600; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.ringcard .rs { font-size:11.5px; color:var(--muted-fg); }
.pnl::before { height:2px; opacity:.9; }

/* report cards */
.repcard { border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:15px 16px; }
.repcard:hover { transform:none; border-color:var(--muted-fg); background:var(--card); }
.repico { border-radius:var(--radius-md); background:var(--muted); color:var(--muted-fg); border:1px solid var(--border); }
.repcard:hover .repico { background:var(--accent); color:var(--foreground); }

/* verify queue */
.vphoto img, .vnophoto { border-radius:var(--radius-lg); }
.gps-step { border-radius:var(--radius-lg); background:var(--card); border-style:solid; }

/* numbers line up in every money / quantity column */
td.num, th.num, .money { font-variant-numeric:tabular-nums; }

/* ---------- responsive touch-ups ------------------------------------------ */
@media (max-width:960px) {
  h1 { font-size:20px; }
  .panel { padding:15px; border-radius:var(--radius-lg); }
  table { font-size:13px; }
  td { padding:9px 10px; }
  th { padding:8px 10px; }
  .btn, button.btn { min-height:38px; }            /* thumb-sized on phones */
  .usertable tr { border-radius:var(--radius-lg); box-shadow:none; padding:12px 14px;
    content-visibility:auto; contain-intrinsic-size:auto 168px; }
  .usertable td::before { font-size:11px; letter-spacing:.05em; color:var(--muted-fg); }
}
@media print {
  .panel, .card { border:0; box-shadow:none; }
  th { background:transparent; color:#000; border-bottom:1px solid #000; }
  td { border-bottom:1px solid #ddd; }
}

/* ============================================================
   v2 — app shell: drawer nav, bottom tab bar, card tables
   ============================================================ */

/* ---------- desktop: drawer is invisible plumbing ---------- */
.navdrawer { display:contents; }          /* nav + userbox stay top-bar children */
.drawer-head, .navscrim, .tabbar { display:none; }

/* ---------- phone / tablet app shell ---------- */
@media (max-width:960px) {
  /* NB: style.css already sets html,body{overflow-x:hidden} at this breakpoint.
     No overscroll-behavior on the root — it makes Chrome Android's scroll feel
     sticky at the ends. It belongs on the drawer only. */
  body { -webkit-text-size-adjust:100%; }

  /* top bar: brand on the left, burger hard right — nothing floating mid-bar */
  .topbar { gap:10px; padding:0 12px; padding-top:env(safe-area-inset-top); z-index:60; }
  .brand { flex:1 1 auto; min-width:0; }
  .brandname { max-width:none; font-size:14px; }
  .burger {
    order:-1; margin-left:0; margin-right:2px; flex:none; padding:9px 7px;
    border-radius:var(--radius-md); -webkit-tap-highlight-color:transparent;
  }
  .burger:active { background:var(--accent); }

  /* the drawer itself — slides in from the right, over a scrim */
  .navdrawer {
    display:flex; flex-direction:column; gap:0;
    position:fixed; top:0; left:0; bottom:0; z-index:60;
    width:min(84vw, 330px); background:var(--card);
    border-right:1px solid var(--border); box-shadow:var(--shadow-lg);
    transform:translateX(-101%); visibility:hidden;
    transition:transform .24s cubic-bezier(.32,.72,0,1), visibility 0s linear .24s;
    padding:env(safe-area-inset-top) 0 calc(14px + env(safe-area-inset-bottom));
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  #navchk:checked ~ .navdrawer {
    transform:translateX(0); visibility:visible;
    transition:transform .24s cubic-bezier(.32,.72,0,1), visibility 0s;
  }

  .navscrim {
    position:fixed; inset:0; z-index:55; background:rgba(9,9,11,.5);
    -webkit-tap-highlight-color:transparent;
  }
  #navchk:checked ~ .navscrim { display:block; animation:scrim-in .2s ease both; }
  @keyframes scrim-in { from { opacity:0; } to { opacity:1; } }
  body:has(#navchk:checked) { overflow:hidden; }

  .drawer-head {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:16px 16px 12px; border-bottom:1px solid var(--border); min-height:56px;
  }
  .drawer-who { display:flex; flex-direction:column; gap:2px; min-width:0; }
  .drawer-who strong { font-size:15px; font-weight:600; letter-spacing:-.01em;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .drawer-who small { font-size:11.5px; color:var(--muted-fg); text-transform:capitalize; }
  .drawer-x {
    flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    border-radius:var(--radius-md); color:var(--muted-fg); font-size:15px; cursor:pointer;
    border:1px solid var(--border); -webkit-tap-highlight-color:transparent;
  }
  .drawer-x:active { background:var(--accent); }

  /* override style.css's old fixed dropdown treatment */
  #mainnav {
    display:flex; position:static; flex-direction:column; gap:2px;
    padding:10px; background:transparent; border:0; box-shadow:none;
    max-height:none; overflow:visible; flex:1 1 auto;
  }
  #mainnav a {
    display:flex; align-items:center; min-height:46px; padding:0 12px;
    font-size:15px; font-weight:500; border-radius:var(--radius-md); color:var(--foreground);
  }
  #mainnav a:active { background:var(--accent); }

  .userbox {
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
    padding:12px 14px 4px; border-top:1px solid var(--border); margin-top:auto;
  }
  .userbox .role { display:inline-flex; }
  .userbox .uname { display:none; }        /* already shown in the drawer head */
  .userbox .themesel { flex:1 1 120px; max-width:none; min-height:38px; font-size:13px; }
  .userbox .btn { flex:1 1 100%; min-height:40px; font-size:14px; padding:0 14px; justify-content:center; }

  /* ---------- bottom tab bar ---------- */
  .tabbar {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--card); border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -1px 0 0 rgba(9,9,11,.02);
  }
  .tabitem {
    flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 2px; border-radius:var(--radius-md); cursor:pointer;
    color:var(--muted-fg); font-size:10.5px; font-weight:500; letter-spacing:-.01em;
    text-decoration:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  }
  .tabitem svg { width:21px; height:21px; }
  .tabitem span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
  .tabitem:active { background:var(--accent); }
  .tabitem.on { color:var(--primary); }
  .tabitem.on svg { stroke-width:2.1; }
  [data-theme="midnight"] .tabitem.on, [data-theme="carbon"] .tabitem.on { color:var(--gold); }
  .has-tabbar footer { margin-bottom:calc(62px + env(safe-area-inset-bottom)); }
}

/* ---------- phones: data tables become cards ---------- */
@media (max-width:820px) {
  table.cardable, table.cardable tbody, table.cardable tr, table.cardable td { display:block; width:100%; }
  table.cardable thead { display:none; }
  table.cardable { border-spacing:0; }
  table.cardable tr {
    border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--card);
    margin-bottom:10px; padding:10px 13px;
    /* no box-shadow: a list can be 500 rows long and shadows are the single
       most expensive thing to repaint while scrolling on Android */
    content-visibility:auto; contain-intrinsic-size:auto 168px;
  }
  table.cardable tr:hover td, table.cardable td { background:transparent; }
  table.cardable td {
    border:0; padding:5px 0; display:flex; align-items:center; gap:10px;
    font-size:13.5px; min-height:26px;
  }
  table.cardable td + td { border-top:1px dashed var(--border); }
  table.cardable td::before {
    content:attr(data-l); flex:0 0 40%; max-width:150px;
    color:var(--muted-fg); font-size:10.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.05em; line-height:1.3;
  }
  table.cardable td:empty { display:none; }
  table.cardable td > * { min-width:0; }
  table.cardable input, table.cardable select { width:100%; max-width:210px; }
  /* the tail cell of a row is usually the actions — let it breathe */
  table.cardable td:last-child { flex-wrap:wrap; gap:6px; padding-top:9px; }
  .tscroll:has(table.cardable) { overflow-x:visible; }
}

/* ---------- polish pass ---------- */
.btn:active, .btn-sm:active, .pchip:active, .utabs .tab:active { transform:scale(.985); }
.btn, .btn-sm, .pchip, .utabs .tab, .tab, .card, .panel, .repcard {
  -webkit-tap-highlight-color:transparent;
}
.panel + .panel { margin-top:14px; }
.pagehead + .utabs { margin-top:-2px; }
.tscroll { scrollbar-width:thin; overscroll-behavior-x:contain; }
.tscroll::-webkit-scrollbar { height:8px; }
.tscroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:999px; }
.tscroll::-webkit-scrollbar-track { background:transparent; }
/* empty-state rows read as a quiet note, not a broken table */
td[colspan] { color:var(--muted-fg); }
::selection { background:var(--ring); color:var(--foreground); }
@media (prefers-reduced-motion:reduce) {
  * { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* Touch screens have no pointer to hover with, so :hover latches after a tap and
   the browser repaints that row/control until you tap elsewhere — which reads as
   scroll stutter. Neutralise the hover-only styling where there is no hover. */
@media (hover:none) {
  tr:hover td { background:transparent; }
  table.cardable tr:hover td { background:transparent; }
  input:hover, select:hover, textarea:hover { border-color:var(--input); }
  .btn:hover, button.btn:hover { background:var(--card); color:var(--foreground); }
  .btn.gold:hover, button.btn.gold:hover { background:var(--primary); border-color:var(--primary); }
  .btn.ghost:hover { background:transparent; color:var(--muted-fg); }
  .btn-sm:hover { background:var(--card); color:var(--foreground); }
  .pchip:hover { background:var(--card); color:var(--muted-fg); }
  .utabs .tab:hover { background:var(--card); color:var(--muted-fg); }
  .utabs .tab.active:hover { background:var(--primary); color:var(--primary-fg); }
  #mainnav a:hover { background:transparent; }
  .repcard:hover { border-color:var(--border); }
}

/* ---------- company logo in the top bar / drawer ----------
   Uploaded in Masters → Branding; falls back to the "AM" badge when none is set.
   Square-cropped into a rounded tile so any aspect ratio sits neatly in the bar. */
.logoimg {
  flex:none; width:32px; height:32px; object-fit:cover; object-position:center;
  border-radius:var(--radius-md); border:1px solid var(--border); background:#fff;
  display:block;
}
.brand { display:flex; align-items:center; gap:10px; }
.drawer-head .logoimg { width:36px; height:36px; }
[data-theme="midnight"] .logoimg, [data-theme="carbon"] .logoimg { border-color:var(--border); }
@media (max-width:960px) {
  .logoimg { width:30px; height:30px; }
  .brand { gap:9px; }
  .drawer-head { gap:11px; }
  .drawer-head .drawer-who { flex:1 1 auto; }
}
@media print { .logoimg { border:0; } }