/* Shared components for every role: nav tabs, alerts, forms, buttons, chips, toggles, lists, cards, badges, tables, dialogs. Uses only tokens from tokens.css. */
/* tabs */
.tabs{position:fixed;inset-inline:0;bottom:0;max-width:560px;margin-inline:auto;display:flex;border-top:1px solid var(--line);background:var(--white);z-index:6}
.tabs a{flex:1;text-align:center;padding:8px 0 10px;font-size:11px;font-weight:700;color:var(--nav-ink);text-decoration:none}
.tabs a span{display:block;font-size:20px;line-height:1.2}
.tabs a.on{color:var(--accent)}
/* notes */
.note{border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.4;margin:10px 0}
.note.pink{background:var(--pinkbg);color:var(--pink-ink)}
.note.red{background:var(--redbg);color:var(--red-ink);border:1.5px solid var(--red-line)}
.note.red ul{margin:6px 0 0;padding-inline-start:18px}
.note.red a{color:var(--red-ink);font-weight:600}
.note.green{background:var(--greenbg);color:var(--green-ink)}
.note.amber{background:var(--amberbg);color:var(--amber-ink)}
.note.violet{background:var(--accent-bg);color:var(--accent-ink);margin-top:14px}
.pwbox .kv{margin-top:6px}.pwbox small{display:block;margin-top:8px}
/* forms */
.fld{margin-bottom:12px}
.lbl{font-size:12.5px;font-weight:700;color:var(--sub);margin:10px 0 4px;display:block}
.in{width:100%;border:1.5px solid var(--border-strong);border-radius:10px;padding:10px 12px;font:inherit;font-size:16px;min-height:44px;background:var(--white);color:var(--ink)}
textarea.in{resize:vertical}
.in:focus{outline:3px solid var(--accent-bg);border-color:var(--accent)}
.in.err{border-color:var(--red)}
.em{color:var(--red);font-size:12.5px;font-weight:600;margin-top:4px}
.hint{font-size:12px;color:var(--sub);margin-top:4px}
.inwrap{position:relative}
.inwrap .in{padding-inline-end:84px}
.suffix{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--sub);pointer-events:none}
.two{display:flex;gap:10px}.two>*{flex:1;min-width:0}
.btn{display:block;width:100%;text-align:center;background:var(--accent);color:var(--white);font:inherit;font-weight:800;border:2px solid var(--accent);border-radius:12px;padding:12px;font-size:15.5px;margin-top:14px;cursor:pointer;text-decoration:none}
.btn.ghost{background:var(--white);color:var(--accent)}
.btn.dash{background:var(--white);color:var(--accent);border:2px dashed var(--accent)}
.btn.no{background:var(--white);color:var(--red);border-color:var(--red)}
.btn:focus-visible,.fc:focus-visible,.acts a:focus-visible,.chip input:focus-visible+span{outline:3px solid var(--accent-bg);outline-offset:2px}
.btn:disabled{opacity:.6}
.upload{cursor:pointer;margin-top:0;padding:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span,button.chip{display:inline-block;border:1.5px solid var(--line);border-radius:18px;padding:7px 14px;font-size:13.5px;font-weight:700;background:var(--greybg);color:var(--sub);font-family:inherit}
.chip input:checked+span,button.chip.on{background:var(--accent);color:var(--white);border-color:var(--accent)}
button.chip{cursor:pointer}
button.chip:disabled{opacity:.5;cursor:default}
.chk{display:flex;align-items:center;gap:10px;font-size:13.5px;margin-top:8px}
.chk input{width:20px;height:20px;accent-color:var(--accent)}
.sec{border:1.5px solid var(--line);border-radius:var(--radius);padding:4px 12px 10px;margin-bottom:12px}
.sec .sh{font-size:12px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin:10px 0 2px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border:none}.kv span{color:var(--sub)}
.kvs{padding-block:4px}
/* segmented control */
.seg{display:flex;border:2px solid var(--accent);border-radius:12px;overflow:hidden;margin:4px 0 12px}
.seg label,.seg a{flex:1;position:relative;text-align:center;font-weight:800;font-size:13px;color:var(--accent);text-decoration:none}
.seg label input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg label span,.seg a{display:block;padding:10px 4px}
.seg label input:checked+span,.seg a.on{background:var(--accent);color:var(--white)}
.seg label input:focus-visible+span{outline:3px solid var(--accent-bg);outline-offset:-3px}
.seg.sub3{font-size:12px}
/* toggle */
.tg{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;cursor:pointer}
.tg:last-child{border:none}.tg small{display:block;color:var(--sub);font-size:12px;font-weight:400}
.sw{appearance:none;-webkit-appearance:none;flex:none;width:46px;height:26px;border-radius:13px;background:var(--border-strong);position:relative;cursor:pointer;transition:background .15s;border:0}
.sw:after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:var(--white);transition:inset-inline-start .15s;box-shadow:var(--shadow-knob)}
.sw:checked{background:var(--accent)}.sw:checked:after{inset-inline-start:23px}
.sw:disabled{opacity:.55}
.sw:focus-visible{outline:3px solid var(--accent-bg);outline-offset:2px}
.swb{flex:none;width:46px;height:26px;border-radius:13px;background:var(--border-strong);position:relative;cursor:pointer;border:0}
.swb i{position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:var(--white);box-shadow:var(--shadow-knob)}
.swb.on{background:var(--accent)}.swb.on i{inset-inline-start:23px}
/* lists */
.fl{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 12px}
.fc{border-radius:16px;padding:6px 12px;font-size:12.5px;font-weight:700;background:var(--greybg);color:var(--sub);text-decoration:none;border:1.5px solid transparent}
.fc.on{background:var(--accent);color:var(--white)}
.search{margin-bottom:6px}
.srow{border:1.5px solid var(--line);border-radius:var(--radius);padding:9px;margin-bottom:9px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--white)}
.srow.hiddenitem{background:var(--greybg)}
.srow .rowlink{display:flex;gap:10px;align-items:center;flex:1;min-width:0;text-decoration:none;color:inherit}
.photo{width:50px;height:50px;border-radius:10px;object-fit:cover;flex:none;background:var(--greybg)}
.photo.ph{display:flex;align-items:center;justify-content:center;font-size:26px;background:linear-gradient(135deg,var(--pinkbg),var(--manager-bg))}
.photo.big{width:84px;height:84px;border-radius:12px}
.photo.ph.big{font-size:38px}
.srow .mid{flex:1;min-width:130px;display:block}
.srow .nm{display:block;font-weight:700;font-size:14.5px;overflow-wrap:anywhere}
.srow .ty{display:block;font-size:11.5px;color:var(--sub)}
.srow .pr{display:block;font-weight:800;color:var(--accent);font-size:14px}
.srow .bk{font-size:12px;color:var(--amber-ink);font-weight:600}
.srow .small{font-size:10.5px;color:var(--sub);display:block;text-align:end;margin-bottom:3px}
.onweb{display:flex;flex-direction:column;align-items:flex-end}
.cnt2{text-align:end;font-size:12px;line-height:1.3;color:var(--sub)}.cnt2 b{display:block;font-size:22px;color:var(--ink)}
.acts{display:flex;gap:6px;width:100%}
.acts a{flex:1;text-align:center;font-size:12.5px;font-weight:800;border-radius:8px;padding:9px 0;border:1.5px solid var(--accent);color:var(--accent);text-decoration:none}
.acts a.a{background:var(--accent);color:var(--white)}.acts a.d{border-color:var(--red);color:var(--red)}
.hrow{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;align-items:flex-start}
.hrow:last-child{border:none}.hrow .d{width:74px;font-size:11.5px;color:var(--sub);flex:none;line-height:1.35}
.hrow .x{flex:1;min-width:0}.hrow .x b{overflow-wrap:anywhere}
.hrow small{display:block;color:var(--sub);font-size:11.5px;overflow-wrap:anywhere}
.hrow .q{font-weight:800;min-width:44px;flex:none;text-align:end}
.q.p{color:var(--green)}.q.n{color:var(--red)}.q.c{color:var(--accent)}
.pager{display:flex;justify-content:space-between;align-items:center;margin:14px 0;font-size:13px;font-weight:600}
.empty{text-align:center;color:var(--sub);padding:28px 10px}.empty .big{font-size:44px}
form.inline{margin:0 0 8px}
/* stepper */
.stepper{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stepper .in{width:96px;text-align:center;font-weight:800;font-size:18px}
.step{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--accent);background:var(--white);color:var(--accent);font-size:22px;font-weight:800;cursor:pointer}
.after{font-size:12.5px;color:var(--sub)}
/* photo & misc */
.photorow{display:flex;gap:12px;align-items:center}.photorow .upload{flex:1}
.qrprev{display:block;width:160px;height:160px;object-fit:contain;border:1.5px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--white)}
details.more{border:1.5px solid var(--line);border-radius:12px;padding:8px 12px;margin:6px 0 12px}
details.more summary{font-weight:700;font-size:13.5px;cursor:pointer;color:var(--accent-ink)}
.urow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.urow:last-child{border:none}.urow small{display:block;color:var(--sub);font-size:12px;font-weight:400}
.urow.off{opacity:.6}
.ulist{padding-block:0}
.roles{display:flex;gap:6px;align-items:center;flex:none}
.role{font-size:11px;font-weight:800;padding:3px 9px;border-radius:12px}
.role.m{background:var(--manager-bg);color:var(--manager-ink)}.role.s{background:var(--greenbg);color:var(--green-ink)}.role.c{background:var(--amberbg);color:var(--amber-ink)}.role.off{background:var(--neutral-bg);color:var(--neutral-ink)}
.langs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
@media (min-width:600px){.body{padding-bottom:110px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* order page and manager list */
.trk-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.chip-code{font-family:var(--font-mono);font-size:13px;font-weight:700;background:var(--greybg);border-radius:8px;padding:3px 8px}
.pill{font-size:11.5px;font-weight:800;border-radius:12px;padding:3px 10px;background:var(--greybg);color:var(--sub);white-space:nowrap}
.pill.st-new{background:var(--pinkbg);color:var(--pink-ink)}.pill.st-waiting_payment{background:var(--amberbg);color:var(--amber-ink)}
.pill.st-paid,.pill.st-delivered{background:var(--greenbg);color:var(--green-ink)}.pill.st-prepared,.pill.st-on_the_way{background:var(--amberbg);color:var(--amber-ink)}
.pill.st-not_delivered{background:var(--redbg);color:var(--red-ink)}.pill.st-cancelled{background:var(--neutral-bg);color:var(--neutral-ink)}
.ocard{display:block;border:1.5px solid var(--line);border-radius:14px;padding:11px 12px;margin-bottom:10px;text-decoration:none;color:inherit;background:var(--white)}
.oc-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.oc-top b{font-size:14.5px}
.oc-who{font-size:14px;margin-top:3px;overflow-wrap:anywhere}
.oc-meta{font-size:12.5px;color:var(--sub);margin-top:2px}
.oc-line{font-size:12.5px;margin-top:4px;color:var(--amber-ink);font-weight:600}.oc-line.muted{color:var(--sub);font-weight:400}
.tag{display:inline-block;font-size:11px;font-weight:800;border-radius:10px;padding:2px 9px;margin-top:4px;vertical-align:middle}
.tag.dt-hand{background:var(--accent-bg);color:var(--accent-ink)}.tag.dt-hotel{background:var(--amberbg);color:var(--amber-deep)}
.cardtext{white-space:normal;text-align:end}
.trk-link{text-align:center;font-size:13px;margin:10px 0}

/* pop-up for an empty card message */
dialog.dlg{border:2px solid var(--accent);border-radius:16px;padding:18px 16px;max-width:min(92vw,420px);width:100%;box-shadow:var(--shadow-dialog)}
dialog.dlg::backdrop{background:var(--overlay)}
dialog.dlg h2{margin:0 0 8px;font-size:18px}dialog.dlg p{margin:0 0 6px;line-height:1.4}
.note.blue{background:var(--accent-bg);color:var(--accent-ink)}
.btn.pinkbtn{background:var(--pink);border-color:var(--pink)}
.btn[disabled],.btn:disabled{background:var(--btn-disabled);border-color:var(--btn-disabled);cursor:default}
/* ---- Phase 3: order flow components (shared by manager, staff, courier) ---- */
.ocard.static{cursor:default}
.oc-when{font-size:14px;margin-top:3px}
.plist{list-style:none;margin:8px 0 4px;padding:0}
.plist li{padding:5px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.plist li:last-child{border:none}
.plist small{display:block;color:var(--sub);font-size:12px}
.cardbox{background:var(--pinkbg);border-radius:var(--radius-sm);padding:8px 10px;margin:8px 0}
.cardbox span{display:block;font-size:11.5px;font-weight:800;color:var(--pink-ink);text-transform:uppercase;letter-spacing:.4px}
.cardbox p{font-size:15px;margin-top:3px;overflow-wrap:anywhere}
.cardbox.empty{background:var(--greybg)}.cardbox.empty span,.cardbox.empty p{color:var(--sub)}
.sec.action{border-color:var(--accent);border-width:2px}
.pill.pay-pending{background:var(--amberbg);color:var(--amber-ink)}
.pill.pay-paid{background:var(--greenbg);color:var(--green-ink)}
.pill.pay-not_received{background:var(--redbg);color:var(--red-ink)}
.proof{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line)}
.proof:last-child{border:none}
.thumb{display:block;width:96px;height:96px;object-fit:cover;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--greybg)}
.thumb-wide{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:var(--radius-sm);border:1.5px solid var(--line);margin:8px 0}
.gallery{display:flex;flex-wrap:wrap;gap:10px}
.gallery figure{width:calc(50% - 5px)}
.gallery .thumb{width:100%;height:auto;aspect-ratio:1/1}
.gallery figcaption{font-size:12px;color:var(--sub);margin-top:3px}
.photo-slot{border:1.5px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-bottom:10px}
.photo-slot.has{border-color:var(--green-line);background:var(--greenbg)}
.ps-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.photo-up{margin-top:8px}
.photo-up .upload{margin-top:0}
.linkbtn{display:block;text-align:center;margin-top:8px;font-size:13px;font-weight:700;color:var(--accent-ink);cursor:pointer}
.progress{position:relative;height:26px;border-radius:13px;background:var(--greybg);overflow:hidden;margin-top:8px}
.progress i{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:var(--accent-bg);transition:width .15s}
.progress span{position:relative;display:block;text-align:center;line-height:26px;font-size:12.5px;font-weight:700;color:var(--accent-ink)}
/* table component (used by manager lists on wide screens) */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:start;font-size:11.5px;font-weight:800;color:var(--sub);text-transform:uppercase;letter-spacing:.4px;padding:6px 8px;border-bottom:2px solid var(--line)}
.tbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border:none}
.pill.st-expired{background:var(--neutral-bg);color:var(--neutral-ink)}
.big{font-size:17px}

