/* dispatch.ireachright.com · the board · v2.1 · 06-10-2026 — courier cards + customer rows */
body.board{font-size:14px}
.bwrap{max-width:1440px;margin:0 auto;padding:18px 24px 120px}
#start{max-width:900px;margin:26px auto}
.day{display:flex;align-items:baseline;gap:8px 26px;flex-wrap:wrap;margin-bottom:14px}
.day h1{font-size:26px;font-weight:900;margin:0}
.day span{font-size:15px;color:var(--grey)} .day span b{color:var(--ink);font-size:17px}
.bar1{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:8px}
.bar1 .lbl{font-weight:800;color:var(--ink)} .bar1 .grow{flex:1}
.bar1 #narrowBox{display:inline-flex;align-items:center;gap:14px;margin-left:10px}
.bar1 .seg{margin-left:0}
.filebit{font-size:13px;color:var(--grey)}
.hint{font-size:14px;color:var(--grey);margin:0 0 14px}
.removed{font-size:13px;color:var(--grey);margin-bottom:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.removed .pillx{background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 6px 3px 12px;color:var(--ink);font-weight:700;display:inline-flex;gap:8px;align-items:center}
.places{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.place{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.place b{color:var(--grey);font-weight:700;margin-left:4px}
.place.sel{background:var(--edit);border-color:var(--ignite)}

/* ── By courier: cards ───────────────────────────────────────────────── */
.lanes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;align-items:start}
.lane{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 2px 10px rgba(12,8,41,.04);min-height:150px}
.lane.none{background:#fdf7f1;border-style:dashed;border-color:#e6cdb6}
.lane.add{background:none;border:1.5px dashed #c3cadc;box-shadow:none;justify-content:center}
.lane.over{outline:3px solid var(--ignite);outline-offset:2px;background:var(--edit)}
.lhead{cursor:grab;position:relative;padding-right:28px}
.lhead h2{font-size:17px;font-weight:800;margin:0;line-height:1.2}
.rtag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:3px}
.rtag.own{color:var(--blue)}
.lane .x{position:absolute;right:-4px;top:-4px;border:0;background:none;font-size:22px;line-height:1;color:var(--grey);cursor:pointer;padding:4px 8px;border-radius:8px}
.lane .x:hover{background:var(--mist);color:var(--ink)}
.count{display:flex;align-items:baseline;gap:8px}
.count b{font-size:42px;font-weight:900;color:var(--ink);line-height:1}
.count span{font-size:15px;color:var(--grey);font-weight:700}
.collect{font-size:14px;color:var(--rust);font-weight:700}
.chips2{display:flex;flex-direction:column;gap:7px}
.pchip{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--mist);border:0;border-radius:12px;padding:9px 11px;font:inherit;text-align:left;cursor:grab;width:100%}
.pchip:hover{background:#eaeef8}
.pchip.dragging,.lhead.dragging{opacity:.35}
.pchip,.lhead{touch-action:none;user-select:none;-webkit-user-select:none}
.pchip:focus-visible{outline:2px solid var(--ignite)}
body.dragging-on,body.dragging-on *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.ghost{position:fixed;left:0;top:0;z-index:20;pointer-events:none;background:var(--ink);color:#fff;font-weight:800;font-size:14px;border-radius:12px;padding:8px 12px;box-shadow:0 10px 24px rgba(12,8,41,.35);white-space:nowrap}
.pchip .who b{display:block;color:var(--ink);font-size:14px;font-weight:800}
.pchip .who small{font-size:12.5px;color:var(--grey)}
.pchip .who em{font-style:normal;font-size:11px;font-weight:800;color:var(--blue);margin-left:6px}
.pchip .n{text-align:right;line-height:1.1;flex:none}
.pchip .n b{display:block;font-size:19px;font-weight:900;color:var(--green)}
.pchip .n small{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)}
.pchip .n.none b{color:#b4b8c6}
.dropnote{font-size:13px;color:var(--grey);text-align:center;padding:14px 6px}
.lane .btn{width:100%}
.lane select,.rec select,.drawer select,.sticky select,.modal select{width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:12px;font:inherit;color:var(--ink);background:#fff}
.lane select{font-size:13px;color:var(--grey);border-width:1px}

/* ── By customer: rows ───────────────────────────────────────────────── */
.crow{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:10px;display:grid;grid-template-columns:22px minmax(210px,1.1fr) minmax(290px,1.3fr) minmax(220px,1.1fr) minmax(200px,1fr) 190px;gap:18px;align-items:start;box-shadow:0 2px 8px rgba(12,8,41,.03)}
@media(max-width:1180px){.crow{grid-template-columns:22px 1fr 1fr}.crow>.b3,.crow>.b4{grid-column:2/-1}.crow>.b2{grid-column:3}.crow>.rec{grid-column:2/-1}}
@media(max-width:700px){.crow{grid-template-columns:22px 1fr}.crow>*{grid-column:2!important}.crow>input{grid-column:1!important}}
.crow>input{width:18px;height:18px;accent-color:var(--ignite);margin-top:4px}
.who h3{font-size:19px;font-weight:900;margin:0}
.who p{font-size:13px;color:var(--grey);line-height:1.45;margin:2px 0 0}
.who .pay{color:var(--text);font-weight:700}
.sec{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ignite);margin:0 0 7px}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lvl{background:var(--mist);border-radius:12px;padding:8px 10px}
.lvl.on{background:var(--greenw)}
.lvl small{font-size:10.5px;font-weight:800;color:var(--grey);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.lvl b{display:block;font-size:26px;font-weight:900;color:var(--ink);line-height:1.1}
.lvl span{font-size:12px;color:var(--text)} .lvl em{font-style:normal;color:var(--rust);font-weight:800}
.bars{display:flex;flex-direction:column;gap:6px}
.bar{display:grid;grid-template-columns:minmax(80px,auto) 1fr 26px;align-items:center;gap:8px;font-size:13px;color:var(--ink);font-weight:700}
.bar .t{background:var(--mist);border-radius:6px} .bar i{display:block;height:10px;border-radius:6px;background:var(--ignite)}
.bar b{text-align:right;font-weight:900}
.small{font-size:11.5px;color:var(--grey);margin:5px 0 0}
body.board .facts{display:block;font-size:13px;line-height:1.6} body.board .facts b{display:inline;min-width:0;color:var(--ink);margin-right:4px}
.rec .sec{color:var(--green)} .rec.own .sec{color:var(--blue)}
.rec select{border-color:var(--green);background:var(--greenw);font-weight:800;font-size:15px}
.rec.own select{border-color:var(--blue);background:#E9F0F8}
.rec.none select{border-color:var(--line);background:#fff;font-weight:700}
.rec .why{font-size:11.5px;color:var(--grey);margin:5px 0 0;line-height:1.35}
.nohist{font-size:13px;color:var(--grey);background:#fdf7f1;border-radius:12px;padding:12px}

/* ── Bottom bar, drawer, dialog ──────────────────────────────────────── */
body.board .sticky{font-size:15px}
.sticky .acts{align-items:center}
.sticky select{width:auto;border:0;border-radius:24px;padding:10px 14px;font-weight:800}
.scrim{position:fixed;inset:0;background:rgba(12,8,41,.32);z-index:8}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(470px,100vw);background:#fff;z-index:9;box-shadow:-18px 0 50px rgba(12,8,41,.22);padding:24px 26px;overflow-y:auto}
.drawer .x,.modal .x{position:absolute;right:16px;top:14px;border:0;background:none;font-size:26px;color:var(--grey);cursor:pointer;padding:4px 10px}
.drawer .blk{margin-top:20px}
.drawer .lvl b{font-size:32px}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow-y:auto;background:#fff;border-radius:18px;padding:24px 26px;box-shadow:0 30px 80px rgba(12,8,41,.35)}
.modal h3{font-size:21px;font-weight:900;margin:0 34px 4px 0}
.modal .grp{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.modal .grp b{color:var(--ink);font-size:15px} .modal .grp small{display:block;color:var(--grey);font-size:13px}
.modal .grp .btn{padding:8px 16px}
.modal .row2 input{display:block;width:100%;margin-top:4px}

/* ── v2.0: hand-over dialog, sign-in ─────────────────────────────────── */
.tabs{display:flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;margin:14px 0 12px;background:#fff}
.tabs button{flex:1;border:0;background:none;padding:9px 8px;font:inherit;font-weight:800;color:var(--ink);cursor:pointer}
.tabs button.sel{background:var(--ink);color:#fff}
.modal .check{margin:10px 0}
.modal label.courier input{max-width:none}
.who b{color:var(--ink)}

/* ── v2.1: payment on every parcel ───────────────────────────────────── */
.pchip .who small.pay{display:block;font-weight:800;margin-top:1px}
.pay.cod{color:var(--rust)!important} .pay.pre{color:var(--green)!important}
.collect span{color:var(--green)}