/* Design tokens (ui-design §3). Shared by /admin/ and /driver/. Dark = [data-theme=dark]. */
:root {
  --primary: #1677FF; --bg: #F5F5F5; --surface: #FFFFFF; --text: #1F1F1F; --text-2: #595959;
  --border: #E5E5E5; --danger: #F5222D; --warning: #FAAD14; --success: #52C41A;
  --danger-bg: #FFF1F0; --danger-fg: #CF1322; --warning-bg: #FFFBE6;

  /* order status: main / tag bg / tag fg */
  --s-new: #FA541C; --s-new-bg: #FFF2E8; --s-new-fg: #D4380D;
  --s-assigned: #FAAD14; --s-assigned-bg: #FFFBE6; --s-assigned-fg: #AD6800;
  --s-accepted: #1677FF; --s-accepted-bg: #E6F4FF; --s-accepted-fg: #0958D9;
  --s-arrived: #13C2C2; --s-arrived-bg: #E6FFFB; --s-arrived-fg: #08979C;
  --s-onboard: #722ED1; --s-onboard-bg: #F9F0FF; --s-onboard-fg: #531DAB;
  --s-completed: #8C8C8C; --s-completed-bg: #F5F5F5; --s-completed-fg: #595959;
  --s-cancelled: #BFBFBF; --s-cancelled-bg: #FAFAFA; --s-cancelled-fg: #8C8C8C;

  /* driver dots */
  --d-idle: #52C41A; --d-busy: #FA8C16; --d-stale: #8C8C8C;
  /* map bubbles of busy drivers: the order-status hue, deep enough for white text (the --s-* mains are too light for that) */
  --m-assigned: #AD6800; --m-accepted: #0958D9; --m-arrived: #087F83; --m-onboard: #722ED1;

  --shadow: 0 -2px 12px rgba(0,0,0,.12);
  --r-tag: 4px; --r-btn: 8px; --r-card: 12px; --r-sheet: 16px;
  --font: system-ui, "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}
[data-theme=dark] {
  --primary: #3C89E8; --bg: #141414; --surface: #1F1F1F; --text: #E6E6E6; --text-2: #A6A6A6;
  --border: #303030; --danger: #E84749; --warning: #D89614; --success: #49AA19;
  --danger-bg: #2A1215; --danger-fg: #E84749; --warning-bg: #2B2111;
  --s-new: #D84A1B; --s-new-bg: #2B1611; --s-new-fg: #E87040;
  --s-assigned: #D89614; --s-assigned-bg: #2B2111; --s-assigned-fg: #E8B339;
  --s-accepted: #1668DC; --s-accepted-bg: #111A2C; --s-accepted-fg: #3C89E8;
  --s-arrived: #13A8A8; --s-arrived-bg: #112123; --s-arrived-fg: #33BCB7;
  --s-onboard: #642AB5; --s-onboard-bg: #1A1325; --s-onboard-fg: #854ECA;
  --s-completed: #5A5A5A; --s-completed-bg: #262626; --s-completed-fg: #A6A6A6;
  --s-cancelled: #434343; --s-cancelled-bg: #1F1F1F; --s-cancelled-fg: #737373;
  --d-idle: #49AA19; --d-busy: #D87A16; --d-stale: #5A5A5A;
  --m-assigned: #A86B00; --m-accepted: #1668DC; --m-arrived: #0E8585; --m-onboard: #642AB5;
  --shadow: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); line-height: 1.5; background: var(--bg); color: var(--text);
  overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.icon { width: 1.25em; height: 1.25em; vertical-align: -0.25em; flex: none; }
[hidden] { display: none !important; }

/* status tag: light bg + dark text pill; text always present (colour-blind fallback) */
.tag { display: inline-flex; align-items: center; padding: 0 .5em; border-radius: var(--r-tag); font-size: .8em; line-height: 1.6; white-space: nowrap; }
.tag.new { background: var(--s-new-bg); color: var(--s-new-fg); }
.tag.assigned { background: var(--s-assigned-bg); color: var(--s-assigned-fg); }
.tag.accepted { background: var(--s-accepted-bg); color: var(--s-accepted-fg); }
.tag.arrived { background: var(--s-arrived-bg); color: var(--s-arrived-fg); }
.tag.onboard { background: var(--s-onboard-bg); color: var(--s-onboard-fg); }
.tag.completed { background: var(--s-completed-bg); color: var(--s-completed-fg); }
.tag.cancelled { background: var(--s-cancelled-bg); color: var(--s-cancelled-fg); border: 1px solid var(--s-cancelled); }
.tag.late { background: var(--danger-bg); color: var(--danger-fg); }

/* toast (common.js) */
#toast {
  position: fixed; left: 50%; bottom: 22%; transform: translateX(-50%); z-index: 1000;
  background: rgba(0,0,0,.78); color: #fff; padding: 10px 16px; border-radius: var(--r-btn);
  width: max-content; max-width: 86vw; display: flex; gap: 12px; align-items: center; font-size: 15px;
}
#toast button { background: none; border: 0; color: #69b1ff; padding: 4px; font-weight: 600; }

/* bottom confirm sheet (common.js confirmSheet), native <dialog> */
dialog.confirm {
  margin: auto auto 0; width: 100%; max-width: 560px; border: 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: var(--surface); color: var(--text);
}
dialog.confirm::backdrop { background: rgba(0,0,0,.45); }
dialog.confirm h3 { margin: 0 0 8px; font-size: 1.15em; }
dialog.confirm p { margin: 0 0 12px; color: var(--text-2); }
dialog.confirm .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
dialog.confirm .chips button { border: 1px solid var(--border); background: var(--bg); border-radius: 999px; padding: 6px 14px; min-height: 44px; }
dialog.confirm .chips button.on { border-color: var(--primary); color: var(--primary); }
dialog.confirm input { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-btn); background: var(--bg); margin-bottom: 12px; }
dialog.confirm .row { display: flex; gap: 12px; }
dialog.confirm .row button { flex: 1; min-height: 48px; border-radius: var(--r-btn); border: 1px solid var(--border); background: var(--surface); font-size: 16px; }
dialog.confirm .row button.ok { background: var(--primary); color: #fff; border: 0; }
dialog.confirm .row button.danger { background: var(--danger); color: #fff; border: 0; }

/* map attribution must stay visible (ODbL) */
.maplibregl-ctrl-attrib { font-size: 10px; }