/* AiO admin panel. Plain CSS, no build step — the whole panel is three static
   files served by the API container, so deploying it is deploying the server.

   The tokens below are the customer app's, copied value for value from
   app/lib/src/theme/app_theme.dart. A restaurant owner who uses the app and
   then opens the portal should not feel handed to a different company, so
   nothing here invents a colour, a radius or a typeface of its own. */

:root {
  /* palette — AppColors */
  --primary: #02261a;
  --primary-container: #1a3c2f;
  --on-primary: #ffffff;
  --on-primary-container: #83a796;
  --primary-fixed: #c5ebd8;
  --primary-fixed-dim: #aacfbd;

  --secondary-container: #e1e0d9;
  --on-secondary-container: #63635e;

  --tertiary-container: #552b00;
  --tertiary-fixed: #ffdcc3;
  --tertiary-fixed-dim: #ffb77d;

  --bg: #fbf9f8;
  --card: #ffffff;
  --surface-low: #f5f3f3;
  --surface: #efeded;
  --surface-high: #eae8e7;

  --ink: #1b1c1c;
  --on-surface-variant: #414844;
  --muted: #717974;
  --line: #c1c8c3;

  --danger: #ba1a1a;
  --danger-bg: #ffdad6;
  --on-danger: #93000a;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --radius: 12px;
  --r-xl: 24px;

  --display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* The app draws its cards with a hairline outline rather than a shadow.
     Kept for the two surfaces that genuinely float above the page. */
  --shadow: 0 1px 2px rgba(2, 38, 26, .06), 0 12px 32px rgba(2, 38, 26, .08);
}

* { box-sizing: border-box; }

/* ---------- keeping the page inside the phone ----------

   This panel has been made too wide for a phone twice, both times the same
   mechanism, so the rule is written down here rather than rediscovered a third
   time.

   A grid or flex track sized `1fr` or `auto` will NOT shrink below the
   min-content width of what is inside it. So one wide child — a table with a
   min-width, a row of seven filter buttons, a long unbroken string — silently
   widens its container, then its container's container, and finally the
   document. The phone renders the whole page zoomed out to fit. Zooming in
   looks like it fixes it; reloading brings it back, because the page really is
   that wide.

   The rule: anything that can hold wide content needs `min-width: 0`, and
   anything that is a *row of items* must either wrap or scroll on its own.

   Deliberately NOT `body { overflow-x: hidden }`. That hides this bug rather
   than fixing it, and hides the next one too — content just disappears off the
   right edge where nobody sees it. */
.app,
.view,
.panel,
.card,
.filters,
.view-head,
.modal-card { min-width: 0; }

/* Nothing may be wider than its box, whatever it is. */
img, video, canvas, svg, table { max-width: 100%; }

/* A pasted URL or an unspaced string is a single unbreakable word as far as
   layout is concerned, and one of those in a customer's delivery note would
   push the page open the same way.

   `break-word`, NOT `anywhere`. They look identical until you notice that
   `anywhere` also counts toward min-content width — which told the table it
   could shrink to nothing, and produced a header reading "SEC TIO N" over a
   price reading "Rs. 30 0". `break-word` only breaks a word that genuinely
   cannot fit, and leaves column sizing alone. */
td, .empty, .notice, .r-address { overflow-wrap: break-word; }

/* Headings never break mid-word. There is no heading long enough to justify it
   and every one of them is a label people scan rather than read. */
th { white-space: nowrap; }

body {
  margin: 0;
  font: 400 15px/1.55 var(--body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: 0; }
h1 { font-size: 30px; line-height: 1.2; }
h2 { font-size: 21px; line-height: 1.3; }
h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.muted { color: var(--muted); }
.error { color: var(--danger); }
[hidden] { display: none !important; }

img { max-width: 100%; }

/* The wordmark, in place of typing the company name in whatever font the page
   happens to use. `.wordmark--light` is the version for dark green surfaces. */
.wordmark { height: 30px; width: auto; display: block; }
.sidebar .wordmark { height: 26px; }

/* ---------- login ---------- */

.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 380px; background: var(--card);
  border: 1px solid rgba(193, 200, 195, .6);
  border-radius: var(--r-xl); box-shadow: var(--shadow);
  padding: 32px; display: grid; gap: 16px;
}
.login-card h1 { font-size: 27px; }
.login-card p { margin: 0; font-size: 14px; }
.login-head { display: grid; gap: 18px; }

