/* ITER Delivery — one stylesheet for both surfaces.
   Layout is mobile-first in spirit but written desktop-first to keep the
   original look byte-for-byte; every change for small screens lives in the
   RESPONSIVE block at the bottom of this file. */

/* ---------- tokens ---------- */
:root {
  --bg:#f6f7f9; --card:#fff; --ink:#1c2333; --mut:#7a8494; --line:#e3e7ee;
  --brand:#2f6fed; --danger:#b3383c;
  --radius:10px;
}

/* ---------- reset ---------- */
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
img, svg { max-width:100%; height:auto; }

body {
  background:var(--bg); color:var(--ink);
  font:15px/1.55 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow-wrap:break-word;
}

/* ---------- header ---------- */
header {
  background:var(--card); border-bottom:1px solid var(--line);
  padding:12px 24px; display:flex; align-items:center; gap:12px 16px;
  /* wrap, never overflow: ops has 7 nav links, which need ~850px on one
     line — between the burger breakpoint and that width they go to a
     second row instead of pushing the page sideways. */
  flex-wrap:wrap;
}
header .brand { font-weight:700; color:var(--brand); white-space:nowrap; }
header nav { display:flex; gap:16px; margin-left:16px; flex-wrap:wrap; }
header nav a { color:var(--mut); text-decoration:none; white-space:nowrap; }
header nav a.on { color:var(--ink); font-weight:600; }
header .spacer { flex:1; }
header .who { color:var(--mut); font-size:13px; }
header .who a { color:var(--brand); text-decoration:none; }
/* the sign-out form must not inherit the generic card-form chrome */
header form.logout { display:inline-flex; padding:0; margin:0; border:0; background:none; width:auto; }
header form.logout button { margin:0; padding:7px 13px; font-size:13.5px; white-space:nowrap; }

/* mobile menu: a hidden checkbox + a label, so it needs no JS and cannot be
   reset by an htmx/SSE swap the way a scripted toggle could. */
