@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#0A0D14;
  --surface:#141B2E;
  --surface2:#0F1524;
  --border:#232C42;
  --border-input:#2A3350;
  --accent:#5B9DFF;
  --accent-dim:#1B233A;
  --text:#FFFFFF;
  --muted:#8A93A8;
  --muted2:#4A5570;
  --green:#5FE0A0;
  --green-bg:#1B3A2A;
  --amber:#E0A030;
  --radius:10px;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);}
.heading{font-family:'Oswald',sans-serif;font-weight:700;}
a{color:inherit;}
button{font-family:'Inter',sans-serif;cursor:pointer;}
input,textarea{font-family:'Inter',sans-serif;background:var(--surface2);border:1px solid var(--border-input);color:#fff;border-radius:6px;padding:0 12px;font-size:14px;}
input{height:42px;}
textarea{padding:10px 12px;resize:vertical;min-height:70px;}
input::placeholder,textarea::placeholder{color:var(--muted2);}

#app{max-width:420px;margin:0 auto;min-height:100vh;background:var(--surface);position:relative;}
@media (min-width:460px){ #app{border:1px solid var(--border);margin:16px auto;border-radius:20px;overflow:hidden;} body{background:#000;} }

.topbar{background:var(--bg);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;}
.topbar .left{display:flex;align-items:center;gap:12px;}
.topbar button.icon{background:none;border:none;color:#fff;font-size:20px;}
.topbar .title{font-weight:600;font-size:14px;}
.avatar-circle{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--bg);font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:600;}

.progress{display:flex;gap:4px;padding:0 18px 0;margin-top:14px;}
.progress .seg{height:3px;flex:1;background:var(--border);border-radius:2px;}
.progress .seg.on{background:var(--accent);}

.content{padding:20px 20px 100px;}
.eyebrow{font-size:12px;color:var(--accent);font-weight:600;letter-spacing:1px;}
h1.page-title{font-size:19px;font-weight:700;margin-top:6px;}
.subtext{font-size:12px;color:var(--muted);margin-top:4px;}

.field{margin-bottom:14px;}
.field label{font-size:11px;color:var(--muted);display:block;margin-bottom:6px;}
.field input,.field textarea{width:100%;}

.search-wrap{position:relative;}
.search-wrap .search-icon{position:absolute;left:12px;top:12px;color:var(--muted);}
.search-wrap input{padding-left:36px;}

.list-item{border-bottom:1px solid var(--border);padding:13px 4px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;}
.list-item:last-child{border-bottom:none;}
.list-item .main{font-size:14px;}
.list-item .sub{font-size:11px;color:var(--muted);margin-top:2px;}
.chev{color:var(--muted2);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:8px;font-weight:600;font-size:14px;border:none;width:100%;}
.btn-primary{background:var(--accent);color:var(--bg);}
.btn-secondary{background:var(--surface2);color:#fff;border:1px solid var(--border-input);}
.btn-sm{height:38px;font-size:13px;}
.btn-link{background:none;color:var(--accent);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px;border:none;padding:8px 0;}

.card{background:var(--surface2);border-radius:var(--radius);padding:16px;margin-bottom:10px;}
.card.selectable{border:1px solid var(--border-input);cursor:pointer;}
.card.selected{border:1.5px solid var(--accent);}

.pill{font-size:10px;font-weight:600;padding:4px 10px;border-radius:12px;display:inline-block;}
.pill-green{background:var(--green-bg);color:var(--green);}

.chip{border:1px solid var(--border-input);border-radius:20px;padding:6px 14px;font-size:12px;display:inline-block;cursor:pointer;margin:0 6px 6px 0;color:#fff;}
.chip.active{border:1.5px solid var(--accent);color:var(--accent);}

/* A compact two-up choice, used where a full card would swamp the row it sits
   in — the per-stop Load & Go / scheduled toggle inside a favorite's stop
   list. Full 44px tap target; the row is the button, as everywhere else. */
.btn-chip{
  min-height:var(--tap);
  width:100%;
  padding:10px 12px;
  border-radius:var(--radius);
  border:1px solid var(--border-input);
  background:var(--surface2);
  color:var(--text);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  text-align:center;
}
.btn-chip.selected{ border:1.5px solid var(--accent); color:var(--accent); }
.btn-chip:active{ transform:scale(.985); }

.checkbox{width:22px;height:22px;border-radius:5px;border:1.5px solid var(--muted2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.checkbox.checked{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:700;}

.stepper{display:flex;align-items:center;gap:10px;}
.stepper button{width:28px;height:28px;border-radius:6px;background:var(--accent-dim);color:#fff;border:none;font-size:16px;}

.toggle{width:40px;height:22px;border-radius:12px;background:var(--border-input);position:relative;cursor:pointer;flex-shrink:0;}
.toggle .knob{width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:left .15s;}
.toggle.on{background:var(--accent);}
.toggle.on .knob{left:20px;}

.footer-fixed{position:sticky;bottom:0;background:var(--surface);padding:14px 20px;border-top:1px solid var(--border);}

.two-col{display:flex;gap:10px;}
.two-col > *{flex:1;}

.callout-amber{border:1.5px solid var(--amber);border-radius:8px;}
.text-amber{color:var(--amber);font-size:11px;display:flex;align-items:center;gap:6px;margin-top:8px;}

.opacity-40{opacity:0.4;}
.text-muted{color:var(--muted);}
.text-sm{font-size:12px;}
.mt-8{margin-top:8px;}
.mt-16{margin-top:16px;}
.mb-8{margin-bottom:8px;}

.nav-drawer{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:50;display:none;}
.nav-drawer.open{display:block;}
.nav-drawer .panel{background:var(--surface);width:300px;height:100%;padding:0;}
.nav-drawer .drawer-header{background:var(--bg);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;}
.nav-item{padding:14px 20px;display:flex;align-items:center;gap:12px;font-size:14px;color:#fff;cursor:pointer;}
.nav-item.active{background:var(--accent-dim);border-left:3px solid var(--accent);color:var(--accent);}
.nav-item .divider-top{border-top:1px solid var(--border);margin-top:8px;padding-top:8px;}

/* ==========================================================================
   Additions for the production build.
   The prototype's visual language is unchanged — these add the states a real
   app has and the prototype did not: loading, empty, error, focus, upload
   progress, modals, and larger touch targets for gloved hands in a yard.
   ========================================================================== */

:root{
  --danger:#FF6B6B;
  --danger-bg:#3A1B1E;
  --tap:44px;                /* WCAG 2.5.5 minimum touch target */
}

html{ -webkit-text-size-adjust:100%; }
body{ overscroll-behavior-y:none; }
#app{ padding-bottom:env(safe-area-inset-bottom); }

/* Never let iOS zoom the viewport when a field is focused. Anything under
   16px triggers it, which on this app looked like the page jumping. */
input,textarea,select{ font-size:16px; }
@media (min-width:460px){ input,textarea,select{ font-size:14px; } }

select{
  font-family:'Inter',sans-serif;background:var(--surface2);border:1px solid var(--border-input);
  color:#fff;border-radius:6px;padding:0 12px;height:42px;width:100%;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238A93A8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;
}

/* --- Focus. The prototype had none, which makes keyboard use impossible. -- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
button:focus-visible,.list-item:focus-visible,.card.selectable:focus-visible{ outline-offset:3px; }

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--bg);
  padding:10px 16px;z-index:100;font-weight:600;border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* --- Buttons ------------------------------------------------------------- */
.btn{ min-height:var(--tap); transition:opacity .12s,transform .06s; }
.btn:active:not(:disabled){ transform:scale(.985); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-danger{ background:var(--danger); color:#2A0F12; }
.btn-ghost{ background:transparent;color:var(--muted);border:1px solid var(--border); }
.btn-link{ min-height:var(--tap); }
.btn-link.inline{ min-height:0;padding:0;display:inline; }
.btn.is-busy{ position:relative;color:transparent !important; }
.btn.is-busy::after{
  content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(10,13,20,.35);border-top-color:var(--bg);animation:spin .7s linear infinite;
}
.btn-secondary.is-busy::after{ border-color:rgba(255,255,255,.25);border-top-color:#fff; }

/* --- Loading / empty / error -------------------------------------------- */
@keyframes spin{ to{ transform:rotate(360deg); } }
.spin{
  width:16px;height:16px;border-radius:50%;display:inline-block;
  border:2px solid var(--border-input);border-top-color:var(--accent);animation:spin .7s linear infinite;
}
.loading{ display:flex;align-items:center;justify-content:center;gap:10px;padding:48px 20px;color:var(--muted);font-size:13px; }

.empty{ text-align:center;padding:40px 24px;color:var(--muted); }
.empty-title{ font-size:15px;font-weight:600;color:#fff;margin-bottom:6px; }
.empty-body{ font-size:13px;line-height:1.5;max-width:280px;margin:0 auto; }

.form-error,.modal-error{
  background:var(--danger-bg);border:1px solid var(--danger);color:#FFC9C9;
  border-radius:8px;padding:11px 13px;font-size:13px;line-height:1.45;margin-bottom:14px;
}
.field-help{ font-size:11px;color:var(--muted);margin-top:5px;line-height:1.45; }

.callout{ border-radius:8px;padding:12px 14px;font-size:13px;line-height:1.5;margin-bottom:16px; }
.callout-info{ background:var(--accent-dim);border:1px solid var(--border-input);color:#CBDCFF; }
.callout-warn{ background:#3A2E12;border:1px solid var(--amber);color:#FFE1A8; }
.callout-danger{ background:var(--danger-bg);border:1px solid var(--danger);color:#FFC9C9; }

/* --- Toast --------------------------------------------------------------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);
  background:var(--surface2);color:#fff;border:1px solid var(--border-input);
  padding:13px 18px;border-radius:10px;font-size:13px;line-height:1.4;
  max-width:min(380px,calc(100vw - 32px));z-index:200;
  box-shadow:0 8px 28px rgba(0,0,0,.5);transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
.toast.show{ transform:translate(-50%,0); }
.toast-error{ border-color:var(--danger);background:var(--danger-bg);color:#FFD5D5; }
.toast-success{ border-color:var(--green);background:var(--green-bg);color:var(--green); }

/* --- Modals -------------------------------------------------------------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:150;
  display:flex;align-items:flex-end;justify-content:center;padding:0;
  animation:fade .15s ease;
}
@media (min-width:460px){ .modal-backdrop{ align-items:center;padding:20px; } }
@keyframes fade{ from{ opacity:0; } }
.modal{
  background:var(--surface);width:100%;max-width:420px;max-height:88vh;overflow-y:auto;
  border-radius:16px 16px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom));
  border:1px solid var(--border);animation:rise .2s cubic-bezier(.2,.8,.3,1);
}
@media (min-width:460px){ .modal{ border-radius:14px;padding-bottom:22px; } }
@keyframes rise{ from{ transform:translateY(24px);opacity:0; } }
.modal-title{ font-family:'Oswald',sans-serif;font-weight:700;font-size:17px;margin-bottom:10px; }
.modal-body{ font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:18px; }
.modal-actions{ display:flex;gap:10px;margin-top:18px; }
.modal-actions .btn{ flex:1; }
.check-row{ display:flex;align-items:center;gap:10px;padding:11px 0;font-size:14px;cursor:pointer; }
.check-row input{ width:20px;height:20px;accent-color:var(--accent); }

/* --- Lists and cards ----------------------------------------------------- */
.list-item{ min-height:var(--tap); gap:12px; }
.list-item:hover{ background:rgba(255,255,255,.02); }
.list-item .main{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.list-item .grow{ min-width:0;flex:1; }
.list-item .main,.list-item .sub{ overflow-wrap:anywhere; }

.tag{
  font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;background:var(--accent-dim);color:var(--accent);white-space:nowrap;
}
.tag-muted{ background:var(--border);color:var(--muted); }
.tag-danger{ background:var(--danger-bg);color:var(--danger); }
.tag-green{ background:var(--green-bg);color:var(--green); }
.tag-amber{ background:#3A2E12;color:var(--amber); }

.row-actions{ display:flex;gap:6px;flex-shrink:0; }
.icon-btn{
  width:34px;height:34px;border-radius:7px;background:var(--accent-dim);border:none;color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.icon-btn:hover{ color:#fff; }
.icon-btn.danger:hover{ color:var(--danger); }

/* --- Upload progress ----------------------------------------------------- */
.upload-row{ display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13px; }
.upload-bar{ flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden; }
.upload-bar > span{ display:block;height:100%;background:var(--accent);transition:width .2s; }

/* --- Auth screens -------------------------------------------------------- */
.auth{ padding:44px 24px 60px;max-width:400px;margin:0 auto; }
.auth-head{ text-align:center;margin-bottom:26px; }
.auth-brand{ font-family:'Oswald',sans-serif;font-weight:700;font-size:22px;margin-top:12px;letter-spacing:.02em; }
.auth-tag{ font-size:12px;color:var(--muted);margin-top:2px; }
.auth-title{ font-family:'Oswald',sans-serif;font-weight:700;font-size:20px;margin-bottom:6px; }
.auth-sub{ font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:20px; }
.auth-link{ display:block;text-align:center;width:100%;margin-top:6px; }
.auth-foot{ text-align:center;font-size:13px;color:var(--muted);margin-top:26px; }
.auth-foot .btn-link{ color:var(--accent);font-weight:600; }

/* --- Wizard -------------------------------------------------------------- */
.step-count{ font-size:11px;color:var(--muted);letter-spacing:.04em; }
.wizard-footer{
  position:sticky;bottom:0;background:linear-gradient(to top,var(--surface) 72%,transparent);
  padding:16px 20px calc(16px + env(safe-area-inset-bottom));margin:0 -20px -100px;
}
.pool-warning{ background:#3A2E12;border:1px solid var(--amber);border-radius:8px;padding:12px 14px;font-size:12px;line-height:1.55;color:#FFE1A8;margin-top:14px; }
.pool-warning ul{ margin:8px 0 0 16px; }
.pool-warning li{ margin-bottom:4px; }

.stop-card{ border-left:3px solid var(--accent);padding-left:14px; }
.stop-card.delivery{ border-left-color:var(--green); }
.pill-blue{ background:var(--accent-dim);color:var(--accent); }

.summary-row{ display:flex;justify-content:space-between;gap:16px;font-size:13px;padding:9px 0;border-top:1px solid var(--border); }
.summary-row:first-child{ border-top:none; }
.summary-row .k{ color:var(--muted);flex-shrink:0; }
.summary-row .v{ text-align:right;overflow-wrap:anywhere; }

/* --- Utility ------------------------------------------------------------- */
.mt-4{margin-top:4px}.mt-12{margin-top:12px}.mt-24{margin-top:24px}
.mb-16{margin-bottom:16px}
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}.gap-8{gap:8px}.gap-12{gap:12px}
.grow{flex:1;min-width:0}
.text-right{text-align:right}
.text-danger{color:var(--danger)}
.text-green{color:var(--green)}
.nowrap{white-space:nowrap}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important;transition-duration:.001ms !important; }
}

/* ==========================================================================
   Main application screens (main.js / app.js / admin.js).
   Same visual language as the prototype — these exist only so the screens can
   be written without a single inline style attribute, which is what the CSP
   and the "no invented classes" rule between them require.
   ========================================================================== */

/* --- Shell: topbar, drawer ----------------------------------------------- */
.topbar .right{ display:flex;align-items:center;gap:10px;justify-content:flex-end;min-width:30px; }
.topbar .btn-link{ min-height:0;padding:0;font-size:13px; }

.nav-drawer .panel{
  display:flex;flex-direction:column;overflow-y:auto;max-width:86vw;
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-drawer .drawer-header .title{ font-weight:600;color:#fff; }
.nav-item{
  background:none;border:none;width:100%;text-align:left;font-size:14px;
  min-height:var(--tap);border-left:3px solid transparent;
}
.nav-item:hover{ background:rgba(255,255,255,.03); }
.nav-item .nav-icon{ width:22px;text-align:center;flex-shrink:0; }
.nav-sep{ border-top:1px solid var(--border);margin:8px 0; }

/* --- Section headings and list containers -------------------------------- */
.section-label{
  font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;margin:22px 0 8px;
}
.section-label:first-child{ margin-top:0; }
.card-list{ background:var(--surface2);border-radius:var(--radius);padding:2px 12px; }
.card-list .list-item:last-child{ border-bottom:none; }

/* A whole list row that is itself a button (no inline onclick anywhere). */
button.list-item,a.list-item{
  width:100%;background:none;border:none;border-bottom:1px solid var(--border);
  color:#fff;text-align:left;text-decoration:none;font-size:14px;
}
button.list-item:last-child,a.list-item:last-child{ border-bottom:none; }

/* --- Dashboard ----------------------------------------------------------- */
.cta-card{
  background:var(--accent);color:var(--bg);border:none;border-radius:var(--radius);
  padding:18px 16px;width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:12px;text-align:left;margin-top:16px;
}
.cta-card .cta-title{ font-weight:700;font-size:15px; }
.cta-card .cta-sub{ font-size:11px;opacity:.72;margin-top:2px; }
.cta-card .cta-plus{ font-size:24px;line-height:1;font-weight:700; }

.tile-row{ display:flex;gap:10px; }
.tile{
  flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 10px;text-align:center;color:#fff;
}
.tile .tile-icon{ color:var(--accent);font-size:20px;line-height:1; }
.tile .tile-label{ font-size:12px;margin-top:8px; }

.greeting{ font-family:'Oswald',sans-serif;font-weight:700;font-size:20px;margin-top:2px; }

/* --- Detail views -------------------------------------------------------- */
.detail-block{
  background:var(--surface2);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;
}
.detail-block .block-title{
  font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:10px;
}
.note-highlight{
  background:#3A2E12;border:1px solid var(--amber);border-left-width:4px;border-radius:8px;
  padding:12px 14px;font-size:13px;line-height:1.55;color:#FFE1A8;white-space:pre-wrap;
}
.mono-ref{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em; }
.wrap-anywhere{ overflow-wrap:anywhere; }
.pre-wrap{ white-space:pre-wrap; }

.stop-row{ border-left:3px solid var(--accent);padding:2px 0 2px 14px;margin-bottom:16px; }
.stop-row.delivery{ border-left-color:var(--green); }
.stop-row .stop-head{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; }

.mini-table{ width:100%;border-collapse:collapse;font-size:13px; }
.mini-table th{
  text-align:left;font-size:10px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;font-weight:600;padding:0 8px 6px 0;
}
.mini-table td{ padding:7px 8px 7px 0;border-top:1px solid var(--border);vertical-align:top; }
.mini-table td.num,.mini-table th.num{ text-align:right;padding-right:0;white-space:nowrap; }
.mini-table tfoot td{ font-weight:600;border-top:1px solid var(--border-input); }

/* --- Rows with trailing action buttons ----------------------------------- */
.row-split{ display:flex;align-items:center;gap:10px;justify-content:space-between; }
.row-split .grow{ flex:1;min-width:0; }

/* --- Search + filter bar -------------------------------------------------- */
.filter-bar{ display:flex;flex-wrap:wrap;gap:0;margin:12px 0 4px; }

/* --- Upload ---------------------------------------------------------------*/
label.btn{ cursor:pointer; }
.upload-name{ max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* --- Address autocomplete ------------------------------------------------ */
.suggest-list{
  border:1px solid var(--border-input);border-radius:8px;background:var(--surface2);
  margin-top:6px;max-height:190px;overflow-y:auto;
}
.suggest-item{
  display:block;width:100%;text-align:left;background:none;border:none;color:#fff;
  padding:11px 12px;font-size:13px;border-bottom:1px solid var(--border);line-height:1.4;
}
.suggest-item:last-child{ border-bottom:none; }
.suggest-item:hover{ background:var(--accent-dim); }

/* --- Sheets (equipment detail, applicant detail) ------------------------- */
.sheet-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px; }
.sheet-close{ background:none;border:none;color:var(--muted);font-size:20px;line-height:1;padding:2px 6px; }
.modal.sheet{ max-height:92vh; }

/* --- Stats tiles (admin) ------------------------------------------------- */
.stat-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:10px; }
.stat-tile{ background:var(--surface2);border-radius:var(--radius);padding:14px; }
.stat-tile .stat-value{ font-family:'Oswald',sans-serif;font-weight:700;font-size:22px; }
.stat-tile .stat-label{ font-size:11px;color:var(--muted);margin-top:2px;line-height:1.35; }

/* --- Toggle rows --------------------------------------------------------- */
.toggle-row{ display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0; }
.toggle-row .toggle-label{ font-size:14px; }
.toggle-row .toggle-help{ font-size:11px;color:var(--muted);margin-top:3px;line-height:1.45; }

/* --- Pagination ---------------------------------------------------------- */
.pager{ display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px; }
.pager .btn{ width:auto;padding:0 18px; }
.pager .pager-count{ font-size:12px;color:var(--muted); }

/* --- Invite rows --------------------------------------------------------- */
.invite-card{ position:relative; }
.invite-card .remove-row{ position:absolute;top:10px;right:10px; }

/* A list row whose tappable region is a button rather than the whole row —
   needed wherever a row both navigates and carries its own action buttons,
   since a button inside a button is not valid HTML. */
.cell-btn{
  background:none;border:none;padding:0;margin:0;color:#fff;text-align:left;
  display:block;width:100%;min-height:var(--tap);font-size:14px;
}
.cell-btn .main,.cell-btn .sub{ display:block; }

/* The prototype's toggle was a div with an onclick. As a real button it needs
   its own reset, and a focus ring, because it is now keyboard-reachable. */
button.toggle{ border:none;padding:0;appearance:none; }

/* The stepper is the most-tapped control in the wizard (quantities in step 6,
   per-stop assignment in step 7) and the prototype's 28px button is well under
   the 44px minimum. The visible chip stays 28px; the hit area does not. */
.stepper button{ position:relative; }
.stepper button::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:var(--tap);height:var(--tap);
}

/* Inline "Edit" affordance on the review screen. It sits immediately after a
   value inside a flex row, so it needs its own spacing and must not inherit
   the 44px block height that .btn-link uses for standalone buttons. */
.edit-link{
  min-height:0;padding:0 0 0 10px;font-size:12px;vertical-align:baseline;
  white-space:nowrap;flex-shrink:0;
}
.summary-row .v .edit-link{ padding-left:8px; }

/* ==========================================================================
   Colour-scheme correctness.

   The bug this fixes: <button> does NOT inherit `color` from its parent — it
   falls back to the user agent's default button text colour, which on a
   machine set to a light theme is PURE BLACK. Every card-shaped choice in the
   wizard is a real <button> (they have to be, for keyboard and screen-reader
   users), so "New order", "Flatbed", "Dry van", "ASAP" and "Specific date &
   time" rendered black-on-near-black and were effectively invisible.

   It never showed up in testing because it depends on the viewer's OS theme,
   not on anything in the app.

   Two fixes, belt and braces:
     1. `color-scheme: dark` tells the browser this document is dark, so every
        native control — date pickers, the calendar icon, dropdowns, scrollbars,
        autofill backgrounds — themes itself correctly instead of light.
     2. Form elements explicitly inherit our text colour, so no UA default can
        ever leak in again. Buttons that deliberately use dark text on a light
        background (.btn-primary on blue) set their own colour and still win,
        because those rules come later and are more specific.
   ========================================================================== */

:root{ color-scheme: dark; }

button, input, select, textarea, optgroup{
  color: var(--text);
  font-family: 'Inter', sans-serif;
}
button{ background-color: transparent; }

/* Native dropdown options render in the OS popup, which needs its own colours. */
option{ background: var(--surface2); color: var(--text); }

/* --- The date / time picker icon ------------------------------------------
   This used to be `filter: invert(1) brightness(1.6)`, described as a fallback
   for browsers that ignore `color-scheme`. It was the bug.

   `color-scheme: dark` above already makes Chrome draw a WHITE calendar glyph.
   Inverting a white glyph produces a BLACK one — so the "fallback" was turning
   the correct icon into an invisible smudge on a near-black field, on every
   current browser, whatever the machine's theme was set to.

   The invert is gone. Instead we draw the icon ourselves: `appearance: none`
   removes the UA glyph entirely and a data-URI SVG replaces it. Nothing about
   how it looks now depends on the browser's idea of our colour scheme, which
   is the whole reason this went wrong twice. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0;
  cursor: pointer;
  opacity: .85;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23E6EAF4" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="18" height="16" rx="2.5"/><path d="M3 9.5h18M8 2.8v3.4M16 2.8v3.4"/></svg>') no-repeat center / 20px 20px;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover{ opacity: 1; }
input[type="date"]:focus-within::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:focus-within::-webkit-calendar-picker-indicator{ opacity: 1; }

/* Firefox and Safari draw no indicator button at all; nothing above applies to
   them, and the field is still fully usable by typing. */

/* Chrome's autofill paints its own near-white background over our fields. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface2) inset;
  caret-color: var(--text);
}

/* The row chevron was #4A5570 on #0F1524 — 2.45:1, below the 4.5:1 floor and
   genuinely hard to see on a phone in daylight. */
.chev{ color: var(--muted); }

/* ==========================================================================
   Round 3 fixes.
   ========================================================================== */

/* --- Early / Late time fields ---------------------------------------------
   A datetime-local input has a minimum intrinsic width set by the browser's
   own date UI. Two of them side by side cannot honour it at phone width, so
   the Late field was running off the right edge and getting clipped. Below
   430px they stack; the two-column layout returns as soon as there is room. */
@media (max-width:430px){
  .two-col:has(input[type="datetime-local"]),
  .two-col:has(input[type="date"]){ flex-direction:column; gap:0; }
}
/* Fallback for browsers without :has() — never let these overflow the screen. */
input[type="datetime-local"], input[type="date"], input[type="time"]{
  max-width:100%; min-width:0;
}
.two-col > *{ min-width:0; }

/* --- Checkboxes -----------------------------------------------------------
   The box looked interactive but was decorative: the whole row is the button,
   so tapping the box worked only because the tap landed on the row. That reads
   as broken.

   Fix is the reverse of the obvious one. Making ONLY the box clickable would
   shrink the target from a full row to 22px, against a 44px accessibility
   floor — worse in work gloves, which is the actual use. Instead the row stays
   the target and the box now visibly responds to it, so the two agree. */
.list-item:active .checkbox,
button:active .checkbox,
.card.selectable:active .checkbox{
  transform:scale(.92);
  border-color:var(--accent);
}
.checkbox{
  transition:background-color .12s, border-color .12s, transform .08s;
  width:26px;height:26px;   /* easier to see; the row is still the tap target */
}
/* Hovering anywhere on the row previews the box, so the link is obvious. */
.list-item:hover .checkbox,
button:hover .checkbox{ border-color:var(--accent); }
.checkbox.checked{ transform:none; }

/* The whole row is the control, so the pointer should say so everywhere. */
.list-item, button.list-item, .card.selectable{ cursor:pointer; }

/* ==========================================================================
   Round 3, batch 2 and 3.
   ========================================================================== */

/* --- Save draft / Cancel, on every wizard step ----------------------------
   Drawn by wizardShell directly under the progress bar, so it is present on
   every screen by construction rather than by eleven copies that can drift. */
.wizard-actions{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 20px 0;
}
.wizard-actions .btn-link{ min-height:38px;padding:4px 0; }

/* Cancel throws work away, so it must not look like the other blue links. */
.link-danger{ color:var(--danger); }

/* The same-day expiry rule does not change; this makes it visible before it
   bites, on the dashboard row and on the wizard itself. */
.draft-expiry-note{
  margin:6px 20px 0;padding:8px 12px;border-radius:8px;
  background:#3A2E12;border:1px solid var(--amber);color:#FFE1A8;
  font-size:12px;line-height:1.45;
}

/* Amber that can sit inline inside a summary row or a list sub-line.
   `.text-amber` is display:flex and 11px, which is right for its own callout
   line and wrong everywhere else. #E0A030 on #0F1524 is 8.1:1. */
.text-amber-strong{ color:var(--amber); }