/* AIK Order Desk — matches the approved "AIK Order Desk" design (white + violet #5B3FA0, Inter). */
:root {
  --bg: #F8F7FC; --card: #FFFFFF; --ink: #17181B; --muted: #5E6168; --line: #E9E7F0; --line2: #F0EEF5;
    /* Type scale (aik-order-desk-ui): the only text sizes in the portal. Phones override below. */
  --fs-label: 11px; --fs-cap: 12px; --fs-sec: 13px; --fs-body: 14px; --fs-head: 15px; --fs-h2: 20px; --fs-num: 26px; --fs-title: 26px;
  --violet: #5B3FA0; --violet-d: #3F2A7A; --lilac: #F6F2FD;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 13px/1.4 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--violet); }
a:hover { color: var(--violet-d); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.num { font-variant-numeric: tabular-nums; }
.r { text-align: right; }
.muted { color: var(--muted); }

.desk { display: flex; min-height: 100vh; }

/* Sidebar rail */
.rail { flex: none; width: 84px; background: #fff; border-right: 1px solid #ECEAF3; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px 18px; }
.rail-logo { width: 58px; height: auto; margin-bottom: 18px; }
.rail-item { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #4A4760; }
.rail-item[aria-disabled] { opacity: .45; cursor: default; }
.rail-item.on { background: var(--violet); color: #fff; box-shadow: 0 6px 14px rgba(91,63,160,.30); }
.rail-user { margin-top: auto; width: 40px; height: 40px; border-radius: 20px; background: #EFEAFB; color: var(--violet-d); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sec); font-weight: 700; }

/* Main */
.main { flex: 1; min-width: 0; padding: 24px 28px 40px; display: flex; flex-direction: column; gap: 20px; }
.head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.head-title { display: flex; align-items: center; gap: 14px; }
.head-logo { display: none; width: 64px; height: auto; }
.head h1 { margin: 0; font-size: var(--fs-title); font-weight: 700; letter-spacing: -.3px; }
.sub { margin: 4px 0 0; font-size: var(--fs-sec); color: var(--muted); }
.head-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.head-tools form { display: flex; gap: 8px; margin: 0; }
.store { display: flex; background: #EFEDF5; border-radius: 9px; padding: 3px; }
.store span { font-size: var(--fs-sec); padding: 8px 14px; border-radius: 7px; }
.store-on { background: #fff; font-weight: 600; }
.store-off { color: #8a8c93; }
.search { display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid #E4E1EC; border-radius: 9px; padding: 0 12px; min-height: 42px; width: 260px; max-width: 100%; }
.search input { border: 0; outline: none; font: inherit; font-size: var(--fs-body); flex: 1; min-width: 0; background: transparent; color: var(--ink); }
.month { font: inherit; font-size: var(--fs-body); min-height: 42px; padding: 0 10px; border: 1px solid #E4E1EC; border-radius: 9px; background: #fff; color: var(--ink); }
.go { border: 0; background: var(--violet); color: #fff; font: inherit; font-size: var(--fs-body); font-weight: 600; padding: 0 16px; min-height: 42px; border-radius: 9px; cursor: pointer; }
.go:hover { background: var(--violet-d); color: #fff; } /* a.go: keep the text white over a:hover (Momin 29 Oct) */

/* Queue cards */
.queues { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.queue { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; min-height: 96px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.queue:hover { border-color: #CFC6E8; color: var(--ink); }
.queue.on { border: 2px solid var(--violet); padding: 13px 15px; }
.q-label { font-size: var(--fs-cap); font-weight: 600; }
.queue[data-tone="all"] .q-label { color: var(--violet); }
.queue[data-tone="warn"] .q-label { color: #6B4200; }
.queue[data-tone="info"] .q-label { color: #134A7C; }
.queue[data-tone="transit"] .q-label { color: #2D3A8C; }
.queue[data-tone="bad"] .q-label { color: #8A2A1B; }
.q-count { font-size: var(--fs-num); font-weight: 700; font-variant-numeric: tabular-nums; }
.q-hint { font-size: var(--fs-cap); color: var(--muted); }

/* Panel + chips */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.panel-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #E4E1EC; background: #fff; color: #3A3D43; font-size: var(--fs-sec); font-weight: 500; padding: 0 12px; min-height: 34px; border-radius: 999px; text-decoration: none; }
.chip b { font-weight: 500; color: var(--muted); font-size: var(--fs-cap); }
.chip.on { border-color: #17181B; background: #17181B; color: #fff; font-weight: 600; }
.chip.on b { color: #c9c7d4; }
.showing { font-size: var(--fs-cap); color: var(--muted); }

/* Order table: every column fulfilment needs on one line; scrolls sideways; a row opens downwards. */
.statusbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line2); }
.statusbar-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-cap); font-weight: 500; color: #3A3D43; padding: 5px 10px; border-radius: 8px; text-decoration: none; border: 1px solid transparent; }
.st:hover { background: #F4F2F9; color: var(--ink); }
.st b { font-weight: 500; color: var(--muted); }
.st i { width: 7px; height: 7px; border-radius: 4px; background: #8E8AA3; }
.st[data-s="PENDING"] i { background: #D08A1E; }
.st[data-s="UNDER PROCESS"] i { background: #2F6FAE; }
.st[data-s="DISPATCHED"] i, .st[data-s="IN TRANSIT"] i, .st[data-s="OUT FOR DELIVERY"] i { background: #4E5BC4; }
.st[data-s="DELIVERED"] i { background: #2E8B57; }
.st[data-s="WAITING FOR RETURN"] i, .st[data-s="RETURNED"] i, .st[data-s="COURIER CANCELLED"] i { background: #C0392B; }
.st.on { background: var(--lilac); border-color: #CFC6E8; color: var(--violet-d); font-weight: 600; }
/* One shared set of columns for every row (subgrid), so rows never differ in width; the last
   column takes any spare width so rows always reach the right edge. */
.grid { overflow-x: auto; }
.grid-orders {
  display: grid; column-gap: 14px;
  grid-template-columns: 116px max-content 130px 116px 96px 128px max-content 84px 96px 96px 104px 96px 100px 120px minmax(150px, 1fr);
}
.grid-orders > .gh, .grid-orders > .ord, .grid-orders > .drawer { grid-column: 1 / -1; }
.grid-orders > .gh, .grid-orders > .ord { display: grid; grid-template-columns: subgrid; }
.gh-ret, .ord-ret { display: grid; gap: 0 8px; }
.gh { padding: 10px 16px; color: var(--muted); font-size: var(--fs-label); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; background: #FCFBFE; border-bottom: 1px solid var(--line2); }
.ord { border-top: 1px solid var(--line2); padding: 11px 16px; align-items: center; color: var(--ink); text-decoration: none; cursor: pointer; }
.ord:first-of-type { border-top: 0; }
.ord:hover { background: var(--lilac); color: var(--ink); }
.ord > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord b { font-weight: 600; }
.ord em { font-style: normal; font-weight: 500; }
.ord small { display: block; color: var(--muted); font-size: var(--fs-cap); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-no { position: sticky; left: 0; z-index: 1; background: inherit; margin: -11px -14px -11px -16px; padding: 11px 14px 11px 16px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; box-shadow: 1px 0 0 var(--line); }
.gh .c-no { margin-top: -10px; margin-bottom: -10px; padding-top: 10px; padding-bottom: 10px; }
.gh .c-no { background: #FCFBFE; }
.ord .c-no { background: #fff; }
.ord:hover .c-no, .ord.sel .c-no { background: var(--lilac); }
.ord .c-no b { color: var(--violet); display: inline-flex; align-items: center; gap: 4px; }
.chev { transition: transform 140ms; flex: none; }
.ord.sel .chev { transform: rotate(90deg); }
.ord.loading { opacity: .6; }
.mono-s { font-size: var(--fs-cap); color: #4A4D53; }
.ok-text { color: #1D5B33; font-weight: 500; }
small.ok { color: #1D5B33 !important; }
small.bad { color: #8A2A1B !important; }

/* Drawer under an open row: stays in view while the table scrolls sideways. */
.drawer { position: sticky; left: 0; justify-self: start; width: calc(100vw - 84px - 56px - 2px); background: var(--bg); border-top: 1px solid #CFC6E8; border-bottom: 1px solid #CFC6E8; box-shadow: inset 3px 0 0 var(--violet); padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.drawer-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.drawer-head h2 { margin: 0; font-size: var(--fs-h2); font-weight: 700; }
.drawer-head .sub { margin: 0 0 0 6px; }
.drawer-head .btn-sm { flex: none; min-height: 38px; padding: 0 16px; font-size: var(--fs-sec); }
.ord.sel { background: var(--lilac); box-shadow: inset 3px 0 0 var(--violet); }

.pill { display: inline-block; font-style: normal; font-size: var(--fs-cap); font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: #E6E9FB; color: #2D3A8C; }
.p-ok { background: #E3F1E7; color: #1D5B33; }
.p-grey { background: #F2F0F7; color: #4A4D53; }
.p-bad { background: #FBE4E0; color: #8A2A1B; }
.pill[data-s="PENDING"] { background: #FFF1D6; color: #6B4200; }
.pill[data-s="UNDER PROCESS"] { background: #E3EEF9; color: #134A7C; }
.pill[data-s="DELIVERED"] { background: #E3F1E7; color: #1D5B33; }
.pill[data-s="WAITING FOR RETURN"], .pill[data-s="RETURNED"], .pill[data-s="COURIER CANCELLED"] { background: #FBE4E0; color: #8A2A1B; }
.pill[data-s="CANCELLED"] { background: #F2F0F7; color: #4A4D53; }

.flag { color: #8A2A1B; font-size: var(--fs-cap); font-weight: 500; }
.flag b { color: var(--muted); font-weight: 500; }
.flag-info { color: var(--muted); }

/* Mini journey: order ● dispatch ● courier ● total (the sheet's three day columns) */
.mj { display: inline-flex; align-items: center; padding-top: 12px; font-variant-numeric: tabular-nums; }
.mj-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; flex: none; }
.mj-end { border-color: var(--violet); background: var(--violet); }
.mj-end-wait { border-color: #cfc8dd; background: #fff; }
.mj-leg { position: relative; width: 30px; height: 2px; background: var(--ink); margin: 0 2px; }
.mj-leg-b { background: var(--violet); }
.mj-leg b { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font-size: var(--fs-label); font-weight: 600; color: var(--ink); line-height: 1; }
.mj-leg-b b { color: var(--violet); }
.mj-wait { background: repeating-linear-gradient(90deg, #d6d0e2 0 3px, transparent 3px 6px); }
.mj-total { margin-left: 7px; font-size: var(--fs-cap); font-weight: 700; color: var(--violet); }

.pager { display: flex; justify-content: center; gap: 18px; padding: 16px; font-size: var(--fs-sec); color: var(--muted); border-top: 1px solid var(--line2); }
.empty { padding: 48px 16px; text-align: center; color: var(--muted); }

@media (max-width: 1100px) {
  .queues { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .rail { display: none; }
  .head-logo { display: block; }
  .main { padding: 16px; }
  .queues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search { width: 100%; }
}

/* Order page (OrderPaid / OrderAdvance artboards) */
.crumbs { font-size: var(--fs-sec); color: var(--muted); display: flex; gap: 6px; align-items: center; }
.crumbs a { text-decoration: none; }
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.title-row h1 { font-size: var(--fs-title); }
.p-warn { background: #FFF1D6; color: #6B4200; }
.banner { display: flex; gap: 12px; align-items: flex-start; background: #FFF6E5; border: 1px solid #F3D9A4; color: #4A3200; border-radius: 12px; padding: 14px 16px; }
.banner svg { flex: none; margin-top: 1px; }
.banner b { display: block; font-size: var(--fs-head); margin-bottom: 2px; }
.steps { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
/* Progress bar: emerald = done, violet = the step in hand, antique gold = waiting on someone, grey = later. */
.step { --st: #C9C6D3; --st-bg: #fff; --st-ink: var(--muted); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.step[data-state="done"] { --st: #2E6B52; --st-bg: #2E6B52; --st-ink: #1F4D3A; }
.step[data-state="now"] { --st: var(--violet); --st-bg: #fff; --st-ink: var(--violet-d); }
.step[data-state="wait"] { --st: #A8741A; --st-bg: #FBF1DC; --st-ink: #7A5210; }
.st-top { display: flex; align-items: center; margin-bottom: 6px; }
.st-mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-label); font-weight: 700; border: 2px solid var(--st); background: var(--st-bg); color: var(--st-ink); } /* number in the ink colour: readable (WCAG AA) */
.step[data-state="done"] .st-mark { color: #fff; }
.step[data-state="now"] .st-mark { box-shadow: 0 0 0 4px #EDE7FA; }
.step i { flex: 1; height: 2px; margin: 0 8px; border-radius: 1px; background: #ECEAF3; }
.step[data-state="done"] i { background: linear-gradient(90deg, #2E6B52, #8DBBA6); }
.step b { font-size: var(--fs-sec); font-weight: 600; color: var(--st-ink); padding-right: 8px; }
.st-sub { font-size: var(--fs-cap); color: var(--muted); padding-right: 8px; }
.step[data-state="wait"] .st-sub { color: #7A5210; font-weight: 500; }
.cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.col-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.col-side { flex: 1 1 340px; max-width: 420px; min-width: 300px; display: flex; flex-direction: column; gap: 20px; }
.box { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.box-accent { border-color: #C9BDEB; }
.box h2 { margin: 0; font-size: var(--fs-body); font-weight: 600; }
.box h3 { margin: 0 0 8px; font-size: var(--fs-cap); font-weight: 600; letter-spacing: .6px; color: var(--muted); text-transform: uppercase; }
.box-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line2); }
.box-body { padding: 14px 18px; }
.box-pad { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; }
.hint { font-size: var(--fs-cap); color: var(--muted); }
.other { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 18px 14px; border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; }
.other a { font-weight: 600; display: block; }
.other span { color: #4A4D53; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { background: #F1ECFB; color: var(--violet-d); font-size: var(--fs-cap); font-weight: 500; padding: 4px 9px; border-radius: 999px; }
.tag-ok { background: #E3F1E7; color: #1D5B33; }
.tag-bad { background: #FBE4E0; color: #8A2A1B; }
.item { display: flex; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line2); }
.item:last-child { border-bottom: 0; }
.item-type { width: 76px; height: 72px; border-radius: 8px; background: #F1ECFB; color: var(--violet); display: flex; align-items: center; justify-content: center; font-size: var(--fs-label); font-weight: 700; flex: none; text-align: center; }
.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.item-main b { font-size: var(--fs-body); }
.item-main span { color: #4A4D53; }
.item-main small { color: var(--muted); font-size: var(--fs-cap); }
.item-main small.warn { color: #8A2A1B; }
.addons { margin-top: 6px; border: 1px solid #DCD3F2; border-radius: 10px; background: #FBFAFE; overflow: hidden; max-width: 460px; }
.addons-head { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; background: #F3EFFB; border-bottom: 1px solid #E6DFF6; }
.addons-head b { font-size: var(--fs-label); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--violet-d); }
.addons-head span { font-size: var(--fs-cap); color: var(--muted); font-variant-numeric: tabular-nums; }
.addons-none { border-style: dashed; background: #fff; }
.addons-none .addons-head { background: #fff; border-bottom: 0; }
.addons-warn { border-color: #F0C2B8; }
.addon { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-top: 1px solid #EEE9F8; font-size: var(--fs-sec); }
.addon:first-of-type { border-top: 0; }
.addon span { color: #4A4D53; }
.addon b { font-weight: 600; text-align: right; }
.addon-miss { background: #FDF1EE; }
.addon-miss span, .addon-miss b { color: #8A2A1B; }
.chips-sm { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chips-sm span { font-size: var(--fs-cap); background: #F2F0F7; color: #2B2840; padding: 3px 7px; border-radius: 5px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.item-price { font-size: var(--fs-body); font-weight: 600; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pair span { color: #4A4D53; }
.kv { margin: 0; display: grid; gap: 8px; }
.kv div { display: flex; justify-content: space-between; gap: 12px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-weight: 500; }
.tl { display: flex; flex-direction: column; gap: 12px; }
.tl div { display: grid; grid-template-columns: 8px 1fr; column-gap: 12px; }
.tl i { width: 8px; height: 8px; border-radius: 4px; background: #76738A; margin-top: 5px; grid-row: span 2; }
.tl i.ok { background: #1D5B33; } .tl i.vio { background: var(--violet); } .tl i.bad { background: #8A2A1B; }
.tl small { color: var(--muted); font-size: var(--fs-cap); }
.mt { margin-top: 14px !important; }
.note { margin: 6px 0 0; }
.lines { display: flex; flex-direction: column; gap: 8px; }
.lines div { display: flex; justify-content: space-between; gap: 10px; }
.lines .total { font-weight: 700; font-size: var(--fs-head); padding-top: 10px; border-top: 1px dashed #DDD9E8; }
.recv { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-radius: 8px; padding: 10px 12px; }
.recv small { display: block; font-size: var(--fs-cap); margin-top: 2px; }
.recv-ok { background: #F3F8F4; } .recv-ok small { color: #1D5B33; }
.recv-wait { background: #FFF7E8; } .recv-wait small { color: #6B4200; }
.balance { margin: 0 18px 18px; padding: 12px 14px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.balance b { display: block; font-size: var(--fs-cap); letter-spacing: .6px; text-transform: uppercase; }
.balance small { font-size: var(--fs-cap); }
.balance > span { font-size: var(--fs-h2); font-weight: 700; white-space: nowrap; }
.balance-ok { background: #E3F1E7; color: #1D5B33; }
.balance-due { background: #FBE4E0; color: #8A2A1B; }
.adv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0; }
.adv div { border: 1px solid #E4E1EC; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.adv-on { border: 2px solid var(--violet) !important; background: var(--lilac); }
.flags-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--muted); }
.flags-list .warn { color: #8A2A1B; font-weight: 500; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; } .pair { grid-template-columns: 1fr; } }

/* Returns page (Returns artboard) */
.search-wide { width: 300px; }
.rtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rtab { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 12px; min-height: 104px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.rtab:hover { border-color: #CFC6E8; color: var(--ink); }
.rtab.on { border: 2px solid var(--violet); padding: 15px 17px; }
.rt-label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sec); font-weight: 600; color: var(--violet-d); }
.rt-count { font-size: var(--fs-num); font-weight: 700; font-variant-numeric: tabular-nums; }
.rt-hint { font-size: var(--fs-cap); color: var(--muted); }
.rdot { display: inline-block; width: 8px; height: 8px; border-radius: 4px; flex: none; margin-right: 8px; vertical-align: 1px; }
.rtab .rdot { margin-right: 0; }
.rd-red { background: #C0392B; } .rd-amber { background: #D08A1E; } .rd-green { background: #2E8B57; }
.panel-title { margin: 0; font-size: var(--fs-head); font-weight: 700; }
.gh-ret, .ord-ret { grid-template-columns: minmax(200px, 1.6fr) minmax(140px, 1fr) minmax(160px, 1fr) 160px 180px 150px; min-width: 1000px; }
.bad-text { color: #8A2A1B !important; }
.legend { display: flex; justify-content: center; gap: 18px; font-size: var(--fs-cap); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; }
@media (max-width: 720px) { .rtabs { grid-template-columns: 1fr; } .search-wide { width: 100%; } }

.btn-primary { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--violet); color: #fff; font-size: var(--fs-body); font-weight: 600; min-height: 44px; border-radius: 9px; text-decoration: none; }
.btn-primary:hover { background: var(--violet-d); color: #fff; }

/* Confirmation request (Slack-style placeholder) */
.slackreq { border-color: #E8DDF8; }
.slack-msg { display: flex; gap: 12px; padding: 14px 18px 16px; }
.slack-avatar { width: 36px; height: 36px; border-radius: 8px; background: #EFEAFB; color: var(--violet-d); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.slack-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.slack-meta { display: flex; gap: 8px; align-items: baseline; }
.slack-meta span { font-size: var(--fs-cap); color: var(--muted); }
.slack-body p { margin: 0; }
.slack-order { border-left: 3px solid var(--violet); background: #FAF8FE; padding: 8px 10px; border-radius: 0 8px 8px 0; display: flex; flex-direction: column; gap: 2px; }
.slack-order span { font-size: var(--fs-cap); color: #4A4D53; }
.slack-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.slack-actions button { font: inherit; font-size: var(--fs-sec); font-weight: 600; min-height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid #DAD6E6; background: #fff; color: #8a8c93; cursor: not-allowed; }
.slack-actions button:first-child { border-color: #CFC6E8; color: #9a8fc0; }

/* Quick tags + WhatsApp payment request (placeholders, OrderAdvance artboard) */
.qt { display: flex; flex-direction: column; gap: 12px; }
.qt-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; }
.qt-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); padding-top: 9px; }
.qt-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.qtb { font: inherit; font-size: var(--fs-sec); font-weight: 500; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid #DAD6E6; background: #fff; color: #17181B; cursor: not-allowed; }
.qtb small { color: var(--muted); font-size: var(--fs-label); margin-left: 4px; }
.qtb.on { border: 2px solid #1D5B33; background: #E3F1E7; color: #1D5B33; font-weight: 600; }
.qtb-bad { color: #8A2A1B; }
.qtb-bad.on { border-color: #8A2A1B; background: #FBE4E0; color: #8A2A1B; }
.wa-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.wa-btn { font: inherit; font-size: var(--fs-body); font-weight: 600; min-height: 44px; border: 1px dashed #B9AEDB; border-radius: 9px; background: #F1EEF8; color: #4E3D86; cursor: not-allowed; } /* not live yet: readable (WCAG 1.4.3), clearly not a working button */
.wa-sec { font: inherit; font-size: var(--fs-body); font-weight: 600; min-height: 40px; border: 1px solid #DAD6E6; border-radius: 9px; background: #fff; color: #8a8c93; cursor: not-allowed; }
@media (max-width: 900px) { .qt-row { grid-template-columns: 1fr; } .qt-label { padding-top: 0; } }
.item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.ff { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-cap); color: #6B6D74; white-space: nowrap; cursor: not-allowed; }
.ff-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 18px 14px; border-top: 1px solid var(--line2); }
.ff-bar .wa-sec { min-height: 38px; padding: 0 14px; }

/* Action placeholders (next-step button + More), shared buttons */
.acts { display: flex; align-items: center; gap: 8px; position: relative; }
.act-main { font: inherit; font-size: var(--fs-body); font-weight: 600; min-height: 40px; padding: 0 16px; border: 0; border-radius: 9px; background: #B9AEDB; color: #fff; cursor: not-allowed; }
.act-more summary { list-style: none; cursor: pointer; font-size: var(--fs-body); font-weight: 600; min-height: 40px; display: flex; align-items: center; padding: 0 14px; border: 1px solid #DAD6E6; border-radius: 9px; background: #fff; color: var(--ink); }
.act-more summary::-webkit-details-marker { display: none; }
.act-menu { position: absolute; right: 0; top: 46px; z-index: 5; width: 280px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(23,24,27,.12); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.act-menu button { font: inherit; font-size: var(--fs-sec); text-align: left; padding: 9px 10px; border: 0; border-radius: 7px; background: #fff; color: #6B6D74; cursor: not-allowed; }
.act-menu .hint { padding: 6px 10px 2px; }
.drawer-acts { display: flex; align-items: center; gap: 8px; }
.btn-ghost { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 9px; border: 1px solid #CFC6E8; color: var(--violet); font-size: var(--fs-body); font-weight: 600; text-decoration: none; background: #fff; }
.btn-sec { font: inherit; font-size: var(--fs-sec); font-weight: 600; min-height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid #DAD6E6; background: #fff; color: #6B6D74; cursor: not-allowed; display: inline-flex; align-items: center; font-style: normal; text-decoration: none; white-space: nowrap; }
a.btn-sec { color: var(--violet); border-color: #CFC6E8; cursor: pointer; align-self: flex-start; }
.go-sec { background: #B9AEDB; cursor: not-allowed; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mt8 { margin-top: 10px; }
.box-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.qt-note { margin: 0; }
.adv { display: flex; flex-direction: column; gap: 6px; }
.adv div { flex-direction: row; justify-content: space-between; align-items: center; padding: 10px 12px; }
.qt-none { padding-top: 8px; }
.qt-btns .tag { align-self: center; }
.grid-orders > .gh > :nth-child(2), .grid-orders > .ord > :nth-child(2) { padding-left: 14px; }

/* Returns list (Returns artboard): fixed proportional columns so every row lines up; one line per cell */
.rlist { display: flex; flex-direction: column; }
.rl-head, .rl-row { display: grid; gap: 0 16px; align-items: center; padding: 12px 20px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1.1fr) 140px; }
.rlist-got .rl-head, .rlist-got .rl-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr); }
.rl-head { font-size: var(--fs-label); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); background: #FCFBFE; border-bottom: 1px solid var(--line2); }
.rl-row { border-top: 1px solid var(--line2); min-height: 64px; }
.rl-row:first-of-type { border-top: 0; }
.rl-row:hover { background: #FBFAFE; }
.rl-row > span { min-width: 0; }
.rl-row > span > *, .rl-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-row small { display: block; font-size: var(--fs-cap); color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; }
.rl-row b { font-weight: 500; }
.rl-main a { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; }
.rl-over { box-shadow: inset 3px 0 0 #C0392B; }
.balance-none { background: #F2F0F7; color: #4A4D53; }

/* Tags box: compact segmented groups in two columns (Momin 27 Oct: less clutter) */
.tg { display: flex; flex-direction: column; gap: 10px; }
.tg-row { display: grid; grid-template-columns: 104px 1fr; gap: 10px; align-items: center; }
.tg-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { font: inherit; font-size: var(--fs-sec); font-weight: 500; height: 30px; padding: 0 10px; border: 1px solid #E2DEEC; border-radius: 7px; background: #fff; color: #3A3D43; cursor: not-allowed; white-space: nowrap; }
.seg button.on { border-color: #A9CDB4; background: #E3F1E7; color: #1D5B33; font-weight: 600; }
.seg button.bad { color: #8A2A1B; }
.seg button.bad.on { border-color: #E4B4AB; background: #FBE4E0; }
.tg-other { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 900px) { .tg-row { grid-template-columns: 1fr; } }
.tg-select { font: inherit; font-size: var(--fs-sec); height: 32px; padding: 0 10px; border: 1px solid #E2DEEC; border-radius: 8px; background: #fff; color: #3A3D43; max-width: 240px; align-self: flex-start; cursor: not-allowed; }
.shop-note { margin: 0; white-space: pre-wrap; background: #FFFBEF; border: 1px solid #F1E3B5; border-radius: 8px; padding: 10px 12px; color: #3A3200; }
.ph-note { margin: -6px 0 0; font-size: var(--fs-cap); color: var(--muted); }
.count { font-size: var(--fs-cap); font-weight: 600; color: var(--muted); background: #F2F0F7; border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }
.item-side small { font-size: var(--fs-cap); }
.slack-line { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.slack-line .slack-body { flex: 1; min-width: 220px; }
.slack-line .slack-body p { margin: 2px 0 0; }
.shop-note-row { display: grid; grid-template-columns: 104px 1fr; gap: 10px; align-items: start; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line2); }
.pay-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 16px; }
.flags-box { padding: 12px 16px; }
.cust { display: flex; justify-content: space-between; gap: 8px; }
.cust span { color: var(--muted); }
/* Compact top strip so Items, Payment and Request advance are the first things visible */
.drawer .steps, .drawer .banner { padding-top: 10px; padding-bottom: 10px; }
.drawer .steps { padding: 12px 16px; }
.drawer .st-sub { font-size: var(--fs-cap); }
.drawer .st-mark { width: 20px; height: 20px; font-size: var(--fs-label); }
.drawer .banner b { display: inline; font-size: var(--fs-body); margin-right: 6px; }
.drawer { gap: 12px; }
.slack-line .slack-body { display: block; }
.kv-grid { margin: 0; padding: 14px 18px 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; }
.kv-grid dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.kv-grid dd { margin: 0; font-weight: 500; }
@media (max-width: 900px) { .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.slack-done { background: #FCFCFD; }
.slack-done .slack-body p { color: var(--muted); }
.stock { font-size: var(--fs-cap); color: #4A4D53; background: #F2F0F7; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.stock-ok { background: #E6F2EC; color: #1F4D3A; }
.stock-bad { background: #FBE4E0; color: #8A2A1B; font-weight: 600; }
.stock-warn { background: #FBF1DC; color: #7A5210; }
.slips { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line2); }
.slips h3 { margin: 0; }
.slip { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #F6FAF7; border-radius: 8px; padding: 9px 12px; }
.slip small { display: block; font-size: var(--fs-cap); color: var(--muted); margin-top: 2px; }
.slip-warn { background: #FFF7E8; }
.slips .sum { display: flex; justify-content: space-between; font-weight: 600; }
.addr p { margin: 3px 0 0; line-height: 1.45; }
.ord small.bad { color: #C0392B !important; font-weight: 700; letter-spacing: .2px; }
.rlist-tag .rl-head, .rlist-tag .rl-row, .rlist-unmarked .rl-head, .rlist-unmarked .rl-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, .8fr) 140px; }
.warn-text { color: #9A5B00; font-weight: 600; }
.st[data-s="UNDELIVERED"] i { background: #C0392B; }
.pill[data-g="UNDELIVERED"] { background: #FBE4E0; color: #8A2A1B; }
.pill[data-g="OUT FOR DELIVERY"] { background: #E3EEF9; color: #134A7C; }
.pill[data-g="WAITING FOR RETURN"] { background: #FBE4E0; color: #8A2A1B; }
.grid-orders .ord > :nth-child(2) { overflow: visible; }

/* Book couriers + booking preview (v0.4.0) — follows the approved fulfilment mockup */
.bk-note { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--lilac); color: var(--violet-d); }
.bk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bk-row .pill[data-s] { margin-top: 4px; }
.p-muted { background: #F2F0F7; color: #4A4D53; }
.p-cc { background: #EEF3FF; color: #2848A8; }
.p-lama { background: var(--lilac); color: var(--violet-d); }
.bk-scroll { overflow-x: auto; }
.bk-list { min-width: 1120px; }
.bk-row { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,2.4fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.9fr) 80px; gap: 12px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--line2); }
.bk-row small { display: block; color: var(--muted); font-size: var(--fs-cap); margin-top: 2px; }
.bk-head { border-top: 0; background: #FAF9FD; font-size: var(--fs-label); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); padding-top: 10px; padding-bottom: 10px; }
.bk-no { font-weight: 600; text-decoration: none; }
.bk-desc { overflow-wrap: anywhere; }
.bk-row .pill { white-space: normal; }
.bk-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.bk-form { flex: 999 1 560px; min-width: 0; }
.bk-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bk-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 18px; }
.bk-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #FAF9FD; }
.bk-f > span { font-size: var(--fs-label); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.bk-f b { font-weight: 500; font-size: var(--fs-body); overflow-wrap: anywhere; }
.bk-f small { font-size: var(--fs-cap); color: var(--muted); }
.bk-wide { grid-column: 1 / -1; }
.bk-sum { margin: 0; padding: 8px 18px; }
.bk-sum div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.bk-sum dt { color: var(--muted); }
.bk-sum dd { margin: 0; white-space: nowrap; text-align: right; }
.bk-total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px !important; font-size: var(--fs-head); font-weight: 700; }
.bk-total dt { color: var(--ink); }
.bk-pad { margin: 0; padding: 10px 18px 14px; }
.bk-checks { margin: 0; padding: 12px 18px 4px 36px; color: #8A2A1B; }
.bk-checks li { padding: 3px 0; }
.bk-act { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.bk-act p { margin: 0; }
.bk-btn { font: inherit; font-size: var(--fs-body); font-weight: 600; min-height: 44px; border-radius: 9px; border: 0; background: var(--violet); color: #fff; opacity: .55; cursor: not-allowed; }
@media (max-width: 900px) { .bk-tiles { grid-template-columns: 1fr 1fr; } .bk-fields { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bk-fields { grid-template-columns: 1fr; } }
a.btn-sec { color: var(--violet); border-color: #CFC4EC; cursor: pointer; }
a.btn-sec:hover { background: var(--lilac); }
/* Address edit in place on the booking card (v0.5.0) */
.bk-edit { background: #fff; border-color: #CFC4EC; box-shadow: 0 0 0 3px #F3EFFC; }
.bk-edit input:not([type=hidden]) { font: inherit; font-size: var(--fs-body); min-height: 42px; padding: 0 12px; border: 1px solid #E4E1EC; border-radius: 9px; background: #fff; color: var(--ink); }
.bk-sugg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bk-sugg > span { font-size: var(--fs-cap); color: var(--muted); }
.bk-sugg .chip { cursor: pointer; font: inherit; font-size: var(--fs-sec); }
.bk-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.bk-save { font: inherit; font-size: var(--fs-body); font-weight: 600; min-height: 44px; padding: 0 20px; border-radius: 9px; border: 0; background: var(--violet); color: #fff; cursor: pointer; }
.bk-save:hover { background: var(--violet-d); }
.bk-err { margin: 0; padding: 12px 16px; border-radius: 12px; background: #FBE4E0; color: #8A2A1B; }
.bk-ok { margin: 0; padding: 12px 16px; border-radius: 12px; background: #E3F1E7; color: #1D5B33; }
.bk-f a.bk-fix { font-size: var(--fs-cap); font-weight: 600; }

/* Tags summary — "Tags D refined" (Momin 29 Oct) */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 18px; }
.tile { display: grid; grid-template-columns: 26px 1fr auto; column-gap: 10px; row-gap: 2px; align-items: start; padding: 12px 14px; border: 1px solid #ECEAF3; border-radius: 12px; background: #fff; min-width: 0; }
.tile-l { grid-column: 2; font-size: var(--fs-label); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.tile-ic { grid-column: 1; grid-row: 1 / span 3; width: 26px; height: 26px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: #F2F0F7; color: #76738A; }
.tile-v { grid-column: 2; font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
.tile-s { grid-column: 2; font-size: var(--fs-cap); color: var(--muted); overflow-wrap: anywhere; }
.tile-chg { grid-column: 3; grid-row: 1; font: inherit; font-size: var(--fs-cap); font-weight: 600; padding: 0; border: 0; background: none; color: var(--violet); cursor: not-allowed; opacity: .75; }
.tile[data-tone="ok"] .tile-ic { background: #E6F2EC; color: #2E6B52; } .tile[data-tone="ok"] .tile-v { color: #1F4D3A; }
.tile[data-tone="pay"] .tile-ic { background: #EEF3FF; color: #2848A8; } .tile[data-tone="pay"] .tile-v { color: #2848A8; }
.tile[data-tone="warn"] { border-color: #F0DDB4; } .tile[data-tone="warn"] .tile-ic { background: #FBF1DC; color: #A8741A; } .tile[data-tone="warn"] .tile-v { color: #7A5210; }
.tile[data-tone="bad"] { border-color: #E9A99D; box-shadow: 0 0 0 3px #FCEEEB; } .tile[data-tone="bad"] .tile-ic { background: #A33A3A; color: #fff; }
.tile[data-tone="bad"] .tile-v, .tile[data-tone="bad"] .tile-s, .tile[data-tone="bad"] .tile-l, .tile[data-tone="bad"] .tile-chg { color: #8A2A1B; }
.tile[data-tone="none"] .tile-v { color: var(--muted); font-weight: 500; }
.tg-cust { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 18px; padding: 11px 0; border-top: 1px solid var(--line2); }
.tg-cust > div:first-child { display: flex; flex-direction: column; gap: 1px; } .tg-cust b { font-weight: 600; } .tg-cust small { color: var(--muted); font-size: var(--fs-cap); }
.tg-cust-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cbx { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sec); min-height: 34px; padding: 0 11px; border: 1px solid #E4E1EC; border-radius: 9px; background: #fff; cursor: not-allowed; }
.cbx-bad { color: #8A2A1B; }
.tg-raw { padding: 11px 18px 13px; border-top: 1px solid var(--line2); background: #FBFAFE; border-radius: 0 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.tg-raw-h { display: flex; justify-content: space-between; align-items: center; }
.tg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.raw { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-cap); padding: 3px 8px; border-radius: 6px; background: #F6F5FA; border: 1px solid #ECEAF3; color: #3A3D43; }
.raw i { width: 7px; height: 7px; border-radius: 4px; background: #A9A6B4; flex: none; }
.raw[data-tone="ok"] i { background: #2E6B52; } .raw[data-tone="pay"] i { background: #2848A8; } .raw[data-tone="warn"] i, .raw[data-tone="ivr"] i { background: #A8741A; } .raw[data-tone="bad"] i { background: #A33A3A; }
.link-btn { font: inherit; font-size: var(--fs-cap); font-weight: 600; border: 0; background: none; padding: 0; color: var(--violet); cursor: not-allowed; opacity: .75; }
@media (max-width: 700px) { .tiles { grid-template-columns: 1fr; } }

/* Notes: order note (payment lines removed) + add note */
.cust-note { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid #F0DDB4; background: #FFFBF3; border-radius: 10px; }
.cust-note p { margin: 0; white-space: pre-wrap; }
.note-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line2); }
.note-in { flex: 1 1 220px; } .note-in input { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-body); height: 36px; padding: 0 12px; border: 1px solid #E4E1EC; border-radius: 9px; background: #fff; cursor: not-allowed; }

/* Payment button row + flags */
.pay-links { flex-wrap: nowrap; gap: 6px; } .pay-links .btn-sec { flex: 1 1 auto; min-width: 0; justify-content: center; padding: 0 8px; font-size: var(--fs-sec); white-space: nowrap; }
.btn-danger { color: #8A2A1B; border-color: #EBC3BB; }
.flags-list { padding: 4px 18px 14px; }
.flags-list .watch { color: #7A5210; font-weight: 500; } .flags-list small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-cap); margin-top: 2px; }
.addr .link { font-size: var(--fs-cap); font-weight: 600; color: var(--violet); }

/* Orders list — "Orders A" + pipeline top (Momin 29 Oct) */
.pipe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.stg { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 13px 20px; border-right: 1px solid var(--line2); color: var(--ink); text-decoration: none; min-width: 0; }
.stg:first-child { border-radius: 14px 0 0 14px; } .stg:last-child { border-right: 0; border-radius: 0 14px 14px 0; }
.stg:hover { background: #FBFAFE; color: var(--ink); }
.stg.on { background: #FBFAFE; box-shadow: inset 0 -3px 0 var(--violet); }
.stg-nm { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sec); font-weight: 600; }
.stg-nm i { width: 8px; height: 8px; border-radius: 4px; background: #A9A6B4; }
.stg[data-tone="warn"] .stg-nm i { background: #A8741A; } .stg[data-tone="bad"] .stg-nm i { background: #A33A3A; }
.stg[data-tone="ok"] .stg-nm i { background: #2E6B52; } .stg[data-tone="info"] .stg-nm i { background: #2848A8; } .stg[data-tone="done"] .stg-nm i { background: #1F4D3A; }
.stg-ct { font-size: var(--fs-num); font-weight: 700; letter-spacing: -.5px; line-height: 1; font-variant-numeric: tabular-nums; }
.stg-bar { display: flex; height: 4px; border-radius: 2px; background: #F0EEF5; overflow: hidden; }
.stg-bar b { display: block; height: 100%; }
.stg-bar b[data-tone="warn"] { background: #A8741A; } .stg-bar b[data-tone="bad"] { background: #E9A99D; }
.stg-bar b[data-tone="ok"] { background: #2E6B52; } .stg-bar b[data-tone="ok2"] { background: #8DBBA6; }
.stg-bar b[data-tone="info"] { background: #2848A8; } .stg-bar b[data-tone="info2"] { background: #93A9E3; }
.stg-ft { display: flex; gap: 6px; flex-wrap: wrap; }
.stg-ft span { font-size: var(--fs-cap); font-weight: 600; padding: 2px 7px; border-radius: 6px; background: #F4F3F8; color: var(--muted); white-space: nowrap; }
.stg-ft span[data-tone="bad"] { background: #FBE4E0; color: #8A2A1B; } .stg-ft span[data-tone="warn"] { background: #FBF1DC; color: #7A5210; } .stg-ft span[data-tone="ok"] { background: #E6F2EC; color: #1F4D3A; }
.stg-arrow { position: absolute; right: -9px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #A9A6B4; font-size: var(--fs-label); z-index: 2; }
.pipe-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding: 0 4px; color: var(--muted); font-size: var(--fs-sec); }
.pipe-line b { color: var(--ink); font-weight: 600; } .pipe-line a { font-weight: 600; } .pipe-line a.bad { color: #8A2A1B; } .pipe-line .all { margin-left: auto; }
@media (max-width: 1000px) { .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stg-arrow { display: none; } .stg { border-bottom: 1px solid var(--line2); } }

.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line2); margin: 0; }
.fdd { position: relative; }
.fdd summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border-radius: 9px; border: 1px solid #E4E1EC; background: #fff; font-size: var(--fs-sec); color: #3A3D43; white-space: nowrap; cursor: pointer; }
.fdd summary::-webkit-details-marker { display: none; }
.fdd summary svg { color: #8A8C93; }
.fdd.act summary { border-color: #CFC4EC; background: #F6F2FD; color: var(--violet-d); font-weight: 600; } .fdd.act summary svg { color: var(--violet); }
.fdd[open] summary { border-color: var(--violet); }
.fmenu { position: absolute; left: 0; top: 38px; z-index: 20; width: 260px; max-height: 360px; overflow-y: auto; background: #fff; border: 1px solid #E4E1EC; border-radius: 12px; box-shadow: 0 16px 40px rgba(23,24,27,.16); padding: 6px; }
.fopt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px; font-size: var(--fs-sec); cursor: pointer; }
.fopt:hover { background: #FBFAFE; }
.fopt input { width: 16px; height: 16px; accent-color: var(--violet); margin: 0; }
.fopt small { margin-left: auto; color: #8A8C93; font-variant-numeric: tabular-nums; }
.fnone { display: block; padding: 8px; }
.fmenu-ft { position: sticky; bottom: -6px; display: flex; justify-content: flex-end; padding: 8px 6px 4px; margin-top: 4px; border-top: 1px solid var(--line2); background: #fff; }
.fmenu-ft .go { min-height: 30px; font-size: var(--fs-sec); padding: 0 14px; }
.fclear { font-size: var(--fs-sec); font-weight: 600; }
.fbar .showing { margin-left: auto; }

.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 16px; background: #F6F2FD; border-bottom: 1px solid #E8E0F8; color: var(--violet-d); }
.bulk[hidden] { display: none; }
.bulk-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.bulk .go { min-height: 32px; font-size: var(--fs-sec); } .bulk .go:disabled { opacity: .55; cursor: not-allowed; }
.bulk .btn-sec { min-height: 32px; font-size: var(--fs-sec); } .bulk #sel-clear { color: var(--violet); cursor: pointer; }

.ol { overflow-x: auto; }
.ol-h, .ol-r { display: grid; grid-template-columns: 40px minmax(0, 1fr); min-width: 1080px; }
.ol-r > .drawer { grid-column: 1 / -1; }
.ol-cols { display: grid; grid-template-columns: 96px 150px minmax(130px, 1.2fr) 100px minmax(150px, 1.3fr) 128px 124px 84px minmax(120px, 1fr) 24px; column-gap: 14px; align-items: center; }
.ol-h { background: #FCFBFE; border-bottom: 1px solid var(--line2); }
.ol-h .ol-cols { padding: 10px 16px 10px 0; color: var(--muted); font-size: var(--fs-label); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.ol-r { border-bottom: 1px solid #F3F1F7; }
.ol-r:has(.sel:checked) { background: #F8F5FE; box-shadow: inset 3px 0 0 var(--violet); }
.ol-ck { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ol-ck input { width: 16px; height: 16px; accent-color: var(--violet); margin: 0; cursor: pointer; }
.ol-r .ord { padding: 10px 16px 10px 0; min-height: 44px; color: var(--ink); text-decoration: none; border: 0; }
.ol-r .ord:hover, .ol-r .ord.sel { background: transparent; }
/* Open row: the violet bar sits on the row's left edge (tick-box column), never over the order number (Momin 29 Oct) */
.ol-r .ord.sel { box-shadow: none; }
.ol-r:has(> .ord.sel) { background: var(--lilac); box-shadow: inset 3px 0 0 var(--violet); }
.ol-r:hover { background: #FBFAFE; }
.c2 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c2 b, .c2 em, .c2 small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c2 b { font-weight: 600; font-size: var(--fs-body); } .c2 b.no { color: var(--violet); }
.c2 em { font-style: normal; font-weight: 500; }
.c2 small { font-size: var(--fs-cap); color: var(--muted); }
.c2 small[data-tone="bad"] { color: #8A2A1B; } .c2 small[data-tone="warn"] { color: #7A5210; } .c2 small[data-tone="ok"] { color: #1F4D3A; } .c2 small[data-tone="info"] { color: #134A7C; }
.c2 .pill { align-self: flex-start; }
.c2.r { align-items: flex-end; }
.cf { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sec); font-weight: 500; white-space: nowrap; }
.cf i { width: 16px; height: 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-label); font-style: normal; font-weight: 700; background: #F2F0F7; color: #5E6168; }
.cf[data-c="cs"] i { background: #2E6B52; color: #fff; } .cf[data-c="calling"] i, .cf[data-c="tocall"] i { background: #FBF1DC; color: #7A5210; }
.cf[data-c="na"] { color: var(--muted); }
.mini { display: flex; gap: 4px; }
.mini span { font-size: var(--fs-label); font-weight: 600; padding: 1px 5px; border-radius: 4px; background: #F2F0F7; color: #5E6168; }
.mini span[data-on="y"] { background: #E6F2EC; color: #2E6B52; } .mini span[data-on="w"] { background: #FBF1DC; color: #7A5210; }
.p-pay { background: #EEF3FF; color: #2848A8; }
.fdot { width: 22px; height: 22px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-label); font-weight: 700; }
.fdot[data-tone="bad"] { background: #FBE4E0; color: #A33A3A; } .fdot[data-tone="warn"] { background: #FBF1DC; color: #A8741A; }
.fdot[data-tone="vio"] { background: #F3EFFC; color: var(--violet); } .fdot[data-tone="grey"] { background: #F2F0F7; color: #76738A; }

/* Order Bookings + Dispatch tabs (v0.6.0) */
.bk-tabs { display: flex; gap: 4px; border-bottom: 1px solid #E4E1EC; margin-bottom: -4px; }
.bk-tab { padding: 10px 16px; font-weight: 600; font-size: var(--fs-body); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.bk-tab:hover { color: var(--violet-d); }
.bk-tab.on { color: var(--violet-d); border-bottom-color: var(--violet); }
.bk-tab small { font-weight: 500; color: var(--muted); margin-left: 6px; font-size: var(--fs-cap); }
.bk-tiles-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.queue[data-tone="ok"] .q-label { color: #1F4D3A; }
.q-flags { border-color: #E9A99D; background: #FFF8F6; }
.q-flags .q-count { color: #8A2A1B; }
.chip-bad { border-color: #E9A99D; color: #8A2A1B; }
.p-lilac { background: var(--lilac); color: var(--violet-d); }
.bk-all { min-width: 1240px; }
.bk-all .bk-row { grid-template-columns: 20px 110px minmax(170px, 2fr) 88px 100px 78px 120px 140px minmax(120px, 1fr) 78px 60px; gap: 10px; }
.bk-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.bk-all .drawer { width: auto; }
.panel-top .search { min-height: 36px; }
@media (max-width: 1200px) { .bk-tiles-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .bk-tiles-6 { grid-template-columns: 1fr 1fr; } }
.bk-edited { border-color: #B9A8E6; background: #F6F2FD; }
.bk-edited > b { color: var(--violet-d); font-weight: 600; }
.bk-edit textarea { font: inherit; font-size: var(--fs-body); border: 1px solid #E4E1EC; border-radius: 8px; padding: 8px 10px; resize: vertical; }
.dp-alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: #FDECEC; border: 1px solid #F5C9C9; border-radius: 12px; padding: 12px 16px; color: #7A1F1F; }
.dp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.dp-older { display: inline-flex; gap: 6px; align-items: center; }
.dp-older input { font: inherit; font-size: var(--fs-sec); height: 34px; border: 1px solid #E4E1EC; border-radius: 9px; padding: 0 8px; }
.dp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dp-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dp-mark { margin: 0; }
.dp-btn { cursor: pointer; color: var(--violet); border-color: #CFC4EC; }
.dp-link { display: inline-flex; align-items: center; text-decoration: none; }
.dp-b { display: grid; grid-template-columns: 90px 120px 110px minmax(180px, 1fr) minmax(240px, 2fr); gap: 12px; align-items: start; padding: 11px 16px; border-top: 1px solid var(--line2); }
.dp-t { display: grid; grid-template-columns: minmax(120px, 1.2fr) 150px 110px 110px 90px 60px 90px; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--line2); font-variant-numeric: tabular-nums; }
.dp-b .dp-t { grid-template-columns: minmax(120px, 1.3fr) 150px 110px 50px 60px 70px; padding: 6px 0; }
.dp-t small { display: block; color: var(--muted); font-size: var(--fs-cap); }
.dp-th { font-size: var(--fs-label); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); background: #FAF9FD; }
.dp-orders summary { cursor: pointer; color: var(--violet); }
.q-warn { border-color: #E9C27A; background: #FFFBF2; }
@media (max-width: 900px) { .dp-b, .dp-t { grid-template-columns: 1fr 1fr; } }
.bk-btn-on { opacity: 1; cursor: pointer; width: 100%; }
.bk-btn-on:disabled { opacity: .55; cursor: not-allowed; }
.bk-live { margin: 0; padding: 10px 12px; border-radius: 9px; background: var(--lilac); color: var(--violet-d); }
.bk-done { background: #E3F1E7; color: #1D5B33; }
.bk-check, .bk-bookform { display: flex; flex-direction: column; gap: 8px; }
.bk-check label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-cap); color: var(--muted); }
.bk-check input { font: inherit; font-size: var(--fs-body); border: 1px solid #E4E1EC; border-radius: 8px; padding: 8px 10px; }
.bk-anyway { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.bk-flag-text { color: #8A2A1B; font-size: var(--fs-sec); font-weight: 600; display: block; width: 100%; }
/* Book courier is live (v0.7.1): the order page's main button and More item link to the booking card */
a.act-link { display: inline-flex; align-items: center; background: var(--violet); cursor: pointer; text-decoration: none; }
a.act-link:hover { background: var(--violet-d); color: #fff; }
.act-link-item { font-size: var(--fs-sec); padding: 9px 10px; border-radius: 7px; color: var(--violet); text-decoration: none; font-weight: 600; }
.act-link-item:hover { background: var(--lilac); }
.dp-undo { display: inline; margin-left: 6px; }
.dp-undo-btn { font: inherit; font-size: var(--fs-sec); border: 0; background: none; color: var(--violet); text-decoration: underline; cursor: pointer; padding: 0; }
.dp-alerts { background: #FDECEC; border: 1px solid #F5C9C9; border-radius: 12px; color: #7A1F1F; overflow: hidden; }
.dp-alerts summary { cursor: pointer; padding: 12px 16px; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.dp-alerts summary::-webkit-details-marker { display: none; }
.dp-alerts-open { margin-left: auto; color: var(--violet); font-weight: 600; }
.dp-alerts[open] .dp-alerts-open { visibility: hidden; }
.dp-alerts .dp-t { background: #fff; grid-template-columns: 120px 170px 120px 1fr; }
.dp-alert-row .dp-btn { justify-self: start; }
.bk-next { display: flex; justify-content: center; align-items: center; text-decoration: none; }
.bk-cancel summary { cursor: pointer; color: var(--violet); font-size: var(--fs-sec); } .bk-cancel form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* Dispatch · Lama pickup: Sheet ID + count typed in after the rider collects (board 1g) */
.dp-lp { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; padding: 14px 18px; background: #FCFBFE; border-top: 1px solid #F0EEF5; }
.dp-lp-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.dp-lp-help { flex-basis: 100%; }
.dp-in { height: 36px; border: 1px solid #DAD6E6; border-radius: 9px; padding: 0 12px; font: inherit; font-size: var(--fs-sec); width: 230px; }
.dp-in-n { width: 70px; }
@media (max-width: 700px) { .dp-lp { grid-template-columns: 1fr; } .dp-in { width: 100%; } }

/* Customer type badge + history (board 7, Momin 29 Oct) */
.ct { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; }
.ct-pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: var(--fs-sec); font-weight: 600; padding: 4px 12px 4px 5px; border-radius: 999px; }
.ct-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.ct-ic svg { width: 13px; height: 13px; }
.ct-new { background: #E8EEFB; color: #2848A8; } .ct-regular { background: #EEEBF7; color: #3F2A7A; }
.ct-top { background: #FBF1DC; color: #7A5210; } .ct-risky { background: #FDECEC; color: #7A1F1F; } .ct-inactive { background: #F1F0F4; color: #5E6168; }
.ct-line { margin: 0; font-size: var(--fs-body); color: #3A3D43; line-height: 1.45; }
.ct-all { white-space: nowrap; }
.ct-drawer { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(23, 24, 27, .35); }
.ct-drawer:target { display: block; }
.ct-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(760px, 100%); background: #fff; overflow-y: auto; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: -10px 0 30px rgba(23, 24, 27, .12); }
.ct-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .ct-head h3 { margin: 2px 0 0; font-size: var(--fs-head); }
.ct-sum { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: #3A3D43; }
.ct-row { display: grid; grid-template-columns: 26px 92px 100px 1fr 150px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #F3F1F7; font-size: var(--fs-body); }
.ct-th { font-size: var(--fs-label); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #5E6168; }
.ct-me { background: #FAF9FD; }
.ct-items { color: #3A3D43; } .ct-row .ct-ok { color: #1D5B33; } .ct-row .ct-bad { color: #8A2A1B; } .ct-row .ct-open { color: #2848A8; }
@media (max-width: 700px) { .ct-row { grid-template-columns: 22px 1fr 1fr; } .ct-row .ct-items, .ct-th span:nth-child(4) { display: none; } }

/* ── Phones (board 9, Momin 29 Oct) ───────────────────────────────────────────
   Every page, every phone (320 px up), portrait and landscape: bottom tab bar (left rail in
   landscape), tabs with numbers instead of count boxes, lists as cards, main button above the menu,
   44 px touch targets, no sideways scrolling. Desktop is unchanged. */
.tabbar, .fbtn { display: none; }
.more-list { display: flex; flex-direction: column; }
.more-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm go" "nt go"; gap: 2px 12px; align-items: center; padding: 13px 18px; min-height: 56px; border-top: 1px solid var(--line2); color: var(--ink); text-decoration: none; }
.more-it:first-child { border-top: 0; }
.more-it b { grid-area: nm; font-size: var(--fs-head); font-weight: 600; } .more-it span { grid-area: nt; font-size: var(--fs-sec); } .more-it i { grid-area: go; font-style: normal; font-size: var(--fs-h2); color: var(--violet); }
.more-off b { color: #8A8C93; }

@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  :root { --fs-body: 15px; --fs-head: 17px; --fs-num: 22px; --fs-title: 22px; }
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
  .rail { display: none; }
  .head-logo { display: block; width: 46px; }
  .main { padding: 14px 16px calc(88px + env(safe-area-inset-bottom)); gap: 14px; }
  .head { gap: 12px; }
  .head h1 { font-size: var(--fs-title); }
  .head-tools, .head-tools form:first-child { width: 100%; }
  .head-tools form:first-child .search, .search, .search-wide { width: 100%; }
  .search input, .month, .dp-in, .bk-check input, .bk-edit textarea { font-size: 16px; } /* 16 px: iPhone doesn't zoom into the field */
  .go, .btn-sec, .chip, .act-more summary, .act-main { min-height: 44px; }
  .panel { overflow: clip; }

  /* Everything tappable is at least 44 px tall (WCAG 2.5.5 / Apple HIG) */
  .tel, .bk-f a.bk-fix, .link-btn, .tile-chg, .act-link-item, .fclear, .pager a, .dp-undo-btn, .ct-all, .dp-orders summary, .dp-alerts summary { display: inline-flex; align-items: center; min-height: 44px; }
  .act-menu button { min-height: 44px; }
  .fdd summary { height: 44px; }
  .bk-ck { display: flex; align-items: flex-start; justify-content: center; min-width: 44px; min-height: 44px; margin: -10px 0 0 -12px; padding-top: 10px; cursor: pointer; }
  input[type="checkbox"] { width: 22px; height: 22px; }

  .crumbs a, .pipe-line a, .head .sub a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs { margin: -12px 0 -10px; }
  .search, .panel-top .search { min-height: 44px; }
  .main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .main select, .main textarea, .main button { min-height: 44px; }
  .link, .bk-all .bk-no { display: inline-flex; align-items: center; min-height: 44px; }
  .bk-all .bk-no { margin: -12px 0 -10px; }
  .pay-links { flex-wrap: wrap; } .pay-links .btn-sec { flex: 1 1 calc(50% - 6px); }

  /* Weight carries hierarchy (probe: 52–60% of text was semibold): only the order no, titles, totals and the
     selected tab stay bold; names, items, labels and pills drop a step */
  .c2 b { font-weight: 500; } .c2 b.no, .c2 b.num { font-weight: 600; }
  .c2 em, .cf { font-weight: 400; }
  .pill, .mini span { font-weight: 500; }
  .stg-nm, .bk-tiles-6 .q-label, .rt-label { font-weight: 500 !important; }
  .stg.on .stg-nm, .bk-tiles-6 .queue.on .q-label, .rtab.on .rt-label { font-weight: 600 !important; }
  .bk-row b { font-weight: 500; } .bk-all .bk-row > :nth-child(7) b { font-weight: 600; }
  .q-label, .tab { font-weight: 500; } .tab.on { font-weight: 600; }

  /* Menu */
  .tabbar { display: flex; position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid #E4E1EC; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tab { flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 12px; color: #6A6780; text-decoration: none; font-size: var(--fs-label); font-weight: 600; }
  .tab:hover { color: var(--violet-d); }
  .tab.on { color: var(--violet); }
  .tab.on svg { background: var(--lilac); border-radius: 999px; padding: 2px 12px; width: 48px; box-sizing: content-box; height: 22px; margin: -2px 0; }
  .bk-tabs { display: none; } /* Order Bookings / Dispatch are both in the tab bar */

  /* Tabs with numbers instead of count boxes (orders stages, booking sections, returns lists) */
  .pipe, .bk-tiles-6, .rtabs { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid #E4E1EC; margin: 0 -16px; padding: 0 10px; }
  .pipe::-webkit-scrollbar, .bk-tiles-6::-webkit-scrollbar, .rtabs::-webkit-scrollbar { display: none; }
  .pipe .stg, .bk-tiles-6 .queue, .rtabs .rtab { flex: none; flex-direction: row; align-items: center; gap: 7px; min-height: 46px; padding: 0 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted); }
  .pipe .stg.on, .bk-tiles-6 .queue.on, .rtabs .rtab.on { border: 0; padding: 0 10px; background: transparent; box-shadow: inset 0 -2px 0 var(--violet); color: var(--violet-d); }
  .stg-bar, .stg-ft, .stg-arrow, .bk-tiles-6 .q-hint, .rt-hint { display: none; }
  .stg-nm, .bk-tiles-6 .q-label, .rt-label { font-size: var(--fs-body); font-weight: 600; white-space: nowrap; color: inherit !important; }
  .stg-ct, .bk-tiles-6 .q-count, .rt-count { font-size: var(--fs-cap); font-weight: 700; line-height: 1; letter-spacing: 0; padding: 4px 7px; border-radius: 999px; background: #EFEDF5; color: #3A3D43; }
  .stg.on .stg-ct, .bk-tiles-6 .queue.on .q-count, .rtab.on .rt-count { background: var(--violet); color: #fff; }
  .q-flags .q-count { background: #FBE4E0; color: #8A2A1B; }
  .pipe-line { font-size: var(--fs-sec); padding: 0; }
  .pipe-line .all { margin-left: 0; }
  .bk-tiles:not(.bk-tiles-6) { grid-template-columns: 1fr 1fr; gap: 8px; } /* Dispatch: numbers to read, not tabs */
  .bk-tiles:not(.bk-tiles-6) .queue { min-height: 0; padding: 10px 12px; }
  .bk-tiles:not(.bk-tiles-6) .q-count { font-size: var(--fs-h2); }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }

  /* Filters behind one button; each filter opens as a sheet above the menu */
  .fbar { padding: 10px 12px; }
  .fbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 9px; border: 1px solid #DAD6E6; background: #fff; font: inherit; font-size: var(--fs-body); font-weight: 600; color: var(--violet-d); cursor: pointer; }
  .fbar .fdd, .fbar .fclear { display: none; }
  .fbar.open .fdd, .fbar.open .fclear { display: block; }
  .fbar.open .fbtn { background: var(--lilac); border-color: var(--violet); }
  .fdd[open] .fmenu { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; max-height: 60vh; z-index: 80; }
  .fopt { min-height: 44px; }

  /* Orders list → cards */
  .ol { overflow: visible; }
  .ol-h, .ol-ck { display: none; }
  .ol-r { display: block; min-width: 0; }
  .ol-r .ord.ol-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no fd" "st st" "cu ci" "it it" "cf pay" "cr tot"; gap: 6px 10px; padding: 12px 16px; }
  .ol-cols > :nth-child(1) { grid-area: no; } .ol-cols > :nth-child(2) { grid-area: st; }
  .ol-cols > :nth-child(3) { grid-area: cu; } .ol-cols > :nth-child(4) { grid-area: ci; align-items: flex-end; align-self: start; }
  .ol-cols > :nth-child(5) { grid-area: it; } .ol-cols > :nth-child(6) { grid-area: cf; }
  .ol-cols > :nth-child(7) { grid-area: pay; align-items: flex-end; } .ol-cols > :nth-child(8) { grid-area: tot; }
  .ol-cols > :nth-child(9) { grid-area: cr; } .ol-cols > :nth-child(10) { grid-area: fd; align-self: start; }
  .ol-r .ord .c2 { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  .ol-r .ord .c2:nth-child(2) { align-items: center; }
  .ol-r .ord .c2:nth-child(7) { justify-content: flex-end; align-items: center; }
  .ol-r .ord .c2.r { justify-content: flex-end; }

  /* Order Bookings list → cards */
  .bk-scroll { overflow: visible; }
  .bk-list, .bk-all { min-width: 0; }
  .bk-row.bk-head { display: none; }
  .bk-all .bk-row { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "ck no st" "ck de de" "ck ci co" "ck pc cod" "ck fl fl" "ck ki op"; gap: 6px 10px; padding: 12px 14px; align-items: start; }
  .bk-all .bk-row > :nth-child(1) { grid-area: ck; }
  .bk-all .bk-row > :nth-child(2) { grid-area: no; } .bk-all .bk-row > :nth-child(3) { grid-area: de; }
  .bk-all .bk-row > :nth-child(4) { grid-area: ci; } .bk-all .bk-row > :nth-child(5) { grid-area: co; justify-self: end; }
  .bk-all .bk-row > :nth-child(6) { grid-area: pc; } .bk-all .bk-row > :nth-child(7) { grid-area: cod; text-align: right; }
  .bk-all .bk-row > :nth-child(8) { grid-area: st; text-align: right; } .bk-all .bk-row > :nth-child(9) { grid-area: fl; }
  .bk-all .bk-row > :nth-child(10) { grid-area: ki; align-self: center; } .bk-all .bk-row > :nth-child(11) { grid-area: op; }
  .bk-all .bk-row .bk-no { font-size: var(--fs-head); }

  /* Selection bar sits above the menu */
  .bulk:not([hidden]) { position: fixed; z-index: 65; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); border-top: 1px solid #E0D6F5; box-shadow: 0 -6px 18px rgba(23, 24, 27, .08); }
  .bulk-btns { margin-left: 0; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .bulk .go, .bulk .btn-sec { min-height: 40px; flex: none; }

  /* Order page: one column, the main button sticks above the menu */
  .crumbs { font-size: var(--fs-sec); }
  .title-row { flex-wrap: wrap; }
  .cols { gap: 14px; }
  .col-main, .col-side { flex: 1 1 100%; min-width: 0; max-width: none; }
  .head > .acts { position: fixed; z-index: 60; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); padding: 10px 16px; background: #fff; border-top: 1px solid #E4E1EC; }
  .head > .acts .act-main { flex: 1; justify-content: center; }
  .head > .acts .act-menu { top: auto; bottom: 52px; right: 0; width: min(300px, calc(100vw - 32px)); }
  .head > .acts ~ * { margin-bottom: 0; }
  .main:has(.head > .acts) { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-grid { grid-template-columns: 1fr 1fr; }
  .item { flex-wrap: wrap; padding: 12px 14px; gap: 10px 12px; }
  .item-type { width: 56px; height: 56px; }
  .item-main { flex: 1 1 180px; }
  .item-side { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
  .stock { white-space: normal; }
  .ct-drawer .ct-panel { padding: 18px 16px calc(88px + env(safe-area-inset-bottom)); }

  /* Booking card: fields 1–2 columns, the Book button sticks above the menu */
  .bk-grid > * { min-width: 0; flex: 1 1 100%; max-width: 100%; }
  .bk-fields { grid-template-columns: 1fr 1fr; padding: 14px; gap: 12px; }
  .bk-bookform .bk-btn { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 5; min-height: 50px; box-shadow: 0 6px 16px rgba(91, 63, 160, .25); }

  /* Dispatch */
  .dp-th { display: none; }
  .dp-b, .dp-t, .dp-b .dp-t, .dp-alerts .dp-t { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; }
  .dp-b > :first-child, .dp-b > .dp-orders { grid-column: 1 / -1; }
  .dp-t .r { text-align: left; }
  .dp-acts { width: 100%; }
  .dp-acts > * { flex: 1 1 auto; } .dp-acts .go, .dp-acts .btn-sec { width: 100%; justify-content: center; }
  .dp-bar { flex-direction: column; align-items: stretch; }
  .dp-older input { height: 44px; }
  .dp-bar .chips { flex-wrap: wrap; overflow: visible; }

  /* Returns list → cards */
  .rl-head { display: none; }
  .rlist .rl-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 6px 12px; padding: 12px 16px; }
  .rl-row > .rl-main, .rl-row > span:last-child { grid-column: 1 / -1; }
  .rl-row > span:last-child { text-align: left; }
  .legend { flex-wrap: wrap; }
}

/* Portrait at 380 px and below: booking fields one column */
@media (max-width: 380px) {
  .bk-fields { grid-template-columns: 1fr; }
  .tab { font-size: var(--fs-label); }
}

/* Phone landscape: the menu becomes a left rail, lists go two columns, the order page splits main + side */
@media (orientation: landscape) and (max-height: 500px) {
  .tabbar { top: 0; right: auto; bottom: 0; width: calc(76px + env(safe-area-inset-left)); flex-direction: column; justify-content: center; gap: 4px; border-top: 0; border-right: 1px solid #E4E1EC; padding: 8px 6px 8px calc(6px + env(safe-area-inset-left)); }
  .tab { flex: 0 0 auto; min-height: 56px; }
  .main { margin-left: calc(76px + env(safe-area-inset-left)); padding: 12px 20px 24px; }
  .main:has(.head > .acts) { padding-bottom: 90px; }
  .pipe, .bk-tiles-6, .rtabs { margin: 0 -20px; }
  .bulk:not([hidden]), .head > .acts { left: calc(76px + env(safe-area-inset-left)); bottom: 0; }
  .fdd[open] .fmenu { left: 88px; bottom: 12px; max-height: 70vh; }
  .ol, .bk-all, .rlist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ol-r, .bk-all .bk-row, .rlist .rl-row { border-right: 1px solid var(--line2); }
  .bk-all .bk-head, .ol-r > .drawer { grid-column: 1 / -1; }
  .cols { flex-wrap: nowrap; }
  .col-main { flex: 1 1 0; }
  .col-side { flex: 0 0 38%; }
  .bk-bookform .bk-btn { bottom: 8px; }
  .bk-grid { flex-wrap: nowrap; }
  .bk-grid > :first-child { flex: 1 1 0; }
  .bk-grid > :not(:first-child) { flex: 0 0 38%; }
  .head-tools { flex-wrap: nowrap; width: 100%; }
  .head-tools form:first-child { flex: 1; width: auto; }
}

/* ── Phone redesign (boards 10d · 10j · 10k, Momin 29 Oct) ───────────────────────────────────────
   One system: Inter · type 11 12 13 15 17 28 · space 4 8 12 16 20 24 · radius 12 / 16 / 999 · ground #F6F5F8 ·
   white cards · one accent (violet) · status in soft tags · labels sentence case · nothing under the bars. */
.mlist { display: none; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  body, .main { background: #F6F5F8; }
  .head-logo { display: none; }
  .head { position: relative; }
  .head h1, .title-row h1 { font-size: 28px; font-weight: 600; letter-spacing: -.6px; line-height: 34px; }
  .head .sub { font-size: 13px; color: #6B6874; }
  .head-tools > form:last-child { position: absolute; top: 0; right: 0; }
  .head-tools > form:last-child .go { display: none; }
  .head-tools .month { border: 0; background: transparent; font-size: 13px; color: #6B6874; padding: 0 4px; }
  .search { border: 0; border-radius: 999px; min-height: 48px; padding: 0 16px; background: #fff; box-shadow: 0 1px 2px rgba(22,21,26,.05); }

  /* tabs: plain words, the open one a white pill (10d) */
  .pipe, .bk-tiles-6, .rtabs { border-bottom: 0; padding: 0 12px; gap: 4px; }
  .pipe .stg, .bk-tiles-6 .queue, .rtabs .rtab { min-height: 40px; padding: 0 14px; border-radius: 999px; color: #5E5B66; }
  .pipe .stg.on, .bk-tiles-6 .queue.on, .rtabs .rtab.on { box-shadow: 0 1px 2px rgba(22,21,26,.06); background: #fff; color: #16151A; }
  .stg-nm i, .rt-label .rdot { display: none; }
  .stg-ct, .bk-tiles-6 .q-count, .rt-count, .stg.on .stg-ct, .bk-tiles-6 .queue.on .q-count, .rtab.on .rt-count, .q-flags .q-count { background: none; padding: 0; font-size: 12px; font-weight: 500; color: #6B6874; }
  .pipe-line { display: none; }

  /* orders list → 10d rows */
  .panel[aria-label="Order list"] { background: transparent; border: 0; }
  .panel[aria-label="Order list"] .fbar { background: transparent; border: 0; padding: 8px 0; }
  .ol { display: none; }
  .mlist { display: flex; flex-direction: column; }
  .mday { margin: 16px 4px 8px; font-size: 13px; font-weight: 600; color: #3A3D43; }
  .mrow { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; margin-bottom: 8px; border-radius: 16px; background: #fff; color: #16151A; text-decoration: none; }
  .mrow:hover { color: #16151A; }
  .mr1 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .mr1 b { font-size: 15px; font-weight: 600; }
  .mr2 { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: #6B6874; }
  .mr2 i { flex: none; width: 1px; height: 12px; background: #D9D6E2; }
  .mr2 span { white-space: nowrap; }
  .mnm { overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
  .mr3 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .stag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; }
  .stag[data-tone="warn"] { background: #FBF0D5; color: #6B4A00; } .stag[data-tone="bad"] { background: #FBE3DE; color: #8A2A1B; }
  .stag[data-tone="ok"] { background: #E2F1E8; color: #1F4D3A; } .stag[data-tone="info"] { background: #E6EDFA; color: #1E4B8F; }
  .stag[data-tone="grey"] { background: #F1F0F4; color: #4A4752; }
  .panel[aria-label="Order list"] .pager { border: 0; }
}
.dkt, .otabs { display: none; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  /* order docket (10j): replaces the header, banner and steps on phones */
  main[data-otab] > .head > div:first-child, main[data-otab] .banner, main[data-otab] .steps { display: none; }
  main[data-otab] > .head { min-height: 0; }
  .dkt { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(22,21,26,.04), 0 8px 24px rgba(22,21,26,.05); }
  .dkt h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.6px; line-height: 34px; }
  .dkt-s { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
  .dkt-m { margin: 0; font-size: 13px; color: #6B6874; }
  .dkt-c { display: flex; align-items: center; gap: 8px; margin: 16px -20px 0; padding: 12px 20px; border-top: 1px solid #F0EEF4; }
  .dkt-cb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: #16151A; text-decoration: none; }
  .dkt-cb b { font-size: 17px; font-weight: 600; } .dkt-cb span { font-size: 13px; color: #6B6874; }
  .dkt-ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dkt-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid #E4E1EA; color: #16151A; }
  .dkt-f { display: grid; grid-template-columns: 1fr 1fr; margin: 0 -20px; border-top: 1px solid #F0EEF4; }
  .dkt-f a { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 20px; color: #16151A; text-decoration: none; }
  .dkt-f a:nth-child(odd) { border-right: 1px solid #F0EEF4; } .dkt-f a:nth-child(-n+2) { border-bottom: 1px solid #F0EEF4; }
  .dkt-f span { font-size: 12px; color: #6B6874; } .dkt-f b { font-size: 15px; font-weight: 600; margin-top: 2px; }
  .dkt-f small { font-size: 12px; color: #6B6874; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dkt-f small[data-tone="ok"] { color: #1F4D3A; } .dkt-f small[data-tone="warn"] { color: #7A5210; } .dkt-f small[data-tone="bad"] { color: #8A2A1B; }
  .dkt-n { display: flex; align-items: center; gap: 8px; margin: 0 -20px -20px; padding: 12px 20px; border-top: 1px solid #F0EEF4; border-radius: 0 0 20px 20px; background: #FFF4F2; color: #8A2A1B; font-size: 13px; }
  .dkt-n i { width: 8px; height: 8px; border-radius: 50%; background: #C0473A; flex: none; }
  .otabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #ECEAF0; position: sticky; top: 8px; z-index: 20; }
  .otabs button { flex: 1; min-height: 40px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: #5E5B66; cursor: pointer; }
  .otabs button[aria-pressed="true"] { background: #fff; color: #16151A; font-weight: 600; box-shadow: 0 1px 2px rgba(22,21,26,.08); }
  main[data-otab="items"] [data-tab]:not([data-tab="items"]):not(button),
  main[data-otab="payment"] [data-tab]:not([data-tab="payment"]):not(button),
  main[data-otab="customer"] [data-tab]:not([data-tab="customer"]):not(button),
  main[data-otab="activity"] [data-tab]:not([data-tab="activity"]):not(button) { display: none; }
  main[data-otab] .box { border: 0; border-radius: 16px; }
  main[data-otab] .cols { gap: 12px; }
  main[data-otab] .head > .acts { background: #F6F5F8; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) { main[data-otab] .ph-note { display: none; } .mr3:empty { display: none; } }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  /* Order Bookings (10k) */
  .panel[aria-label="Orders to book"] { background: transparent; border: 0; }
  .panel[aria-label="Orders to book"] .panel-top, .panel[aria-label="Orders to book"] .fbar { background: transparent; border: 0; padding: 8px 0; }
  .bk-scroll { display: none; }
  .bk-note { display: none; }
  .mbrow { display: flex; gap: 8px; padding: 14px 16px 14px 12px; margin-bottom: 8px; border-radius: 16px; background: #fff; border: 1px solid transparent; }
  .mbrow:has(.sel:checked) { background: #F7F4FD; border-color: #E4DBF7; }
  .mck { flex: none; display: flex; justify-content: center; width: 28px; min-height: 44px; padding-top: 1px; }
  .mck input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 50%; border: 1.5px solid #CFCBD8; background: #fff; display: grid; place-items: center; cursor: pointer; }
  .mck input:checked { background: #5B3FA0; border-color: #5B3FA0; }
  .mck input:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
  .mck input:disabled { background: #F3F1F7; border-color: #E4E1EA; cursor: not-allowed; }
  .mbm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; color: #16151A; text-decoration: none; }
  .mbm:hover { color: #16151A; }
  .stag[data-tone="cc"] { background: #E6EDFA; color: #1E4B8F; } .stag[data-tone="lama"] { background: #EFE8FA; color: #4A2E86; }
  .bulk:not([hidden]) { background: #fff; color: #16151A; padding: 12px 16px; }
  .bulk .go { min-height: 48px; border-radius: 14px; font-size: 15px; padding: 0 24px; }
}
.mds { display: none; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  /* Dispatch (10k): numbers card, then 3 steps per courier; the batch table stays on desktop */
  .main > .bk-tiles:not(.bk-tiles-6) { gap: 0; background: #fff; border-radius: 16px; overflow: hidden; }
  .main > .bk-tiles:not(.bk-tiles-6) .queue { border: 0; border-radius: 0; background: #fff; box-shadow: none; }
  .main > .bk-tiles:not(.bk-tiles-6) .queue:nth-child(odd) { border-right: 1px solid #F0EEF4; } .main > .bk-tiles:not(.bk-tiles-6) .queue:nth-child(-n+2) { border-bottom: 1px solid #F0EEF4; }
  .main > .bk-tiles:not(.bk-tiles-6) .q-label { font-size: 12px; font-weight: 400; color: #6B6874 !important; }
  .main > .bk-tiles:not(.bk-tiles-6) .q-count { font-size: 17px; font-weight: 600; }
  .main > .bk-tiles:not(.bk-tiles-6) .q-hint { font-size: 12px; }
  section.panel[aria-label^="Call Courier"], section.panel[aria-label^="Lama"] { border: 0; border-radius: 16px; }
  .mds { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 4px 16px 4px; }
  .mds li { position: relative; display: flex; gap: 12px; padding-bottom: 12px; }
  .mds li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: #ECEAF0; }
  .mdt { flex: none; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; border: 2px solid #D9D6E2; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #6B6874; background: #fff; }
  .mds li.sd .mdt { background: #E2F1E8; border-color: #BFDCCB; color: #1F4D3A; } .mds li.sn .mdt { border-color: #5B3FA0; color: #5B3FA0; }
  .mds li > div { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; } .mds b { font-size: 15px; font-weight: 500; } .mds li.sw b { color: #6B6874; } .mds small { font-size: 12px; color: #6B6874; }
  .dp-b, .bk-pad { display: none !important; }
  .panel-top { border-bottom: 0; }
  /* booking card (10k): fields as quiet rows */
  .bk-fields { grid-template-columns: 1fr; gap: 0; padding: 4px 16px; }
  .bk-f { border: 0; border-bottom: 1px solid #F0EEF4; border-radius: 0; background: transparent; padding: 12px 0; }
  .bk-f:last-child { border-bottom: 0; }
  .bk-f > span:first-child { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #6B6874; }
  .bk-grid .box { border: 0; border-radius: 16px; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) { .mr3 { align-items: center; line-height: 1; row-gap: 6px; } .mr3 .stag { line-height: 1; } }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  .pipe .stg, .bk-tiles-6 .queue, .rtabs .rtab, .otabs button { min-height: 44px; }
  .mck { width: 44px; margin: 0 -8px 0 -8px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin-left: -4px; }
  .main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .main select, .main textarea { min-height: 44px; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  .ff { min-height: 44px; display: inline-flex; align-items: center; }
  .dkt-f small, .dkt-ad { white-space: normal; overflow: visible; }
}
/* Order page tab contents on phones (Momin 29 Oct: "look at this") — the cards inside the tabs follow the docket:
   short type code in the tile, add-ons as plain lines, one price, stock as text, labels in sentence case, no
   not-live buttons, and a real main action (Call customer) instead of a dead "Confirm order". */
.it-s, .acts .act-call { display: none; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  main[data-otab] .it-l { display: none; } main[data-otab] .it-s { display: inline; }
  main[data-otab] .item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 16px; }
  main[data-otab] .item-type { width: 48px; height: 48px; border-radius: 12px; font-size: 12px; grid-row: span 2; }
  main[data-otab] .item-main { gap: 2px; }
  main[data-otab] .item-main b { font-size: 15px; font-weight: 500; }
  main[data-otab] .item-main > span { font-size: 13px; color: #6B6874; }
  main[data-otab] .item-side { grid-column: 3; grid-row: 1; flex: none; flex-direction: column; align-items: flex-end; gap: 2px; }
  main[data-otab] .item-price { font-size: 15px; font-weight: 600; }
  main[data-otab] .item-side small { font-size: 12px; }
  main[data-otab] .item-side .stock { background: none; padding: 0; font-size: 12px; text-align: right; white-space: normal; }
  main[data-otab] .stock-ok { color: #1F4D3A; } main[data-otab] .stock-bad { color: #8A2A1B; } main[data-otab] .stock-warn { color: #7A5210; }
  main[data-otab] .addons { border: 0; background: none; padding: 0; margin-top: 4px; gap: 2px; }
  main[data-otab] .addons-none { display: none; }
  main[data-otab] .addons-head { padding: 0; background: none; border: 0; font-size: 12px; color: #6B6874; }
  main[data-otab] .addons-head b { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #6B6874; }
  main[data-otab] .addon { padding: 0; border: 0; background: none; font-size: 13px; justify-content: flex-start; gap: 6px; }
  main[data-otab] .addon span { color: #6B6874; } main[data-otab] .addon b { font-size: 13px; font-weight: 500; }
  main[data-otab] .box button:disabled, main[data-otab] .ff { display: none; }
  main[data-otab] .box-head h2 { font-size: 15px; font-weight: 600; }
  main[data-otab] .kv-grid { grid-template-columns: 1fr; gap: 0; padding: 0 16px 8px; }
  main[data-otab] .kv-grid > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid #F0EEF4; }
  main[data-otab] .kv-grid > div:last-child { border-bottom: 0; }
  main[data-otab] .kv-grid dt, main[data-otab] .tg-label { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #6B6874; margin: 0; }
  main[data-otab] .kv-grid dd { font-size: 15px; text-align: right; }
  .acts .act-call { display: inline-flex; flex: 1; justify-content: center; }
  .acts:has(.act-call) .act-main:disabled { display: none; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  /* orders row (Momin 29 Oct): details left (order · name | items | time · SKU), amount + tags stacked right */
  .mrow { flex-direction: row; align-items: flex-start; gap: 12px; }
  .ml { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .ml > b { font-size: 15px; font-weight: 600; }
  .ml .mnm { max-width: 46%; }
  .msku { font-size: 12px; color: #6B6874; font-family: ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mrt { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 46%; }
  .mrt > b { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
  .mrt .stag { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 22px; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  .ml1 { display: flex; align-items: baseline; gap: 8px; } .ml1 b { font-size: 15px; font-weight: 600; } .ml1 span { font-size: 12px; color: #6B6874; }
  .ml .mnm { max-width: none; overflow: visible; }
  .ml .mr2 { flex-wrap: wrap; row-gap: 2px; }
  .msku { white-space: normal; overflow-wrap: anywhere; }

  /* Tag palette (Momin 29 Oct: "premium, not dull pastel"): near-white ground, hairline border in the tone,
     deep desaturated ink, a small dot. Every tone keeps ≥ 4.5:1 text contrast. */
  .stag { --ink: #4A4752; --dot: #9A97A3; --line: #E4E2E9; --bg: #FAFAFB;
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .1px; }
  .stag::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
  .stag[data-tone="warn"] { --ink: #7E540F; --dot: #C9922E; --line: #ECDDBC; --bg: #FDFAF2; }
  .stag[data-tone="bad"]  { --ink: #93281F; --dot: #C8483B; --line: #F0D0CA; --bg: #FDF7F6; }
  .stag[data-tone="ok"]   { --ink: #205B43; --dot: #3B8A68; --line: #CFE3D8; --bg: #F6FAF8; }
  .stag[data-tone="info"] { --ink: #2A4A80; --dot: #4C73B8; --line: #D3DDEF; --bg: #F7F9FD; }
  .stag[data-tone="cc"]   { --ink: #2A4A80; --dot: #4C73B8; --line: #D3DDEF; --bg: #F7F9FD; }
  .stag[data-tone="lama"] { --ink: #4F3694; --dot: #7D62C9; --line: #DDD3F2; --bg: #FAF8FE; }
  .stag[data-tone="grey"] { --ink: #4A4752; --dot: #9A97A3; --line: #E4E2E9; --bg: #FAFAFB; }
  .mrt .stag { display: inline-flex; line-height: 1.2; white-space: normal; height: auto; min-height: 24px; text-align: right; }
}
.mpl { display: none; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  /* Dispatch: every parcel's order no stays visible on phones (Momin 29 Oct) */
  .mpl { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0 16px 8px; }
  .mpl li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid #F0EEF4; }
  .mpl a { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: 48px; color: #16151A; text-decoration: none; }
  .mpl a b { font-size: 15px; font-weight: 600; } .mpl a span { font-size: 12px; color: #6B6874; }
  .mpl-r { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6B6874; text-align: right; }
  /* Lama pickup form: one column */
  .dp-lp { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
  .dp-lp-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .dp-lp-row .dp-in, .dp-lp-row .dp-in-n { width: 100%; }
  .dp-lp-row .go { width: 100%; min-height: 48px; }
}

/* Sign-in (board 8, Momin 30 Oct): split card on laptops, one column on phones. */
.si-devcode { font-family: ui-monospace, Menlo, monospace; font-size: 34px; font-weight: 700; letter-spacing: 6px; text-align: center; padding: 18px; border: 1px dashed #CFC6E8; border-radius: 12px; background: var(--bg); }
.si-body { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.si { width: 100%; max-width: 860px; min-height: 540px; display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 14px 34px rgba(23,24,27,.08); }
.si-side { background: #1E1B24; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 32px; }
.si-logo { height: 40px; width: auto; align-self: flex-start; filter: invert(1) brightness(2); }
.si-brand { font-size: 24px; font-weight: 700; line-height: 1.2; }
.si-tag { color: #B9B4C6; margin-top: 6px; font-size: var(--fs-body); }
.si-foot { color: #8E889C; font-size: var(--fs-cap); }
.si-form { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 40px 36px; }
.si-form h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.3px; }
.si-logo-m { display: none; height: 26px; width: auto; align-self: flex-start; }
.si-fields { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.si-l { font-size: var(--fs-cap); font-weight: 600; color: var(--muted); margin-top: 4px; }
.si-in { height: 46px; border: 1px solid #DAD6E6; border-radius: 10px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; width: 100%; }
.si-in:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.si-go { display: flex; align-items: center; justify-content: center; height: 46px; margin-top: 8px; border: 0; border-radius: 10px; background: #17181B; color: #fff; font: inherit; font-size: 15px; font-weight: 600; width: 100%; cursor: pointer; text-decoration: none; }
.si-go:hover { background: #000; color: #fff; }
.si-ghost { background: #fff; color: var(--ink); border: 1px solid #DAD6E6; }
.si-ghost:hover { background: var(--bg); color: var(--ink); }
.si-p { margin: 0; color: var(--muted); font-size: var(--fs-body); line-height: 1.5; }
.si-p b { color: var(--ink); }
.si-note { margin: 0; color: var(--muted); font-size: var(--fs-cap); }
.si-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.si-row a, .si-note a { color: var(--violet); font-weight: 600; text-decoration: none; }
.si-err { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FDF7F6; border: 1px solid #F0D0CA; color: #93281F; font-size: 13px; }
.si-warn { margin: 0; padding: 12px 14px; border-radius: 12px; background: #FDF7F6; border: 1px solid #F0D0CA; color: #93281F; font-size: var(--fs-body); }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  .si-body { place-items: start center; padding: 0; background: #fff; }
  .si { grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; min-height: 0; }
  .si-side { display: none; }
  .si-form { justify-content: flex-start; padding: 24px 20px 32px; }
  .si-logo-m { display: block; margin-bottom: 28px; }
  .si-form h1 { font-size: 24px; }
}


/* Users (board 8 · 2, CEO only) */
.btn-lite { height: 34px; padding: 0 12px; white-space: nowrap; border-radius: 9px; border: 1px solid #DAD6E6; background: #fff; font: inherit; font-size: var(--fs-sec); font-weight: 600; color: var(--violet); cursor: pointer; }
.btn-lite:hover { border-color: var(--violet); }
.us-quiet { color: var(--muted); }
.us-add { display: inline-flex; align-items: center; text-decoration: none; }
.us-notice { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; border-color: #E9C27A; background: #FFFBF2; }
.us-notice p { margin: 0; font-size: var(--fs-sec); }
.us-secret { font-family: ui-monospace, Menlo, monospace; font-size: 22px; font-weight: 700; letter-spacing: 2px; }
.us-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 18px; overflow-x: auto; }
.us-tab { padding: 12px 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; white-space: nowrap; font-size: var(--fs-body); }
.us-tab.on { color: var(--violet-d); border-color: var(--violet); }
.us-tab small { font-weight: 500; margin-left: 4px; }
.us-row { display: grid; grid-template-columns: minmax(150px, 1.3fr) minmax(150px, 1.1fr) minmax(120px, 1fr) 76px 84px 340px; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line2); font-size: var(--fs-body); }
.us-row > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.us-th { font-size: var(--fs-cap); font-weight: 600; color: var(--muted); background: #FCFBFE; }
.us-who { flex-direction: row !important; align-items: center; gap: 10px !important; }
.us-who small { display: block; font-size: var(--fs-cap); }
.us-av { flex: none; width: 34px; height: 34px; border-radius: 999px; background: #EFEAFB; color: var(--violet-d); display: grid; place-items: center; font-size: var(--fs-cap); font-weight: 700; font-style: normal; }
.us-st { font-style: normal; font-size: var(--fs-cap); font-weight: 600; padding: 3px 10px; border-radius: 999px; align-self: flex-start; }
.us-ok { background: #E6F2EC; color: #1F4D3A; }
.us-lf { background: #F1F0F4; color: var(--muted); }
.us-wr { background: #FBF1DC; color: #7A5210; }
.us-acts { flex-direction: row !important; flex-wrap: nowrap; gap: 6px !important; justify-content: flex-end; }
.us-acts form, .us-inline { margin: 0; }
.us-sel { font: inherit; font-size: var(--fs-sec); height: 34px; border: 1px solid #DAD6E6; border-radius: 9px; padding: 0 8px; background: #fff; color: var(--ink); max-width: 100%; }
.us-dot { font-style: normal; font-size: var(--fs-cap); font-weight: 600; color: #7A5210; background: #FBF1DC; border-radius: 999px; padding: 2px 8px; margin-left: 4px; }
.us-approve { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 12px; align-items: end; padding: 16px 18px; border-bottom: 1px solid var(--line); margin: 0; background: #FCFBFE; }
.us-approve label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-cap); font-weight: 600; color: var(--muted); }
.us-approve .go { min-height: 46px; }
.us-row.us-dv { grid-template-columns: minmax(180px, 1.5fr) 100px minmax(150px, 1.4fr) 76px 220px; }
.us-more { position: relative; }
.us-more summary { list-style: none; display: inline-flex; align-items: center; }
.us-more summary::-webkit-details-marker { display: none; }
.us-pop { position: absolute; right: 0; top: 40px; z-index: 5; display: flex; gap: 8px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(23,24,27,.12); width: 320px; margin: 0; }
.us-pop .si-in { height: 40px; font-size: 14px; }
.us-pop .go { min-height: 40px; }
.us-form { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.us-form h2 { margin: 0; font-size: 17px; }
.us-form p { margin: 0; font-size: var(--fs-sec); }
.us-fields { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 12px; align-items: end; margin: 0; }
.us-fields label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-cap); font-weight: 600; color: var(--muted); }
.us-fields .go { min-height: 46px; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  .us-th { display: none; }
  .us-row { grid-template-columns: 1fr auto; grid-template-areas: "who st" "role how" "acts acts"; gap: 8px 12px; }
  .us-row > span:nth-child(1) { grid-area: who; }
  .us-row > span:nth-child(2) { grid-area: role; }
  .us-row > span:nth-child(3) { grid-area: how; align-self: center; text-align: right; font-size: var(--fs-cap); color: var(--muted); }
  .us-row > span:nth-child(4) { display: none; }
  .us-row > span:nth-child(5) { grid-area: st; align-items: flex-end; }
  .us-row > span:nth-child(6) { grid-area: acts; }
  .us-acts { justify-content: flex-start; flex-wrap: wrap; }
  .us-fields, .us-approve { grid-template-columns: 1fr; }
  .us-row.us-dv { grid-template-columns: 1fr auto; grid-template-areas: "who st" "how how" "acts acts"; }
  .us-row.us-dv > span:nth-child(2) { grid-area: st; align-items: flex-end; }
  .us-row.us-dv > span:nth-child(3) { text-align: left; }
  .us-row.us-dv > span:nth-child(5) { grid-area: acts; align-items: flex-start; }
  .us-pop { position: static; width: 100%; box-shadow: none; margin-top: 8px; }
}
a.rail-user { text-decoration: none; }