/* Phase 4: order arrangements, delivery invoice, zones list */
.tag.need{background:var(--need-bg);color:var(--need-ink)}
.need-ink{color:var(--need-ink)}
.pill.dinv-invoiced{background:var(--amberbg);color:var(--amber-ink)}.pill.dinv-paid{background:var(--greenbg);color:var(--green-ink)}.pill.dinv-pending{background:var(--need-bg);color:var(--need-ink)}
.linkbtn.danger{color:var(--red-ink)}
.zdot{width:14px;height:14px;border-radius:50%;flex:none;background:var(--zone-off)}
.zc-1{background:var(--zone-1)}.zc-2{background:var(--zone-2)}.zc-3{background:var(--zone-3)}.zc-4{background:var(--zone-4)}
.zc-5{background:var(--zone-5)}.zc-6{background:var(--zone-6)}.zc-7{background:var(--zone-7)}.zc-8{background:var(--zone-8)}
a.srow.zrow{text-decoration:none;color:inherit}
.zprice{font-weight:800;color:var(--accent)}
.seg.sub3 a{padding:10px 2px}

/* Login: "Remember me" */
.remember{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;cursor:pointer;font-size:14px}
.remember input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--accent)}
.remember small{display:block;color:var(--sub);font-size:12px;font-weight:400;margin-top:2px}