label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }

input, select, textarea {
  font: 400 15px/1.5 var(--body); padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: var(--ink); width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: inset 0 0 0 .5px var(--primary);
}
textarea { min-height: 84px; resize: vertical; }

/* A button's label never wraps. Five buttons in a dialog footer on a narrow
   window turned "Food is ready" into three stacked words in a tall box; the row
   should wrap instead, which .modal-foot already does. */
button {
  font: 600 14px/1.4 var(--body); letter-spacing: .02em; cursor: pointer;
  white-space: nowrap;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--card); color: var(--ink); padding: 10px 16px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
button:hover { background: var(--surface-low); border-color: var(--muted); }
button.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); padding: 12px 22px; }
button.primary:hover { background: var(--primary-container); border-color: var(--primary-container); }
button.danger { color: var(--danger); border-color: #eec9c6; background: var(--card); }
button.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
button.link { border: 0; background: none; padding: 0; color: var(--muted); text-decoration: underline; font-weight: 500; }
button.link:hover { background: none; color: var(--ink); }
button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- shell ---------- */

/* minmax(0, 1fr), not 1fr.
   A bare 1fr is minmax(auto, 1fr), and `auto` refuses to shrink below the
   content's min-content width. One wide table — .table-scroll > table carries
   min-width: 520px — therefore pushes the whole column past the viewport, and
   the overflow-x on the scroll container never gets a chance because its parent
   grew instead of it scrolling. On a phone that is the entire page rendered too
   wide: zoom out and it fits, reload and it is back. */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }

/* Dark green, like the surface the app opens on. It also does the work a
   border used to: the content column reads as a separate plane without one. */
.sidebar {
  background: var(--primary); color: var(--on-primary);
  padding: 22px 14px; display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 9px; padding: 0 8px; }
