/* styles.css — app shell. Mobile-first (~390px), scales to desktop.
   Colour tokens (--brand etc.) are injected in index.php from config/app.php. */

*{box-sizing:border-box}
html,body{margin:0;height:100%}

/* ---- U2 focus + pressed states; N3 iOS-zoom guard (>=16px inputs) ---- */
button, a, .thread-row, .tab-btn, .chip, .seg-btn, .op-list button{ -webkit-tap-highlight-color:transparent }
/* High-contrast focus ring that stays visible even on brand-coloured buttons
   (a white ring with a dark halo works on any background). */
:focus-visible{ outline:2px solid #fff; outline-offset:2px; border-radius:6px;
  box-shadow:0 0 0 4px rgba(15,42,67,.55) }
button:active:not(:disabled), .chip:active, .seg-btn:active, .tab-btn:active, .op-list button:active{ transform:scale(.97) }
.thread-row:active, .team-row:active, .op-number:active{ background:var(--line) }
input, textarea, select{ font-size:16px }   /* never below 16px -> no iOS zoom-jump */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), select, textarea{ min-height:44px }
button:not(.linkbtn){ min-height:44px }   /* >=44px tap target for all action buttons */
.linkbtn{ min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle }
body{
  background:var(--bg); color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}
.hidden{display:none !important}
button{font:inherit; cursor:pointer}
input{font:inherit}

/* ---- App bar ---- */
.appbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 16px; padding-top:max(10px,env(safe-area-inset-top));
  background:var(--surface); border-bottom:1px solid var(--line);
}
/* ---- Bottom tab bar (mobile) / top nav (desktop) ---- */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex;
  background:var(--surface); border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar .tab-btn{flex:1; min-height:56px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; background:none; border:0; color:var(--muted); padding:6px 2px}
