:root {
  --bg: #f3f5f4; --card: #fff; --ink: #14201d; --muted: #63736f; --line: #dfe5e3;
  --brand: #0f5c4d; --brand-ink: #fff; --brand-soft: #e3f1ed;
  --new: #6b7280; --assigned: #2563eb; --out: #c2410c; --delivered: #15803d; --failed: #b91c1c;
  --radius: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); }

.top { position: sticky; top: 0; z-index: 5; background: var(--brand); color: var(--brand-ink); padding: 10px 16px; display: flex; align-items: center; gap: 10px; }
.top h1 { font-size: 18px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .who { font-size: 13px; opacity: .85; }
.top button { background: rgba(255,255,255,.15); color: inherit; border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }

.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; }
.tab { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 7px 14px; cursor: pointer; white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.tab.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.tab b { font-variant-numeric: tabular-nums; background: rgba(0,0,0,.08); border-radius: 999px; padding: 0 7px; font-size: 13px; }
.tab.on b { background: rgba(255,255,255,.22); }

.bar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.bar input { flex: 1; min-width: 180px; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
textarea { min-height: 70px; resize: vertical; }
label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 12px; }
label > span { display: block; margin-bottom: 4px; }
label.check { display: flex; gap: 8px; align-items: center; color: var(--ink); }
label.check input { width: auto; }

.btn { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 10px 14px; cursor: pointer; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.danger { color: var(--failed); border-color: #f0c9c9; }
.btn.big { width: 100%; padding: 14px; font-size: 17px; }
.btn.sm { padding: 6px 10px; font-size: 14px; font-weight: 500; }
.btn:disabled { opacity: .5; cursor: default; }

.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.card.click { cursor: pointer; }
.card.click:hover { border-color: var(--brand); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.ref { font-weight: 700; font-size: 15px; direction: ltr; unicode-bidi: isolate; }
.cust { font-size: 17px; font-weight: 600; }
.muted { color: var(--muted); font-size: 14px; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #fff; white-space: nowrap; }
.badge.new { background: var(--new); } .badge.assigned { background: var(--assigned); } .badge.out { background: var(--out); }
.badge.delivered { background: var(--delivered); } .badge.failed { background: var(--failed); }
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; }
.empty { text-align: center; color: var(--muted); padding: 48px 16px; }
.note { background: #fff8e1; border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.warn { color: var(--failed); font-size: 14px; }

.overlay { position: fixed; inset: 0; background: rgba(10,20,18,.5); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--card); width: 100%; max-width: 560px; max-height: 94vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
@media (min-width: 640px) { .overlay { align-items: center; } .sheet { border-radius: 18px; } }
.sheet h2 { font-size: 19px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sheet h3 { font-size: 14px; color: var(--muted); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.x { border: 0; background: var(--bg); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 18px; flex: none; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 15px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.proof img { width: 100%; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: block; }
.code { font-size: 26px; font-weight: 800; letter-spacing: .25em; direction: ltr; }

.sig { border: 2px dashed var(--line); border-radius: 12px; background: #fff; width: 100%; height: 170px; touch-action: none; display: block; }
.preview { width: 100%; max-height: 220px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); margin-top: 8px; }
.step { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.step > b { display: block; margin-bottom: 8px; }
.step.ok { border-color: var(--delivered); background: #f3faf5; }

.auth { max-width: 380px; margin: 8vh auto; padding: 16px; }
.auth .card { padding: 22px; }
.auth h1 { font-size: 24px; margin-bottom: 4px; }
.auth .lang { text-align: center; margin-top: 14px; }
.linkbtn { background: none; border: 0; color: var(--brand); cursor: pointer; text-decoration: underline; }

#toast { position: fixed; inset-inline: 16px; bottom: 20px; margin: 0 auto; max-width: 420px; background: #14201d; color: #fff; padding: 12px 16px; border-radius: 12px; text-align: center; z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s; }
#toast.show { opacity: 1; }
table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 15px; }
th { color: var(--muted); font-size: 13px; font-weight: 600; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }

/* ---- Version 2 ---- */
.badge.urgent { background: #dc2626; } .badge.late { background: #7c2d12; } .badge.partial { background: #a16207; }
.card.hot { border-color: #f1a5a5; box-shadow: inset 4px 0 0 #dc2626; }
[dir=rtl] .card.hot { box-shadow: inset -4px 0 0 #dc2626; }
.cod { background: #ecfdf3; border-radius: 10px; padding: 8px 10px; font-size: 15px; }
.stop { background: var(--brand); color: #fff; border-radius: 999px; min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
select.narrow { width: auto; flex: none; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0 10px; }
.itemrow { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.itemrow .iname { flex: 1; min-width: 0; }
.itemrow .iqty, .itemrow .dqty { width: 84px; flex: none; text-align: center; }
label.inline { display: flex; align-items: center; gap: 6px; margin: 0; }
label.inline > span { margin: 0; white-space: nowrap; }
label.inline input { width: auto; }
.map { height: 58vh; min-height: 320px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); overflow: hidden; z-index: 0; }
.truck { transform: translate(-50%, -100%); white-space: nowrap; font-size: 22px; display: inline-flex; flex-direction: column; align-items: center; filter: grayscale(1); width: max-content; }
.truck.live { filter: none; }
.truck span { font-size: 12px; font-weight: 700; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; color: var(--ink); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #c3cbc9; }
.dot.live { background: #16a34a; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 6px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.tile span { display: block; color: var(--muted); font-size: 13px; }
.tile b { font-size: 24px; }
h3.sec { font-size: 15px; margin: 18px 0 8px; }
.steps { list-style: none; padding: 0; margin: 6px 0; }
.steps li { position: relative; padding: 0 0 16px; padding-inline-start: 30px; color: var(--muted); }
.steps li b { display: block; font-weight: 600; }
.steps li::before { content: ''; position: absolute; inset-inline-start: 4px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
.steps li::after { content: ''; position: absolute; inset-inline-start: 10px; top: 20px; bottom: 0; width: 2px; background: var(--line); }
.steps li:last-child::after { display: none; }
.steps li.done { color: var(--ink); } .steps li.done::before, .steps li.done::after { background: var(--delivered); }
.steps li.now::before { box-shadow: 0 0 0 4px #cdebd8; }

/* ---- Version 3: customers ---- */
.suggestwrap { position: relative; margin-bottom: 12px; }
.suggest { position: absolute; inset-inline: 0; top: 2px; z-index: 5; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); max-height: 280px; overflow-y: auto; }
.suggest button { display: block; width: 100%; text-align: start; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 9px 12px; cursor: pointer; }
.suggest button:last-child { border-bottom: 0; }
.suggest button:hover, .suggest button:focus { background: var(--brand-soft); }
.suggest button b, .suggest button span.muted { display: block; }
.btn.sm.primary { color: var(--brand-ink); }

/* ---- Version 4: home screen with app tiles ---- */
body.home { background: linear-gradient(135deg, #e4e7f1 0%, #f2f1f7 48%, #e6e9f2 100%) fixed; min-height: 100vh; }
.top.clear { background: transparent; color: var(--ink); }
.top.clear button { background: rgba(255,255,255,.7); }
.homebtn { display: inline-flex; align-items: center; justify-content: center; padding: 7px !important; }
.launcher { display: grid; grid-template-columns: repeat(auto-fit, 116px); justify-content: center; gap: 30px 20px; max-width: 860px; margin: 7vh auto 0; }
.app { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px; border-radius: 12px; }
.app .ico { position: relative; width: 76px; height: 76px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(30,35,70,.12), 0 6px 16px rgba(30,35,70,.08); transition: transform .15s, box-shadow .15s; }
.app:hover .ico, .app:focus-visible .ico { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(30,35,70,.14), 0 12px 24px rgba(30,35,70,.14); }
.app .lbl { font-size: 15px; color: var(--ink); text-align: center; }
.app .n { position: absolute; top: -7px; inset-inline-end: -7px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 13px; display: grid; place-items: center; }
@media (max-width: 480px) { .launcher { grid-template-columns: repeat(3, 1fr); gap: 24px 8px; margin-top: 5vh; } }

/* ---- Version 5: push notifications ---- */
.pushcard { max-width: 560px; margin: 8vh auto 0; background: #fff; border-radius: var(--radius); padding: 14px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; box-shadow: 0 1px 2px rgba(30,35,70,.12), 0 6px 16px rgba(30,35,70,.08); }
.pushline { max-width: 560px; margin: 8vh auto 0; text-align: center; }

/* ---- Version 6: scan a delivery PDF ---- */
.scanrow { margin-bottom: 10px; gap: 6px; }
.scanrow.isdone { opacity: .6; }
.rawtext { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; background: var(--bg); border-radius: 10px; padding: 10px; max-height: 260px; overflow: auto; direction: ltr; text-align: start; }

/* ---- Version 7: welcome page ---- */
.welcome { max-width: 760px; margin: 0 auto; padding: 4vh 20px 40px; text-align: center; }
.wlogo { border-radius: 20px; box-shadow: 0 2px 4px rgba(30,35,70,.14), 0 12px 28px rgba(30,35,70,.16); }
.welcome h1 { font-size: clamp(34px, 6vw, 46px); line-height: 1.15; margin: 18px 0 4px; letter-spacing: -.01em; }
.wcompany { color: var(--brand); font-weight: 600; }
.wlead { font-size: 18px; color: var(--muted); max-width: 520px; margin: 14px auto 24px; }
.wgo { max-width: 280px; }
.wpoints { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 40px 0 26px; text-align: start; }
.wpoint { background: #fff; border-radius: var(--radius); padding: 16px; display: flex; gap: 12px; align-items: flex-start; box-shadow: 0 1px 2px rgba(30,35,70,.1), 0 6px 16px rgba(30,35,70,.06); }
.wpoint .ico { flex: none; width: 52px; height: 52px; border-radius: 12px; background: var(--bg); display: grid; place-items: center; }
.wpoint .ico svg { width: 32px; height: 32px; }
.wpoint p { margin-top: 2px; }
.wfoot { font-size: 13px; }

/* ---- Version 11: Discuss and Documents ---- */
.nb { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 12px; font-weight: 700; }
.convlist { display: flex; flex-direction: column; gap: 8px; }
.conv { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; }
.conv:hover { border-color: var(--brand); }
.cico { font-size: 24px; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; flex: none; }
.cmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmain .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cside { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.chatwrap { display: flex; flex-direction: column; height: calc(100dvh - 90px); max-width: 760px; margin: 0 auto; }
.chathead { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.chathead b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatbox { flex: 1; overflow-y: auto; padding: 12px 2px; display: flex; flex-direction: column; gap: 6px; }
.mday { align-self: center; font-size: 12px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; margin: 8px 0; }
.msg { align-self: flex-start; max-width: 78%; background: var(--card); border: 1px solid var(--line); border-radius: 14px; border-end-start-radius: 4px; padding: 8px 10px 4px; display: flex; flex-direction: column; gap: 2px; }
.msg.mine { align-self: flex-end; background: #dcf3ea; border-color: #c4e8da; border-end-start-radius: 14px; border-end-end-radius: 4px; }
.mname { font-size: 12px; font-weight: 700; color: var(--brand); }
.mtext { white-space: pre-wrap; overflow-wrap: anywhere; }
.mtime { font-size: 11px; color: var(--muted); align-self: flex-end; }
.chatimg { max-width: 240px; max-height: 260px; border-radius: 10px; display: block; }
.msg audio { max-width: 240px; height: 40px; }
.composer, .recbar { display: flex; gap: 8px; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--line); }
.composer textarea { flex: 1; min-height: 44px; max-height: 140px; resize: none; padding: 10px 12px; }
.btn.icon { padding: 10px 12px; margin: 0; color: var(--ink); font-size: 18px; }
.recbar { align-items: center; }
.recbar .muted { flex: 1; }
.recdot { width: 12px; height: 12px; border-radius: 50%; background: #dc2626; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.docgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.doc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.dthumb { display: grid; place-items: center; height: 150px; background: #f4f6f5; border-bottom: 1px solid var(--line); text-decoration: none; }
.dthumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.dpdf { font-weight: 800; font-size: 22px; color: #b91c1c; border: 3px solid #b91c1c; border-radius: 8px; padding: 10px 12px; }
.dmeta { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.badge.kpdf { background: #b91c1c; } .badge.kphoto { background: #2563eb; } .badge.ksignature { background: #6b7280; }
[hidden] { display: none !important; } /* elements styled with display:flex must still hide */
.dthumb { overflow: hidden; }
.dthumb img { height: 150px; }

/* ---- Version 12: internet voice calls ---- */
.callui { position: fixed; inset: 0; z-index: 60; background: rgba(8, 30, 25, .92); display: grid; place-items: center; padding: 20px; }
.callcard { text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cavatar { width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 56px; }
.cavatar.pulse { animation: ring 1.4s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); } 100% { box-shadow: 0 0 0 26px rgba(74,222,128,0); } }
.cname { font-size: 24px; }
.cstate { font-size: 17px; opacity: .85; min-height: 26px; }
.cbtns { display: flex; gap: 18px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
.cbtn { border: 0; border-radius: 999px; padding: 14px 24px; font-size: 17px; font-weight: 700; cursor: pointer; background: rgba(255,255,255,.16); color: #fff; min-width: 120px; }
.cbtn.red { background: #dc2626; } .cbtn.green { background: #16a34a; }
.mcall { align-self: center; font-size: 13px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }

/* v13 */
.chatnote { font-size: 12.5px; color: var(--muted, #667); background: rgba(127,127,127,.08); border-radius: 8px; padding: 6px 10px; margin: 8px 0 0; }

/* v17: pickup orders */
.badge.pickup { background: #ede9fe; color: #5b21b6; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.seg label { flex: 1; margin: 0; display: block; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; text-align: center; padding: 10px 6px; cursor: pointer; color: var(--muted); font-weight: 600; }
.seg input:checked + span { background: var(--brand, #0f5c4d); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--brand, #0f5c4d); outline-offset: -2px; }
/* documents: one folder per customer */
.folder { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; cursor: pointer; font: inherit; color: var(--ink); }
.folder:hover { border-color: var(--brand, #0f5c4d); }
.folder .ficon { font-size: 30px; line-height: 1; }
.folder .fname { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.folder .fcount { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
/* could-not-deliver reasons */
.lbl { display: block; font-weight: 600; margin-bottom: 8px; }
.reasons { display: grid; gap: 8px; margin-bottom: 14px; }
.reason { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; }
.reason input { width: 20px; height: 20px; margin: 0; flex: none; }
.reason:has(input:checked) { border-color: #dc2626; background: #fef2f2; }
label.reason { color: var(--ink); font-size: 15px; }
label.reason > span { margin: 0; }
label.reason input { width: 20px; }
/* Discuss: tap a message to show Delete */
.msg[data-act="msgTap"] { cursor: pointer; }
.msg .mdel { display: none; margin-top: 6px; font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 8px; border: 1px solid #fecaca; background: #fff; color: #b91c1c; cursor: pointer; }
.msg.sel .mdel { display: inline-block; }
.msg.mgone .mtext { font-style: italic; opacity: .65; }
/* the bell */
.top .bell { position: relative; font-size: 17px; line-height: 1; padding: 6px 9px; }
.top .bell .nb { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 18px; height: 18px; font-size: 11px; padding: 0 4px; }
.belllist { display: flex; flex-direction: column; gap: 8px; }
.bellrow { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.bellrow.new { border-color: #f59e0b; background: #fffbeb; }
.bellrow.click { cursor: pointer; }
@media (max-width: 480px) { .top .who { display: none; } }
/* ---------- orders page (v19): one tidy toolbar, simple filters, a clean list ---------- */
.otools { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.otools .osearch { flex: 1 1 260px; }
.otools select { width: auto; flex: none; }
.otools .oacts { display: flex; gap: 8px; margin-inline-start: auto; }
.otools .btn { margin: 0; color: var(--ink); padding: 10px 12px; }
.otools .btn.primary { color: var(--brand-ink); }
.otools .btn.icon { width: 44px; padding: 10px 0; }
.orange { display: flex; gap: 10px; flex-wrap: wrap; margin: -4px 0 12px; }
.ofilters { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.segs { display: inline-flex; background: #e6ebe9; border-radius: 12px; padding: 3px; }
.seg { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; cursor: pointer; font: inherit; font-weight: 600; color: var(--muted); display: flex; gap: 7px; align-items: center; white-space: nowrap; }
.seg b { font-size: 12px; background: rgba(0,0,0,.07); border-radius: 999px; padding: 0 7px; font-variant-numeric: tabular-nums; }
.seg.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 14px; cursor: pointer; display: flex; gap: 6px; align-items: center; color: var(--ink); }
.chip b { font-weight: 700; font-size: 12px; color: var(--muted); }
.chip.on { border-color: var(--brand); background: var(--brand-soft); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted); }
.dot.new { background: var(--new); } .dot.assigned { background: var(--assigned); } .dot.out { background: var(--out); } .dot.failed { background: var(--failed); }
/* the list: rows on a computer, compact cards on a phone */
.grid.olist { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.olist .ohead, .olist .orow { display: grid; grid-template-columns: 120px minmax(0, 1fr) 150px 150px 110px 80px; gap: 14px; align-items: center; padding: 11px 16px; }
.olist .ohead { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: #f8faf9; border-bottom: 1px solid var(--line); }
.olist .orow { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: transparent; }
.olist .orow:last-child { border-bottom: 0; }
.olist .orow:hover { background: #f6faf8; }
.olist .orow.hot { box-shadow: inset 4px 0 0 #dc2626; }
.olist .cust { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olist .one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.olist .oc-ref { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.olist .otags { display: flex; gap: 4px; flex-wrap: wrap; }
.olist .otags .badge { font-size: 10px; padding: 1px 7px; }
.olist .oc-due, .olist .oc-drv { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olist .oc-time { font-size: 13px; text-align: end; white-space: nowrap; }
@media (max-width: 860px) {
  .otools select { flex: 1 1 140px; }
  .otools .oacts { margin-inline-start: 0; flex: 1 1 100%; }
  .otools .oacts .btn.primary { flex: 1; }
  .hide-s { display: none; }
  .olist .ohead { display: none; }
  .olist .orow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ref st" "cust cust" "drv time"; gap: 4px 10px; padding: 12px 14px; }
  .olist .oc-ref { grid-area: ref; flex-direction: row; align-items: center; gap: 8px; }
  .olist .oc-st { grid-area: st; }
  .olist .oc-cust { grid-area: cust; }
  .olist .oc-due { display: none; }
  .olist .oc-drv { grid-area: drv; font-size: 13px; color: var(--muted); }
  .olist .oc-time { grid-area: time; }
  .segs { width: 100%; } .seg { flex: 1; justify-content: center; padding: 7px 8px; }
}
.segs { align-items: center; }
.seg { margin: 0; line-height: 1.3; min-height: 0; }
.olist .ohead, .olist .orow { grid-template-columns: 110px minmax(0, 1fr) 140px 150px 110px 90px; }
/* ---------- team page (v20) ---------- */
.pendb { background: #f59e0b !important; color: #fff; }
.tset { max-width: 760px; }
.pendcard { margin-bottom: 14px; border-color: #f59e0b; }
.plist { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.plist .phead, .plist .prow { display: grid; grid-template-columns: minmax(0, 1fr) 190px 130px 290px; gap: 14px; align-items: center; padding: 11px 16px; }
.plist .phead { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: #f8faf9; border-bottom: 1px solid var(--line); }
.plist .prow { border-bottom: 1px solid var(--line); }
.plist .prow:last-child { border-bottom: 0; }
.plist .prow.off { opacity: .6; }
.pwho { display: flex; gap: 12px; align-items: center; min-width: 0; }
.avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.pname { display: flex; flex-direction: column; min-width: 0; }
.pname b { font-size: 15px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pname .one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.you { font-size: 11px; font-weight: 700; background: var(--brand-soft); color: var(--brand); border-radius: 999px; padding: 1px 8px; }
.rolepill { display: inline-block; font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); }
.prole select { padding: 8px 10px; }
.pacts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.pacts .btn { margin: 0; }
.rolehelp { margin: 4px 2px 20px; } .rolehelp summary { cursor: pointer; color: var(--brand); font-weight: 600; } .rolehelp p { margin-top: 8px; }
.tset .card { margin-bottom: 14px; }
@media (max-width: 860px) {
  .plist .phead { grid-template-columns: 1fr; } .plist .phead span:not(:first-child) { display: none; }
  .plist .prow { grid-template-columns: minmax(0, 1fr) 150px; grid-template-areas: "who role" "phone acts"; gap: 8px 10px; }
  .pwho { grid-area: who; } .prole { grid-area: role; } .pphone { grid-area: phone; font-size: 13px; } .pacts { grid-area: acts; }
}
@media (max-width: 520px) {
  .plist .prow { grid-template-columns: 1fr; grid-template-areas: "who" "role" "acts"; } .pphone { display: none; } .pacts { justify-content: flex-start; }
}
.plist .phead, .plist .prow { grid-template-columns: minmax(0, 1fr) 170px 120px 330px; }
.tset { max-width: none; }
.plist.bklist { margin: 10px 0 0; }
.plist.bklist .prow { grid-template-columns: minmax(0, 1fr) 120px auto; padding: 9px 14px; }
@media (max-width: 860px) {
  .plist .prow { grid-template-columns: minmax(0, 1fr) 150px; }
  .plist.bklist .prow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; }
  .plist.bklist .pacts { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 520px) { .plist .prow { grid-template-columns: 1fr; } }

/* =====================================================================
   v21: one professional look for the whole app
   ===================================================================== */
:root {
  --bg: #f4f6f7; --card: #fff; --ink: #101c19; --muted: #5d6b68; --line: #e2e7e6; --line2: #eef1f0;
  --brand: #0f5c4d; --brand-2: #0b4a3e; --brand-ink: #fff; --brand-soft: #e6f2ee;
  --radius: 12px; --shadow: 0 1px 2px rgba(16, 24, 40, .05); --shadow-md: 0 4px 14px rgba(16, 24, 40, .08);
}
body { font-size: 15px; -webkit-font-smoothing: antialiased; }
body.home { background: var(--bg); }
.wrap { max-width: 1180px; padding: 20px 20px 40px; }

/* header */
.top, .top.clear { background: var(--brand); color: #fff; height: 58px; padding: 0 16px; gap: 6px; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.top h1 { font-size: 17px; font-weight: 650; letter-spacing: -.005em; margin-inline-start: 4px; }
.top button, .top.clear button { background: transparent; color: rgba(255,255,255,.92); border-radius: 9px; height: 38px; min-width: 38px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; }
.top button:hover { background: rgba(255,255,255,.12); }
.top .homebtn { background: rgba(255,255,255,.12); }
.brandmark { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.top .bell { font-size: 14px; }
.top .bell .nb { top: 2px; inset-inline-end: 2px; }
.top .who { display: flex; align-items: center; gap: 9px; padding: 0 10px; margin-inline-start: 4px; border-inline-start: 1px solid rgba(255,255,255,.18); opacity: 1; font-size: 13px; }
.whoname { display: flex; flex-direction: column; line-height: 1.2; } .whoname b { font-weight: 600; font-size: 13.5px; } .whoname small { opacity: .75; font-size: 11.5px; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
@media (max-width: 700px) { .whoname { display: none; } .top .who { padding: 0 4px; border: 0; } }

/* type */
h3.sec { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 26px 0 10px; }
.muted { color: var(--muted); }

/* controls */
input, select, textarea { border-color: #d7dedc; border-radius: 9px; padding: 9px 12px; min-height: 40px; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: #c3ccc9; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15, 92, 77, .15); }
input[type=checkbox], input[type=radio] { min-height: 0; box-shadow: none; accent-color: var(--brand); }
label { font-size: 13.5px; font-weight: 500; }
.btn { border-color: #d7dedc; border-radius: 9px; padding: 9px 14px; min-height: 40px; font-weight: 600; font-size: 14.5px; box-shadow: var(--shadow); transition: background .15s, border-color .15s; }
.btn:hover { background: #f6f8f8; border-color: #c3ccc9; }
.btn.primary { background: var(--brand); border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.btn.danger { color: #b42318; border-color: #f3c9c5; } .btn.danger:hover { background: #fef3f2; }
.btn.sm { min-height: 34px; padding: 6px 11px; font-size: 13.5px; font-weight: 600; }
.btn.big { min-height: 48px; font-size: 16px; border-radius: 10px; }
.linkbtn { text-decoration: none; font-weight: 600; } .linkbtn:hover { text-decoration: underline; }

/* surfaces */
.card { border-color: var(--line); box-shadow: var(--shadow); border-radius: var(--radius); }
.card.click:hover { border-color: #b9c9c4; box-shadow: var(--shadow-md); }
.plist, .grid.olist, .tablewrap, .panel { border-color: var(--line); box-shadow: var(--shadow); border-radius: var(--radius); }
.empty { background: var(--card); border: 1px dashed #d4dbd9; border-radius: var(--radius); padding: 44px 16px; }

/* tables (reports, map, activity, items) */
table { border-radius: 0; }
th { background: #f8faf9; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 14px; }
td { padding: 11px 14px; font-size: 14.5px; border-bottom-color: var(--line2); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td, table tr:hover td { background: #fafcfb; }

/* badges: soft colours with strong text */
.badge { font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px; letter-spacing: .01em; color: #fff; }
.badge.new { background: #eef0f3; color: #475467; }
.badge.assigned { background: #e0eaff; color: #1d4ed8; }
.badge.out { background: #ffedd5; color: #b54708; }
.badge.delivered { background: #dcfae6; color: #067647; }
.badge.failed { background: #fee4e2; color: #b42318; }
.badge.urgent { background: #fee4e2; color: #b42318; } .badge.late { background: #fdead7; color: #93370d; } .badge.partial { background: #fef0c7; color: #93370d; }
.badge.pickup { background: #f4ebff; color: #6941c6; }
.badge.kpdf { background: #fee4e2; color: #b42318; } .badge.kphoto { background: #e0eaff; color: #1d4ed8; } .badge.ksignature { background: #eef0f3; color: #475467; }

/* segmented controls (tabs) — the order form's Delivery / Pickup switch keeps its own look */
.segs { background: #e9eeed; border-radius: 10px; padding: 3px; gap: 2px; }
button.seg { border: 0; border-radius: 8px; padding: 7px 14px; font-size: 14px; }
button.seg.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
div.seg { display: flex; border: 1px solid #d7dedc; border-radius: 10px; overflow: hidden; margin-bottom: 14px; padding: 0; background: #fff; }
div.seg span { padding: 9px 6px; }

/* toolbars */
.otools { gap: 10px; margin-bottom: 16px; }
.otools .osearch { flex: 1 1 260px; }
.otools > input.osearch { width: auto; }
.otools label.inline { font-weight: 500; }
.otools .btn { min-height: 40px; }

/* home: greeting, today's numbers, sections */
.hello { margin: 6px 0 16px; } .hello h2 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; } .hello p { margin-top: 2px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { text-align: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); cursor: pointer; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; font: inherit; color: var(--ink); }
.kpi::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--tone, #98a2b3); }
.kpi:hover { box-shadow: var(--shadow-md); border-color: #cfd8d5; }
.kpi span { font-size: 13px; color: var(--muted); font-weight: 500; } .kpi b { font-size: 26px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.t-gray { --tone: #98a2b3; } .t-orange { --tone: #f79009; } .t-green { --tone: #17b26a; } .t-red { --tone: #f04438; } .t-blue { --tone: #2e90fa; } .t-teal { --tone: #0f766e; } .t-purple { --tone: #7a5af8; }
.launcher { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); justify-content: stretch; gap: 12px; max-width: none; margin: 0; }
.app { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-align: start; transition: box-shadow .15s, border-color .15s; }
.app:hover { border-color: #b9c9c4; box-shadow: var(--shadow-md); }
.app .ico { width: 52px; height: 52px; border-radius: 12px; background: #f4f6f7; box-shadow: none; flex: none; }
.app:hover .ico { transform: none; box-shadow: none; }
.app .ico svg { width: 34px; height: 34px; }
.atext { display: flex; flex-direction: column; min-width: 0; }
.app .lbl { font-size: 15.5px; font-weight: 650; text-align: start; }
.adesc { font-size: 13px; color: var(--muted); line-height: 1.35; }
.app .n { top: -6px; inset-inline-end: -6px; }
.pushcard, .pushline { max-width: none; margin: 14px 0 0; box-shadow: var(--shadow); border: 1px solid var(--line); }
.pushline { background: #fffaeb; border: 1px solid #fedf89; border-radius: var(--radius); padding: 10px 14px; text-align: start; color: #93370d; }
@media (max-width: 860px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .hello h2 { font-size: 20px; }
  .kpi { padding: 12px 14px; } .kpi b { font-size: 22px; }
  .launcher { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
  .app { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .app .ico { width: 44px; height: 44px; } .app .ico svg { width: 28px; height: 28px; }
  .adesc { font-size: 12px; }
}

/* order cards for drivers */
.card.job { gap: 8px; padding: 16px; }
.card.job .cust { font-size: 16.5px; }
.actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.actions .btn { flex-direction: column; gap: 3px; min-height: 60px; padding: 8px 4px; font-size: 12.5px; font-weight: 600; position: relative; line-height: 1.2; }
.actions .btn i { font-style: normal; font-size: 19px; line-height: 1; }
.actions .btn .nb { position: absolute; top: 4px; inset-inline-end: 6px; }
.jmain { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.note { background: #fffaeb; border: 1px solid #fef0c7; color: #7a2e0e; }
.cod { background: #ecfdf3; border: 1px solid #d1fadf; color: #05603a; }

/* lists */
.plist .prow:hover { background: #fafcfb; }
.clist .phead, .clist .prow { grid-template-columns: minmax(0, 1.4fr) 140px minmax(0, 1fr) 210px; }
.paddr { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
@media (max-width: 860px) {
  .clist .prow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who acts" "addr addr"; }
  .clist .pwho { grid-area: who; } .clist .pacts { grid-area: acts; } .clist .paddr { grid-area: addr; } .clist .pphone { display: none; }
}

/* reports */
.tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.tile { position: relative; overflow: hidden; box-shadow: var(--shadow); padding: 14px 16px; }
.tile::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--tone, #98a2b3); }
.tile span { font-size: 12.5px; font-weight: 500; } .tile b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* discuss */
.convlist.panel { gap: 0; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.convlist.panel .conv { border: 0; border-radius: 0; border-bottom: 1px solid var(--line2); padding: 13px 16px; }
.convlist.panel .conv:last-child { border-bottom: 0; }
.convlist.panel .conv:hover { background: #fafcfb; }
.cico { background: var(--brand-soft); font-size: 20px; width: 42px; height: 42px; }
.chatwrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; height: calc(100dvh - 100px); }
.chatbox { background: #f7f9f8; border-radius: 10px; padding: 12px 10px; margin: 10px 0; }
.composer { border-top: 0; padding-top: 0; }
.msg { box-shadow: var(--shadow); }
.msg.mine { background: #e3f4ec; border-color: #cbe9dc; }
@media (max-width: 520px) { .chatwrap { border: 0; box-shadow: none; padding: 0; background: transparent; height: calc(100dvh - 92px); } }

/* documents */
.folder { box-shadow: var(--shadow); padding: 16px; gap: 4px; }
.folder:hover { box-shadow: var(--shadow-md); border-color: #b9c9c4; }
.folder .ficon { width: 44px; height: 44px; border-radius: 11px; background: #fef6e7; display: grid; place-items: center; font-size: 24px; margin-bottom: 6px; }
.doc { box-shadow: var(--shadow); }

/* map */
.map { box-shadow: var(--shadow); }

/* dialogs */
.overlay { background: rgba(16, 24, 40, .45); backdrop-filter: blur(2px); }
.sheet { padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 20px 50px rgba(16,24,40,.25); }
.sheet h2 { font-size: 18px; font-weight: 700; padding-bottom: 14px; border-bottom: 1px solid var(--line2); }
.sheet h3 { font-size: 12px; font-weight: 700; letter-spacing: .06em; margin: 20px 0 8px; }
.x { background: #f2f4f4; width: 32px; height: 32px; font-size: 15px; } .x:hover { background: #e7ebea; }
.kv { gap: 8px 16px; font-size: 14.5px; background: #fafbfb; border: 1px solid var(--line2); border-radius: 10px; padding: 12px 14px; }
.dacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; }
.dacts .btn { justify-content: flex-start; }
@media (min-width: 640px) { .sheet { max-width: 600px; } }

/* sign in */
.auth .card { box-shadow: var(--shadow-md); border-radius: 14px; padding: 26px; }
.auth h1 { font-size: 22px; font-weight: 700; }
@media (max-width: 520px) {
  .segs { display: flex; width: 100%; }
  button.seg { flex: 1 1 0; min-width: 0; padding: 7px 4px; font-size: 13px; gap: 4px; justify-content: center; }
  button.seg b { padding: 0 5px; font-size: 11px; }
}
/* welcome page keeps a light, open header */
.top.clear { background: transparent; color: var(--ink); box-shadow: none; }
.top.clear button { color: var(--ink); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
/* printout settings */
.logobox { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.logoprev { width: 220px; height: 80px; border: 1px dashed #cfd8d5; border-radius: 10px; display: grid; place-items: center; background: #fafbfb; padding: 8px; text-align: center; }
.logoprev img { max-width: 100%; max-height: 64px; }
.logoprev .muted { font-size: 12px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 520px) { .cols2 { grid-template-columns: 1fr; } }
/* v23: payment stamp choice and item units */
.badge.pay-paid { background: #dcfae6; color: #067647; } .badge.pay-unpaid { background: #fff1f3; color: #c01048; } .badge.pay-credit { background: #e0eaff; color: #1d4ed8; }
.itemrow .iunit { width: 92px; flex: none; }
.paypick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 6px 0 14px; }
.paypick .pp { margin: 0; }
.paypick .pp input { position: absolute; opacity: 0; pointer-events: none; }
.paypick .pp span { display: block; text-align: center; padding: 9px 4px; border: 1px solid #d7dedc; border-radius: 9px; background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; margin: 0; }
.paypick .pp input:checked + span { background: #eef2f1; border-color: #98a2b3; }
.paypick .pp-paid input:checked + span { background: #dcfae6; border-color: #067647; color: #067647; }
.paypick .pp-unpaid input:checked + span { background: #fff1f3; border-color: #c01048; color: #c01048; }
.paypick .pp-credit input:checked + span { background: #e0eaff; border-color: #1d4ed8; color: #1d4ed8; }
.paypick .pp input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
/* v24: warehouse pickups and stock */
.badge.wh-prep { background: #fef0c7; color: #93370d; } .badge.wh-ready { background: #dcfae6; color: #067647; }
.badge.wh-done { background: #eef0f3; color: #344054; } .badge.wh-partly { background: #e0eaff; color: #1d4ed8; }
.code.sm { font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; letter-spacing: .18em; background: #f2f4f4; border-radius: 6px; padding: 2px 8px; }
.whlist .ohead, .whlist .orow { grid-template-columns: 110px minmax(0, 1fr) 160px 110px 130px 150px !important; }
.whlist .oc-time { text-align: end; }
#stepCode input.code { width: 150px; text-align: center; font-size: 24px; letter-spacing: .4em; }
.step.bad { border-color: #fecdca; background: #fef3f2; }
.plist .st-l { grid-template-columns: minmax(0, 1.2fr) 170px minmax(0, 1.4fr) 170px; }
.plist .st-p { grid-template-columns: minmax(0, 1fr) 110px 130px 120px; }
.batches { display: flex; flex-wrap: wrap; gap: 6px; }
.batch { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; background: #f4f6f7; border: 1px solid #e2e7e6; border-radius: 999px; padding: 2px 10px; }
.batch b { font-variant-numeric: tabular-nums; } .batch.neg { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.sttotal { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .sttotal b { font-size: 16px; font-variant-numeric: tabular-nums; }
.prow.stlow { background: #fffbfa; }
@media (max-width: 860px) {
  .whlist .orow { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "ref st" "cust cust" "due due" "drv time"; }
  .whlist .oc-due { display: block; grid-area: due; font-size: 13px; }
  .plist .st-l, .plist .st-p { grid-template-columns: minmax(0, 1fr) auto; } .plist .phead.st-l span:not(:first-child), .plist .phead.st-p span:not(:first-child) { display: none; }
  .plist .st-l .batches { grid-column: 1 / -1; }
}
/* the test copy of the app says so on every screen */
.testbar { background: repeating-linear-gradient(-45deg, #f79009 0 14px, #f9a63a 14px 28px); color: #1f1300; font-weight: 800; font-size: 12.5px; text-align: center; padding: 4px 10px; letter-spacing: .02em; position: sticky; top: 0; z-index: 6; }
body.istest .top { top: 26px; }
.testbar { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 26px; box-sizing: border-box; line-height: 18px; }

/* v25: stock by customer */
.stcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.stcard { display: flex; align-items: center; gap: 12px; text-align: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; color: var(--ink); font: inherit; }
.stcard:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(15, 92, 77, .08); }
.stc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stc-main b { font-size: 16px; } .stc-main .muted { font-size: 13px; }
.stc-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.stc-qty { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stc-go { color: var(--muted); font-size: 22px; line-height: 1; }
[dir=rtl] .stc-go { transform: scaleX(-1); }
.sthead { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.sthead h2 { margin: 0; font-size: 20px; }
.sthead .warn { color: #b42318; }
.stc-sub .warn { color: #b42318; }
.plist .st-l.one { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) 170px; }
@media (max-width: 640px) {
  .stcards { grid-template-columns: 1fr; }
  .stcard { padding: 12px; } .stc-qty { font-size: 13px; }
  .plist .st-l.one { grid-template-columns: minmax(0, 1fr) auto; }
  .plist .phead.st-l.one span:not(:first-child) { display: none; }
  .plist .st-l.one .batches { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 640px) {
  .segs { overflow-x: auto; scrollbar-width: none; } .segs::-webkit-scrollbar { display: none; }
  .segs .seg { flex: 1 0 auto; white-space: nowrap; }
}

/* stock plan: which production dates an order takes */
.stockplan { border: 1px solid #cfe3dd; background: #f3faf7; border-radius: 12px; padding: 10px 12px; margin: 4px 0 14px; }
.sp-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; } .sp-head .muted { font-size: 12.5px; }
.sp-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 6px 0; border-top: 1px dashed #d5e6e0; }
.sp-head + .sp-row { border-top: 0; }
.sp-name { flex: 1 1 220px; min-width: 0; font-size: 14px; }
.sp-take { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .sp-take .warn { color: #b42318; font-size: 13px; }
.sp-mini { font-size: 12.5px; color: var(--brand); margin-top: 2px; }

/* notifications: delete one / clear all */
.bellrow { position: relative; padding-inline-end: 44px; }
.bell-x { position: absolute; top: 8px; inset-inline-end: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; }
.bell-x:hover { background: #f1f3f2; color: #b42318; }
.bell-tools { display: flex; justify-content: flex-end; margin: 4px 0 8px; }

/* no internet / waiting to send */
#netbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 15; border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
#netbar.off { background: #1f2937; color: #fff; } #netbar.wait { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; } #netbar.bad { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }
#netbar button { margin-inline-start: auto; border: 0; border-radius: 8px; padding: 6px 12px; font-weight: 700; background: #fff; color: #111; cursor: pointer; }

/* system health */
.hrow { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.hrow:first-of-type { border-top: 0; }
.hdot { width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; flex: none; background: #9ca3af; }
.hrow.ok .hdot { background: #16a34a; } .hrow.bad .hdot { background: #dc2626; } .hrow.mid .hdot { background: #9ca3af; }
.hrow.bad b { color: #b42318; }
.kv2 { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 8px 0; }
.okline { color: #067647; font-weight: 600; }
.trashrow { gap: 4px; }

body:has(#netbar) .wrap { padding-bottom: 80px; } /* the bar never hides the last card; open forms cover the bar */

/* office dashboard */
.attn { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 16px; box-shadow: var(--shadow); }
.attn.calm { color: #067647; font-weight: 600; background: #f3faf6; border-color: #cfe9da; }
.attn-t { font-weight: 700; color: var(--muted); margin-inline-end: 4px; }
.achip { border: 1px solid var(--line); background: #f8faf9; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink); }
.achip b { font-size: 15px; } .achip:hover { border-color: var(--brand); }
.achip.t-red { background: #fef3f2; border-color: #fecdca; color: #b42318; } .achip.t-orange { background: #fff7ed; border-color: #fed7aa; color: #9a3412; } .achip.t-teal { background: #effaf8; border-color: #b9e6dd; color: #0f766e; }
.dboard { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dgroup { background: #fff; border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); padding: 12px; box-shadow: var(--shadow); }
.dgroup.wide { grid-column: 1 / -1; }
.dgroup h3 { margin: 2px 4px 10px; font-size: 15px; color: var(--muted); font-weight: 700; }
.dgroup .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.dgroup .kpi { box-shadow: none; background: #fafbfb; }
@media (max-width: 760px) { .dboard { grid-template-columns: 1fr; } .dgroup .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dgroup.wide .kpis { grid-template-columns: 1fr 1fr; } .dgroup.wide .kpi:last-child { grid-column: 1 / -1; }
  .dgroup .kpi { padding: 10px; } .dgroup .kpi span { font-size: 12.5px; } .dgroup .kpi b { font-size: 20px; } }

/* app name in the header: Soil Logistics, with "by Swiftaxon" under it */
.appname { display: inline-flex; flex-direction: column; line-height: 1.1; }
.appname small { font-size: 11.5px; font-weight: 500; opacity: .8; letter-spacing: .02em; margin-top: 2px; }

/* reports */
.rtile { text-align: start; font: inherit; color: inherit; cursor: pointer; display: block; width: 100%; transition: border-color .15s, transform .15s; }
.rtile:hover { border-color: var(--tone); transform: translateY(-1px); }
.rtile small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.35; }
.rboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.rbox { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; border-top: 3px solid var(--tone); }
.rbox h4 { margin: 0 0 6px; font-size: 14.5px; }
.rline { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 7px 2px; font: inherit; color: inherit; cursor: pointer; text-align: start; }
.rline:last-child { border-bottom: 0; } .rline:disabled { cursor: default; } .rline:not(:disabled):hover b { color: var(--brand); text-decoration: underline; }
.rline span { color: var(--muted); font-size: 13.5px; } .rline b { font-size: 15px; }
.rtable tr.trow td { font-weight: 700; background: var(--bg, #f7f8fa); border-top: 2px solid var(--line); }
.rtable tr.wrow td { background: #f0faf8; } .rtable tr.quiet td { color: var(--muted); }
.rtable td, .rtable th { white-space: nowrap; }
.rchart { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 14px 8px; margin-bottom: 12px; }
.rbars { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.rbar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.rbar-col { flex: 1; width: 100%; max-width: 36px; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
.rbar-col i { display: block; width: 100%; min-height: 2px; }
.rbar-col i:last-child { border-radius: 4px 4px 0 0; }
.rbar span { font-size: 11px; color: var(--muted); margin-top: 4px; }
.b-d { background: #2e90fa; } .b-w { background: #0f766e; } .b-r { background: #7a5af8; } .b-f { background: #f04438; }
.rlegend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.rlegend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 5px; vertical-align: -1px; }
.rlist { display: flex; flex-direction: column; max-height: 65vh; overflow: auto; }
.rlrow { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 10px; align-items: center; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 9px 4px; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.rlrow:hover { background: #f5f7f9; } .rlrow > span:first-child { display: flex; flex-direction: column; min-width: 0; } .rlrow .muted { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .rlrow { grid-template-columns: 1fr auto; } .rlrow > span:nth-child(2) { display: none; } .rbars { height: 120px; gap: 2px; } .rbar span { font-size: 9.5px; } }
.rtiles { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); }
.rtable th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.rtile { display: flex; flex-direction: column; justify-content: flex-start; }
@media (min-width: 900px) { .rtiles { grid-template-columns: repeat(4, 1fr); } .rtiles .rtile:last-child { grid-column: span 2; } }

/* production dates chosen by hand */
.lotitem { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
.lotrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0 0; }
.lotrow > span { display: flex; flex-direction: column; font-weight: 600; } .lotrow .muted { font-weight: 400; font-size: 12.5px; }
.lotrow input { width: 96px; margin: 0; text-align: center; }
.lotsum { margin-top: 8px; font-size: 13px; }

/* reports: print for the archive */
.archbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.archbar .muted { flex: 1 1 320px; font-size: 13.5px; }
.archtab td:first-child, .archtab th:first-child { width: 36px; } .archtab input[type=checkbox] { width: 18px; height: 18px; margin: 0; }

/* export documents */
.sheet.wide { max-width: 1120px; width: calc(100vw - 32px); }
.exgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; }
.exform h3.sec:first-of-type { margin-top: 4px; }
.exgoods { margin: 6px 0 4px; } .exgoods summary { cursor: pointer; color: var(--muted); font-size: 13.5px; margin-bottom: 8px; }
.exprod { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 10px; } .exprod label { margin: 0; } .exprod .muted { font-size: 12.5px; flex: 1 1 260px; }
.exlines td { padding: 4px; } .exlines input { margin: 0; padding: 6px 8px; font-size: 13.5px; min-width: 70px; } .exlines input.sm { width: 84px; min-width: 60px; }
.exlines td:nth-child(2) input { min-width: 260px; }
.exfoot { display: flex; gap: 10px; align-items: center; } .exfoot .big { flex: 1; }
.extab .exacts { display: flex; gap: 6px; justify-content: flex-end; }

/* branches */
.brgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.brcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.brphoto { width: 100%; height: 170px; object-fit: cover; display: block; background: #eef2f1; }
.brphoto.none { display: flex; align-items: center; justify-content: center; font-size: 44px; color: var(--muted); }
.brbody { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; }
.bracts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.brphotoedit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .brphotoedit img { max-height: 110px; border-radius: 8px; border: 1px solid var(--line); }
.badge.superb { background: #fef3c7; color: #92400e; }

/* branches v2 */
.brstats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 14px; font-size: 14px; }
.brstats .muted { margin-inline-start: auto; font-size: 13px; }
.brdot i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #17b26a; margin-inline-end: 6px; box-shadow: 0 0 0 4px rgba(23,178,106,.15); vertical-align: 1px; }
.brgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.brc { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.18); display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; }
.brc:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 16px 32px -14px rgba(16,24,40,.28); }
.brc-hero { position: relative; height: 190px; border: 0; padding: 0; cursor: pointer; background: #0f5c4d center/cover no-repeat; display: block; width: 100%; text-align: start; font: inherit; color: #fff; }
.brc-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.72)); }
.brc-hero.nophoto { background: linear-gradient(135deg, #0f5c4d, #1f8f73 55%, #f2b544); }
.brc-mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 54px; font-weight: 800; letter-spacing: .04em; color: rgba(255,255,255,.28); }
.brc-mono.sm { position: static; width: 54px; height: 54px; border-radius: 14px; font-size: 20px; color: #fff; background: linear-gradient(135deg, #0f5c4d, #1f8f73); }
.brc-status { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.94); color: #111; backdrop-filter: blur(6px); }
.brc-status i { width: 8px; height: 8px; border-radius: 50%; background: #98a2b3; }
.brc-status.on i { background: #17b26a; box-shadow: 0 0 0 3px rgba(23,178,106,.2); } .brc-status.off i { background: #f04438; }
.brc-title { position: absolute; z-index: 1; inset-inline: 14px; bottom: 12px; display: flex; flex-direction: column; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.brc-title b { font-size: 19px; line-height: 1.2; } .brc-title span { font-size: 14px; opacity: .92; }
.brc-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.brc-addr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.brc-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; font-size: 12.5px; letter-spacing: .06em; background: #ecfdf3; color: #067647; border: 1px solid #abefc6; border-radius: 6px; padding: 2px 7px; }
.brc-line { color: var(--muted); font-size: 13.5px; }
.brc-acts { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.brc-send { flex: 1; } .btn.icon { width: 42px; padding: 0; justify-content: center; font-size: 16px; }
.brc-add { border: 2px dashed var(--line); background: transparent; box-shadow: none; min-height: 300px; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.brc-add span { font-size: 38px; line-height: 1; color: var(--brand); } .brc-add:hover { border-color: var(--brand); color: var(--brand); }
.brempty { text-align: center; padding: 56px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.brempty-ico { font-size: 44px; margin-bottom: 6px; } .brempty b { display: block; font-size: 18px; margin-bottom: 6px; } .brempty .muted { max-width: 420px; margin: 0 auto 14px; }
/* send sheet */
.brsend { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.brsend-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .brsend-head img { width: 54px; height: 54px; border-radius: 14px; object-fit: cover; }
.brsend-head b { font-size: 16px; }
.brsend-lbl { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 8px; }
.brchips { display: flex; flex-wrap: wrap; gap: 8px; }
.brchip { margin: 0; cursor: pointer; } .brchip input { position: absolute; opacity: 0; pointer-events: none; }
.brchip span { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 13.5px; font-weight: 600; color: var(--muted); transition: all .15s; }
.brchip input:checked + span { background: #ecfdf3; border-color: #17b26a; color: #067647; }
.brchip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.brsend-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .brsend-btns .btn { width: 100%; justify-content: center; }
.btn.wa { background: #25d366; border-color: #25d366; color: #fff; } .btn.wa:hover { background: #1ebe5b; }
.brsend-tip { font-size: 12.5px; margin-top: 8px; }
.wa-chat { background: #efeae2 linear-gradient(0deg, rgba(239,234,226,.92), rgba(239,234,226,.92)), radial-gradient(#d9d0c3 1px, transparent 1px) 0 0/14px 14px; border-radius: 14px; padding: 16px; min-height: 260px; max-height: 60vh; overflow: auto; }
.wa-bubble { position: relative; background: #d9fdd3; border-radius: 10px 0 10px 10px; padding: 8px 10px 20px; margin-inline-start: auto; max-width: 92%; width: fit-content; box-shadow: 0 1px .5px rgba(11,20,26,.13); font-size: 14px; line-height: 1.45; color: #111b21; white-space: pre-wrap; word-break: break-word; }
.wa-img { display: block; width: 100%; max-height: 200px; object-fit: cover; border-radius: 7px; margin-bottom: 6px; }
.wa-link { color: #027eb5; } .wa-time { position: absolute; bottom: 4px; inset-inline-end: 8px; font-size: 11px; color: #667781; } .wa-time { white-space: nowrap; }
.brpaste { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; } .brpaste textarea { flex: 1; margin: 0; font-size: 13.5px; }
@media (max-width: 760px) { .brsend { grid-template-columns: 1fr; } .brsend-prev { order: -1; } .wa-chat { min-height: 0; max-height: 40vh; } .brc-hero { height: 170px; } .brstats .muted { margin-inline-start: 0; width: 100%; } }

.wa-bubble { white-space: normal; } .wa-bubble > div > div { min-height: 1.45em; }
@media (max-width: 760px) { .brc-add { min-height: 110px; flex-direction: row; } .brc-add span { font-size: 28px; } }

/* ---------- soft animations (none for people who turn motion off on their device) ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes shimmer { from { background-position: -200px 0; } to { background-position: 200px 0; } }
@media (prefers-reduced-motion: no-preference) {
  #main.enter > * { animation: fadeUp .38s cubic-bezier(.2,.7,.2,1) both; }
  #main.enter > *:nth-child(2) { animation-delay: .04s; } #main.enter > *:nth-child(3) { animation-delay: .08s; } #main.enter > *:nth-child(4) { animation-delay: .12s; }
  #main.enter .launcher > .app, #main.enter .brgrid > *, #main.enter .rtiles > *, #main.enter .tiles > *, #main.enter .stcards > *, #main.enter .kpis > *, #main.enter .gsec { animation: fadeUp .42s cubic-bezier(.2,.7,.2,1) both; }
  #main.enter .launcher > .app:nth-child(1), #main.enter .brgrid > *:nth-child(1), #main.enter .rtiles > *:nth-child(1), #main.enter .tiles > *:nth-child(1), #main.enter .stcards > *:nth-child(1), #main.enter .kpis > *:nth-child(1), #main.enter .gsec:nth-child(1) { animation-delay: .03s; }
  #main.enter .launcher > .app:nth-child(2), #main.enter .brgrid > *:nth-child(2), #main.enter .rtiles > *:nth-child(2), #main.enter .tiles > *:nth-child(2), #main.enter .stcards > *:nth-child(2), #main.enter .kpis > *:nth-child(2), #main.enter .gsec:nth-child(2) { animation-delay: .06s; }
  #main.enter .launcher > .app:nth-child(3), #main.enter .brgrid > *:nth-child(3), #main.enter .rtiles > *:nth-child(3), #main.enter .tiles > *:nth-child(3), #main.enter .stcards > *:nth-child(3), #main.enter .kpis > *:nth-child(3), #main.enter .gsec:nth-child(3) { animation-delay: .09s; }
  #main.enter .launcher > .app:nth-child(4), #main.enter .brgrid > *:nth-child(4), #main.enter .rtiles > *:nth-child(4), #main.enter .tiles > *:nth-child(4), #main.enter .stcards > *:nth-child(4), #main.enter .kpis > *:nth-child(4), #main.enter .gsec:nth-child(4) { animation-delay: .12s; }
  #main.enter .launcher > .app:nth-child(5), #main.enter .brgrid > *:nth-child(5), #main.enter .tiles > *:nth-child(5), #main.enter .kpis > *:nth-child(5), #main.enter .gsec:nth-child(5) { animation-delay: .15s; }
  #main.enter .launcher > .app:nth-child(6), #main.enter .brgrid > *:nth-child(6), #main.enter .tiles > *:nth-child(6), #main.enter .gsec:nth-child(6) { animation-delay: .18s; }
  #main.enter .launcher > .app:nth-child(n+7), #main.enter .brgrid > *:nth-child(n+7), #main.enter .tiles > *:nth-child(n+7), #main.enter .gsec:nth-child(n+7) { animation-delay: .21s; }
  #main.enter .olist > .orow:nth-child(-n+12) { animation: fadeUp .35s cubic-bezier(.2,.7,.2,1) both; }
  .overlay:not(.still) { animation: fadeIn .2s ease both; }
  .overlay:not(.still) .sheet { animation: sheetUp .32s cubic-bezier(.2,.8,.2,1) both; }
  #toast { transition: opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1); transform: translateY(14px); } #toast.show { transform: none; }
  .btn, .app, .kpi, .seg, .chip, .tile, .card.click, .rline, .brchip span, .hbtn { transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
  .btn:active:not(:disabled), .kpi:active, .seg:active, .chip:active, .hbtn:active, .app:active { transform: scale(.97); }
  .app:hover, .kpi:hover, .card.click:hover { transform: translateY(-2px); }
  .badge, .nb { animation: pop .35s cubic-bezier(.2,.8,.3,1.2) both; }
  #main:not(.enter) .badge { animation: none; }
  .gsec[open] .gsteps, .gsec[open] .gtip { animation: fadeUp .3s cubic-bezier(.2,.7,.2,1) both; }
  #main.enter .empty { animation: fadeIn .3s ease both; }
}
/* ---------- user guide ---------- */
.guide { max-width: 860px; margin: 0 auto; }
.guide-hero { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #0f5c4d, #1f8f73 60%, #2fb38d); box-shadow: 0 14px 30px -18px rgba(15,92,77,.8); margin-bottom: 16px; }
.guide-hero h2 { margin: 0 0 2px; font-size: 22px; } .guide-hero .muted { color: rgba(255,255,255,.85); margin: 0; }
.guide-ico { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; }
.guide-list { display: flex; flex-direction: column; gap: 10px; }
.gsec { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.gsec summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; font-size: 15.5px; }
.gsec summary::-webkit-details-marker { display: none; }
.gnum { width: 26px; height: 26px; border-radius: 50%; background: #ecfdf3; color: #067647; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gico { font-size: 20px; } .gsec summary b { flex: 1; }
.gchev { color: var(--muted); font-size: 18px; transition: transform .2s; } .gsec[open] .gchev { transform: rotate(180deg); }
.gsec[open] summary { border-bottom: 1px solid var(--line); background: #f8fbfa; }
.gsteps { margin: 0; padding: 14px 18px 6px; padding-inline-start: 40px; display: flex; flex-direction: column; gap: 9px; line-height: 1.55; font-size: 14.5px; }
.gsteps li::marker { color: #1f8f73; font-weight: 700; }
.gtip { margin: 6px 16px 16px; padding: 10px 12px; border-radius: 10px; background: #fffaeb; border: 1px solid #fedf89; color: #7a2e0e; font-size: 13.5px; line-height: 1.5; }
.guide-foot { text-align: center; margin: 18px 0 6px; font-size: 13px; }

/* replenishment */
.rotools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.rotools .segs { flex-wrap: wrap; }
.seg b.hot { background: #f79009; color: #fff; }
.rotab td, .rotab th { vertical-align: middle; } .rotab td { white-space: nowrap; } .rotab td:first-child { white-space: normal; min-width: 180px; }
.rotab .neg { color: #b42318; font-weight: 600; } .rotab .pos { color: #067647; font-weight: 600; }
.ro-fc { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #fef3f2; color: #b42318; font-weight: 700; border: 1px solid #fecdca; }
.roQty { width: 90px; margin: 0; padding: 6px 8px; font-weight: 700; text-align: center; }
.ro-acts { display: flex; gap: 6px; justify-content: flex-end; }
.ro-hint { font-size: 12.5px; margin-top: 10px; }
.ro-empty { text-align: center; padding: 44px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.ro-empty-ico { font-size: 38px; margin-bottom: 6px; } .ro-empty b { display: block; font-size: 17px; margin-bottom: 6px; } .ro-empty .muted { max-width: 460px; margin: 0 auto 12px; }
.ro-card { background: #f8fbfa; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 3px; }
.daypick { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .daypick input { margin: 0; flex: 1; max-width: 220px; } .daypick .btn { min-width: 42px; justify-content: center; }

/* bot check */
.botbox { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 70px; margin: 4px 0 12px; }
.botnote { font-size: 13px; color: var(--muted, #667); text-align: center; line-height: 1.45; } .botnote:empty { display: none; } .botnote.bad { color: #b42318; } .botnote .linkbtn { font-weight: 700; }

.ro-h { font-size: 15px; margin: 4px 0 10px; } .ro-h .muted { font-weight: 400; font-size: 13px; }
.ro-h + .tablewrap { margin-bottom: 4px; } .ro-hint + .ro-h { margin-top: 22px; }
.ro-since { font-size: 12px; font-weight: 400; } .ro-refs { white-space: normal !important; max-width: 220px; font-size: 12.5px; } .ro-refs span { display: inline-block; margin: 1px 4px 1px 0; }

/* ================= page frame (both designs): side menu on a computer, tab bar on a phone ================= */
body.shelled #app { display: flex; min-height: 100vh; align-items: flex-start; }
#app > .col { flex: 1; min-width: 0; }
.side, .tabbar { display: none; }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.side-brand b { display: block; font-size: 15px; letter-spacing: -.01em; } .side-brand small { display: block; font-size: 12px; color: var(--muted); }
.side-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.sn { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; color: var(--ink); font: inherit; font-weight: 500; font-size: 14.5px; text-align: start; }
.sn svg { flex: none; color: var(--muted); } .sn span { flex: 1; }
.sn b { font-size: 12px; font-weight: 600; background: var(--chip-bg, #eef1ef); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.sn:hover { background: var(--hover, #f2f5f3); }
.sn.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; } .sn.on svg { color: var(--brand); }
.side-me { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 14px 8px 4px; border-top: 1px solid var(--line); }
.side-me .avatar.sm { box-shadow: none; }
@media (min-width: 1024px) {
  .side { display: flex; flex-direction: column; width: 248px; flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--card); border-inline-end: 1px solid var(--line); padding: 18px 12px; }
  .top .homebtn, .top .brandmark { display: none; }
}
@media (max-width: 1023.98px) {
  .tabbar { display: grid; position: fixed; inset-inline: 0; bottom: 0; z-index: 6; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--card); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  body.shelled #app > .col { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  #toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
.tb { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border: 0; background: none; font: inherit; font-size: 11px; font-weight: 500; color: var(--muted); cursor: pointer; padding: 2px; }
.tb span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb.on { color: var(--brand); font-weight: 700; }
.tb b { position: absolute; top: 2px; inset-inline-start: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #d92d20; color: #fff; font-size: 10.5px; display: grid; place-items: center; }

/* order details: a panel on the right on a computer */
@media (min-width: 1100px) {
  .overlay.side-panel { justify-content: flex-end; align-items: stretch; }
  .sheet.drawer { max-width: 560px; height: 100vh; max-height: 100vh; border-radius: 0; border-start-start-radius: 22px; border-end-start-radius: 22px; padding: 22px 24px 28px; animation: drawerIn .28s cubic-bezier(.2,.8,.2,1) both; }
  .overlay.side-panel.still .sheet.drawer { animation: none; }
}
@keyframes drawerIn { from { transform: translateX(48px); opacity: 0; } to { transform: none; opacity: 1; } }
[dir="rtl"] .sheet.drawer { animation-name: drawerInRtl; }
@keyframes drawerInRtl { from { transform: translateX(-48px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ================= V1 · clean ================= */
html[data-ui="v1"] { --bg: #f5f6f4; --line: #e4e7e3; --brand: #0e5a4c; --brand-soft: #e6f0ec; --muted: #5e6a65; --ink: #15201c; --radius: 14px; }
html[data-ui="v1"] body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif; }
html[data-ui="v1"] body.home { background: var(--bg); }
@media (min-width: 1024px) {
  html[data-ui="v1"] .top { background: var(--card); color: var(--ink); border-bottom: 1px solid var(--line); padding: 12px 28px; }
  html[data-ui="v1"] .top h1 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
  html[data-ui="v1"] .top button { background: var(--card); border: 1px solid var(--line); color: var(--ink); }
  html[data-ui="v1"] .top .avatar.sm { box-shadow: none; }
  html[data-ui="v1"] .wrap { max-width: 1240px; padding: 24px 28px; }
}
html[data-ui="v1"] .kpi::before { display: none; }
html[data-ui="v1"] .kpi span { display: flex; align-items: center; gap: 7px; }
html[data-ui="v1"] .kpi span::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--tone, #98a2b3); flex: none; }
html[data-ui="v1"] .dgroup, html[data-ui="v1"] .attn { box-shadow: none; }
html[data-ui="v1"] .dgroup .kpi { background: var(--card); }
html[data-ui="v1"] .olist .orow.hot, html[data-ui="v1"] .card.hot { box-shadow: inset 3px 0 0 #d92d20; }

/* ================= V2 · modern ================= */
html[data-ui="v2"] { --bg: #f3f4f1; --card: #fff; --ink: #0f1614; --muted: #5a6560; --line: #e5e8e3; --brand: #0e7a5f; --brand-soft: #e3f3ed; --radius: 18px; --chip-bg: #f0f2ee; --hover: #f3f5f2;
  --shadow: 0 1px 2px rgba(15,22,20,.04); --shadow-md: 0 10px 28px rgba(15,22,20,.10); --glow: rgba(14,122,95,.25); }
html[data-ui="v2"] body { font-family: Geist, Inter, system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif; font-feature-settings: 'tnum' 1; }
html[data-ui="v2"] body.home { background: var(--bg); }
html[data-ui="v2"] .ref { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (min-width: 1024px) {
  html[data-ui="v2"] .side { margin: 12px; margin-inline-end: 0; height: calc(100vh - 24px); top: 12px; border: 1px solid var(--line); border-radius: 22px; }
  html[data-ui="v2"] .top { position: sticky; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink); padding: 14px 28px; }
  html[data-ui="v2"] .top h1 { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
  html[data-ui="v2"] .top button { background: var(--card); border: 1px solid var(--line); color: var(--ink); border-radius: 12px; }
  html[data-ui="v2"] .top .avatar.sm { box-shadow: none; }
  html[data-ui="v2"] .wrap { max-width: 1320px; padding: 8px 28px 32px; }
}
html[data-ui="v2"] .side-mark { border-radius: 12px; box-shadow: 0 6px 16px var(--glow); }
html[data-ui="v2"] .btn { border-radius: 12px; } html[data-ui="v2"] .btn.primary { box-shadow: 0 8px 20px var(--glow); }
html[data-ui="v2"] input, html[data-ui="v2"] select, html[data-ui="v2"] textarea { border-radius: 12px; }
html[data-ui="v2"] .segs { background: var(--card); border: 1px solid var(--line); }
html[data-ui="v2"] .seg.on { background: var(--ink); color: var(--bg); box-shadow: none; } html[data-ui="v2"] .seg.on b { background: rgba(255,255,255,.18); }
html[data-ui="v2"] .kpi::before { display: none; }
html[data-ui="v2"] .kpi { border-radius: 16px; }
html[data-ui="v2"] .kpi span { display: flex; align-items: center; gap: 7px; } html[data-ui="v2"] .kpi span::before { content: ''; width: 8px; height: 8px; border-radius: 3px; background: var(--tone, #98a2b3); flex: none; }
html[data-ui="v2"] .kpi b { font-size: 30px; letter-spacing: -.03em; }
html[data-ui="v2"] .dgroup { border-radius: 22px; padding: 16px; box-shadow: none; background: var(--card); }
html[data-ui="v2"] .dgroup .kpi { background: var(--bg); border-color: transparent; }
html[data-ui="v2"] .attn { border-radius: 18px; box-shadow: none; background: var(--card); }
html[data-ui="v2"] .grid.olist, html[data-ui="v2"] .card { border-radius: 18px; }
html[data-ui="v2"] .olist .orow.hot, html[data-ui="v2"] .card.hot { box-shadow: inset 3px 0 0 #ef4444; }
html[data-ui="v2"] .sheet { border-radius: 24px 24px 0 0; } @media (min-width: 640px) { html[data-ui="v2"] .sheet { border-radius: 24px; } }
html[data-ui="v2"] .app .ico { border-radius: 20px; }
@media (max-width: 1023.98px) {
  html[data-ui="v2"] .tabbar { inset-inline: 14px; bottom: calc(12px + env(safe-area-inset-bottom)); border: 0; border-radius: 22px; background: #0f1614; padding: 6px; box-shadow: 0 14px 32px rgba(0,0,0,.24); }
  html[data-ui="v2"] .tb { color: rgba(255,255,255,.66); border-radius: 16px; }
  html[data-ui="v2"] .tb.on { color: #fff; background: rgba(255,255,255,.12); }
  html[data-ui="v2"] body.shelled #app > .col { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  html[data-ui="v2"] #toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
}
/* today's progress ring */
.hero { display: flex; align-items: center; gap: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 18px 22px; margin-bottom: 14px; }
.hero svg { flex: none; } .ring-bg, .ring-out, .ring-done { fill: none; stroke-width: 14; stroke-linecap: round; }
.ring-bg { stroke: var(--chip-bg); } .ring-out { stroke: #3b82f6; } .ring-done { stroke: var(--brand); }
.ring-n { font-size: 30px; font-weight: 700; fill: var(--ink); } .ring-l { font-size: 12px; fill: var(--muted); }
.hero-txt { display: flex; flex-direction: column; gap: 8px; min-width: 200px; } .hero-txt b { font-size: 16px; }
.hero-txt span { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); } .hero-txt em { font-style: normal; margin-inline-start: auto; color: var(--ink); font-weight: 700; }
.hero-txt i { width: 10px; height: 10px; border-radius: 4px; } .d-done { background: var(--brand); } .d-out { background: #3b82f6; } .d-wait { background: var(--chip-bg); border: 1px solid var(--line); }
/* orders board */
.vswitch { flex: none; }
.board { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.bcol { background: var(--col-bg, #e9ece7); border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bcol h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 2px 4px 4px; } .bcol h3 b { margin-inline-start: auto; font-size: 12px; color: var(--muted); font-family: "Geist Mono", ui-monospace, monospace; }
.bcol h3 i { width: 9px; height: 9px; border-radius: 999px; background: #d97706; } .c-ready h3 i { background: var(--brand); } .c-out h3 i { background: #3b82f6; } .c-done h3 i { background: #16a34a; }
.bcard { text-align: start; display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; cursor: pointer; font: inherit; color: var(--ink); box-shadow: 0 1px 2px rgba(15,22,20,.04); }
.bcard:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.bcard.hot { box-shadow: inset 3px 0 0 #ef4444; }
.bc-top { display: flex; align-items: center; gap: 6px; } .bc-top .ref { font-weight: 600; font-size: 13px; flex: 1; }
.bcard .tag { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 1px 7px; } .tag.urg { background: #fde8e7; color: #b42318; } .tag.cod { background: #fef0d2; color: #8a3c08; }
.bc-cust { font-weight: 600; font-size: 14.5px; } .bc-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-foot { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding-top: 8px; border-top: 1px dashed var(--line); } .bc-none { color: var(--muted); flex: 1; } .bc-foot > span:nth-child(2) { flex: 1; } .bc-due { color: var(--muted); }
.avatar.xs { width: 22px; height: 22px; font-size: 9.5px; border-radius: 7px; }
.bempty { color: var(--muted); text-align: center; padding: 14px 0; }

/* ================= V2 · dark mode ================= */
html[data-ui="v2"][data-theme="dark"] { color-scheme: dark; --bg: #0a0e0d; --card: #121816; --ink: #edf2ef; --muted: #9ba7a2; --line: #232e2b; --brand: #10a37f; --brand-soft: rgba(16,163,127,.16); --chip-bg: #1b2421; --hover: #182120; --col-bg: #0f1513;
  --shadow-md: 0 10px 28px rgba(0,0,0,.45); --glow: rgba(16,163,127,.30); }
html[data-theme="dark"] body, html[data-theme="dark"] body.home { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #0f1513; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .card, html[data-theme="dark"] .kpi, html[data-theme="dark"] .attn, html[data-theme="dark"] .dgroup, html[data-theme="dark"] .grid.olist, html[data-theme="dark"] .btn, html[data-theme="dark"] .chip, html[data-theme="dark"] .achip, html[data-theme="dark"] .app .ico, html[data-theme="dark"] .sheet, html[data-theme="dark"] .tab { background: var(--card); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
html[data-theme="dark"] .dgroup .kpi { background: var(--bg); }
html[data-theme="dark"] .olist .ohead { background: #0f1513; } html[data-theme="dark"] .olist .orow:hover { background: #182120; }
html[data-theme="dark"] .seg.on { background: var(--ink); color: var(--bg); }
html[data-theme="dark"] .app .lbl { color: var(--ink); }
html[data-theme="dark"] .attn.calm { background: rgba(16,163,127,.12); border-color: rgba(16,163,127,.3); color: #5fd9ae; }
html[data-theme="dark"] .achip.t-red { background: #3a1614; border-color: #5a2320; color: #ff8a80; } html[data-theme="dark"] .achip.t-orange { background: #3a2a10; border-color: #5a4219; color: #f5b95a; } html[data-theme="dark"] .achip.t-teal { background: #10302a; border-color: #1c4a40; color: #5fd9ae; }
html[data-theme="dark"] table:not(.pn-note table) th { background: #0f1513; color: var(--muted); } html[data-theme="dark"] table:not(.pn-note table) td, html[data-theme="dark"] table:not(.pn-note table) th { border-color: var(--line); }
html[data-theme="dark"] .muted { color: var(--muted); }
html[data-theme="dark"] .tag.urg { background: #3a1614; color: #ff8a80; } html[data-theme="dark"] .tag.cod { background: #3a2a10; color: #f5b95a; }
html[data-theme="dark"] #toast { background: #edf2ef; color: #0a0e0d; }
/* v2: the top bar matches the page on phones too */
html[data-ui="v2"] .top { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink); border-bottom: 1px solid var(--line); }
html[data-ui="v2"] .top button { background: var(--card); border: 1px solid var(--line); color: var(--ink); border-radius: 12px; }
html[data-ui="v2"] .top .avatar.sm { box-shadow: none; }
html[data-ui="v2"] .brandmark { background: var(--brand); color: #fff; border-radius: 10px; }
@media (max-width: 1023.98px) { html[data-ui="v2"] .top h1 { font-size: 17px; letter-spacing: -.02em; } }
@media (max-width: 560px) { .hero { gap: 14px; padding: 14px; } .hero svg { width: 104px; height: 104px; } .hero-txt { min-width: 0; flex: 1; } .hero-txt b { font-size: 15px; } }
/* dark mode: the remaining light surfaces */
html[data-theme="dark"] .x { background: #1b2421; color: var(--ink); } html[data-theme="dark"] .x:hover { background: #24302c; }
html[data-theme="dark"] .kv, html[data-theme="dark"] .chatbox, html[data-theme="dark"] .app .ico, html[data-theme="dark"] .dthumb, html[data-theme="dark"] .sig, html[data-theme="dark"] .proof img { background: #0f1513; border-color: var(--line); }
html[data-theme="dark"] .btn:hover { background: #182120; border-color: #33403b; }
html[data-theme="dark"] button.seg.on { background: var(--ink); color: var(--bg); }
html[data-theme="dark"] div.seg { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] .olist .ohead, html[data-theme="dark"] .plist .phead, html[data-theme="dark"] th:not(.pn-note th) { background: #0f1513; }
html[data-theme="dark"] table:not(.pn-note table) tbody tr:hover td, html[data-theme="dark"] table:not(.pn-note table) tr:hover td, html[data-theme="dark"] .plist .prow:hover, html[data-theme="dark"] .convlist.panel .conv:hover { background: #182120; }
html[data-theme="dark"] .note, html[data-theme="dark"] .pushline { background: #2a2210; border-color: #4a3a17; color: #f5d08a; }
html[data-theme="dark"] .bellrow.new { background: #2a2210; } html[data-theme="dark"] .step.ok { background: #10251b; }
html[data-theme="dark"] .pushcard, html[data-theme="dark"] .wpoint, html[data-theme="dark"] .truck span { background: var(--card); color: var(--ink); }
html[data-theme="dark"] .badge.new, html[data-theme="dark"] .badge.ksignature { background: #222a27; color: #c7d0cc; }
html[data-theme="dark"] .badge.assigned, html[data-theme="dark"] .badge.kphoto { background: #132544; color: #86aeff; }
html[data-theme="dark"] .badge.out, html[data-theme="dark"] .badge.late, html[data-theme="dark"] .badge.partial { background: #3a2a10; color: #f5b95a; }
html[data-theme="dark"] .badge.delivered { background: #10301f; color: #5bd38b; } html[data-theme="dark"] .badge.failed, html[data-theme="dark"] .badge.urgent, html[data-theme="dark"] .badge.kpdf { background: #3a1614; color: #ff8a80; }
html[data-theme="dark"] .badge.pickup { background: #261a40; color: #c4a8ff; }
html[data-theme="dark"] .folder .ficon { background: #2a2210; }

/* ================= V3 · the dispatcher's desk ================= */
html[data-ui="v3"] { --bg: #eef2f0; --card: #fff; --ink: #102a26; --muted: #5c716b; --line: #dce3e0; --line2: #e6ebe9; --brand: #0f5c4d; --brand-ink: #fff; --brand-soft: #e3efea; --radius: 16px;
  --pine-deep: #0e2a25; --saffron: #e8a33d; --road: #3e7bfa; --done: #2f9e6e; --problem: #d2453b; --idle: #c5d0cb; --chip-bg: #eef2f0; --hover: #f3f6f4; --sel: #f4f8f6; --shadow: none; --shadow-md: 0 12px 30px rgba(14,42,37,.10); }
html[data-ui="v3"][data-theme="dark"] { color-scheme: dark; --bg: #0b1412; --card: #12201c; --ink: #e9f1ee; --muted: #93a8a1; --line: #22332f; --line2: #22332f; --brand: #1f7a66; --brand-soft: rgba(31,122,102,.22); --pine-deep: #081714;
  --road: #5b8df6; --done: #3db07e; --problem: #ec5f55; --idle: #3a4d48; --chip-bg: #1a2926; --hover: #182724; --sel: #162521; --shadow-md: 0 12px 30px rgba(0,0,0,.45); }
html[data-ui="v3"] body { font-family: "Instrument Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; font-variant-numeric: tabular-nums; background: var(--bg); color: var(--ink); }
html[data-ui="v3"][dir="rtl"] body { font-family: "IBM Plex Sans Arabic", "Instrument Sans", system-ui, Tahoma, sans-serif; }
html[data-ui="v3"] body.home { background: var(--bg); }
html[data-ui="v3"] .ic3 { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-inline-end: .32em; flex: none; }
html[data-ui="v3"] .ic3:last-child { margin-inline-end: 0; }
html[data-ui="v3"] .ic3 svg { display: block; }
/* side menu: deep pine */
html[data-ui="v3"] .side { background: var(--pine-deep); border: 0; color: #dce9e4; }
html[data-ui="v3"] .side-brand b { color: #fff; } html[data-ui="v3"] .side-brand small { color: #8fb0a7; }
html[data-ui="v3"] .side-mark { background: var(--saffron); color: var(--pine-deep); border-radius: 10px; }
html[data-ui="v3"] .sn { color: #b9cec7; position: relative; } html[data-ui="v3"] .sn svg { color: #7fa197; }
html[data-ui="v3"] .sn:hover { background: rgba(255,255,255,.06); }
html[data-ui="v3"] .sn.on { background: #1b3f38; color: #fff; } html[data-ui="v3"] .sn.on svg { color: var(--saffron); }
html[data-ui="v3"] .sn.on::before { content: ''; position: absolute; inset-inline-start: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--saffron); }
html[data-ui="v3"] .sn b { background: transparent; color: #7fa197; font-weight: 500; } html[data-ui="v3"] .sn.on b { color: var(--saffron); }
html[data-ui="v3"] .sn-h { font-size: 12px; color: #7fa197; padding: 18px 12px 6px; }
html[data-ui="v3"] .side-me { border-color: #1e3f38; } html[data-ui="v3"] .side-me .whoname b { color: #fff; } html[data-ui="v3"] .side-me .whoname small { color: #8fb0a7; opacity: 1; }
/* top bar: quiet, part of the page */
html[data-ui="v3"] .top { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ink); border-bottom: 1px solid var(--line); }
html[data-ui="v3"] .top button { background: var(--card); border: 1px solid var(--line); color: var(--ink); border-radius: 11px; }
html[data-ui="v3"] .top .avatar.sm { box-shadow: none; }
html[data-ui="v3"] .brandmark { background: var(--saffron); color: var(--pine-deep); border-radius: 10px; }
@media (min-width: 1024px) { html[data-ui="v3"] .top { padding: 12px 36px; } html[data-ui="v3"] .top h1 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; } html[data-ui="v3"] .wrap { max-width: 1360px; padding: 26px 36px 44px; } }
/* everyday parts */
html[data-ui="v3"] .btn { border-radius: 12px; font-weight: 600; } html[data-ui="v3"] .btn.primary { background: var(--brand); border-color: var(--brand); }
html[data-ui="v3"] input, html[data-ui="v3"] select, html[data-ui="v3"] textarea { border-radius: 12px; background: var(--card); color: var(--ink); border-color: var(--line); }
html[data-ui="v3"] .card, html[data-ui="v3"] .grid.olist, html[data-ui="v3"] .attn, html[data-ui="v3"] .dgroup, html[data-ui="v3"] .kpi { border-radius: 16px; box-shadow: none; background: var(--card); border-color: var(--line); }
html[data-ui="v3"] .segs { background: var(--card); border: 1px solid var(--line); } html[data-ui="v3"] .seg.on { background: var(--ink); color: var(--bg); box-shadow: none; } html[data-ui="v3"] .seg.on b { background: rgba(255,255,255,.18); }
html[data-ui="v3"] .kpi::before { display: none; } html[data-ui="v3"] .kpi span { display: flex; align-items: center; gap: 7px; }
html[data-ui="v3"] .kpi span::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--tone, #98a2b3); flex: none; }
html[data-ui="v3"] .kpi b { font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
html[data-ui="v3"] .sheet { border-radius: 22px 22px 0 0; } @media (min-width: 640px) { html[data-ui="v3"] .sheet { border-radius: 22px; } }
html[data-ui="v3"] .olist .orow.hot, html[data-ui="v3"] .card.hot { box-shadow: inset 3px 0 0 var(--problem); }
@media (min-width: 1024px) { html[data-ui="v3"] .launcher, html[data-ui="v3"] h3.sec { display: none; } }
/* home */
.hello3 { margin: 0 0 22px; } .hello3 p { color: var(--muted); font-size: 14.5px; margin-bottom: 6px; }
.hello3 h2 { font-size: 44px; line-height: 1.05; font-weight: 600; letter-spacing: -.035em; }
.v3card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; }
.v3card h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.v3row { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0; align-items: stretch; } .v3row > * { min-width: 0; }
.waiting { flex: 1.3 1 360px; } .v3wh { flex: 1 1 260px; display: flex; flex-direction: column; gap: 16px; } .v3cash { flex: 1 1 260px; display: flex; flex-direction: column; gap: 14px; background: var(--brand); border-color: var(--brand); color: #fff; }
i.c-ink { background: var(--ink); } i.c-idle { background: var(--idle); } i.c-saffron { background: var(--saffron); } i.c-pine { background: var(--brand); } i.c-road { background: var(--road); } i.c-problem { background: var(--problem); } i.c-done { background: var(--done); }
.k-done { background: var(--done); } .k-road { background: var(--road); } .k-problem { background: var(--problem); } i.k-plan { border: 1.5px solid var(--muted); box-sizing: border-box; }
.segbar { display: flex; gap: 3px; height: 12px; border-radius: 999px; overflow: hidden; }
.sb-done { background: var(--done); } .sb-road { background: var(--road); } .sb-problem { background: var(--problem); } .sb-plan { background: var(--line); } .sb-saffron { background: var(--saffron); } .sb-pine { background: var(--brand); }
.v3progress { display: none; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.pg-n { display: flex; align-items: baseline; gap: 8px; } .pg-n b { font-size: 34px; font-weight: 600; letter-spacing: -.035em; } .pg-n span { color: var(--muted); }
.pg-keys, .dl-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); } .pg-keys span, .dl-keys span { display: flex; align-items: center; gap: 6px; }
.pg-keys i, .dl-keys i { width: 10px; height: 10px; border-radius: 3px; }
/* day line */
.dayline { padding-bottom: 14px; }
.dl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 12px; } .dl-head .muted { font-size: 14px; } .dl-keys { margin-inline-start: auto; }
.dl-scroll { overflow-x: auto; } .dl-body { position: relative; min-width: 860px; }
.dl-ticks { position: relative; height: 24px; margin-inline-start: 170px; } .dl-ticks span { position: absolute; transform: translateX(-50%); font-size: 12px; color: var(--muted); }
[dir="rtl"] .dl-ticks span { transform: translateX(50%); }
.dl-lane { display: flex; align-items: center; height: 56px; border-top: 1px solid var(--line); }
.dl-who { width: 170px; flex: none; display: flex; align-items: center; gap: 10px; padding-inline-end: 12px; min-width: 0; } .dl-who b { display: block; font-size: 14px; } .dl-who small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-who .avatar.xs { width: 30px; height: 30px; border-radius: 999px; font-size: 11px; } .dl-none { background: var(--chip-bg) !important; color: var(--muted); }
.dl-track { position: relative; flex: 1; height: 56px; }
.dl-stop { position: absolute; top: 13px; height: 30px; min-width: 46px; border-radius: 8px; border: 1.5px solid transparent; color: #fff; font: inherit; font-size: 12px; font-weight: 600; padding: 0 8px; text-align: start; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.dl-stop span { overflow: hidden; text-overflow: ellipsis; display: block; }
.dl-stop.k-plan { background: var(--card); border-color: var(--idle); color: var(--ink); border-style: dashed; }
.dl-stop:hover { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(14,42,37,.18); z-index: 2; }
.dl-nowwrap { position: absolute; top: 0; bottom: 0; inset-inline-start: 170px; inset-inline-end: 0; pointer-events: none; }
.dl-now { position: absolute; top: 18px; bottom: 0; width: 2px; background: var(--saffron); }
.dl-now b { position: absolute; top: -18px; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #3a2604; background: var(--saffron); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
[dir="rtl"] .dl-now b { transform: translateX(50%); }
.dl-empty { padding: 18px 0; }
/* waiting, warehouse, cash, stock */
.waiting h2 { margin-bottom: 8px; }
.wt-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); } .wt-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.wt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .wt-txt b { font-size: 14.5px; font-weight: 600; } .wt-txt small { font-size: 13px; color: var(--muted); }
.wt-calm { padding: 12px 0; }
.whn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.whn button { border: 0; background: none; padding: 0; text-align: start; font: inherit; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.whn b { font-size: 30px; font-weight: 600; letter-spacing: -.03em; } .whn span { font-size: 13px; color: var(--muted); }
.cash-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; } .cash-n b { font-size: 40px; font-weight: 600; letter-spacing: -.035em; } .cash-n span { color: #bfd8d0; }
.cashbar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; } .cashbar div { height: 10px; border-radius: 999px; background: var(--saffron); }
.v3cash small { color: #bfd8d0; font-size: 13px; }
.v3h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 6px; } .v3h .muted { font-size: 14px; } .v3h .linkbtn { margin-inline-start: auto; }
.v3stock table { width: 100%; } .v3stock th { background: transparent; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; } .v3stock .num { text-align: end; } .v3stock .w34 { width: 34%; }
.lvl { height: 8px; border-radius: 999px; background: var(--chip-bg); overflow: hidden; } .lvl div { height: 8px; border-radius: 999px; background: var(--brand); } .lvl div.low { background: var(--saffron); }
@media (max-width: 1023.98px) { .v3progress { display: flex; } }
@media (max-width: 699.98px) { .dayline { display: none; } .hello3 h2 { font-size: 30px; } .v3card { padding: 16px; } .cash-n b { font-size: 30px; } }
/* deliveries: three panes */
.v3orders { display: grid; grid-template-columns: 228px minmax(0, 1fr) minmax(400px, 480px); background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; height: calc(100vh - 200px); min-height: 560px; }
.oviews { border-inline-end: 1px solid var(--line); padding: 14px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.ov { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; text-align: start; }
.ov i { width: 8px; height: 8px; border-radius: 999px; flex: none; } .ov span:not(.avatar) { flex: 1; } .ov b { font-size: 13px; font-weight: 500; color: var(--muted); }
.ov:hover { background: var(--hover); } .ov.on { background: var(--brand-soft); font-weight: 600; }
.ov-h { font-size: 12px; color: var(--muted); padding: 16px 10px 4px; }
.olist3 { border-inline-end: 1px solid var(--line); overflow-y: auto; }
.ol-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; position: sticky; top: 0; background: var(--card); z-index: 1; } .ol-h h2 { font-size: 16px; font-weight: 600; flex: 1; }
.v3row-o { display: grid; grid-template-columns: 4px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; width: 100%; padding: 12px 18px; border: 0; border-top: 1px solid var(--line); background: transparent; font: inherit; color: var(--ink); text-align: start; cursor: pointer; }
.v3row-o > i { grid-row: 1 / 3; border-radius: 999px; } .v3row-o:hover { background: var(--hover); }
.v3row-o.sel { background: var(--sel); box-shadow: inset 3px 0 0 var(--saffron); } [dir="rtl"] .v3row-o.sel { box-shadow: inset -3px 0 0 var(--saffron); }
.ro-l1 { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .ro-l1 b { flex: 1; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ro-l1 small { font-size: 13px; color: var(--muted); }
.ro-l2 { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--muted); min-width: 0; } .ro-l2 .ref { color: var(--ink); font-weight: 600; } .ro-st { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-l2 em { font-style: normal; font-size: 12px; font-weight: 600; } .ro-l2 em.urg { color: var(--problem); } .ro-l2 em.cash3 { color: #9a5b06; } [data-theme="dark"] .ro-l2 em.cash3 { color: var(--saffron); }
.inspector { overflow-y: auto; } .insp { padding: 20px 24px 28px; } .insp > h2 { font-size: 19px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.insp h3 { font-size: 13px; color: var(--muted); margin: 18px 0 8px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.insp-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 40px; text-align: center; } .insp-empty b { font-size: 16px; }
@media (max-width: 1360px) { .v3orders { grid-template-columns: 200px minmax(0, 1fr) minmax(360px, 420px); } }
/* order progress and history */
.v3steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; gap: 4px; }
.v3steps li { flex: 1; display: flex; flex-direction: column; gap: 7px; } .v3steps i { height: 5px; border-radius: 999px; background: var(--line); }
.v3steps li.on i { background: var(--brand); } .v3steps li.cur i { background: var(--road); } .v3steps li.bad i { background: var(--problem); } .v3steps li.on.cur:last-child i { background: var(--done); }
.v3steps span { font-size: 12px; color: var(--muted); } .v3steps li.on span { color: var(--ink); } .v3steps li.cur span { font-weight: 600; }
.v3hist div { display: flex; gap: 12px; padding-bottom: 12px; position: relative; } .v3hist i { width: 9px; height: 9px; border-radius: 999px; margin-top: 6px; flex: none; }
.v3hist div:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 4px; top: 18px; bottom: 0; width: 1px; background: var(--line); }
.v3hist span { display: flex; flex-direction: column; } .v3hist b { font-size: 14px; font-weight: 500; } .v3hist small { font-size: 12.5px; color: var(--muted); }
/* drivers: the day in numbers, a numbered route, slide to confirm */
.drvday { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.drvday > div { background: var(--pine-deep); color: #fff; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; } .drvday b { font-size: 21px; font-weight: 600; } .drvday span { font-size: 12px; color: #8fb0a7; }
.drvday .cashy { background: var(--saffron); color: #3a2604; } .drvday .cashy span { color: #5a3b06; }
html[data-ui="v3"] .stop { background: var(--road); color: #fff; }
.route3 > .job:first-child { border-color: var(--road); box-shadow: 0 12px 30px rgba(14,42,37,.12); }
.slide3 { position: relative; height: 58px; border-radius: 16px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; user-select: none; -webkit-user-select: none; touch-action: none; overflow: hidden; cursor: grab; width: 100%; }
.slide3::before { content: ''; position: absolute; inset: 0; background: var(--done); opacity: calc(var(--p, 0) * .9); }
.slide-knob { position: absolute; inset-inline-start: 5px; top: 5px; width: 48px; height: 48px; border-radius: 12px; background: var(--saffron); color: #3a2604; display: grid; place-items: center; z-index: 1; }
[dir="rtl"] .slide-knob svg { transform: scaleX(-1); }
.slide-lbl { position: relative; z-index: 1; padding-inline-start: 40px; opacity: calc(1 - var(--p, 0) * 1.3); }
.slide3.done { background: var(--done); } .slide3:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; }
/* phone tab bar */
@media (max-width: 1023.98px) {
  html[data-ui="v3"] .tabbar { background: var(--pine-deep); border: 0; }
  html[data-ui="v3"] .tb { color: #b9cec7; } html[data-ui="v3"] .tb.on { color: var(--saffron); }
  html[data-ui="v3"] .tb b { box-shadow: 0 0 0 2px var(--pine-deep); }
}
.tb-plus .plus { width: 50px; height: 46px; border-radius: 15px; background: var(--saffron); color: #3a2604; display: grid; place-items: center; }
.sections3 { display: flex; flex-direction: column; gap: 2px; }
/* dark details for v3 */
html[data-ui="v3"][data-theme="dark"] .x { background: #1a2926; color: var(--ink); }
html[data-ui="v3"][data-theme="dark"] .kv { background: #0f1a17; border-color: var(--line); }
html[data-ui="v3"][data-theme="dark"] .dl-stop.k-plan { background: transparent; }
@media (prefers-reduced-motion: reduce) { .dl-stop, .slide-knob { transition: none !important; } }

/* V2 with the V3 home: the extra colours it uses, in V2's palette */
html[data-ui="v2"] { --saffron: #f59e0b; --road: #3b82f6; --done: #16a34a; --problem: #ef4444; --idle: #cbd5d0; --sel: #f3f8f6; --pine-deep: #0f1614; }
html[data-ui="v2"][data-theme="dark"] { --saffron: #f5b95a; --road: #6b9bff; --done: #3ccf8e; --problem: #ff6b61; --idle: #3a4744; --sel: #182120; }
html[data-ui="v2"] .v3card { border-radius: 22px; }
html[data-ui="v2"] .hello3 h2 { letter-spacing: -.04em; }
html[data-ui="v2"] .v3cash { background: var(--ink); border-color: var(--ink); color: var(--bg); }
html[data-ui="v2"] .v3cash .cash-n span, html[data-ui="v2"] .v3cash small { color: color-mix(in srgb, var(--bg) 70%, transparent); }
html[data-ui="v2"] .cashbar { background: color-mix(in srgb, var(--bg) 18%, transparent); }
html[data-ui="v2"] .dl-now b { color: #3a2604; }
@media (min-width: 1024px) { html[data-ui="v2"] .launcher, html[data-ui="v2"] h3.sec { display: none; } }
/* order list: room for two status badges, which stack instead of running into the time */
@media (min-width: 861px) {
  .olist:not(.whlist) .ohead, .olist:not(.whlist) .orow { grid-template-columns: 132px minmax(0, 1fr) 128px minmax(0, 150px) 190px 64px; }
}
.olist .oc-st { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.olist .oc-st .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.olist .oc-time { white-space: nowrap; }
@media (max-width: 860px) { .olist .oc-st { justify-content: flex-end; } }
.qneg { color: #b42318; } .qpos { color: #067647; }
/* small orange count: dark text reads better on orange, in both themes */
.seg b.hot, .seg.on b.hot, html[data-ui] .seg.on b.hot { background: #f79009; color: #3a2604; }
/* ================= dark mode: every remaining light box ================= */
html[data-theme="dark"] .warn, html[data-theme="dark"] .sp-take .warn { color: #ff8a80; }
html[data-theme="dark"] .qneg, html[data-theme="dark"] .rotab .neg { color: #ff8a80; } html[data-theme="dark"] .qpos, html[data-theme="dark"] .rotab .pos { color: #5bd38b; }
html[data-theme="dark"] .stockplan { background: #10251f; border-color: #1f4039; }
html[data-theme="dark"] .sp-row { border-top-color: #1f4039; } html[data-theme="dark"] .sp-mini { color: #7fd3b8; }
html[data-theme="dark"] .batch { background: #1a2926; border-color: #2b3c38; color: var(--ink); }
html[data-theme="dark"] .batch.neg { background: #3a1614; border-color: #5a2320; color: #ff8a80; }
html[data-theme="dark"] .paypick .pp span { background: var(--card); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .paypick .pp input:checked + span { background: #1a2926; border-color: #5d6b67; }
html[data-theme="dark"] .paypick .pp-paid input:checked + span { background: #10301f; border-color: #3ccf8e; color: #5bd38b; }
html[data-theme="dark"] .paypick .pp-unpaid input:checked + span { background: #3a1620; border-color: #ff7a9a; color: #ff9db3; }
html[data-theme="dark"] .paypick .pp-credit input:checked + span { background: #132544; border-color: #86aeff; color: #9fbeff; }
html[data-theme="dark"] .rtable tr.wrow td { background: #10251f; }
html[data-theme="dark"] .gsec[open] summary { background: #16201d; }
html[data-theme="dark"] .dl-stop.k-done, html[data-theme="dark"] .dl-stop.k-road, html[data-theme="dark"] .dl-stop.k-problem { color: #08110f; }
html[data-ui="v3"] { --col-bg: #e3e9e6; } html[data-ui="v3"][data-theme="dark"] { --col-bg: #0f1a17; }

/* live clock and working hours */
.nowbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 10px; }
.liveclock { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 6px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.workbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13.5px; padding: 6px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.wb-hours { color: var(--muted); } .wb-bar { width: 120px; height: 7px; border-radius: 999px; background: var(--chip-bg, #eef1ef); overflow: hidden; } .wb-bar div { height: 7px; border-radius: 999px; background: var(--brand); transition: width .6s; }
.ws-after .wb-bar div { background: var(--muted); } .ws-before .wb-left { color: var(--muted); } .wb-set { font-size: 13.5px; }
/* the Odoo slip's two blocks */
.addrblocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.addrblocks > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.45; }
.addrblocks h4 { font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 0 0 4px; } .ab-name { font-weight: 600; }
@media (max-width: 520px) { .addrblocks { grid-template-columns: 1fr; } }
.custblk { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; } .custblk summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--muted); padding: 4px 0; }
.custblk[open] summary { margin-bottom: 8px; }
.boxline { font-size: 14px; margin: 2px 0; }
.printpick { display: flex; flex-direction: column; gap: 8px; } .printpick .btn { flex-direction: column; gap: 2px; } .printpick small { font-weight: 400; font-size: 12.5px; opacity: .85; }

/* Odoo-style contacts: delivery addresses on the customer card, branch picker on the order form */
.addrlist { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 4px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.addrrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.addrrow > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.branchpick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 12px; font-size: 13px; }
.branchpick .chip { border: 1px solid var(--line); background: var(--card, #fff); color: inherit; border-radius: 999px; padding: 5px 12px; font: inherit; cursor: pointer; }
.branchpick .chip.on { border-color: var(--brand, #0F5C4D); background: var(--brand, #0F5C4D); color: #fff; }
.addrrow > .row { flex-wrap: nowrap; flex: none; }

/* the signature pad stays white with dark ink in dark mode too, so the customer can see what they draw */
html[data-theme="dark"] .sig { background: #fff; border-color: #6b7c77; }

/* Home header (V2/V3): one green band — greeting of the day, date, live clock, working-hours ring */
.hhero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 24px; align-items: center; margin: 0 0 18px;
  padding: 26px 30px; border-radius: 22px; color: #fff; background: linear-gradient(120deg, #0f5c4d 0%, #13705e 60%, #178a72 100%); }
.hhero::after { content: ''; position: absolute; right: -60px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.06); pointer-events: none; }
[dir="rtl"] .hhero::after { right: auto; left: -60px; }
.hh-text { min-width: 0; position: relative; z-index: 1; }
.hh-hi { margin: 0; font-size: 15px; font-weight: 500; opacity: .9; }
.hh-date { margin: 4px 0 3px; font-size: 40px; line-height: 1.08; font-weight: 700; letter-spacing: -.03em; color: #fff; }
.hh-sub { margin: 0; font-size: 14px; opacity: .78; }
.hh-right { display: flex; gap: 14px; align-items: center; position: relative; z-index: 1; flex-wrap: wrap; justify-content: flex-end; }
.hh-clock { display: flex; flex-direction: column; align-items: center; padding: 12px 20px; border-radius: 18px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
.hh-t { font: 600 32px/1.1 "Geist Mono", ui-monospace, Menlo, monospace; letter-spacing: -.02em; font-variant-numeric: tabular-nums; direction: ltr; }
.hh-t small { font-size: 15px; opacity: .75; margin-inline-start: 5px; }
.hh-tz { font-size: 12px; opacity: .75; margin-top: 3px; }
.hshift { display: flex; gap: 14px; align-items: center; min-width: 250px; padding: 12px 18px 12px 12px; border-radius: 18px; background: var(--card, #fff); color: var(--ink); }
.hshift b { display: block; font-size: 15px; } .hs-sub, .hs-left { font-size: 12.5px; color: var(--muted); } .hs-left { font-weight: 600; color: var(--ink); }
.hshift .linkbtn { font-size: 12.5px; padding: 0; margin-top: 2px; }
.hs-ring { --c: var(--brand, #0f5c4d); flex: none; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) 0 var(--deg, 0deg), var(--chip-bg, #eef2f0) var(--deg, 0deg) 360deg); }
.hs-ring span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--card, #fff); font: 700 13px system-ui; color: var(--c); }
.hs-soon .hs-ring { --c: #d98a1c; } .hs-after .hs-ring, .hs-before .hs-ring, .hs-none .hs-ring { --c: var(--muted); }
.hs-soon .hs-left { color: #b4730f; }
html[data-theme="dark"] .hhero { background: linear-gradient(120deg, #0c3f35 0%, #0f5244 60%, #126552 100%); }
@media (max-width: 899.98px) { .hhero { grid-template-columns: 1fr; padding: 20px; } .hh-right { justify-content: flex-start; } .hh-date { font-size: 30px; } }
@media (max-width: 480px) { .hhero { padding: 18px 16px; gap: 14px; } .hh-date { font-size: 27px; }
  .hh-right { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .hh-clock { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 10px 16px; } .hh-t { font-size: 26px; }
  .hshift { min-width: 0; } .hs-ring { width: 54px; height: 54px; } .hs-ring span { width: 42px; height: 42px; font-size: 12px; } }

/* ---------- V2/V3 login: brand panel + form ---------- */
body.authv2 { background: var(--bg); }
.lpage { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; min-height: 100dvh; }
.lbrand { position: relative; overflow: hidden; color: #fff; background: linear-gradient(140deg, #0c4a3e 0%, #0f5c4d 45%, #178a72 100%); padding: 40px 48px; display: flex; flex-direction: column; }
.lbrand::after { content: ''; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255,255,255,.06); pointer-events: none; }
[dir="rtl"] .lbrand::after { right: auto; left: -120px; } [dir="rtl"] .lroute { transform: scaleX(-1); }
.lbh { display: flex; gap: 12px; align-items: center; position: relative; z-index: 1; } .lbh b { display: block; font-size: 18px; } .lbh div span { font-size: 12.5px; opacity: .75; }
.llogo { width: 48px; height: 48px; border-radius: 14px; background: #fff; color: #0f5c4d; display: grid; place-items: center; flex: none; } .llogo svg { width: 28px; height: 28px; }
.lroute { position: absolute; left: 0; right: 0; top: 150px; width: 100%; height: 340px; opacity: .9; }
.lhero { margin-top: auto; position: relative; z-index: 1; }
.lhero h1 { font-size: 44px; line-height: 1.05; letter-spacing: -.035em; margin: 0 0 12px; color: #fff; font-weight: 700; }
.lhero p { font-size: 16px; opacity: .82; margin: 0 0 28px; max-width: 440px; line-height: 1.5; }
.lfeats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lfeats div { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 12px 14px; }
.lfeats b { display: block; font-size: 13.5px; margin-bottom: 3px; } .lfeats span { font-size: 12px; opacity: .78; }
.lside { display: flex; flex-direction: column; padding: 28px 48px 24px; min-width: 0; }
.ltop { display: flex; justify-content: flex-end; }
.llang { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 8px 15px; font: inherit; font-size: 13.5px; cursor: pointer; }
.lbox { width: 100%; max-width: 410px; margin: auto; padding: 24px 0; }
.lbox h2 { font-size: 30px; letter-spacing: -.03em; margin: 0 0 6px; font-weight: 700; } .lsub { color: var(--muted); margin: 0 0 24px; font-size: 15px; }
.lf { display: block; margin: 0 0 16px; } .lf > span:first-child { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.lin { display: flex; align-items: center; gap: 10px; height: 50px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 0 12px 0 14px; transition: border-color .15s, box-shadow .15s; }
.lin:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.lin > svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.lin input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; padding: 0 !important; height: 100%; font-size: 15.5px; color: var(--ink); margin: 0; }
.leye { border: 0; background: transparent; color: var(--muted); padding: 6px; cursor: pointer; border-radius: 8px; display: grid; } .leye svg { width: 19px; height: 19px; } .leye.on { color: var(--brand); }
.lrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; margin: -4px 0 18px; }
.lkeep { display: flex; gap: 8px; align-items: center; margin: 0; cursor: pointer; } .lkeep input { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; }
.lrow .linkbtn { font-weight: 600; font-size: 13.5px; } .lnoreset small { display: block; font-size: 11.5px; text-align: end; }
.lbox .botbox { margin: 0 0 18px; }
.lgo { width: 100%; height: 52px; font-size: 16px; font-weight: 700; border-radius: 12px; box-shadow: 0 8px 20px rgba(15,92,77,.25); }
.lnew { text-align: center; font-size: 13.5px; color: var(--muted); margin: 18px 0 0; } .lback { margin: 0 0 14px; }
.lnote { text-align: center; font-size: 12px; color: var(--muted); margin: 0; }
html[data-theme="dark"] .lbrand { background: linear-gradient(140deg, #0a3a31 0%, #0c4a3e 45%, #12644f 100%); }
@media (max-width: 899.98px) {
  .lpage { grid-template-columns: 1fr; display: block; }
  .lbrand { padding: 20px 20px 64px; border-radius: 0 0 28px 28px; } .lroute, .lhero p, .lfeats { display: none; }
  .lhero { margin-top: 26px; } .lhero h1 { font-size: 0; margin: 0; } .lhero h1::after { content: none; }
  .lside { padding: 0 16px 20px; } .ltop { position: absolute; top: 24px; inset-inline-end: 20px; z-index: 2; }
  .llang { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
  .lbox { margin: -44px 0 0; max-width: none; background: var(--card); border-radius: 20px; padding: 22px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.08); position: relative; }
  .lbox h2 { font-size: 25px; } .lnote { margin-top: 16px; }
}

/* the delivery branch next to the company name */
.brn { display: inline-block; font-size: .82em; font-weight: 600; color: var(--brand); background: var(--brand-soft, #e3f1ed); border-radius: 999px; padding: 1px 8px; margin-inline-start: 6px; vertical-align: 1px; white-space: nowrap; }
html[data-theme="dark"] .brn { background: rgba(60,207,142,.14); color: #6fe0ae; }
.brn.first { margin-inline-start: 0; margin-inline-end: 4px; }

/* SwiftAxon brand (login): the logo the owner gave, in white on the green panel */
.swx { display: inline-flex; align-items: center; gap: 16px; color: #fff; }
.swx-mark { flex: none; width: 64px; height: auto; }
.swx-word { display: flex; flex-direction: column; gap: 7px; line-height: 1; }
.swx-word img { width: 190px; height: auto; display: block; }
.swx-word small { font-size: 11px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; opacity: .78; }
[dir="rtl"] .swx-word small { letter-spacing: 0; font-size: 13px; }
.lhelp { text-align: center; font-size: 13px; color: var(--muted); margin: 8px 0 0; } .lhelp a { color: var(--brand); font-weight: 600; }
@media (max-width: 899.98px) { .swx-mark { width: 48px; } .swx-word img { width: 150px; } .swx-word small { font-size: 10px; } }
/* Home: the company logo in the green band */
.hh-text { display: flex; align-items: center; gap: 18px; }
.hh-tx { min-width: 0; }
.hh-logo { flex: none; width: 88px; height: 88px; border-radius: 20px; box-shadow: 0 0 0 2px rgba(255,255,255,.16), 0 10px 26px rgba(0,0,0,.28); background: #000; } /* the logo exactly as sent */
@media (max-width: 480px) { .hh-logo { width: 62px; height: 62px; border-radius: 14px; } .hh-text { gap: 12px; } }
@media (max-width: 400px) { .swx { gap: 10px; } .swx-mark { width: 40px; } .swx-word img { width: 124px; } .swx-word small { font-size: 9px; letter-spacing: .26em; } }
/* dark mode: boxes that stayed light (cash card, guide tips, cash to collect, warehouse badges) */
html[data-theme="dark"] .v3cash { background: #10261f; color: #e8f1ed; border: 1px solid #1f3d33; }
html[data-theme="dark"] .v3cash * { color: inherit; }
html[data-theme="dark"] .v3cash .muted, html[data-theme="dark"] .v3cash small, html[data-theme="dark"] .v3cash p { color: #9db5ad; }
html[data-theme="dark"] .gtip { background: #2a2414; color: #f1dfb1; border-color: #4a3e1c; }
html[data-theme="dark"] .cod { background: #12301f; color: #8be3b0; border-color: #1f5236; }
html[data-theme="dark"] .badge.wh-ready { background: #123524; color: #7fe0a9; }
html[data-theme="dark"] .badge.wh-prep { background: #3a2f12; color: #f3cf7a; }
html[data-theme="dark"] .v3cash .cash-n span { color: #9db5ad !important; }

/* ---------- customer tracking page ---------- */
body.trkbody { background: var(--bg); }
.trk { min-height: 100vh; min-height: 100dvh; background: linear-gradient(180deg, #0c4a3e 0, #0f5c4d 210px, var(--bg) 210px); }
.trk-head { max-width: 620px; margin: 0 auto; padding: 18px 16px 0; display: flex; align-items: center; justify-content: space-between; color: #fff; }
.trk-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.trk-logo { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 2px rgba(255,255,255,.18); background: #000; }
.trk-lang { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13.5px; cursor: pointer; }
.trk-main { max-width: 620px; margin: 0 auto; padding: 22px 16px 28px; display: flex; flex-direction: column; gap: 14px; }
.trk-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 20px; box-shadow: 0 10px 30px rgba(10,40,32,.08); }
.trk-card h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.trk-card h3 span { background: var(--chip-bg, #eef2f0); color: var(--ink); border-radius: 999px; padding: 1px 8px; font-size: 12px; letter-spacing: 0; }
.trk-ref { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.trk-ref b { color: var(--ink); font-weight: 700; }
.trk-due { font-weight: 600; color: var(--ink); }
.trk-status { display: flex; gap: 14px; align-items: center; margin: 16px 0 18px; }
.trk-ic { flex: none; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.trk-ic svg { width: 28px; height: 28px; }
.trk-status h1 { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -.025em; font-weight: 700; }
.trk-status p { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; }
.trk-bar { height: 8px; border-radius: 999px; background: var(--chip-bg, #eef2f0); overflow: hidden; }
.trk-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1fae7e, var(--brand)); transition: width .6s ease; }
.trk-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.trk-steps li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; color: var(--muted); min-width: 0; }
.trk-steps b { font-size: 12.5px; font-weight: 600; line-height: 1.2; } .trk-steps small { font-size: 11px; line-height: 1.25; }
.trk-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--chip-bg, #eef2f0); color: var(--muted); }
.trk-dot svg { width: 17px; height: 17px; }
.trk-steps li.done { color: var(--ink); } .trk-steps li.done .trk-dot { background: var(--brand); color: #fff; }
.trk-steps li.now .trk-dot { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); animation: trkPulse 1.8s infinite; }
.trk-steps li.bad .trk-dot { background: #d2453b; color: #fff; }
@keyframes trkPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.trk.is-failed .trk-ic { background: rgba(210,69,59,.12); color: #d2453b; } .trk.is-failed .trk-bar i { background: #d2453b; }
.trk.is-done .trk-ic { background: var(--brand); color: #fff; }
.trk-cod { display: flex; align-items: center; gap: 14px; background: linear-gradient(120deg, #fff7e6, #fdecc8); border-color: #f1d9a6; }
.trk-cod > span { font-size: 26px; } .trk-cod small { display: block; color: #8a6414; font-size: 13px; font-weight: 600; } .trk-cod b { font-size: 24px; color: #5c3f04; letter-spacing: -.02em; }
.trk-driver { display: flex; align-items: center; gap: 14px; }
.trk-av { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #1fae7e, #0f5c4d); color: #fff; font-weight: 700; font-size: 18px; }
.trk-driver div { flex: 1; min-width: 0; } .trk-driver small { display: block; color: var(--muted); font-size: 12.5px; } .trk-driver b { font-size: 17px; }
.trk-call { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff !important; text-decoration: none; font-weight: 700; padding: 11px 18px; border-radius: 14px; box-shadow: 0 6px 16px rgba(15,92,77,.25); }
.trk-call svg { width: 18px; height: 18px; }
.trk-cust { margin: 0; font-weight: 700; font-size: 16px; } .trk-addr { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; } .trk-boxes { margin: 8px 0 0; font-size: 14px; font-weight: 600; }
.trk-items ul { list-style: none; margin: 0; padding: 0; }
.trk-items li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.trk-items li:first-child { border-top: 0; } .trk-items li b { white-space: nowrap; font-size: 14.5px; } .trk-items li small { color: var(--muted); font-weight: 500; }
.trk-more { margin-top: 8px; width: 100%; border: 1px dashed var(--line); background: transparent; color: var(--brand); font: inherit; font-weight: 600; padding: 10px; border-radius: 12px; cursor: pointer; }
.trk-recv { margin: 0 0 12px; } .trk-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trk-proof a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--muted); font-size: 12.5px; text-align: center; }
.trk-proof img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.trk-empty { text-align: center; padding: 34px 20px; } .trk-empty svg { width: 44px; height: 44px; color: #d2453b; } .trk-empty h2 { font-size: 18px; margin: 10px 0 0; }
.trk-foot { text-align: center; color: var(--muted); font-size: 12px; margin: 4px 0 0; line-height: 1.7; } .trk-foot span { opacity: .8; }
html[data-theme="dark"] .trk { background: linear-gradient(180deg, #0a3a31 0, #0c4a3e 210px, var(--bg) 210px); }
html[data-theme="dark"] .trk-card { box-shadow: none; }
html[data-theme="dark"] .trk-cod { background: #2a2414; border-color: #4a3e1c; } html[data-theme="dark"] .trk-cod small { color: #e0c27a; } html[data-theme="dark"] .trk-cod b { color: #f6dc9a; }
@media (max-width: 480px) { .trk-status h1 { font-size: 22px; } .trk-ic { width: 48px; height: 48px; border-radius: 15px; } .trk-card { padding: 16px; border-radius: 18px; } .trk-steps b { font-size: 11.5px; } .trk-call span { display: none; } .trk-call { padding: 12px; } }

/* printed documents (delivery notes, commercial invoice, packing list) are paper: never take dark-mode colours */
.pn-note { color-scheme: light; }

/* ===== Sidebar, Claude style: a flat full-height panel that folds to an icon rail (button or Ctrl+B) ===== */
.side-tog { display: none; }
.side-tip { position: fixed; z-index: 1000; pointer-events: none; background: #111614; color: #fff; font-size: 13px; font-weight: 500; line-height: 1; padding: 7px 10px; border-radius: 8px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.18); display: flex; gap: 8px; align-items: center; }
.side-tip[hidden] { display: none; }
.side-tip kbd { font: inherit; font-size: 12px; color: #aab4b0; }
html[data-theme="dark"] .side-tip { background: #e9eeec; color: #0f1614; } html[data-theme="dark"] .side-tip kbd { color: #5a6560; }
@media (min-width: 1024px) {
  html[data-ui] .side { margin: 0; top: 0; height: 100vh; border: 0; border-radius: 0; border-inline-end: 1px solid var(--line); box-shadow: none;
    width: 260px; padding: 12px 10px; overflow-x: hidden; transition: width .2s ease, padding .2s ease; }
  html[data-ui="v1"] .side, html[data-ui="v2"] .side { background: color-mix(in srgb, var(--bg) 55%, var(--card)); }
  .side-brand { padding: 4px 4px 14px 6px; gap: 10px; min-height: 44px; }
  .side-name { flex: 1; min-width: 0; white-space: nowrap; }
  .side-name b, .side-name small { overflow: hidden; text-overflow: ellipsis; }
  html[data-ui="v2"] .side-mark { width: 32px; height: 32px; border-radius: 9px; box-shadow: none; }
  .side-mark svg { width: 18px; height: 18px; }
  .side-tog { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
  .side-tog:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
  .side-tog:focus-visible, .side .sn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
  html[dir="rtl"] .side-tog svg { transform: scaleX(-1); }
  /* items: plain rows, soft grey highlight for the open page */
  html[data-ui="v1"] .sn, html[data-ui="v2"] .sn { min-height: 38px; padding: 0 10px; gap: 12px; border-radius: 9px; font-size: 14.5px; font-weight: 450; color: var(--ink); white-space: nowrap; }
  html[data-ui="v1"] .sn svg, html[data-ui="v2"] .sn svg { width: 19px; height: 19px; color: color-mix(in srgb, var(--ink) 70%, transparent); }
  html[data-ui="v1"] .sn:hover, html[data-ui="v2"] .sn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  html[data-ui="v1"] .sn.on, html[data-ui="v2"] .sn.on { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); font-weight: 600; }
  html[data-ui="v1"] .sn.on svg, html[data-ui="v2"] .sn.on svg { color: var(--brand); }
  html[data-ui="v1"] .sn b, html[data-ui="v2"] .sn b { background: var(--brand); color: #fff; font-size: 11.5px; min-width: 20px; text-align: center; padding: 1px 6px; }
  .sn { position: relative; }
  .side-me { padding: 12px 6px 2px; white-space: nowrap; overflow: hidden; }

  /* folded: icons only */
  html.side-mini .side { width: 64px; padding-inline: 10px; }
  html.side-mini .side-brand { flex-direction: column; gap: 8px; padding: 4px 0 12px; align-items: center; }
  html.side-mini .side-name, html.side-mini .sn span, html.side-mini .sn-h, html.side-mini .side-me .whoname { display: none; }
  html.side-mini .sn { justify-content: center; padding: 0; width: 44px; min-height: 40px; }
  html.side-mini .sn b { position: absolute; top: 3px; inset-inline-end: 2px; min-width: 0; width: 9px; height: 9px; padding: 0; font-size: 0; border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg) 55%, var(--card)); }
  html.side-mini .side-me { justify-content: center; padding-inline: 0; }
  html.side-mini[data-ui="v3"] .sn.on::before { inset-inline-start: -10px; }
}
@media (prefers-reduced-motion: reduce) { html[data-ui] .side { transition: none; } }

/* ===== Phones: the menu button opens the same sidebar as a drawer (like Claude's app) ===== */
.side-menu { display: none; }
@media (max-width: 1023.98px) {
  body.shelled .top .side-menu { display: inline-flex; align-items: center; justify-content: center; padding: 7px !important; }
  body.shelled .top.has-menu .homebtn, body.shelled .top.has-menu .brandmark { display: none; }
  html[dir="rtl"] .side-menu svg { transform: scaleX(-1); }
  body.shelled .side { display: flex; flex-direction: column; position: fixed; z-index: 60; top: 0; bottom: 0; inset-inline-start: 0; margin: 0;
    width: min(300px, 84vw); height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: calc(12px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom));
    background: var(--card); border: 0; border-radius: 0; box-shadow: 0 0 40px rgba(0,0,0,.22);
    transform: translateX(-105%); visibility: hidden; transition: transform .26s cubic-bezier(.2,.8,.2,1), visibility 0s .26s; }
  html[dir="rtl"] body.shelled .side { transform: translateX(105%); }
  html.side-open body.shelled .side { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.2,.8,.2,1); }
  .side-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(8,12,11,.42); opacity: 0; pointer-events: none; transition: opacity .2s; }
  html.side-open .side-scrim { opacity: 1; pointer-events: auto; }
  html.side-open body { overflow: hidden; }
  .side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 4px 14px 6px; }
  .side-name { flex: 1; min-width: 0; }
  .side-tog { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); }
  html[dir="rtl"] .side-tog svg { transform: scaleX(-1); }
  body.shelled .side .sn { min-height: 46px; padding: 0 12px; gap: 14px; border-radius: 10px; font-size: 15.5px; font-weight: 450; color: var(--ink); }
  body.shelled .side .sn svg { color: color-mix(in srgb, var(--ink) 70%, transparent); }
  body.shelled .side .sn.on { background: color-mix(in srgb, var(--ink) 9%, transparent); font-weight: 600; } body.shelled .side .sn.on svg { color: var(--brand); }
  body.shelled .side .sn b { background: var(--brand); color: #fff; }
  html[data-ui="v3"] body.shelled .side { background: var(--pine-deep); }
  html[data-ui="v3"] body.shelled .side .sn { color: #b9cec7; } html[data-ui="v3"] body.shelled .side .sn.on { background: #1b3f38; color: #fff; }
}
@media (prefers-reduced-motion: reduce) { body.shelled .side, .side-scrim { transition: none !important; } }
/* one sidebar button at a time (like Claude): while the drawer is open, the top-bar button steps aside */
html.side-open .top .side-menu { visibility: hidden; }
@media (min-width: 1024px) { .only-phone { display: none !important; } }
/* a slim row on the phone home for the one section the bottom bar doesn't hold (the User guide) */
.hlink { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.hlink .ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--chip-bg, #f0f2ee); }
.hlink .ico svg, .hlink .ico img { width: 24px; height: 24px; }
.hlink .atext { flex: 1; min-width: 0; } .hlink b { display: block; font-size: 15px; } .hlink small { display: block; font-size: 13px; color: var(--muted); }
.hlink .chev { font-size: 22px; color: var(--muted); } html[dir="rtl"] .hlink .chev { transform: scaleX(-1); }

/* ===== Profile menu (avatar): language + log out live here ===== */
.pwrap { position: relative; display: inline-flex; margin-inline-start: 4px; }
.top .pwrap .who { display: flex !important; align-items: center; gap: 9px; cursor: pointer; font: inherit; color: inherit; background: transparent; border: 0; border-radius: 999px; padding: 3px 8px 3px 3px; opacity: 1; margin: 0; }
html[data-ui] .top .pwrap .who { background: transparent; border: 0; box-shadow: none; }
.top .pwrap .who:hover, .top .pwrap .who[aria-expanded="true"] { background: color-mix(in srgb, currentColor 9%, transparent); }
.top .pwrap .who:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pchev { font-size: 11px; opacity: .6; }
.pmenu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 70; width: 250px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 36px rgba(0,0,0,.16); padding: 6px; }
.pmenu[hidden] { display: none; }
.pm-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pm-head span { min-width: 0; } .pm-head b { display: block; font-size: 14px; } .pm-head small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .pmenu .pm-item, .pmenu .pm-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; text-align: start; box-shadow: none; }
.pm-item svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.pm-item span { flex: 1; } .pm-item em { font-style: normal; font-size: 13px; color: var(--muted); }
.top .pmenu .pm-item:hover, .top .pmenu .pm-item:focus-visible { background: var(--hover, #f2f5f3); outline: none; }
.top .pmenu .pm-out, .top .pmenu .pm-out svg { color: #c0392b; }
html[data-theme="dark"] .top .pmenu .pm-out, html[data-theme="dark"] .top .pmenu .pm-out svg { color: #ff7b72; }
@media (max-width: 700px) { .pchev { display: none; } .top .pwrap .who { padding: 3px; } }

/* ===== Company logo (Soil Roasters wordmark), transparent: light / dark / white versions ===== */
.soil-d { display: none; }
html[data-theme="dark"] .soil-l { display: none; } html[data-theme="dark"] .soil-d { display: block; }
.side-brand .side-logo { display: flex; flex-direction: column; gap: 5px; padding-inline-start: 4px; }
.side-logo img.sw-full { height: 22px; width: auto; max-width: 180px; }
.side-logo img.sw-mini { display: none !important; height: 18px; width: auto; }
.side-logo small { font-size: 11.5px; color: var(--muted); }
html[data-ui="v3"] .side-logo img.sw-full { display: block; }
@media (min-width: 1024px) {
  html.side-mini .side-brand .side-name.side-logo { display: flex; align-items: center; padding: 0; }
  html.side-mini .side-logo img.sw-full, html.side-mini .side-logo small { display: none !important; }
  html.side-mini .side-logo img.sw-mini.soil-l { display: block !important; }
  html.side-mini[data-theme="dark"] .side-logo img.sw-mini.soil-l { display: none !important; }
  html.side-mini[data-theme="dark"] .side-logo img.sw-mini.soil-d, html.side-mini[data-ui="v3"] .side-logo img.sw-mini { display: block !important; }
}
.brandmark.soil, html[data-ui] .brandmark.soil { width: auto; height: auto; background: transparent; box-shadow: none; border-radius: 0; padding: 0 4px; }
.brandmark.soil img { height: 20px; width: auto; }
.hh-word { display: block; height: 22px; width: auto; margin-bottom: 10px; opacity: .95; }
@media (max-width: 480px) { .hh-word { height: 18px; margin-bottom: 8px; } }
.trk-logo { display: inline-flex; align-items: center; width: auto; height: auto; border-radius: 0; box-shadow: none; background: transparent; }
.trk-logo img { height: 22px; width: auto; }
/* bottom bar: full labels — a long one (My deliveries) goes on two lines instead of being cut */
.tb span { white-space: normal; text-overflow: clip; text-align: center; line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* phones: when the top bar already shows the logo (no menu button), don't repeat it in the green band */
@media (max-width: 1023.98px) { body.shelled:has(.top:not(.has-menu) .brandmark.soil) .hh-word { display: none; } }
/* computers: the sidebar is always there with its own fold button, so the top-bar menu button never shows */
@media (min-width: 1024px) { .top .side-menu { display: none !important; } }
/* tracking page header is green: white logo, the title in small type under it */
.trk-brand { flex-direction: column; align-items: flex-start; gap: 6px; }
.trk-brand .trk-title { font-size: 13.5px; font-weight: 500; opacity: .85; letter-spacing: 0; }
.trk-head .trk-logo img { height: 20px; }
.trk-lang { white-space: nowrap; flex: none; }

/* ===== the one-time "app is updated" message ===== */
.updpop { text-align: center; padding: 6px 4px 2px; }
.updpop .up-emoji { font-size: 56px; line-height: 1.1; margin: 4px 0 10px; }
.updpop h3 { font-size: 24px; line-height: 1.25; margin: 0 0 10px; letter-spacing: -.01em; }
.updpop .up-body { font-size: 16.5px; color: var(--ink); margin: 0 0 14px; }
.updpop .up-check { text-align: start; font-size: 15.5px; line-height: 1.45; background: #fff6e3; color: #6b4300; border: 1px solid #f2d79a; border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; }
html[data-theme="dark"] .updpop .up-check { background: rgba(245,185,90,.12); color: #f5d28a; border-color: rgba(245,185,90,.35); }
.updpop .btn.big { width: 100%; font-size: 17px; }
@media (min-width: 700px) { #modal .sheet:has(.updpop) { max-width: 520px; } }
#modal .updpop h3 { text-transform: none; color: var(--ink); letter-spacing: -.01em; font-weight: 700; font-size: 24px; opacity: 1; }

/* ===== phones: order cards (delivery orders) — badges on their own line at full size, name and address use the whole width ===== */
@media (max-width: 860px) {
  .olist:not(.whlist) .ohead { display: none; }
  .olist:not(.whlist) .orow { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "ref ref" "st st" "cust cust" "drv time" !important; gap: 6px 10px; padding: 12px 14px; }
  .olist:not(.whlist) .oc-ref { grid-area: ref; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
  .olist:not(.whlist) .oc-st { grid-area: st; justify-content: flex-start !important; }
  .olist:not(.whlist) .oc-st .badge { max-width: none; overflow: visible; white-space: nowrap; }
  .olist:not(.whlist) .oc-cust { grid-area: cust; min-width: 0; }
  .olist:not(.whlist) .oc-due { display: none; }
  .olist:not(.whlist) .oc-drv { grid-area: drv; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .olist:not(.whlist) .oc-time { grid-area: time; text-align: end; }
}
/* sidebar group headings (Operations / Office / Admin) */
html[data-ui="v1"] .sn-h, html[data-ui="v2"] .sn-h { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 16px 12px 5px; }
html[dir="rtl"] .sn-h { letter-spacing: 0; }

/* ===== Phase 2: pickups page like delivery orders, bulk assign, loading sheet ===== */
.whfilters .segs { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .whfilters .segs::-webkit-scrollbar { display: none; }
.whfilters .seg { white-space: nowrap; flex: none; }
.osel { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--brand); cursor: pointer; }
.olist .oc-ref { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border-radius: 14px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); position: sticky; top: 70px; z-index: 4; }
.bulkbar select { width: auto; flex: 1 1 160px; max-width: 260px; }
.lspick { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 860px) {
  .whlist .ohead { display: none; }
  .whlist .orow { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "ref ref" "st st" "cust cust" "due drv" "time time" !important; gap: 6px 10px; padding: 12px 14px; }
  .whlist .oc-ref { grid-area: ref; } .whlist .oc-st { grid-area: st; justify-content: flex-start !important; } .whlist .oc-st .badge { max-width: none; overflow: visible; white-space: nowrap; }
  .whlist .oc-cust { grid-area: cust; min-width: 0; } .whlist .oc-due { grid-area: due; display: block; } .whlist .oc-drv { grid-area: drv; text-align: end; }
  .whlist .oc-time { grid-area: time; } .whlist .oc-time .btn { width: 100%; justify-content: center; }
  .bulkbar { top: 62px; }
}

/* ===== Phase 3: replenishment by order, aging, customer page ===== */
.rbhead { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 4px 0 10px; } .rbhead p { margin: 0; flex: 1 1 260px; }
.rbtab tr.on td { background: var(--brand-soft); } .rbtab input[type=checkbox], #rbAll { width: 18px; height: 18px; accent-color: var(--brand); }
.rb-items { display: flex; flex-wrap: wrap; gap: 4px 8px; } .rb-it { display: inline-flex; gap: 5px; align-items: baseline; padding: 2px 8px; border-radius: 999px; background: var(--chip-bg, #eef1ef); font-size: 12.5px; white-space: nowrap; }
.rbplan { margin-top: 16px; padding: 14px; border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--brand-soft) 45%, transparent); }
.rbQty { width: 96px !important; display: inline-block; }
.badge.ag-warn { background: #fff1d6; color: #7a4a00; } .badge.ag-old { background: #fde4e1; color: #a1241b; }
html[data-theme="dark"] .badge.ag-warn { background: rgba(245,185,90,.16); color: #f5d28a; } html[data-theme="dark"] .badge.ag-old { background: rgba(255,107,97,.16); color: #ff9c94; }
.stbtns { gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pp-hero h1 { font-size: 24px; margin: 2px 0 12px; letter-spacing: -.01em; }
.pp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pp-kpis div { background: var(--chip-bg, #f0f2ee); border-radius: 14px; padding: 10px 12px; } .pp-kpis b { display: block; font-size: 22px; } .pp-kpis span { font-size: 12.5px; color: var(--muted); }
.pp-h { font-size: 16px; margin: 0 0 8px; }
.pp-list { display: flex; flex-direction: column; } .pp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); } .pp-row:first-child { border-top: 0; }
.pp-name { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .pp-name span { font-size: 14px; } .pp-name small { font-size: 12px; }
.pp-qty { text-align: end; flex: none; } .pp-qty b { display: block; font-size: 19px; } .pp-qty span { font-size: 12px; color: var(--muted); } .pp-qty.zero b { color: #c0392b; }
.pp-st { flex: none; }

/* ===== vehicles ===== */
.vh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.vh-car { padding: 14px 16px; display: block; text-align: start; } .vh-car.over { box-shadow: inset 3px 0 0 #ef4444; } .vh-car.soon { box-shadow: inset 3px 0 0 #f59e0b; }
.vh-car header, .vhcard { display: flex; align-items: center; gap: 12px; }
.vh-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.vh-tx { flex: 1; min-width: 0; } .vh-tx b { display: block; } .vh-tx small { display: block; color: var(--muted); font-size: 13px; }
.vh-odo { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vh-who { font-size: 13.5px; margin: 10px 0 8px; }
.vh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vh-chip { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--chip-bg, #f0f2ee); }
.vh-chip small { font-weight: 500; opacity: .8; }
.vh-chip.s-over, .vh-rule.s-over .vh-left { background: #fde8e6; color: #b42318; } .vh-chip.s-soon, .vh-rule.s-soon .vh-left { background: #fff1d6; color: #8a5a00; } .vh-chip.s-ok { background: #e3f3ed; color: #0b5c48; }
html[data-theme="dark"] .vh-chip.s-over, html[data-theme="dark"] .vh-rule.s-over .vh-left { background: rgba(239,68,68,.18); color: #ff9c94; } html[data-theme="dark"] .vh-chip.s-soon, html[data-theme="dark"] .vh-rule.s-soon .vh-left { background: rgba(245,158,11,.18); color: #f5c56b; } html[data-theme="dark"] .vh-chip.s-ok { background: rgba(16,163,127,.18); color: #6fdcb9; }
.vhcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; margin: 14px 0; flex-wrap: wrap; }
.vh-top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .vh-top div { background: var(--chip-bg, #f0f2ee); border-radius: 12px; padding: 10px 12px; } .vh-top small { display: block; font-size: 12px; } .vh-top b { font-size: 18px; }
.vh-acts { gap: 8px; flex-wrap: wrap; }
.vh-rule { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); } .vh-rule > span:first-child { flex: 1; min-width: 0; } .vh-rule b, .vh-rule small { display: block; } .vh-rule small { font-size: 12.5px; }
.vh-left { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--chip-bg, #f0f2ee); white-space: nowrap; }
.vh-rules { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 0 0 12px; } .vh-rules legend { font-size: 13px; color: var(--muted); padding: 0 6px; }
.vh-log td, .vh-log th { white-space: nowrap; } .vh-log td:nth-child(4) { white-space: normal; min-width: 140px; }
.linkbtn.danger { color: #c0392b; }
/* ===== dashboard ===== */
.db-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.db-tile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; } .db-tile span { display: block; font-size: 13px; color: var(--muted); } .db-tile b { display: block; font-size: 28px; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .db-tile small { font-size: 12.5px; color: var(--muted); }
.db-tile.t-green b { color: #0b8a4e; } .db-tile.t-red b { color: #d92d20; } .db-tile.t-blue b { color: #2563eb; } .db-tile.t-teal b { color: var(--brand); }
html[data-theme="dark"] .db-tile.t-green b { color: #3ccf8e; } html[data-theme="dark"] .db-tile.t-red b { color: #ff6b61; } html[data-theme="dark"] .db-tile.t-blue b { color: #6b9bff; }
.db-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; } .db-wide { grid-column: 1 / -1; } .db-card { padding: 16px 18px; } .db-card h3 { margin: 0 0 12px; font-size: 15px; }
@media (max-width: 860px) { .db-grid { grid-template-columns: 1fr; } }
.db-bars { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 18px; }
.db-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; position: relative; }
.db-col i { display: block; width: 100%; max-width: 30px; } .db-col i.d { background: var(--brand); border-radius: 4px 4px 0 0; min-height: 0; } .db-col i.f { background: #ef4444; border-radius: 4px 4px 0 0; } .db-col i.f + i.d { border-radius: 0; }
.db-col small { font-size: 11px; color: var(--muted); margin-top: 4px; } .db-n { font-size: 11px; font-weight: 600; margin-bottom: 2px; }
.db-legend { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; display: flex; gap: 6px; align-items: center; } .db-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-inline-start: 8px; } .db-legend i.d { background: var(--brand); } .db-legend i.f { background: #ef4444; }
.db-top { display: grid; grid-template-columns: minmax(0, 1fr) 90px 28px; gap: 10px; align-items: center; padding: 5px 0; font-size: 14px; } .db-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db-top i { height: 8px; border-radius: 999px; background: var(--brand); display: block; } .db-top b { text-align: end; font-variant-numeric: tabular-nums; }

/* ---------- Phase 6: two-step login, access, auto logout ---------- */
.tfa { display: grid; gap: 12px; } .tfa p { margin: 0; }
.tf-code { font-size: 26px; letter-spacing: .28em; text-align: center; font-variant-numeric: tabular-nums; min-height: 56px; width: 100%; }
.tf-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; letter-spacing: .06em; padding: 10px 12px; border: 1px dashed var(--line, #d7e3de); border-radius: 10px; background: var(--soft, #f4f8f6); text-align: center; word-break: break-all; user-select: all; }
.tf-qr { width: 190px; max-width: 70%; margin: 0 auto; padding: 8px; background: #fff; border-radius: 12px; border: 1px solid var(--line, #d7e3de); } .tf-qr svg { display: block; width: 100%; height: auto; }
.tf-steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; }
.acform { display: grid; gap: 12px; } .acform p { margin: 0; }
.ac-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ac-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line, #d7e3de); border-radius: 10px; cursor: pointer; }
.ac-row input { width: 20px; height: 20px; flex: none; } .ac-row small { display: block; color: var(--muted); font-weight: 400; }
.ac-two { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line, #d7e3de); }
.badge.twob, .badge.rob { background: var(--soft, #eef4f1); color: var(--ink, #17201d); font-weight: 600; }
.pm-note { padding: 8px 10px; font-size: 13px; color: var(--muted); }
#idleSel { width: auto; min-width: 200px; }

/* shift ring: the time stays on one line in the middle of the circle, and the middle is solid in every theme */
.hs-ring span { white-space: nowrap; text-align: center; line-height: 1; letter-spacing: -.02em; font-size: 12px; overflow: hidden; }
@media (max-width: 640px) { .hs-ring { width: 58px; height: 58px; } .hs-ring span { width: 47px; height: 47px; font-size: 10.5px; } }
html[data-theme="dark"] .hs-ring span { background: var(--bg, #0b1022); }

/* phone sidebar: the open menu always sits above everything (the designed themes put the app in its own layer, which hid the menu under the dark backdrop) */
html.side-open #app { z-index: 60 !important; position: relative; }
html.side-open body.shelled .side { box-shadow: 0 0 0 100vmax rgba(8, 12, 11, .45); }

/* collapsed sidebar: the group names become thin divider lines (they were cut off: "OPERA…") */
@media (min-width: 1024px) {
  html.side-mini .sn-h, html[data-ui="v2"].side-mini .sn-h, html[data-ui="v1"].side-mini .sn-h { display: block !important; font-size: 0 !important; line-height: 0; padding: 0 !important; height: 1px; margin: 10px 8px; background: var(--line); overflow: hidden; }
  html.side-mini .side nav { align-items: center; }
}

/* the note preview opens in front of the order panel; in the dark themes the area around the white paper is dark too (printing is not affected) */
#toast { z-index: 70 !important; }
@media screen {
  html[data-theme="dark"] #printView { background: radial-gradient(1200px 700px at 50% 0%, rgba(255,255,255,.06), transparent 60%), #0b0f19 !important; }
  html[data-theme="dark"][data-skin="origin"] #printView { background: #05140e !important; }
  html[data-theme="dark"][data-skin="najd"] #printView { background: #0b1d18 !important; }
  html[data-theme="dark"] #printView .pv-pages > * { box-shadow: 0 18px 50px -10px rgba(0, 0, 0, .7); }
  html[data-theme="dark"] #printView .pv-tip { color: #c9cfdf; }
  html[data-skin="latte"] #printView { background: #e6dccd !important; }
}
.board.whboard { grid-template-columns: repeat(3, minmax(250px, 1fr)); }