.brand span {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--primary-fixed); border: 1px solid rgba(197, 235, 216, .35);
  border-radius: 999px; padding: 2px 8px;
}
#nav { display: grid; gap: 2px; }
#nav a {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--r-md);
  color: rgba(255, 255, 255, .82); text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
}
#nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
#nav a.active { background: var(--primary-fixed); color: var(--primary); font-weight: 600; }
#nav .group {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--on-primary-container); padding: 16px 12px 4px; font-weight: 600;
}
.sidebar-foot {
  margin-top: auto; display: grid; gap: 6px; font-size: 12px; padding: 14px 8px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.sidebar-foot .muted { color: var(--on-primary-container); }
.sidebar-foot button.link { color: var(--primary-fixed-dim); }
.sidebar-foot button.link:hover { color: #fff; }

/* Centred, and allowed to use the width it is given. It used to be pinned to
   the left edge at 1200px, which on a wide monitor left the page looking like
   it had failed to load the right-hand half. */
.view { padding: 32px 32px 72px; max-width: 1440px; margin: 0 auto; width: 100%; min-width: 0; }
.view-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.view-head h1 { margin-right: auto; }

/* ---------- cards & tables ---------- */

.card {
  background: var(--card); border: 1px solid rgba(193, 200, 195, .6);
  border-radius: var(--radius); padding: 18px;
}
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 24px; }
.kpi .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.kpi .value { font-family: var(--display); font-size: 30px; font-weight: 400; margin-top: 6px; letter-spacing: 0; }
.kpi .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.panel {
  background: var(--card); border: 1px solid rgba(193, 200, 195, .6);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 24px;
}
.panel-head { padding: 16px 20px; border-bottom: 1px solid rgba(193, 200, 195, .6); display: flex; align-items: center; gap: 12px; }
.panel-head h2 { margin-right: auto; }

/* .panel clips to keep its rounded corners, which would cut a wide table off
   rather than let it scroll. Tables get their own scroll container so a narrow
   screen scrolls the table instead of the page. */
.table-scroll { overflow-x: auto; }
.table-scroll > table { min-width: 520px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 20px; border-bottom: 1px solid rgba(193, 200, 195, .5); font-size: 14px; vertical-align: middle; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable:hover { background: var(--surface-low); cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .thumb { width: 40px; height: 40px; border-radius: var(--r-md); object-fit: cover; background: var(--surface); display: block; }
.empty { padding: 44px 20px; text-align: center; color: var(--muted); }

/* Heads each per-currency revenue chart when a range spans both countries. */
.chart-currency { font-weight: 600; color: var(--on-surface-variant); margin: 4px 0 2px; }

.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.row-actions button { padding: 6px 12px; font-size: 13px; }

/* ---------- status pills ---------- */

/* One vocabulary for every state in the product. These are the same three
   pairs the apps use in statusPalette(): settled green, waiting amber,
   refused red — plus a grey for states that are simply over. */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.pill.placed,
.pill.pending { background: var(--tertiary-fixed); color: var(--tertiary-container); }
.pill.preparing { background: var(--secondary-container); color: var(--on-secondary-container); }
.pill.on_the_way,
.pill.approved,
.pill.yes { background: var(--primary-fixed); color: var(--primary-container); }
.pill.delivered,
.pill.no { background: var(--surface-high); color: var(--on-surface-variant); }
.pill.cancelled,
.pill.rejected,
.pill.suspended { background: var(--danger-bg); color: var(--on-danger); }

/* ---------- review queue ---------- */

#nav .badge {
  margin-left: auto; background: var(--tertiary-fixed-dim); color: var(--tertiary-container);
  font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
#nav a.active .badge { background: var(--primary); color: var(--primary-fixed); }

.review-list { display: grid; }
.review-card { padding: 20px; border-bottom: 1px solid rgba(193, 200, 195, .6); display: grid; gap: 12px; }
.review-card:last-child { border-bottom: 0; }
.review-head { display: flex; gap: 12px; align-items: center; }
.review-head h3 { font-size: 16px; }
.thumb.lg { width: 64px; height: 64px; }
.review-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.review-actions input { flex: 1; min-width: 160px; }

/* Old value against new, so a reviewer sees the change and not a field list. */
.diff { width: auto; }
.diff td { border: 0; padding: 4px 12px 4px 0; vertical-align: middle; font-size: 14px; }
.diff .arrow { color: var(--muted); padding: 0 4px; }

.notice { border-radius: var(--radius); padding: 18px 20px; margin-bottom: 22px; border: 1px solid; }
.notice p { margin: 6px 0 0; font-size: 14px; }
.notice.pending { background: #fff6ec; border-color: var(--tertiary-fixed); color: var(--tertiary-container); }
.notice.rejected { background: #fff3f1; border-color: var(--danger-bg); color: var(--on-danger); }

.checkbox.big { font-size: 16px; margin: 8px 0 4px; }
.small { font-size: 12px; }
.ok { color: var(--primary-container); font-size: 14px; }

/* ---------- signed-out screens ---------- */

.login-card form { display: grid; gap: 16px; }
.login-card > h1 { margin-bottom: 4px; }
.login-alt { margin: 16px 0 0; font-size: 14px; text-align: center; color: var(--muted); }
.store-links { display: grid; gap: 8px; margin: 18px 0 10px; }
.store {
  display: block; text-align: center; padding: 14px; border-radius: var(--radius);
  background: var(--primary); color: var(--on-primary); text-decoration: none;
  font-weight: 600; font-size: 14px; letter-spacing: .02em;
}
.store:hover { background: var(--primary-container); }

/* ---------- accepting an order ---------- */

/* Big targets on purpose. This is tapped on a tablet, with one hand, by someone
   holding a pan in the other. */
.prep-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.prep-choice { padding: 18px 8px; font-size: 16px; font-weight: 600; }
.prep-choice:hover {
  background: var(--primary-fixed); border-color: var(--primary-fixed-dim); color: var(--primary);
}

@media (max-width: 420px) {
  .prep-choices { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- filters ---------- */

.filters { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 18px; }
.filters label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.filters input, .filters select { width: auto; min-width: 150px; padding: 9px 12px; }

/* A row of filters is a strip that scrolls, not a row that stretches the page.
   Seven buttons come to 622px, and on a 390px phone a flex row with no wrap and
   no scroll simply made the whole document 622px wide — the same failure as the
   wide table, in a different element. See "keeping the page inside the phone". */
.tabs {
  display: flex; gap: 6px; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
/* Chips keep their own size; the strip scrolls past them. Without this they
   would squash into unreadable slivers instead. */
.tabs button { flex: 0 0 auto; white-space: nowrap; }
.tabs button.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* ---------- chart ---------- */

.chart { width: 100%; height: 180px; display: block; }
.chart .bar { fill: var(--primary-fixed-dim); }
.chart .bar:hover { fill: var(--primary); }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart text { font-size: 10px; fill: var(--muted); font-family: var(--body); }

/* ---------- modal ---------- */

.modal { position: fixed; inset: 0; background: rgba(2, 38, 26, .45); display: grid; place-items: center; padding: 24px; z-index: 20; overflow: auto; }
.modal-card { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--shadow); width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; }
.modal-head { padding: 20px 24px; border-bottom: 1px solid rgba(193, 200, 195, .6); display: flex; align-items: center; }
.modal-head h2 { margin-right: auto; }
.modal-body { padding: 24px; display: grid; gap: 16px; }
.modal-foot {
  padding: 16px 24px; border-top: 1px solid rgba(193, 200, 195, .6);
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  position: sticky; bottom: 0; background: var(--card);
}
/* The hint sitting beside the buttons takes a whole row of its own once they
   wrap, rather than squeezing them into three-line boxes. */
.modal-foot .muted { flex: 1 1 100%; margin: 0 0 4px; }
.field-help { font-weight: 400; color: var(--muted); font-size: 12px; }
.checkbox { display: flex; gap: 9px; align-items: center; font-size: 14px; color: var(--ink); font-weight: 600; }
.checkbox input { width: auto; accent-color: var(--primary); }

.image-field { display: grid; gap: 8px; }
.image-field .preview { width: 96px; height: 96px; border-radius: var(--radius); object-fit: cover; background: var(--surface); border: 1px solid var(--line); }
.image-field .controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- order detail ---------- */

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 14px; }
.detail-grid dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.detail-grid dd { margin: 0 0 12px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: var(--on-primary); padding: 13px 20px;
  border-radius: var(--radius); font-size: 14px; font-weight: 500;
  z-index: 40; box-shadow: var(--shadow); max-width: 80vw;
}
.toast.bad { background: var(--danger); }

/* On a phone the sidebar used to become a full-width dark block with every nav
   item stacked down it, so the first screenful of the app was a menu and you
   had to scroll past it to reach the thing you opened. It becomes a bar: brand
   on one line, nav scrolling sideways under it, content immediately below. */
@media (max-width: 780px) {
  /* auto for the bar, 1fr for the content. Without explicit rows the grid
     shares min-height: 100vh between them, so on a short page the nav bar
     stretched to a third of the screen and left a slab of dark green above the
     content. */
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .sidebar {
    position: sticky; top: 0; z-index: 10; height: auto;
    padding: 12px 12px 0; gap: 10px;
  }
  .brand { padding: 0; }
  .sidebar .wordmark { height: 22px; }

  #nav {
    display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  #nav::-webkit-scrollbar { display: none; }
  #nav a { white-space: nowrap; padding: 8px 14px; border-radius: 999px; }
  #nav a:not(.active) { background: rgba(255, 255, 255, .08); }
  /* Group headings are a sidebar idea; in a scrolling strip they are just
     unreachable text taking up room. */
  #nav .group { display: none; }

  /* The footer moves into the brand row so it does not sit under the nav. */
  .sidebar-foot {
    position: absolute; top: 12px; right: 12px; margin: 0; padding: 0;
    border: 0; text-align: right;
  }
  .sidebar-foot .muted { display: none; }

  .view { padding: 18px 14px 56px; }
  .view-head { gap: 10px; margin-bottom: 16px; }
  .detail-grid { grid-template-columns: 1fr; }
  h1 { font-size: 25px; }

  .cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi .value { font-size: 24px; }

  /* Tables become cards.
     A row of a table is a record, and a phone shows a record as a stack of
     labelled lines — not as seven columns of 45px each. The labels come from
     the column headings, copied onto the cells by scrollable() in app.js. */
  .table-scroll { overflow-x: visible; }
  .table-scroll > table { min-width: 0; }

  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }

  tbody tr {
    border: 1px solid rgba(193, 200, 195, .6);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  tbody tr:last-child { margin-bottom: 0; }
  tbody tr.clickable:hover { background: var(--card); }

  tbody td {
    border: 0;
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    text-align: right;
  }
  /* The column heading, printed beside its value. */
  tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--muted);
  }
  /* An unlabelled cell is an action column, and gets the full width. */
  tbody td:not([data-label]) { justify-content: flex-end; padding-top: 8px; }
  td.num, th.num { text-align: right; }
  td .thumb { width: 44px; height: 44px; }
  .row-actions { justify-content: flex-end; }

  /* Full-height sheets rather than a card floating in the middle of a phone. */
  .modal { padding: 0; align-items: end; }
  .modal-card { max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot button { flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .cards { grid-template-columns: 1fr; }
}

/* ---------- restaurant dashboard ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--surface-low); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; font-size: 13px;
}

/* Orders by hour. All 24 are drawn, so a quiet stretch reads as quiet rather
   than as missing. */
.hours { display: flex; align-items: end; gap: 3px; height: 130px; }
.hours__slot { flex: 1; display: flex; flex-direction: column; height: 100%; }
.hours__track { flex: 1; display: flex; align-items: end; }
.hours__bar {
  width: 100%; background: var(--primary-fixed-dim);
  border-radius: 3px 3px 0 0; min-height: 2px;
}
.hours__bar:hover { background: var(--primary); }
.hours__label {
  text-align: center; font-size: 10px; color: var(--muted);
  height: 14px; line-height: 14px;
}

/* ---------- the printed docket ---------- */

/* Hidden on screen; the print rules below make it the only thing on the page. */
.receipt { display: none; }

@media print {
  /* Everything that is not the docket goes, including the sidebar and any open
     dialog — printing from a modal should produce a receipt, not a screenshot
     of the app. */
  body > *:not(.receipt) { display: none !important; }

  @page { margin: 4mm; }

  body { background: #fff; }

  .receipt {
    display: block;
    width: 72mm;
    margin: 0;
    color: #000;
    font: 400 11pt/1.45 "Courier New", ui-monospace, monospace;
  }
  .receipt .r-head { text-align: center; margin-bottom: 8px; }
  .receipt h1 { font: 700 18pt/1 "Courier New", monospace; margin: 0 0 2px; }
  .receipt .r-order { font-weight: 700; font-size: 13pt; }

  .receipt .r-block,
  .receipt .r-items {
    border-top: 1px dashed #000; padding: 6px 0; margin: 0;
  }
  .receipt .r-line { display: flex; justify-content: space-between; gap: 8px; }
  .receipt .r-address { margin-top: 4px; }
  .receipt .r-note { margin-top: 4px; font-weight: 700; }
  .receipt .r-total {
    display: flex; justify-content: space-between;
    font-weight: 700; font-size: 13pt; margin-top: 6px;
    border-top: 1px solid #000; padding-top: 4px;
  }
  .receipt .r-pay {
    text-align: center; font-weight: 700; margin: 8px 0;
    border: 2px solid #000; padding: 6px 4px;
  }
  .receipt .r-foot { text-align: center; font-size: 9pt; margin-top: 6px; }
}

/* ---------- driver applications ---------- */

.section-head {
  margin: 1.75rem 0 0.6rem;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}

.findings { margin: 0.5rem 0 0; padding-left: 1.1rem; list-style: disc; font-size: 14px; }
.findings li { margin-top: 0.25rem; }

.vehicle-card {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.9rem 1.1rem; border: 1px solid rgba(193, 200, 195, .6);
  border-radius: var(--radius); margin-bottom: 0.5rem;
}

.doc-list, .mode-list { display: grid; gap: 0.6rem; }

.doc-row, .mode-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; padding: 0.85rem 1.1rem;
  border: 1px solid rgba(193, 200, 195, .6); border-radius: var(--radius);
}

.doc-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.doc-actions input { min-width: 150px; flex: 1; }
.doc-row .pill, .mode-row .pill { margin-left: 0.5rem; }