/* Singh driver app. Same look as the approved mockup (Singh driver POD app - plan.html):
   full-screen, one thumb, big targets, main action at the bottom. */
:root{
  --screen:#f6f8fa; --ink:#0f2230; --muted:#56697a; --line:#d7e0e7; --card:#ffffff;
  --ice:#0a6fa8; --ice-soft:#e2f0f8; --ok:#1d8a4e; --ok-soft:#e1f3e8; --warn:#b86a00; --warn-soft:#fbefd9;
  --bad:#b4302a; --bad-soft:#fbe4e2;
  --body:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:var(--screen);color:var(--ink);font:16px/1.4 var(--body);overscroll-behavior:none}
#app{height:100%;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.appbar{padding:10px max(16px,env(safe-area-inset-left,0px)) 10px;display:flex;align-items:center;gap:10px}
.appbar h4{font-size:1.35rem;font-weight:700;margin:0;flex:1;line-height:1.15;min-width:0}
.appbar .back{font:inherit;border:0;background:none;color:var(--ice);font-size:1.05rem;cursor:pointer;padding:8px 4px}
.appbar .who{font-size:.8rem;color:var(--muted)}
.queue{margin:0 14px 8px;border-radius:10px;padding:8px 12px;font-size:.86rem;display:flex;justify-content:space-between;align-items:center;background:var(--ok-soft);color:var(--ok);gap:8px}
.queue.wait{background:var(--warn-soft);color:var(--warn)}
.queue.bad{background:var(--bad-soft);color:var(--bad)}
.body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 max(14px,env(safe-area-inset-left,0px)) 14px;display:flex;flex-direction:column;gap:10px}
.dock{padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);background:var(--screen)}
.big{font:600 1.1rem var(--body);min-height:58px;border:0;border-radius:14px;cursor:pointer;width:100%}
.big.primary{background:var(--ice);color:#fff}.big.go{background:var(--ok);color:#fff}
.big.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.big:disabled{opacity:.5}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.stop{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%}
.stop .no{font-size:1.3rem;font-weight:700;color:var(--muted);text-align:center}
.stop b{display:block;font-size:1rem;line-height:1.25}
.stop small{color:var(--muted);font-size:.82rem;display:block}
.st{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:99px;background:var(--ice-soft);color:var(--ice);white-space:nowrap}
.st.ok{background:var(--ok-soft);color:var(--ok)}.st.wait{background:var(--warn-soft);color:var(--warn)}.st.short{background:var(--bad-soft);color:var(--bad)}
.stop.done{opacity:.72}
.depot{font-size:.7rem;font-weight:700;color:var(--warn);text-transform:uppercase;letter-spacing:.05em}
.scanbox{background:#000;border-radius:16px;min-height:190px;position:relative;overflow:hidden;color:#cfe6f5;font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.scanbox video{width:100%!important;height:auto!important;display:block;object-fit:cover}
.scanbox .hint{position:absolute;left:0;right:0;bottom:8px;text-align:center;pointer-events:none;text-shadow:0 1px 3px #000}
.scanbox .off{padding:20px;text-align:center}
.scanbox .off button{margin-top:10px}
.manual{display:flex;gap:8px}
.manual input{flex:1;min-width:0;font:500 1.1rem var(--mono);padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-transform:uppercase}
.manual button{width:90px;flex-shrink:0}
.link{font:600 1rem var(--body);border:0;background:none;color:var(--ice);cursor:pointer;padding:8px 0;text-align:left}
label.f{display:block;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.kv{display:grid;grid-template-columns:92px minmax(0,1fr);gap:4px 10px;font-size:.92rem}
.kv>span:nth-child(odd){color:var(--muted)}
.kv a{color:var(--ice)}
.note{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:10px 12px;font-size:.92rem;font-weight:500}
.note.bad{background:var(--bad-soft);color:var(--bad)}.note.good{background:var(--ok-soft);color:var(--ok)}
.ctn{display:flex;align-items:center;justify-content:space-between;gap:10px}
.count{font-size:1.9rem;font-weight:700;line-height:1.1}
.step{display:flex;gap:8px}.step button{width:54px;height:54px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:1.5rem;cursor:pointer}
.boxes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.boxes button{min-width:44px;height:44px;border-radius:9px;border:1.5px solid var(--line);background:var(--card);font:600 .85rem var(--mono);color:var(--muted);cursor:pointer;padding:0 6px}
.boxes button.y{background:var(--ok);border-color:var(--ok);color:#fff}
.boxes button.m{background:var(--ice);border-color:var(--ice);color:#fff}
.boxes .all{padding:0 14px;font-family:var(--body);color:var(--ice);border-color:var(--ice)}
.legend{font-size:.76rem;color:var(--muted);display:flex;gap:12px;align-items:center}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.field{width:100%;font:500 1.05rem var(--body);padding:13px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.sig{width:100%;height:170px;background:#fff;border:1px dashed var(--muted);border-radius:12px;touch-action:none;display:block}
.sigrow{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-top:4px}
.sigrow button{font:inherit;border:0;background:none;color:var(--ice);cursor:pointer;padding:4px}
.photos{display:flex;gap:8px;flex-wrap:wrap}
.photos img,.addph{width:76px;height:76px;border-radius:10px;object-fit:cover}
.addph{border:1px dashed var(--muted);display:flex;align-items:center;justify-content:center;color:var(--ice);font-size:.85rem;cursor:pointer;text-align:center;line-height:1.1}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 .95rem var(--body);border:1px solid var(--line);background:var(--card);color:var(--ink);padding:10px 14px;border-radius:99px;cursor:pointer}
.chip.on{background:var(--ice);color:#fff;border-color:var(--ice)}
.auto{font-size:.8rem;color:var(--muted);font-family:var(--mono)}
.donemark{width:84px;height:84px;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;font-size:2.6rem;margin:18px auto 6px}
.donemark.warn{background:var(--warn)}
.center{text-align:center}
.flash{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;z-index:50}
.flash.g{background:rgba(29,138,78,.35);opacity:1}.flash.r{background:rgba(180,48,42,.35);opacity:1}
.page-note{max-width:30em;margin:15vh auto;padding:0 20px}
.page-note h1{font-size:1.6rem}
.empty{color:var(--muted);padding:12px 2px}