.nav-toggle { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.nav-burger { display:none; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- layout ---------- */
main { max-width:1080px; margin:32px auto; padding:0 24px; }
h1 { font-size:22px; margin-bottom:8px; }
h2 { font-size:17px; margin:20px 0 8px; }
h3 { font-size:15px; margin:16px 0 6px; }
p.mut { color:var(--mut); }
h1 + p, h2 + p, h1 + .mut, h2 + .mut { margin-bottom:4px; }

/* ---------- stat cards ---------- */
.cards { display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; min-width:160px; }
.card b { font-size:26px; display:block; color:var(--brand); }
.card span { color:var(--mut); font-size:13px; }
.card.warn b { color:var(--danger); }

/* ---------- flash ---------- */
.flash { border-radius:8px; padding:10px 14px; margin-bottom:12px; font-size:14px; }
.flash-flash_success { background:#e2f3ea; color:#1f7a4d; }
.flash-flash_danger  { background:#fde3e4; color:var(--danger); }
.flash-flash_warning { background:#fff4d6; color:#8a6d1a; }

/* ---------- forms ---------- */
form { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; max-width:420px; }
label { display:block; font-size:13px; color:var(--mut); margin:14px 0 4px; }
input, select, textarea { width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:6px; font:inherit; background:var(--card); color:var(--ink); }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
button { margin-top:18px; background:var(--brand); color:#fff; border:0; border-radius:6px; padding:10px 16px; font:inherit; cursor:pointer; }
button.secondary { background:transparent; color:var(--brand); border:1px solid var(--brand); }
button.link { background:none; color:var(--brand); border:0; padding:0; font:inherit; cursor:pointer; text-decoration:underline; margin:0; }
a.btn-link { margin-left:12px; color:var(--brand); text-decoration:none; }

form.row { display:flex; gap:8px; align-items:center; max-width:100%; padding:14px 16px; margin:14px 0; }
form.row input, form.row select { width:auto; }
form.row.wrap { flex-wrap:wrap; }
form.row button { margin:0; }
form.inline { display:inline; padding:0; border:0; background:none; margin:0; }
form.grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; max-width:640px; }
form.grid button { grid-column:1 / -1; }

/* filter bar: one row of controls above a list — period, custom dates, search
   and the CSV export. Rendered OUTSIDE the SSE containers. */
form.filter-bar { max-width:100%; padding:12px 16px; margin:0 0 14px; flex-wrap:wrap; }
form.filter-bar label { margin:0; font-size:12.5px; }
form.filter-bar select, form.filter-bar input { width:auto; }
form.filter-bar input[type=search] { min-width:220px; }
.custom-dates { display:flex; gap:8px; align-items:center; }
.pager { display:flex; gap:14px; align-items:center; margin:14px 0 4px; font-size:13.5px; }
.pager a { color:var(--brand); text-decoration:none; font-weight:600; }

form.pricing { max-width:100%; margin-bottom:20px; }
form.pricing h2 { margin-top:0; }
form.pricing .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0 16px; }

/* ---------- tables ---------- */
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); margin-top:16px; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); font-size:14px; overflow-wrap:anywhere; }
th { color:var(--mut); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; }
tr:last-child td { border-bottom:0; }
td a { color:var(--brand); text-decoration:none; margin-right:10px; }
.mut { color:var(--mut); }

/* ---------- trips, stops, addresses ---------- */
form.trip, form.addr-form, form.addr-edit { max-width:100%; }
.stop { background:#fafbfd; border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:10px; }
.stop-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.stop-head .rm-stop { margin-left:auto; }
.stop-head .ongkir-wrap { display:inline-flex; align-items:center; gap:8px; }
.ongkir-out { font-size:.9em; }
.ongkir-summary { margin-top:12px; }
.ongkir-total { margin-top:8px; }
.stop-fields { display:grid; grid-template-columns:1.3fr 1fr 1fr 1.7fr; gap:8px; }
.stop-fields .f-addr, .stop-fields .f-note { grid-column:span 2; }
#stops .stop:first-child .rm-stop { visibility:hidden; }
.check { display:flex; align-items:center; gap:8px; margin:14px 0 0; }
.check input { width:auto; }
.btn-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.btn-row button { margin:0; }

.addr-list { list-style:none; margin-top:14px; }
.addr-list li { display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:8px; }
.addr-list .addr-info { min-width:0; }
.addr-actions { display:flex; gap:10px; white-space:nowrap; }
button.link.danger { color:var(--danger); }

.trip-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; margin:12px 0; }
.trip-card.esc { border-color:#f2c4c6; background:#fff9f9; }
.trip-head { display:flex; gap:14px; align-items:center; }
.trip-head form.inline { margin-left:auto; }
.trip-head ol li .note { display:block; font-size:13px; }
.trip-card ol { padding-left:18px; }
.trip-card ol li { margin:4px 0; }

/* driver's caption on the proof photo (stops.note_supplied) — distinct from
   the merchant's own ordering note, so the two never blur */
.note-driver { display:block; font-size:13px; margin-top:5px; padding:5px 9px;
  background:#f0f5fb; border-left:3px solid var(--brand); border-radius:0 5px 5px 0; color:#28435c; }
.ph-link { color:var(--brand); text-decoration:none; font-size:13px; }

.status { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  padding:2px 8px; border-radius:999px; background:#eef1f6; color:#5b6573; white-space:nowrap; }
.status.requested { background:#e8efff; color:#2f6fed; }

/* ---------- login page ---------- */
body.login { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:16px; }
body.login .wrap { width:360px; }
body.login h1 { font-size:20px; margin-bottom:4px; color:var(--brand); }
body.login p.sub { color:var(--mut); font-size:13px; margin-bottom:20px; }
body.login form { padding:24px; }
body.login button { margin-top:18px; width:100%; }

/* ==========================================================================
   RESPONSIVE
   ≤760px  → phone: stacked single column, tables become one card per row,
             the nav collapses behind a ☰ toggle.
   761–1099px → tablet: narrower gutters, fields still side by side.
   ≥1100px → the dense ops tables get the extra room they need.
   ========================================================================== */

@media (min-width:1100px) {
  main { max-width:1280px; }
}

/* --- tablet: calmer gutters, but the same layout --- */
@media (max-width:1099px) {
  header { padding:12px 18px; }
  main { margin:24px auto; padding:0 18px; }
}

/* --- tablet + phone: the column counts below are only honest down to 900px.
       Above that the real table fits; below it, one card per row. --- */
@media (max-width:900px) {
  /* ---- tables become one card per row ----
     The <th> row is hidden and each cell prints its own column name by
     reading data-label, so nothing is lost — a 9-column deliveries table
     would be unreadable on a tablet, let alone a phone. */
  table.responsive { border:0; background:none; margin-top:10px; }
  table.responsive tr { display:block; background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); padding:12px 14px; margin-bottom:10px; }
  table.responsive thead,
  table.responsive tr.head { display:none; }
  table.responsive td { display:flex; gap:10px; align-items:baseline;
    border:0; padding:4px 0; font-size:14px; }
  table.responsive td::before { content:attr(data-label); flex:0 0 36%; min-width:88px;
    color:var(--mut); font-size:11.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.03em; }
  table.responsive td:not([data-label]) { display:block; }
  table.responsive td:not([data-label])::before { content:none; }
  /* empty-state rows and action cells span the card and carry no label */
  table.responsive tr.empty td { display:block; }
  table.responsive tr.empty td::before { content:none; }
  table.responsive td.actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px;
    margin-top:8px; padding-top:10px; border-top:1px solid var(--line); }
  table.responsive td.actions::before { content:none; }
  /* finger-sized tap targets for the inline text links */
  table.responsive td.actions a,
  table.responsive td.actions button.link { display:inline-block; padding:7px 0; margin-right:16px; }
  td a { display:inline-block; padding:5px 0; }

  /* ---- stat cards: 2×2 instead of a ragged wrap ---- */
  .cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .card { min-width:0; padding:14px; }
  .card b { font-size:22px; }
  .card span { font-size:12px; }
}

/* --- phone --- */
@media (max-width:760px) {
  main { margin:16px auto; padding:0 14px; }
  h1 { font-size:19px; }
  h2 { font-size:16px; }

  /* 16px stops iOS Safari from zooming the page when a field is focused */
  input, select, textarea { font-size:16px; }
  label { font-size:13px; }

  /* ---- header / nav ---- */
  header { padding:10px 14px; gap:10px; flex-wrap:wrap; align-items:center; }
  .nav-burger {
    display:flex; align-items:center; justify-content:center; flex:0 0 42px;
    width:42px; height:42px; border:1px solid var(--line); border-radius:9px;
    font-size:19px; line-height:1; cursor:pointer; user-select:none; order:0;
  }
  header .brand { order:1; font-size:16px; }
  header .spacer { display:none; }
  header nav, header .who, header form.logout { display:none; order:10; flex-basis:100%; }
  header form.logout { order:11; }
  #nav-toggle:checked ~ nav    { display:flex; }
  #nav-toggle:checked ~ .who   { display:block; }
  #nav-toggle:checked ~ form.logout { display:block; }
  header nav { flex-direction:column; gap:0; margin-left:0; }
  header nav a { padding:13px 4px; border-top:1px solid var(--line); font-size:16px; }
  header .who { padding:12px 4px 0; border-top:1px solid var(--line); line-height:1.5; }
  header form.logout { margin:12px 0 2px; }
  header form.logout button { width:100%; padding:12px; font-size:15px; }

  /* ---- forms: one field per line, full width ---- */
  form { max-width:100%; padding:18px 16px; }
  form.row, form.row.wrap { flex-direction:column; align-items:stretch; gap:10px; padding:16px; }
  form.row input, form.row select { width:100%; }
  form.row button { width:100%; }
  form.row label { margin:0; }
  form.grid, form.pricing .grid { grid-template-columns:1fr; max-width:100%; }
  a.btn-link { margin-left:0; display:inline-block; margin-top:10px; }

  /* filter bar: stack the three controls, keep the two dates side by side */
  form.filter-bar { padding:14px; }
  form.filter-bar label { width:100%; }
  form.filter-bar select, form.filter-bar input, form.filter-bar input[type=search] { width:100%; min-width:0; }
  .custom-dates { display:flex; flex-wrap:wrap; width:100%; }
  .custom-dates input { flex:1 1 130px; }
  .pager { flex-wrap:wrap; gap:10px; }

  /* ---- stops: the 4-column grid becomes one column ---- */
  .stop-fields { grid-template-columns:1fr; }
  .stop-fields .f-addr, .stop-fields .f-note { grid-column:auto; }
  /* the remove-stop button is the one control that should be finger-sized */
  .rm-stop { padding:6px 2px; }

  /* ---- trip cards: allow the head to wrap, keep actions reachable ---- */
  .trip-card { padding:14px; }
  .trip-head { flex-wrap:wrap; gap:6px 10px; }
  .trip-head form.inline { margin-left:0; }
  .trip-head .btn-row { width:100%; }

  /* ---- address book ---- */
  .addr-list li { flex-wrap:wrap; }
  .addr-actions { width:100%; justify-content:flex-end; }
  .addr-actions button { padding:8px 4px; }

}