.tabbar .tab-btn .tab-ic{font-size:20px; line-height:1}
.tabbar .tab-btn .tab-lb{font-size:11px}
.tabbar .tab-btn.active{color:var(--brand)}
.tabbar .tab-btn:active{background:var(--line)}
.topnav{display:none}                 /* desktop only (see media query) */
.topnav .tab-btn{min-height:44px; display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; color:var(--muted); font-size:15px; padding:6px 10px; border-radius:8px}
.topnav .tab-btn.active{color:#fff; background:var(--brand)}
.topnav .tab-btn:hover{color:var(--text)}
.topnav .tab-ic{font-size:16px}
body.has-tabbar #main{padding-bottom:72px}

.appbar .brand{display:flex; align-items:center; gap:8px; color:var(--brand); font-weight:700}
.appbar .brand span{color:var(--text); font-size:17px}
.appbar-right{display:flex; align-items:center; gap:12px; font-size:14px}
.appbar-right .who{color:var(--muted); max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.linkbtn{background:none; border:0; color:var(--brand); padding:0}
.devlink{color:var(--muted); text-decoration:none; border:1px solid var(--border); border-radius:6px; padding:2px 7px; font-size:12px}

/* ---- Layout ---- */
#main{max-width:640px; margin:0 auto}
.view{padding:16px}

/* ---- Login card ---- */
.card{width:100%; max-width:400px; margin:6vh auto 0; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; padding:24px}
.tagline{color:var(--muted); font-size:14px; margin:0 0 18px}
label{display:block; font-size:13px; color:var(--muted); margin:14px 0 6px}
.card input{width:100%; padding:12px 14px; font-size:16px; color:var(--text);
  background:var(--bg); border:1px solid var(--border); border-radius:10px}
.card input:focus{outline:2px solid var(--brand); border-color:var(--brand)}
.card button[type=submit]{width:100%; margin-top:18px; padding:12px; font-size:16px;
  font-weight:600; color:#fff; background:var(--brand); border:0; border-radius:10px}
.card button[type=submit]:hover{background:var(--brand-dark)}
.op-list button{display:block; width:100%; text-align:left; margin-top:10px; padding:12px 14px;
  color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:10px}
.small{font-size:13px; color:var(--muted); margin-top:12px}
.link{color:var(--brand); cursor:pointer}
.msg{margin-top:16px; font-size:14px; min-height:20px}
.msg.err{color:var(--danger)} .msg.ok{color:var(--brand)}
.dev{margin-top:16px; padding:10px 12px; border:1px dashed var(--brand); border-radius:10px;
  font-size:14px; color:var(--muted)}
.dev b{color:var(--text); letter-spacing:2px; font-size:18px}

/* ---- Filter tabs ---- */
.tabs{display:flex; gap:6px; margin-bottom:12px}
.tab{flex:1; padding:12px 0; min-height:44px; text-align:center; color:var(--muted); background:var(--surface);
  border:1px solid var(--line); border-radius:10px}
.tab.active{color:#fff; background:var(--brand); border-color:var(--brand)}

/* ---- Thread list ---- */
.thread-list{display:flex; flex-direction:column; gap:8px}
.thread-row{display:flex; align-items:flex-start; gap:12px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; cursor:pointer}
.thread-row:hover{border-color:var(--line-hover)}
.thread-icon{font-size:20px; line-height:1.2; width:26px; text-align:center; flex:none}
.thread-main{flex:1; min-width:0}
.thread-top{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.thread-name{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.thread-time{color:var(--muted); font-size:12px; flex:none}
.thread-snippet{color:var(--muted); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}
.badge{flex:none; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--brand);
  color:#fff; font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center}
.status-pill{font-size:11px; color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:1px 6px; margin-left:6px}

/* ---- Empty state ---- */
.empty{display:flex; flex-direction:column; align-items:center; text-align:center; color:var(--muted);
  padding:56px 20px; max-width:340px; margin:0 auto; gap:4px}
.empty .big{font-size:52px; margin-bottom:4px; opacity:.9}
.empty .empty-title{font-size:17px; font-weight:600; color:var(--text)}
.empty .empty-sub{font-size:14px; color:var(--muted); line-height:1.5; margin-top:2px}
.empty .empty-cta{margin-top:18px; padding:14px 22px; font-size:16px; font-weight:600; color:#fff;
  background:var(--brand); border:0; border-radius:12px; cursor:pointer}
.empty .empty-cta:active{background:var(--brand-dark)}

/* ---- Thread view ---- */
#view-thread{display:flex; flex-direction:column; height:calc(100dvh - 56px); padding:0}
.thread-head{display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line)}
.iconbtn{background:none; border:0; color:var(--text); font-size:26px; line-height:1; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px}
.thread-title{flex:1; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.thread-actions{display:flex; gap:6px}
.chip{font-size:13px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:5px 10px; min-height:44px; display:inline-flex; align-items:center; justify-content:center}
.chip.active{background:var(--brand); border-color:var(--brand); color:#fff}

.timeline{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px}
.bubble{max-width:80%; padding:9px 12px; border-radius:14px; font-size:14px; word-wrap:break-word}
.bubble .meta{display:block; font-size:11px; color:var(--muted); margin-top:4px}
.bubble.in{align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:4px}
.bubble.out{align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:4px}
.bubble.out .meta{color:var(--text)}
.bubble.internal{align-self:center; background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-text); font-size:13px; max-width:90%}
.bubble.event{align-self:center; background:transparent; color:var(--muted); font-size:13px; text-align:center}
/* Missed-call: distinct card, prominent tap-to-call number */
.thread-row.missed .thread-icon{color:var(--danger)}
.bubble.missed-card{align-self:stretch; max-width:100%; text-align:center; background:var(--alert-bg);
  border:1px solid var(--alert-line); border-radius:12px; padding:12px}
.bubble.missed-card .mc-head{color:var(--alert-text); font-weight:600; font-size:13px}
.bubble.missed-card .mc-num{display:inline-block; margin:4px 0 2px; font-size:20px; font-weight:700;
  color:var(--text); text-decoration:none; letter-spacing:.5px}
.bubble.missed-card .mc-num:hover{color:var(--brand)}
.bubble.missed-card .meta{color:var(--muted)}

.composer{border-top:1px solid var(--line); padding:10px 12px; padding-bottom:max(10px,env(safe-area-inset-bottom)); background:var(--surface)}
.note-toggle{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); margin:0 0 8px; min-height:44px}
.note-toggle input{width:20px; height:20px}
.composer-row{display:flex; gap:8px}
.composer-row input{flex:1; padding:11px 14px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:20px}
.composer-row input:focus{outline:2px solid var(--brand); border-color:var(--brand)}
#send-btn{padding:0 18px; font-weight:600; color:#fff; background:var(--brand); border:0; border-radius:20px}
.composer.note-mode input{border-color:#7a5c14}
.composer.note-mode #send-btn{background:#7a5c14}

/* ---- Settings ---- */
.settings-body{padding:16px}
.settings-body h3{font-size:15px; margin:22px 0 6px}
.settings-body h3:first-child{margin-top:6px}
.settings-body textarea{width:100%; padding:12px 14px; font:inherit; color:var(--text);
  background:var(--bg); border:1px solid var(--border); border-radius:10px; resize:vertical}
.settings-body textarea:focus{outline:2px solid var(--brand); border-color:var(--brand)}
.settings-body code{background:var(--line); padding:1px 5px; border-radius:4px; font-size:13px}
.settings-row{display:flex; justify-content:space-between; align-items:center; margin:8px 0}
#tb-save{margin-top:6px; padding:11px 16px; font-weight:600; color:#fff; background:var(--brand); border:0; border-radius:10px}
.op-numbers{display:flex; flex-direction:column; gap:6px}
.op-number{display:flex; justify-content:space-between; padding:10px 12px; background:var(--surface);
  border:1px solid var(--line); border-radius:10px}
.op-e164{font-weight:600} .op-label{color:var(--muted); font-size:14px}

/* ---- Team ---- */
.team-list{display:flex; flex-direction:column; gap:8px}
.team-row{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px 14px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px}
.team-row.disabled{opacity:.55}
.team-row .thread-main{flex:1 1 150px; min-width:150px}
.team-row .thread-snippet{white-space:normal; overflow:visible; text-overflow:clip}
#td-add{margin-top:6px; padding:11px 16px; font-weight:600; color:#fff; background:var(--brand); border:0; border-radius:10px}

/* ---- Condition badges ---- */
.cond-badge{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; color:#fff; vertical-align:middle}
.cond-ok{background:#1a7a3e} .cond-short{background:#b07814} .cond-damaged{background:#b0282c}
/* Lifecycle stage chip — sits beside the condition badge. Theme-aware. */
.stage-chip{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; vertical-align:middle; margin-left:4px}
.stage-resolved{background:var(--ok-bg); color:var(--ok-text); border:1px solid var(--ok-line)}

/* Quick-receive fast path — a distinct card so it reads as "fast mode". */
.cap-quick{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 14px 6px; margin-top:4px}

/* First-run welcome (office home, brand-new operator). Theme-aware. */
.firstrun{text-align:left; max-width:440px; margin:6px auto 0; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px 18px}
.firstrun-h{font-size:19px; font-weight:800; margin-bottom:6px}
.firstrun-p{font-size:14.5px; color:var(--muted); margin:0 0 16px; line-height:1.5}
.firstrun-steps{display:flex; flex-direction:column; gap:13px; margin-bottom:18px}
.firstrun-step{display:flex; gap:12px; align-items:flex-start}
.firstrun-num{flex:none; width:26px; height:26px; border-radius:50%; background:var(--brand); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center}
.firstrun-step-t{font-weight:700; font-size:14.5px}
.firstrun-step-d{font-size:13px; color:var(--muted)}
.firstrun .empty-cta{width:100%}
.firstrun-link{display:block; width:100%; margin-top:10px; background:transparent; border:0; color:var(--brand); font-weight:600; font-size:14px; cursor:pointer; min-height:40px}

/* ---- Offline sync badge / pending ---- */
.sync-badge{font-size:12px; font-weight:700; color:#fff; background:#b07814;
  padding:3px 9px; border-radius:20px; white-space:nowrap}
.pending-section{margin-bottom:22px}
.pending-section .recent-h{display:flex; justify-content:space-between; align-items:center}
.pending-row{opacity:.95; border-style:dashed !important}
.pending-row .thread-icon{color:var(--warn-text)}

/* ---- Driver home / capture ---- */
.record-cta{width:100%; padding:22px; font-size:20px; font-weight:700; color:#fff; background:var(--brand);
  border:0; border-radius:16px; margin:8px 0 20px}
.record-cta:active{background:var(--brand-dark)}
.recent-h{font-size:14px; color:var(--muted); margin:0 0 10px}
.big-btn{width:100%; padding:16px; font-size:17px; font-weight:600; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:12px}
.big-btn.primary{color:#fff; background:var(--brand); border:0; margin-top:20px}
.big-btn.primary:disabled{opacity:.5}
.big-btn.ghost{background:transparent; color:var(--muted); border:1px solid var(--border)}
.capture-body{padding:16px}
.capture-body label{font-size:14px; color:var(--text); font-weight:600; margin:18px 0 8px}
.capture-body label .small{font-weight:400}
.capture-body input, .capture-body textarea{width:100%; padding:14px; font-size:16px; color:var(--text);
  background:var(--bg); border:1px solid var(--border); border-radius:10px; margin-bottom:8px}
.capture-body input:focus, .capture-body textarea:focus{outline:2px solid var(--brand); border-color:var(--brand)}
.req{color:var(--danger); font-size:13px; font-weight:400}
.photo-thumbs{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.thumb{position:relative; width:84px; height:84px; border-radius:10px; overflow:hidden; border:1px solid var(--border)}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb-rm{position:absolute; top:2px; right:2px; width:30px; height:30px; border:0; border-radius:50%;
  background:#000a; color:#fff; font-size:12px; line-height:1}
.seg{display:flex; gap:8px}
.seg-btn{flex:1; padding:16px 0; font-size:16px; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--border); border-radius:12px}
.seg-btn.active{color:#fff; background:var(--brand); border-color:var(--brand)}
#condition-seg .seg-btn[data-c="short"].active{background:#b07814; border-color:#b07814}
#condition-seg .seg-btn[data-c="damaged"].active{background:#b0282c; border-color:#b0282c}
.consent{font-style:italic; color:var(--text); background:var(--surface);
  border-left:3px solid var(--brand); padding:10px 12px; border-radius:6px; margin:6px 0}
.handover-badge{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.03em;
  padding:2px 8px; border-radius:10px; background:var(--ok-bg); color:var(--ok-text); white-space:nowrap}
.handover-badge.ho-atl{background:var(--warn-bg); color:var(--warn-text)}
.handover-badge.ho-refused{background:var(--alert-bg); color:var(--alert-text)}
.handover-badge.ho-pin{background:var(--info-bg); color:var(--info-text)}
.conn-code{font:700 30px/1.1 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.16em; color:var(--brand); background:var(--surface); border:1px solid var(--brand); border-radius:10px; padding:12px 16px; text-align:center; margin-bottom:8px}
.dc-amendments{margin-top:12px}
.dc-am-h{font-weight:700; font-size:13px; color:var(--muted); margin:8px 0 4px; text-transform:uppercase; letter-spacing:.04em}
.dc-am{border-left:3px solid #b07814; background:var(--surface); border-radius:6px; padding:8px 10px; margin:6px 0}
.dc-am-meta{font-size:12px; color:var(--muted)}
.dc-am-body{margin-top:2px}
.dc-am-form{margin-top:8px; display:flex; flex-direction:column; gap:8px}
.dc-am-form textarea{width:100%}
.amendment-bubble{border-left:3px solid #b07814}

/* ---- Live "on this run" ---- */
.live-share{background:var(--surface); border:1px solid #223; border-radius:12px; padding:14px; margin:14px 0}
.live-share-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.live-share-title{font-weight:700; font-size:16px}
.live-share-note{font-size:13px; color:var(--muted); margin:8px 0 0; line-height:1.45}
.live-share-status{font-size:13px; color:var(--brand); margin-top:8px; min-height:16px}
.switch{position:relative; display:inline-block; width:52px; height:30px; flex:none}
.switch input{opacity:0; width:0; height:0}
.slider{position:absolute; inset:0; background:#39424d; border-radius:30px; transition:.15s; cursor:pointer}
.slider::before{content:""; position:absolute; height:24px; width:24px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s}
.switch input:checked+.slider{background:var(--brand)}
.switch input:checked+.slider::before{transform:translateX(22px)}
/* the visually-hidden checkbox can't show a ring, so surface focus on the slider */
.switch input:focus-visible+.slider{outline:2px solid #fff; outline-offset:2px; box-shadow:0 0 0 4px rgba(15,42,67,.55)}
.live-count,.live-row-ago{color:var(--muted); font-size:13px}
.live-map{position:relative; width:100%; height:56vh; min-height:320px; overflow:hidden;
  border-radius:12px; background:#aad3df; touch-action:none; user-select:none; cursor:grab}
.live-map:active{cursor:grabbing}
.live-map-tiles,.live-map-markers{position:absolute; inset:0}
.live-map-markers{pointer-events:none}
.tile{position:absolute; width:256px; height:256px}
.marker{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center}
.marker-dot{width:14px; height:14px; border-radius:50%; background:var(--brand); border:2px solid #fff; box-shadow:0 0 0 4px rgba(31,111,235,.25)}
.marker-label{margin-top:2px; font-size:11px; font-weight:700; color:#fff; background:var(--brand);
  padding:1px 6px; border-radius:8px; white-space:nowrap}
.marker-label.sm{margin:0; background:var(--brand)}
.marker.stale{opacity:.6}
.marker.stale .marker-dot{background:#8b949e; box-shadow:0 0 0 4px rgba(139,148,158,.25)}
.marker.stale .marker-label{background:#8b949e}
.live-zoom{position:absolute; right:10px; top:10px; display:flex; flex-direction:column; gap:6px}
.live-zoom button{width:40px; height:40px; font-size:20px; font-weight:700; border-radius:8px;
  border:1px solid #0003; background:#fff; color:#111; cursor:pointer}
.live-attrib{position:absolute; right:4px; bottom:2px; font-size:10px; color:var(--muted); background:var(--surface); border:1px solid var(--line); padding:1px 5px; border-radius:4px}
.live-list{margin-top:12px; display:flex; flex-direction:column; gap:8px}
.live-row{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--surface);
  border:1px solid #223; border-radius:10px; cursor:pointer}
.live-row-name{font-weight:600; flex:1}

/* ---- Tap-to-call ---- */
.call-btn{min-height:44px; text-decoration:none; background:#1a7a3e; color:#fff; border-color:#1a7a3e; font-weight:600}
.call-btn:active{transform:scale(.97)}
.row-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center; flex:none}
.call-office{margin:12px 0}
.call-office .call-btn{width:100%; min-height:52px; font-size:16px}

/* ---- Voice notes ---- */
.voice-panel{margin:0 0 8px}
.vr-rec{width:100%; min-height:44px}
.vr-live{display:flex; align-items:center; gap:10px; padding:6px 0}
.vr-time{font-variant-numeric:tabular-nums; flex:1; color:var(--text)}
.vr-dot{width:12px; height:12px; border-radius:50%; background:var(--danger); animation:vr-pulse 1s infinite}
@keyframes vr-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.vr-preview{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.vr-preview audio{flex:1 1 100%; height:36px}
.voice-bubble audio{width:100%; height:36px; margin-top:6px}
.vb-head{font-weight:600}
.cap-voice-attached{margin:6px 0; padding:8px 10px; background:var(--surface); border-radius:8px; font-size:14px}
@media (prefers-reduced-motion: reduce){ .vr-dot{animation:none} }
.sig-canvas{width:100%; height:160px; background:#fff; border:1px solid var(--border); border-radius:10px; touch-action:none}
.gps-line{display:flex; align-items:center; gap:8px; font-weight:400 !important; min-height:44px}
.gps-line input{width:22px !important; height:22px !important; margin:0 !important}

/* ---- Delivery detail card ---- */
.delivery-detail{padding:16px; overflow-y:auto}
.delivery-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px}
.delivery-bubble{align-self:stretch; max-width:100%; background:transparent; border:0; padding:0}
.dc-head{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.dc-supplier{font-size:18px; font-weight:700}
.photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px}
.pg-cell{aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--bg); border:1px solid var(--line)}
.pg-cell img{width:100%; height:100%; object-fit:cover; cursor:pointer}
.dc-fields{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:14px 0 0}
.dc-fields dt{color:var(--muted); font-size:13px} .dc-fields dd{margin:0; font-size:14px}
/* A note is neutral by default — it isn't an alarm. Red is reserved for a note
   that sits on a short/damaged/refused delivery (the .is-alert modifier). */
.dc-notes{margin-top:12px; padding:10px 12px; background:var(--note-bg); border:1px solid var(--note-line); border-radius:10px; color:var(--text)}
.dc-notes.is-alert{background:var(--alert-bg); border-color:var(--alert-line); color:var(--alert-text)}
.dc-sig-h{margin-top:14px; font-size:13px; color:var(--muted)}
.dc-sig{margin-top:6px; max-width:260px; width:100%; background:#fff; border-radius:8px}
.dc-evidence{margin-top:14px; font-size:12px; color:var(--muted)}
.dc-geo{display:inline-block; margin-top:6px; font-size:13px; color:var(--brand); text-decoration:none}
.transcript{margin-top:8px; padding:8px 12px; background:var(--line); border-left:3px solid var(--brand); border-radius:8px; font-size:14px}
.transcript summary{cursor:pointer; font-size:11px; color:var(--muted); list-style:revert}
.transcript summary::-webkit-details-marker{color:var(--muted)}
.transcript .transcript-text{margin-top:6px; color:var(--text); line-height:1.5}
.transcript.muted{color:var(--muted); border-left-color:var(--muted); font-style:italic}
.dc-actions{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
.chip.danger{border-color:var(--alert-line); color:var(--alert-text)}
.share-box:not(:empty){margin-top:10px; padding:10px 12px; background:var(--bg); border:1px solid var(--brand); border-radius:10px}
.share-url-row{display:flex; gap:6px; margin-top:6px}
.share-url{flex:1; padding:10px; font-size:16px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:8px}
/* Optional "email receipt to supplier" field — full width so the placeholder isn't clipped. */
.share-email{display:block; width:100%; margin-top:10px; padding:10px 12px; font-size:16px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:8px}
.dc-shares{margin-top:12px; display:flex; flex-direction:column; gap:6px}
.share-row{display:flex; justify-content:space-between; align-items:center; gap:8px}

/* ---- Toast / busy / skeleton (C1/C2) ---- */
.toast{position:fixed; left:50%; transform:translateX(-50%) translateY(20px); bottom:84px; z-index:40;
  max-width:90vw; padding:11px 16px; border-radius:10px; background:#222b36; color:#fff; font-size:14px;
  box-shadow:0 6px 24px #0007; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--danger)}
@media (min-width:640px){ .toast{bottom:24px} }
button.busy{position:relative; color:transparent !important}
button.busy::after{content:''; position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px 0 0 -8px;
  border:2px solid var(--line-strong); border-top-color:#fff; border-radius:50%; animation:fd-spin .6s linear infinite}
@keyframes fd-spin{to{transform:rotate(360deg)}}
.skeleton-row{height:56px; border-radius:12px; margin-bottom:8px;
  background:linear-gradient(90deg,var(--line) 25%,var(--line) 37%,var(--line) 63%); background-size:400% 100%;
  animation:fd-shimmer 1.3s ease infinite}
@keyframes fd-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ---- Dashboard chips (office Activity home) ---- */
.dash-chips{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap}
.dash-chip{flex:1; min-width:96px; min-height:56px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:0; background:var(--surface); border:1px solid var(--border); border-radius:12px; color:var(--muted)}
.dash-chip b{font-size:22px; color:var(--text)}
.dash-chip.chip-warn b{color:var(--warn-text)} .dash-chip.chip-danger b{color:var(--alert-text)}

/* ---- Due In ---- */
.due-add{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:14px}
.due-add-grid{display:grid; grid-template-columns:1fr; gap:8px}
@media(min-width:480px){.due-add-grid{grid-template-columns:1fr 1fr}}
.due-add-grid input{min-width:0; width:100%; min-height:44px; padding:10px 12px; font-size:16px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:10px}
#da-add{margin-top:10px; width:100%; padding:12px; font-weight:600; color:#fff; background:var(--brand); border:0; border-radius:10px}
.thread-row.overdue{border-color:var(--warn-line)}
.thread-row.overdue .thread-icon{color:var(--warn-text)}
.overdue-pill{color:var(--warn-text); border-color:var(--warn-line)}
.cap-matched{margin:6px 0 4px; color:var(--ok-text); font-size:14px}

/* ---- CSV import ---- */
.import-table{margin:12px 0; display:flex; flex-direction:column; gap:4px; max-height:40vh; overflow:auto}
.import-row{display:flex; justify-content:space-between; gap:10px; padding:8px 10px; background:var(--surface); border:1px solid var(--line); border-radius:8px; font-size:14px}
.import-row.bad{border-color:var(--alert-line)}
.import-status{color:var(--ok-text); white-space:nowrap} .import-row.bad .import-status{color:var(--alert-text)}
#import-text{width:100%; padding:12px; font:14px ui-monospace,monospace; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:10px}
#import-preview{margin-top:8px; padding:10px 16px; font-weight:600; color:#fff; background:var(--brand); border:0; border-radius:10px}

/* 5-tab bar: keep labels from overflowing */
.tabbar .tab-btn .tab-lb{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}

/* ---- Deliveries list ---- */
.list-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px}
.list-head .thread-title{flex:1 1 100%}   /* title on its own line; the action chips wrap neatly below it instead of crushing together */
.chip.primary{color:#fff; background:var(--brand); border:0; min-height:44px; padding:0 14px; font-weight:600}
.dl-filters{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap}
.dl-select{flex:1; min-width:120px; min-height:44px; padding:8px 12px; font-size:16px; color:var(--text);
  background:var(--bg); border:1px solid var(--border); border-radius:10px}
/* Search needs the whole row so its placeholder doesn't truncate; the date sits on its own line beneath it. */
#dl-filter-supplier{flex:1 1 100%}
#dl-filter-date{flex:0 0 auto; min-width:170px; color:var(--muted)}
.danger-btn{margin-top:14px; padding:12px 16px; font-weight:600; color:#fff; background:var(--danger);
  border:0; border-radius:10px; min-height:44px}

@media (min-width:640px){
  #view-thread{height:calc(100dvh - 58px)}
  .tabbar{display:none !important}          /* desktop: no bottom bar */
  .topnav{display:flex; gap:4px; align-items:center}
  body.has-tabbar #main{padding-bottom:0}
}

/* Reports */
.seg{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.report-tiles{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.report-tile{flex:1 1 84px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 10px;text-align:center}
.rt-value{font-size:24px;font-weight:800;color:var(--text);line-height:1.1}
.rt-label{font-size:12px;color:var(--muted);margin-top:3px}
.rt-warn .rt-value{color:var(--danger)}
.rt-ok .rt-value{color:#3fbf6b}
.rt-short .rt-value{color:#e0a13a}
.rt-damaged .rt-value{color:var(--danger)}
.report-table{margin-top:6px}
.rtr{display:flex;align-items:center;gap:4px;padding:9px 6px;border-bottom:1px solid var(--line)}
.rtr-head{font-weight:700;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.02em; align-items:flex-end}
.rtc{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--text)}
.rtc-n{flex:0 0 42px;text-align:right;color:var(--muted)}
/* Full-word headers ("Damaged", "Problem %") may wrap to two short lines. */
.rtr-head .rtc{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15;font-size:10px}
.rtr-warn .rtc:last-child{color:var(--danger);font-weight:700}
/* Supplier rows are tappable -> that supplier's deliveries. */
.rtr-link{cursor:pointer}
.rtr-link:hover{background:var(--line)}
.rtr-link:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}

/* Notifications bell + panel */
.notif-wrap{position:relative;display:inline-flex;align-items:center;margin-left:auto}
.bell{background:none;border:0;cursor:pointer;font-size:18px;padding:4px 6px;position:relative;color:var(--text);line-height:1}
.notif-count{position:absolute;top:-1px;right:-1px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.notif-panel{position:fixed;top:54px;right:8px;width:288px;max-width:calc(100vw - 16px);background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.35);z-index:1500;overflow:hidden}
.notif-head{padding:10px 14px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.02em;border-bottom:1px solid var(--line);color:var(--muted)}
.notif-item{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:12px 14px;color:var(--text);font-size:14px;cursor:pointer}
.notif-item:last-child{border-bottom:0}
.notif-item:hover,.notif-item:active{background:var(--line)}
.notif-empty{padding:16px 14px;color:var(--muted);font-size:14px}

/* ---- Deliveries condition segmented filter (saved views) ---- */
.dl-conds{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px}   /* wrap the filter pills so none are hidden off-screen (was a scrollbar-less overflow that looked cut off) */
.dl-cond{flex:0 0 auto; padding:8px 14px; font-size:14px; font-weight:600; white-space:nowrap;
  color:var(--muted); background:var(--bg); border:1px solid var(--border); border-radius:999px}
.dl-cond:hover{border-color:var(--line-strong)}
.dl-cond.is-active{color:#fff; background:var(--brand); border-color:var(--brand)}
.dl-cond-warn:not(.is-active){color:var(--danger)}
.dl-cond-warn.is-active{color:#fff; background:var(--danger); border-color:var(--danger)}

/* ---- Receiving quantity (capture form) ---- */
.capture-body select{width:100%; padding:14px; font-size:16px; color:var(--text);
  background:var(--bg); border:1px solid var(--border); border-radius:10px; margin-bottom:8px}
.qty-row{display:flex; gap:8px}
.qty-row input{width:auto; flex:1 1 0; min-width:0}
.qty-row #cap-qty{flex:2 1 0}
.cap-qty-hint{margin:-2px 0 8px; color:var(--muted)}

/* ---- Line items (receiving depth) ---- */
.line-items{display:flex; flex-direction:column; gap:6px}
.line-row{display:flex; flex-direction:column; gap:5px; padding:7px; border:1px solid var(--border); border-radius:9px}
.line-row input{width:auto; min-width:0}
.capture-body .line-row input, .due-add .line-row input{margin-bottom:0}
.line-main{display:flex; gap:6px; align-items:center}
.line-sub{display:flex; gap:6px}
.line-main .li-desc{flex:1}
.line-sub .li-code{flex:2}
.line-sub .li-exp, .line-sub .li-recv{flex:1; text-align:center}
.li-scan, .line-row .li-rm{flex:0 0 auto; width:40px; min-height:40px; padding:0; font-size:15px; color:var(--muted);
  background:var(--bg); border:1px solid var(--border); border-radius:8px}
.li-code-tag{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.line-add{margin:2px 0 8px; color:var(--brand); font-weight:600; justify-content:flex-start; display:inline-flex}
.da-lines-lbl{display:block; margin:10px 0 6px; color:var(--muted); font-weight:600}
.line-table{width:100%; border-collapse:collapse; margin:10px 0; font-size:14px}
.line-table th, .line-table td{text-align:left; padding:6px 8px; border-bottom:1px solid var(--line)}
.line-table th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase}
.line-table td.num{text-align:right; font-variant-numeric:tabular-nums}
.li-badge{display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600}
.li-badge.ok{background:rgba(26,122,62,.16); color:#1a7a3e}
.li-badge.short{background:rgba(176,120,20,.20); color:#b07814}
.li-badge.missing, .li-badge.over{background:rgba(176,40,44,.16); color:#b0282c}

/* ---- Barcode scanner ---- */
.sites-list{display:flex; flex-direction:column; gap:8px; margin:8px 0}
.site-row{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px}
.site-info{min-width:0}
.site-name{font-weight:650}
.site-badge{display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:2px 8px; border-radius:999px; background:var(--ok-bg); color:var(--ok-text); border:1px solid var(--ok-line); vertical-align:middle}
.site-acts{display:flex; gap:12px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end}
.site-acts .linkbtn.danger{color:var(--danger)}
.site-form{display:flex; flex-direction:column; gap:8px; margin:8px 0; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px}
.site-form input{width:100%}
.cap-site-wrap{margin:10px 0}
.cap-site-wrap select{width:100%}
.scan-btn{background:var(--surface); margin-top:4px}
.scan-overlay{position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.86); display:flex; align-items:center; justify-content:center; padding:16px}
.scan-card{display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; max-width:460px}
.scan-viewport{position:relative; width:100%; aspect-ratio:4 / 3; max-height:64vh; background:#000; border-radius:16px; overflow:hidden}
.scan-viewport video{width:100%; height:100%; object-fit:cover; display:block}
.scan-frame{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80%; max-width:300px; height:46%; max-height:150px; border:3px solid rgba(255,255,255,.95); border-radius:12px; box-shadow:0 0 0 100vmax rgba(0,0,0,.4)}
.scan-hint{margin:0; text-align:center; color:#fff; font-weight:600; padding:0 12px; font-size:15px}
.scan-cancel{width:auto; min-width:200px; padding:14px 44px; background:#fff; color:#111; border:0}

/* ---- API & webhooks settings ---- */
#settings-integrations{margin-top:8px}
.wh-ep{padding:10px; margin-bottom:8px; border:1px solid var(--border); border-radius:10px}
.wh-ep-top{display:flex; gap:8px; align-items:flex-start; justify-content:space-between}
.wh-url{flex:1 1 auto; min-width:0; font-size:13px; word-break:break-all; color:var(--text)}
.wh-badge{flex:0 0 auto; white-space:nowrap; font-size:11px; font-weight:700; padding:1px 8px; border-radius:999px}
.wh-badge.on{background:rgba(26,122,62,.16); color:#1a7a3e}
.wh-badge.off{background:rgba(176,40,44,.16); color:#b0282c}
.wh-acts{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:10px}
.wh-btn{min-height:36px; padding:0; font-size:13px; color:var(--brand); font-weight:600; white-space:nowrap}
.wh-add{margin-top:12px}
.wh-secret{margin-top:8px; padding:10px; background:var(--bg); border:1px dashed var(--brand); border-radius:8px}
.wh-secret-val{display:block; margin-top:4px; font-size:13px; word-break:break-all; color:var(--text)}
.wh-deliveries{margin-top:12px; padding:10px; background:var(--bg); border:1px solid var(--border); border-radius:8px}
.wh-del{font-size:13px; padding:3px 0; color:var(--muted); font-variant-numeric:tabular-nums}
.wh-del.wh-delivered{color:#1a7a3e}
.wh-del.wh-dead{color:#b0282c}

.wh-sub{margin:18px 0 4px; font-size:15px}

.wh-copy{margin-top:8px}

/* ---- "More" bottom sheet (mobile nav overflow) ---- */
.more-overlay{position:fixed; inset:0; z-index:30; background:rgba(20,24,28,.4);
  display:flex; align-items:flex-end; animation:more-fade .15s ease}
.more-sheet{width:100%; background:var(--surface); border-top-left-radius:18px; border-top-right-radius:18px;
  padding:6px 8px calc(72px + env(safe-area-inset-bottom, 0px)); box-shadow:0 -10px 30px rgba(0,0,0,.25);
  animation:more-slideup .18s ease}
.more-sheet-h{font-weight:700; font-size:12px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.05em; padding:14px 12px 6px}
.more-row{display:flex; align-items:center; gap:14px; width:100%; min-height:54px; padding:10px 12px;
  font-size:16px; font-weight:500; color:var(--text); background:transparent; border:0; border-radius:12px;
  text-align:left; cursor:pointer}
.more-row:active{background:var(--line)}
.more-ic{font-size:22px; width:28px; text-align:center}
@keyframes more-fade{from{opacity:0}to{opacity:1}}
@keyframes more-slideup{from{transform:translateY(14px)}to{transform:translateY(0)}}

/* ---- "Keep me signed in" checkbox on the login card ---- */
.remember-row{display:flex; align-items:center; gap:9px; margin:16px 0 0; font-size:14px;
  color:var(--text); font-weight:400; cursor:pointer; user-select:none}
.remember-row input{width:auto; min-height:0; margin:0; flex:none; accent-color:var(--brand)}

/* ---- Sealed-receipt banner (the payoff) ---- */
.dc-seal{margin:10px 0 14px; padding:12px 14px; border-radius:12px;
  background:rgba(31,138,74,.10); border:1px solid rgba(31,138,74,.34)}
.dc-seal-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.dc-seal-badge{font-weight:700; color:#2aa25c; font-size:14px}
.dc-seal-ref{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:3px 8px; letter-spacing:.06em}
.dc-seal-copy{min-height:0; padding:5px 11px; font-size:12px; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--border); border-radius:7px; margin-left:auto; cursor:pointer}
.dc-seal-copy:active{transform:scale(.96)}
.dc-seal-sub{margin-top:6px; font-size:12.5px; color:var(--muted)}

/* ---- Supplier replies on the delivery ---- */
.dc-replies{display:flex; flex-direction:column; gap:8px; margin:2px 0 6px}
.dc-reply{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.dc-reply.out{background:var(--brand); border-color:var(--brand); color:#fff}
.dc-reply.out .dc-reply-meta{color:rgba(255,255,255,.82)}
.dc-reply-text{font-size:14px; line-height:1.45; white-space:pre-wrap; word-break:break-word}
.dc-reply-meta{margin-top:5px; font-size:11.5px; color:var(--muted)}

/* ============ Capture wizard: 3 deliberate steps ============ */
/* View pads its own sections so the sticky footer can reach the edges. */
#view-capture{padding:0; display:flex; flex-direction:column; min-height:calc(100dvh - 56px)}

/* Step progress rail */
.cap-steps{display:flex; list-style:none; margin:0; padding:14px 16px 8px; gap:0}
.cap-dot{flex:1; position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:12px; color:var(--muted)}
.cap-dot::before{content:''; position:absolute; top:13px; left:-50%; width:100%; height:2px;
  background:var(--line); z-index:0}
.cap-dot:first-child::before{display:none}
.cap-dot.is-active::before, .cap-dot.is-done::before{background:var(--brand)}
.cap-dot-n{position:relative; z-index:1; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
  background:var(--surface); border:2px solid var(--line); color:var(--muted)}
.cap-dot.is-active .cap-dot-n, .cap-dot.is-done .cap-dot-n{background:var(--brand); border-color:var(--brand); color:#fff}
.cap-dot-l{position:relative; z-index:1; text-align:center}
.cap-dot.is-active .cap-dot-l{color:var(--text); font-weight:600}

/* Step panels grow to push the footer down */
.capture-body{flex:1}
.cap-step{padding-top:2px}
.cap-step > .req-lbl:first-child, .cap-step > label:first-child{margin-top:6px}

/* Optional "expecting this?" shortcut, boxed to read as a helper not a requirement */
.cap-match-block{background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:12px; margin-bottom:6px}
.cap-match-block > label:first-child{margin-top:0}
.cap-match-row{display:flex; gap:8px; align-items:center}
.cap-match-row input{margin-bottom:0}
.cap-match-row .scan-btn{flex:none; white-space:nowrap; min-height:44px}

/* "More" collapsibles for secondary fields */
.cap-more{margin-top:16px; border-top:1px solid var(--line); padding-top:2px}
.cap-more > summary{list-style:none; cursor:pointer; padding:12px 0; font-size:14px; font-weight:600;
  color:var(--brand); display:flex; align-items:center; gap:7px; min-height:44px}
.cap-more > summary::-webkit-details-marker{display:none}
.cap-more > summary::before{content:'+'; font-size:17px; font-weight:700; width:14px; text-align:center; line-height:1}
.cap-more[open] > summary::before{content:'\2013'}
.cap-more > summary:hover{text-decoration:underline}
.cap-more label:first-of-type{margin-top:8px}

/* Handover: a vertical list of tappable option cards, not a cramped segment row */
.ho-list{display:flex; flex-direction:column; gap:8px; margin:8px 0 4px}
.ho-opt{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; width:100%;
  padding:13px 14px; background:var(--surface); border:1px solid var(--border); border-radius:12px;
  color:var(--text); cursor:pointer}
.ho-opt.active{border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand)}
.ho-opt.active .ho-t{color:var(--brand)}
.ho-opt[data-h="refused"].active{border-color:var(--danger); box-shadow:inset 0 0 0 1px var(--danger)}
.ho-opt[data-h="refused"].active .ho-t{color:var(--danger)}
.ho-opt:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.ho-t{font-weight:700; font-size:15px}
.ho-d{font-size:12.5px; color:var(--muted); font-weight:400}

/* Sticky step controls (tabbar is hidden during capture, so this owns the bottom) */
.cap-nav{position:sticky; bottom:0; display:flex; gap:10px; z-index:5;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--bg); border-top:1px solid var(--line)}
.cap-nav .big-btn{margin-top:0; flex:1}
.cap-nav .big-btn.ghost{flex:0 0 34%}

/* Due In: collapse "add expected" behind a button so the list is what you see first */
.due-add-collapse{margin:0 0 6px}
.due-add-collapse > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:11px 15px; font-size:14px; font-weight:600; color:#fff; background:var(--brand);
  border-radius:10px; width:max-content}
.due-add-collapse > summary::-webkit-details-marker{display:none}
.due-add-collapse > summary:active{transform:scale(.98)}
.due-add-collapse[open] > summary{margin-bottom:12px}

/* Office Today home: "Recently received" heading with a See-all link */
.recent-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px}
.recent-head .recent-h{margin:0}
#today-chips{margin:14px 0 4px}

/* Settings: developer surface behind an "Integrations (advanced)" disclosure */
.settings-advanced{margin-top:24px; border-top:1px solid var(--line); padding-top:6px}
.settings-advanced > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  min-height:44px; font-size:15px; font-weight:600; color:var(--text)}
.settings-advanced > summary::-webkit-details-marker{display:none}
.settings-advanced > summary::before{content:'\25B8'; color:var(--muted); font-size:12px; transition:transform .15s}
.settings-advanced[open] > summary::before{transform:rotate(90deg)}
.settings-advanced .wh-sub:first-of-type{margin-top:12px}

/* ---- Manifest CSV import (Stage 2) ---- */
.mf-map-rows{display:flex; flex-direction:column; gap:8px; margin:8px 0 12px}
.mf-map-row{display:flex; align-items:center; gap:10px}
.mf-src{flex:1 1 40%; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mf-tgt{flex:1 1 55%; padding:10px; font-size:15px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:8px}
.mf-review-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:6px}
.mf-table{margin:8px 0; overflow-x:auto; border:1px solid var(--line); border-radius:10px}
.mf-row{display:flex; align-items:center; gap:0; border-bottom:1px solid var(--line); min-width:max-content}
.mf-row:last-child{border-bottom:0}
.mf-row-head{position:sticky; top:0; background:var(--surface); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--muted)}
.mf-row-head .mf-cell{padding:8px 10px}
.mf-cell{flex:0 0 150px; padding:4px 6px; min-width:0}
.mf-cell.mf-c-ln{flex:0 0 44px; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums}
.mf-cell.mf-c-inc{flex:0 0 64px; text-align:center}
.mf-cell input[type=text],.mf-cell input:not([type]){width:100%; padding:7px 8px; font-size:14px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:6px; margin:0}
.mf-cell input[type=checkbox]{width:20px; height:20px}
.mf-row.mf-excluded{opacity:.45}
.mf-row.mf-excluded .mf-cell input{text-decoration:line-through}
.mf-pager{display:flex; align-items:center; gap:8px; justify-content:center; margin:6px 0}

/* ---- Delivery runs ---- */
.run-mine{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); font-weight:400}
.run-mine input{width:18px; height:18px; margin:0}
.run-pill{display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; padding:2px 7px; border-radius:9px; background:var(--info-bg); color:var(--info-text)}
.run-pill-completed,.run-pill-arrived{background:var(--ok-bg); color:var(--ok-text)}
.run-pill-failed{background:var(--alert-bg); color:var(--alert-text)}
.run-block{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:8px 0}
.run-addressee{font-weight:700; font-size:16px}
.run-address{color:var(--muted); margin-top:2px}
.run-instructions{margin-top:8px; padding:8px 10px; background:var(--warn-bg); color:var(--warn-text); border-radius:8px; font-size:14px}
.run-chips{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0}
.run-req{font-size:12px; padding:3px 9px; border-radius:10px; background:var(--note-bg); border:1px solid var(--note-line); color:var(--text)}
.run-req-warn{background:var(--warn-bg); color:var(--warn-text); border-color:var(--warn-line)}
.run-req-info{background:var(--info-bg); color:var(--info-text); border-color:var(--info-line)}
.run-barcode{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:16px; letter-spacing:.08em; margin-bottom:8px}
.run-actions{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0}
.run-actions .big-btn{flex:1 1 45%; margin-top:0}
.run-ok{color:var(--ok-text); font-weight:600}
.run-timeline,.run-scanlist{margin-top:8px; display:flex; flex-direction:column; gap:3px}
.run-fail{border-color:var(--alert-line)}
.run-fail select,.run-fail input{width:100%; margin-bottom:8px}
.run-scan{position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center; padding:16px}
.run-scan-box{background:var(--surface); border-radius:14px; padding:16px; width:100%; max-width:420px}
.run-scan-head{display:flex; justify-content:space-between; align-items:center; font-weight:700; margin-bottom:10px}
.run-scan-video{width:100%; height:240px; background:#000; border-radius:10px; object-fit:cover}
.run-scan-manual{margin-top:12px}
.run-scan-manual input{width:100%; margin:6px 0}

.today-actions{display:flex; gap:8px; margin:10px 0 0}
.today-actions .chip{flex:1; min-height:46px; font-size:14px}

.mf-tgt.mf-suggested{border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand)}

/* ---- Stage 4: docket capture + review ---- */
.dk-review{display:flex; flex-direction:column; gap:14px}
.dk-source-pane{position:sticky; top:8px}
.dk-source{background:var(--note-bg); border:1px solid var(--border); border-radius:12px; padding:8px; display:flex; flex-direction:column; gap:6px; align-items:center}
.dk-img{max-width:100%; height:auto; border-radius:8px; display:block}
.dk-pdf{width:100%; height:420px; border:0; border-radius:8px}
.dk-rows-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px}
.dk-rows{display:flex; flex-direction:column; gap:12px; margin:8px 0 14px}
.dk-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px}
.dk-card.dk-low{border-color:var(--warn-line); background:var(--warn-bg)}
.dk-card.dk-err{border-color:var(--alert-line); opacity:.72}
.dk-card-head{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px}
.dk-inc{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14px; cursor:pointer}
.dk-inc input{width:20px; height:20px}
.dk-conf{font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--ok-bg); color:var(--ok-text); border:1px solid var(--ok-line); white-space:nowrap}
.dk-conf-low{background:var(--warn-bg); color:var(--warn-text); border-color:var(--warn-line)}
.dk-conf-det{background:var(--info-bg); color:var(--info-text); border-color:var(--info-line)}
.dk-field{display:grid; grid-template-columns:96px 1fr; align-items:center; gap:8px; margin:6px 0}
.dk-flabel{font-size:13px; color:var(--muted)}
.dk-field input{width:100%}
.dk-field input.dk-missing{border-color:var(--warn-line); background:var(--warn-bg)}
@media (min-width:760px){
  .dk-review{flex-direction:row; align-items:flex-start}
  .dk-source-pane{flex:0 0 44%; max-width:44%}
  .dk-rows-pane{flex:1 1 auto; min-width:0}
  .dk-pdf{height:640px}
}

/* ---- Internal team notes on a delivery (detail view) ---- */
.dc-notes{margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.dc-note-sub{color:var(--muted); margin:2px 0 9px}
.dc-notes-list{display:flex; flex-direction:column; gap:8px; margin-bottom:10px}
.dc-note{background:var(--note-bg); border:1px solid var(--note-line); border-radius:10px; padding:8px 10px}
.dc-note-meta{font-size:12px; color:var(--muted); margin-bottom:3px}
.dc-note-body{white-space:pre-wrap; word-break:break-word}
.dc-note-empty{color:var(--muted)}
.dc-note-form{display:flex; flex-direction:column; gap:8px}
.dc-note-form textarea{width:100%; resize:vertical}
.dc-note-form .chip.primary{align-self:flex-start}

/* Internal-note count badge on delivery list rows */
.note-badge{display:inline-flex; align-items:center; gap:2px; margin-left:6px; padding:1px 7px; border-radius:999px;
  background:var(--info-bg); color:var(--info-text); border:1px solid var(--info-line); font-size:12px; font-weight:600}

/* ================= Internal team messaging (Messages tab) ================= */
/* Conversation list */
.conv-list{display:flex; flex-direction:column}
.conv-list .thread-row{position:relative}
.conv-unread{position:absolute; right:12px; top:50%; transform:translateY(-50%);
  min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--brand); color:#fff;
  font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center}

/* Conversation (chat) — full-height flex, mirrors #view-thread */
#view-conversation{display:flex; flex-direction:column; height:calc(100dvh - 56px); padding:0}
#conv-messages.timeline{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:12px}
.bubble .msg-sender{font-size:12px; font-weight:700; color:var(--brand); margin-bottom:3px}
.bubble.out .msg-sender{color:#fff}
.msg-text{white-space:pre-wrap; word-break:break-word}
.msg-photo{display:block; max-width:min(240px,70vw); height:auto; border-radius:10px; margin:2px 0; cursor:pointer}
.msg-voice{display:block; max-width:230px; margin:2px 0}
.msg-dur{font-size:11px; color:var(--muted); display:block}
.bubble.out .msg-dur{color:rgba(255,255,255,.85)}
.msg-deliv{display:inline-flex; align-items:center; gap:4px; margin-top:6px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--info-line); background:var(--info-bg); color:var(--info-text); font-size:12px; font-weight:600; cursor:pointer}

/* Composer with icon actions */
.conv-composer-row{display:flex; align-items:center; gap:4px}
.conv-composer-row input#conv-input{flex:1; min-width:0}
.conv-composer-row .iconbtn{flex:0 0 auto; font-size:19px; width:40px; height:40px; line-height:1}
.conv-composer-row .conv-send{background:var(--brand); color:#fff; border-radius:50%}
.conv-deliv-chip{align-self:flex-start; margin:0 0 6px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--info-line); background:var(--info-bg); color:var(--info-text); font-size:12px; font-weight:600; cursor:pointer}

/* Bottom sheet: pick a teammate / a delivery */
.msg-sheet{position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--surface);
  border-top:1px solid var(--border); border-radius:16px 16px 0 0; padding:14px; box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.msg-sheet-head{font-weight:700; margin-bottom:10px}
.msg-people{display:flex; flex-direction:column; gap:8px; max-height:50vh; overflow-y:auto; margin-bottom:10px}
.msg-people .chip{justify-content:flex-start; text-align:left}

/* Unread badge on the Messages tab (bottom bar + desktop nav + "More") */
.tab-btn{position:relative}
.tab-badge{position:absolute; top:3px; left:50%; margin-left:4px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--brand); color:#fff; font-size:10px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; line-height:1; box-shadow:0 0 0 2px var(--surface)}

/* "Turn on notifications" prompt at the top of the conversation list */
.msg-notify-cta{display:block; width:100%; margin:0 0 12px; padding:11px; text-align:center;
  background:var(--info-bg); border:1px solid var(--info-line); color:var(--info-text); border-radius:10px; font-weight:600; cursor:pointer}

/* Runs — "needs scanning" cue */
.run-scanbadge{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; margin-right:6px}
.run-scanbadge.to-scan{background:var(--warn-bg); color:var(--warn-text); border:1px solid var(--warn-line)}
.run-scanbadge.in-transit{background:var(--info-bg); color:var(--info-text); border:1px solid var(--info-line)}
.run-scanbadge.scanned{background:var(--ok-bg); color:var(--ok-text); border:1px solid var(--ok-line)}
.run-scan-summary{background:var(--warn-bg); color:var(--warn-text); border:1px solid var(--warn-line); border-radius:10px; padding:9px 13px; margin-bottom:10px; font-weight:600; font-size:14px}

/* Home run button emphasised when there's outbound work waiting */
.today-actions .chip.has-work{border-color:var(--brand); color:var(--brand); font-weight:700}

/* ④/pickup: capture-kind toggle + Picked-up badge (additive). */
.cap-kind-block{margin:0 0 14px}
.cap-kind-seg .seg-btn{padding:14px 0}
#capkind-seg .seg-btn[data-k="pickup"].active{background:#0d6d78; border-color:#0d6d78}
#pickup-src-wrap{margin-top:10px}
.handover-badge.ho-pickup{background:var(--info-bg); color:var(--info-text)}

/* Subscription (billing) section in Settings. */
.billing-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 4px}
.billing-actions button{min-height:44px;padding:0 18px}
.billing-actions .ghost-btn{background:transparent;color:var(--brand);border:1px solid var(--border);font-weight:600}
#settings-billing #billing-status{color:var(--text);font-size:14.5px;line-height:1.5}

/* Paywall (subscription required to use). */
.paywall-card{text-align:center;max-width:430px;margin:7vh auto 0}
.paywall-seal{font-size:44px;line-height:1;margin-bottom:8px}
.paywall-card h2{font-size:24px;margin:0 0 12px}
.paywall-body{color:var(--muted);font-size:15px;line-height:1.55;margin-bottom:18px}
.paywall-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.paywall-actions .big-btn{width:100%}
.paywall-actions .linkbtn{margin-top:2px}
.paywall-note{color:var(--muted);margin-top:18px}

/* Embedded ETA mini-map on the expected-delivery detail (self-rendered OSM tiles). */
.mini-map{position:relative;height:190px;border-radius:12px;overflow:hidden;margin:10px 0;background:#e8ecef;border:1px solid var(--border)}
.mini-tiles,.mini-markers{position:absolute;inset:0}
.mini-tile{position:absolute;width:256px;height:256px;user-select:none;pointer-events:none}
.mini-markers{pointer-events:none}
.mini-marker{position:absolute;transform:translate(-50%,-50%);font-size:23px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.mini-marker.is-dest{transform:translate(-50%,-88%);font-size:21px}

/* Due In — List/Calendar toggle + month calendar of scheduled deliveries. */
.due-viewtoggle{display:flex;gap:6px;margin:8px 0}
.due-viewtoggle button{flex:1;min-height:40px;background:var(--surface);color:var(--muted);border:1px solid var(--border);border-radius:10px;font-weight:600;cursor:pointer}
.due-viewtoggle button.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.due-calendar{margin-top:6px}
.cal-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cal-title{flex:1;text-align:center;font-weight:800;font-size:16px}
.cal-nav{width:40px;height:40px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:20px;line-height:1;cursor:pointer}
.cal-today{height:40px;padding:0 12px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--brand);font-weight:600;cursor:pointer}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.cal-dow span{text-align:center;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-cell{position:relative;aspect-ratio:1/1;min-height:42px;background:var(--surface);border:1px solid var(--border);border-radius:10px;cursor:pointer;padding:5px 0 0 6px;color:var(--text);text-align:left}
.cal-cell.other{opacity:.36}
.cal-cell.today{border-color:var(--brand);border-width:2px}
.cal-cell.has{background:var(--info-bg);border-color:var(--info-line)}
.cal-cell.overdue{background:var(--alert-bg);border-color:var(--alert-line)}
.cal-cell.sel{outline:2px solid var(--brand);outline-offset:-2px}
.cal-num{font-size:13px;font-weight:600}
.cal-count{position:absolute;right:4px;bottom:4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.cal-cell.overdue .cal-count{background:var(--danger)}
.cal-day{margin-top:12px}
.cal-day-h{font-weight:800;font-size:15px;margin-bottom:6px}

/* Docket live camera + capture preview (getUserMedia). */
.dk-capture-row{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.dk-capture-row .big-btn{flex:1;min-width:150px;text-align:center;cursor:pointer}
.dk-file-label{display:inline-flex;align-items:center;justify-content:center}
.dk-cam{margin:10px 0}
.dk-cam-video{width:100%;max-height:60vh;background:#000;border-radius:12px;display:block}
.dk-cam-actions{display:flex;gap:10px;margin-top:10px}
.dk-cam-actions .big-btn{flex:1}
.dk-cam-actions .chip{flex:0 0 auto}
.dk-preview{margin:10px 0}
.dk-preview-img{max-width:100%;border-radius:12px;display:block;margin-bottom:6px}

/* Admin forms (Team / Partners / Settings): full-width, spaced inputs — were
   cramped and flowing two-up (the supplier email field was cut off). */
.settings-body input:not([type=checkbox]):not([type=radio]),
.settings-body select{width:100%; display:block; box-sizing:border-box;
  padding:12px 14px; margin:6px 0; font:inherit; color:var(--text);
  background:var(--surface); border:1px solid var(--line); border-radius:10px}
.settings-body input:focus, .settings-body select:focus{outline:2px solid var(--brand); border-color:var(--brand)}

/* Partners: three clear cards so suppliers / connected businesses / shipments
   read as sections of ONE page, not three stacked forms. */
.pt-intro{color:var(--muted); margin:2px 0 14px}
.pt-card{background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:16px 16px 18px; margin:0 0 14px}
.pt-card>h3:first-child{margin-top:0}
.pt-card>.small:first-of-type{margin-top:0}

/* Internal voice notes (delivery detail). */
.dc-note-voice{margin:8px 0}
.dc-note-audio{margin-top:6px}