/* TAG Admin: a dispatcher's run sheet in TAG's white and blue. Decisions: .interface-design/system.md */

/* --- fonts (Barlow, OFL: fonts/OFL.txt) ------------------------------------ */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/Barlow-Regular.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/Barlow-Medium.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/Barlow-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/BarlowSemiCondensed-SemiBold.woff2") format("woff2"); }

/* --- tokens ------------------------------------------------------------------ */
:root {
  color-scheme: light;
  --paper: #f4f7fb; --sheet: #fff; --sheet-raised: #fff; --well: #eef2f8;
  --ink: #0f1b33; --ink-2: #3a4864; --ink-3: #56637b; --ink-4: #97a2b6;
  --rule: rgb(16 40 90 / .12); --rule-soft: rgb(16 40 90 / .07); --rule-strong: rgb(16 40 90 / .24);
  --biru: #0a56be; --biru-press: #0a3f94; --on-biru: #fff; --biru-tint: #e3eefc;
  --rugi: #a61b1b; --rugi-bg: #fbe4e1; --untung: #2d6a1f;
  --float-shadow: 0 0 0 1px var(--rule), 0 8px 24px -8px rgb(10 40 100 / .22);

  --s-inquiry: #3e4553; --s-inquiry-bg: #e7e9ee;
  --s-checking: #7a4600; --s-checking-bg: #fbe6b0;
  --s-quoted: #6a2c80; --s-quoted-bg: #f2e2f6;
  --s-booked: #0a5c57; --s-booked-bg: #d2edea;
  --s-ongoing: #3a2f9e; --s-ongoing-bg: #e9e7fb;
  --s-completed: #2e6320; --s-completed-bg: #e2efda;
  --s-cancelled: #9a1b1b; --s-cancelled-bg: #f9deda;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --t-12: .75rem; --t-14: .875rem; --t-16: 1rem; --t-20: 1.25rem; --t-25: 1.5625rem; --t-31: 1.9375rem; --t-39: 2.4375rem;
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --figures: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --bar-h: 56px; --tabbar-h: 64px;
}

/* --- base -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink);
  font: 400 var(--t-16)/1.5 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; color: var(--ink); }
h1 { font-size: var(--t-25); line-height: 1.15; letter-spacing: -.02em; }
h2 { font-size: var(--t-20); line-height: 1.25; letter-spacing: -.01em; }
h3 { font-size: var(--t-16); line-height: 1.3; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
a.link { color: var(--biru); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.link:hover { text-decoration-thickness: 2px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
code, .code { font-family: var(--mono); font-size: var(--t-12); overflow-wrap: anywhere; color: var(--ink-3); }
:focus-visible { outline: 2px solid var(--biru); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--biru-tint); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--sp-3); top: -60px; z-index: 50; padding: var(--sp-2) var(--sp-3);
  background: var(--biru); color: var(--on-biru); border-radius: var(--r-sm); font-weight: 600; }
.skip:focus { top: var(--sp-3); }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.i-sm { width: 16px; height: 16px; }
.num { font-family: var(--figures); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; letter-spacing: .01em; }
.eyebrow { font-size: var(--t-12); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.meta { font-size: var(--t-14); color: var(--ink-3); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }

/* --- shell: top bar ---------------------------------------------------------- */
.bar {
  position: sticky; top: 0; z-index: 20; height: var(--bar-h);
  display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-4);
  background: color-mix(in srgb, var(--sheet) 92%, transparent); border-bottom: 1px solid var(--rule);
  backdrop-filter: saturate(1.4) blur(10px);
}
.brand { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-weight: 600; letter-spacing: -.01em; }
.brand-logo { display: block; height: 22px; width: auto; flex: none; }
.brand-name { font-size: var(--t-16); color: var(--ink); }
.brand-unit { font-size: var(--t-12); font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.nav { display: none; }
.btn.bar-new { display: none; }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }

/* account menu: native <details>, enhanced by app.js (Escape, outside click) */
.menu { position: relative; }
.menu > summary { list-style: none; display: flex; align-items: center; gap: var(--sp-2); min-height: 44px;
  padding: 0 var(--sp-2); border-radius: var(--r-sm); cursor: pointer; color: var(--ink-2); font-weight: 500; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--well); color: var(--ink); }
.menu .who { display: none; }
@media (min-width: 900px) { .menu .who { display: inline; } }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--well); border: 1px solid var(--rule); color: var(--ink); font-size: var(--t-14); font-weight: 600; text-transform: uppercase; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; padding: var(--sp-2);
  background: var(--sheet-raised); border-radius: var(--r-md); box-shadow: var(--float-shadow);
  transform-origin: top right; animation: pop 160ms var(--ease-out); }
.menu-panel p { padding: var(--sp-2) var(--sp-3); font-size: var(--t-14); color: var(--ink-3); }
.menu-panel p strong { color: var(--ink); font-weight: 600; }
.menu-panel form { margin: 0; }
.menu-item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 44px; padding: 0 var(--sp-3);
  border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: 500 var(--t-16) var(--sans);
  cursor: pointer; text-align: left; }
.menu-item:hover { background: var(--well); }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } }

/* --- shell: bottom tab bar (phones) ---------------------------------------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 0 var(--sp-2) env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--sheet) 94%, transparent); border-top: 1px solid var(--rule);
  backdrop-filter: saturate(1.4) blur(10px);
}
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 44px; color: var(--ink-3); font-size: var(--t-12); font-weight: 600; letter-spacing: .01em;
  border-radius: var(--r-sm); transition: color 150ms var(--ease-out); }
.tab .i { width: 24px; height: 24px; }
.tab:active { transform: scale(.97); }
.tab[aria-current="page"] { color: var(--biru); }
.tab-new .tab-plus { display: grid; place-items: center; width: 48px; height: 40px; border-radius: 12px;
  background: var(--biru); color: var(--on-biru); }
.tab-new .tab-plus .i { width: 22px; height: 22px; stroke-width: 2.25; }
.tab-new { color: var(--ink-2); }
.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

@media (min-width: 900px) {
  .bar { padding: 0 var(--sp-5); gap: var(--sp-5); }
  .nav { display: flex; align-self: stretch; gap: var(--sp-1); }
  .nav a { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); color: var(--ink-2); font-weight: 500;
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 150ms var(--ease-out); }
  .nav a:hover { color: var(--ink); }
  .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--biru); }
  .nav a[aria-current="page"] .i { color: var(--biru); }
  .btn.bar-new { display: inline-flex; }
  .tabbar { display: none; }
  .has-tabbar { padding-bottom: 0; }
}

/* --- page layout ------------------------------------------------------------- */
.page { width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-7); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5); }
.page-head .eyebrow { display: block; margin-bottom: var(--sp-1); }
.page-sub { margin-top: var(--sp-1); color: var(--ink-3); font-size: var(--t-14); }
.stack > * + * { margin-top: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
@media (min-width: 900px) {
  .page { padding: var(--sp-6) var(--sp-5) var(--sp-7); }
  h1 { font-size: var(--t-31); }
}

/* --- panels ------------------------------------------------------------------ */
.panel { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-md); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) 0; }
.panel-head h2 { font-size: var(--t-16); }
.panel-head .meta { white-space: nowrap; }
.panel-body { padding: var(--sp-4); }
.panel-foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--rule-soft); }
@media (min-width: 900px) {
  .panel-head { padding: var(--sp-5) var(--sp-5) 0; }
  .panel-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
  .panel-foot { padding: var(--sp-3) var(--sp-5); }
}

/* --- buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4); border: 1px solid transparent; border-radius: var(--r-sm);
  font: 600 var(--t-16)/1 var(--sans); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 120ms var(--ease-out), color 150ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn .i { margin-left: -2px; }
.btn-primary { background: var(--biru); color: var(--on-biru); }
.btn-primary:hover { background: var(--biru-press); }
.btn-secondary { background: var(--sheet); color: var(--ink); border-color: var(--rule-strong); }
.btn-secondary:hover { background: var(--well); }
.btn-quiet { background: transparent; color: var(--ink-2); padding: 0 var(--sp-3); }
.btn-quiet:hover { background: var(--well); color: var(--ink); }
.btn-danger { background: transparent; color: var(--rugi); padding: 0 var(--sp-3); }
.btn-danger:hover { background: var(--rugi-bg); }
.btn-danger-solid { background: var(--rugi); color: var(--sheet); }
.btn-danger-solid:hover { background: color-mix(in srgb, var(--rugi) 88%, var(--ink)); }
.btn-wide { width: 100%; }
.btn-lg { min-height: 52px; font-size: var(--t-16); padding: 0 var(--sp-5); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; opacity: .85; }
.btn[aria-busy="true"] > :not(.spinner) { opacity: .7; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 700ms linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- status pill --------------------------------------------------------------- */
.status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--sp-2);
  border-radius: var(--r-sm); font-size: .8125rem; font-weight: 600; white-space: nowrap;
  color: var(--s-inquiry); background: var(--s-inquiry-bg); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-lg { height: 30px; padding: 0 var(--sp-3); font-size: var(--t-14); }
.s-checking { color: var(--s-checking); background: var(--s-checking-bg); }
.s-quoted { color: var(--s-quoted); background: var(--s-quoted-bg); }
.s-booked { color: var(--s-booked); background: var(--s-booked-bg); }
.s-ongoing { color: var(--s-ongoing); background: var(--s-ongoing-bg); }
.s-completed { color: var(--s-completed); background: var(--s-completed-bg); }
.s-cancelled { color: var(--s-cancelled); background: var(--s-cancelled-bg); }
.status.s-off { color: var(--ink-3); background: var(--well); }

/* --- plate chip (signature) ---------------------------------------------------- */
.plate { display: inline-block; padding: 0 6px; border: 1.5px solid #1c1915; border-radius: 4px;
  background: #fff; color: #1c1915; font: 600 .8125rem/20px var(--figures); letter-spacing: .06em;
  white-space: nowrap; font-variant-numeric: tabular-nums; vertical-align: 1px; }

/* --- chips (areas, car types) --------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--sp-2); border-radius: var(--r-sm);
  background: var(--well); color: var(--ink-2); font-size: var(--t-14); font-weight: 500; }

/* --- alerts and toast ------------------------------------------------------------ */
.alert { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); border: 1px solid var(--rule); background: var(--sheet); margin-bottom: var(--sp-5); }
.alert .i { margin-top: 2px; }
.alert-body { display: grid; gap: 2px; min-width: 0; }
.alert-title { font-weight: 600; }
.alert-error { background: var(--rugi-bg); border-color: transparent; color: var(--ink); }
.alert-error > .i { color: var(--rugi); }
.alert-error .meta { color: var(--ink-2); overflow-wrap: anywhere; }
.alert-error a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.toast { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5); border-radius: var(--r-md); background: var(--sheet-raised); box-shadow: var(--float-shadow); }
.toast > .i { color: var(--untung); }
.toast-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.toast-close { display: none; }
.js .toast { position: fixed; z-index: 30; left: var(--sp-3); right: var(--sp-3); margin: 0;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-3));
  animation: rise 220ms var(--ease-out); }
.js .toast-close { display: inline-flex; }
.js .toast[hidden] { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@media (min-width: 900px) {
  .js .toast { left: auto; right: var(--sp-5); bottom: var(--sp-5); width: 420px; }
}
.btn-icon { width: 44px; padding: 0; }

/* --- forms: fields --------------------------------------------------------------- */
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field-label { font-size: var(--t-14); font-weight: 500; color: var(--ink-2); }
.field-label .opt { font-weight: 400; color: var(--ink-3); }
.hint { font-size: var(--t-14); color: var(--ink-3); }
.input, .field input:not([type="checkbox"]):not([type="hidden"]), .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 10px var(--sp-3); margin: 0;
  font: 400 var(--t-16)/1.4 var(--sans); color: var(--ink);
  background: var(--well); border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  transition: border-color 150ms var(--ease-out), background-color 150ms var(--ease-out);
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 88px; resize: vertical; }
.field select { padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-4); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--biru); outline-offset: 0; border-color: transparent; background: var(--sheet); }
.field input:disabled { color: var(--ink-3); cursor: not-allowed; border-style: dashed; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); opacity: 1; }
.field input[type="datetime-local"]:not([type="hidden"]):not([type="checkbox"]), .field input[type="date"]:not([type="hidden"]):not([type="checkbox"]) { font-family: var(--figures); font-weight: 600; font-variant-numeric: tabular-nums; }
.field [aria-invalid="true"] { border-color: var(--rugi); background: var(--rugi-bg); }
.field-error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--t-14); font-weight: 500; color: var(--rugi); }
.field-error .i { margin-top: 1px; }
.preview { font-size: var(--t-14); color: var(--ink-2); min-height: 1.5em; }
.preview:empty::before { content: "\00a0"; }
.affix { position: relative; display: block; }
.affix > .affix-text { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font: 600 var(--t-16) var(--figures); pointer-events: none; }
.affix > .affix-icon { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.field .affix > input:not([type="hidden"]):not([type="checkbox"]) { padding-left: 40px; }
.field input.money:not([type="hidden"]):not([type="checkbox"]) { font-family: var(--figures); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; cursor: pointer;
  font-size: var(--t-14); font-weight: 500; color: var(--ink-2); }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--biru); cursor: pointer; }

/* --- forms: layout ----------------------------------------------------------------- */
.form-grid { display: grid; gap: var(--sp-4); }
.group { margin: 0; padding: var(--sp-4); min-width: 0; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--sheet); }
.group > legend { float: left; width: 100%; padding: 0; margin-bottom: var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-16); font-weight: 600; }
.group > legend .i { color: var(--ink-3); }
.group > legend + * { clear: both; }
.group > .hint:first-of-type { margin-bottom: var(--sp-4); }
.fields { display: grid; gap: var(--sp-4); }
.fields-2 { display: grid; gap: var(--sp-4); }
@media (min-width: 560px) { .fields-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--sp-5); }
  .form-col { display: grid; gap: var(--sp-5); }
  .group { padding: var(--sp-5); }
}
.form-col { display: grid; gap: var(--sp-4); }
.savebar { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-5) calc(-1 * var(--sp-4)) 0; padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 92%, transparent); border-top: 1px solid var(--rule); backdrop-filter: blur(10px); }
.savebar .btn-primary { flex: 1; }
.savebar .meta { display: none; }
@media (min-width: 900px) {
  .savebar { margin: var(--sp-6) 0 0; padding: var(--sp-4) 0; background: var(--paper); }
  .savebar .btn-primary { flex: none; min-width: 160px; }
  .savebar .meta { display: block; margin-left: auto; }
}

/* repeatable rows (contacts, units) */
.rows { display: grid; gap: var(--sp-3); }
.row-item { position: relative; display: grid; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--well) 55%, var(--sheet)); border: 1px solid var(--rule-soft); }
.row-item[hidden] { display: none; }
.row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 32px; }
.row-head .eyebrow { margin: 0; }
.row-remove { display: none; }
.js .row-remove { display: inline-flex; min-height: 40px; font-size: var(--t-14); }
.row-add { display: none; justify-self: start; }
.js .row-add { display: inline-flex; }
.contact-fields { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 120px; }
.contact-fields .field:last-child { grid-column: 1 / -1; }
@media (min-width: 560px) { .contact-fields { grid-template-columns: 1.3fr 130px 1.3fr; } .contact-fields .field:last-child { grid-column: auto; } }
.unit-fields { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; }
.unit-fields .wide { grid-column: 1 / -1; }
@media (min-width: 560px) { .unit-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); } .unit-fields .wide { grid-column: span 2; } }

/* --- filters ------------------------------------------------------------------------ */
.filters { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); padding: var(--sp-3); border-radius: var(--r-md);
  background: var(--sheet); border: 1px solid var(--rule); grid-template-columns: 1fr 1fr; align-items: end; }
.filters .f-search { grid-column: 1 / -1; }
.filters .f-wide { grid-column: 1 / -1; }
.filters .f-actions { grid-column: 1 / -1; display: flex; gap: var(--sp-2); align-items: center; }
.filters .f-actions .btn-primary { flex: 1; }
.filters .field-label { font-size: var(--t-12); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 900px) {
  .filters { grid-template-columns: minmax(200px, 2fr) minmax(150px, 1.2fr) minmax(150px, 1fr) minmax(150px, 1fr) auto; padding: var(--sp-4); }
  .filters.f-partners { grid-template-columns: minmax(200px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr) auto auto; }
  .filters .f-search, .filters .f-wide, .filters .f-actions { grid-column: auto; }
  .filters .f-actions .btn-primary { flex: none; }
}
.date-preview { font-size: var(--t-12); color: var(--ink-3); min-height: 1.5em; }

/* status tabs (orders) */
.tabs { display: flex; gap: var(--sp-1); margin: 0 calc(-1 * var(--sp-4)) var(--sp-4); padding: 0 var(--sp-4) var(--sp-1);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--sp-4); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-3);
  border-radius: var(--r-sm); white-space: nowrap; scroll-snap-align: start; color: var(--ink-2); font-weight: 500;
  border: 1px solid transparent; transition: background-color 150ms var(--ease-out); }
.tabs a:hover { background: var(--sheet); border-color: var(--rule); }
.tabs a[aria-current="page"] { background: var(--sheet); border-color: var(--rule-strong); color: var(--ink); font-weight: 600; }
.tabs .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.tabs .count { font-family: var(--figures); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.tabs .zero { color: var(--ink-4); }
.tabs .zero .count { color: var(--ink-4); }
@media (min-width: 900px) { .tabs { margin: 0 0 var(--sp-4); padding: 0 0 var(--sp-1); flex-wrap: wrap; } }

/* --- list: table on desktop, cards on phones ----------------------------------------- */
.list { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--sheet);
  border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.list th { text-align: left; padding: var(--sp-3) var(--sp-4);
  background: var(--sheet); border-bottom: 1px solid var(--rule); font-size: var(--t-12); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.list td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.list tbody tr:last-child td { border-bottom: 0; }
.list tbody tr { position: relative; transition: background-color 120ms var(--ease-out); }
.list tbody tr:hover { background: color-mix(in srgb, var(--well) 60%, var(--sheet)); }
.list tbody tr:focus-within { background: color-mix(in srgb, var(--well) 60%, var(--sheet)); }
.rowlink { font-weight: 600; color: var(--ink); }
.rowlink::after { content: ""; position: absolute; inset: 0; }
.rowlink:focus-visible { outline: none; }
.rowlink:focus-visible::after { outline: 2px solid var(--biru); outline-offset: -2px; border-radius: var(--r-md); }
.list .cell-sub { display: block; font-size: var(--t-14); color: var(--ink-3); margin-top: 2px; }
.list .cell-num { text-align: right; white-space: nowrap; }
.list tr.is-off .rowlink { color: var(--ink-3); }
.when-day { display: block; font-size: var(--t-14); color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.when-time { font-family: var(--figures); font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--t-16); white-space: nowrap; }
.mini-route { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.mini-route .when-day { display: inline; }
.mini-route .line { width: 14px; height: 2px; background: var(--rule-strong); border-radius: 1px; }
.mini-route .end { color: var(--ink-3); }
.margin-cell.is-loss { color: var(--rugi); }

@media (max-width: 719px) {
  .list, .list tbody { display: block; background: none; border: 0; border-radius: 0; overflow: visible; }
  .list thead { display: none; }
  .list tbody { display: grid; gap: var(--sp-2); }
  .list tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); padding: var(--sp-3) var(--sp-4);
    background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-md); }
  .list td { display: block; padding: 0; border: 0; min-width: 0; }
  .list td.c-title { grid-column: 1; grid-row: 1; }
  .list td.c-status { grid-column: 2; grid-row: 1; justify-self: end; }
  .list td.c-when { grid-column: 1; grid-row: 2; margin-top: var(--sp-2); align-self: end; }
  .list td.c-route, .list td.c-extra { grid-column: 1 / -1; font-size: var(--t-14); color: var(--ink-3); }
  .list td.c-route .cell-sub { display: inline; }
  .list td.c-route .sep { display: inline; }
  .list td.c-hide { display: none; }
  .list td.c-num { grid-column: 2; grid-row: 2; align-self: end; text-align: right; }
  .list .when-day { display: inline; }
  .list .mini-route { flex-wrap: wrap; }
}

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); }
.pager .meta { order: -1; width: 100%; }
@media (min-width: 560px) { .pager .meta { order: 0; width: auto; } }

/* --- empty states -------------------------------------------------------------------- */
.empty { display: grid; justify-items: start; gap: var(--sp-3); padding: var(--sp-6) var(--sp-5); border: 1px dashed var(--rule-strong);
  border-radius: var(--r-md); }
.empty h2 { font-size: var(--t-20); }
.empty p { color: var(--ink-3); max-width: 46ch; }
.quiet-line { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-3); font-size: var(--t-14); padding: var(--sp-2) 0; }

/* --- dashboard: attention (focal) ----------------------------------------------------- */
.attention { border-radius: var(--r-md); background: var(--sheet); border: 1px solid var(--rule); overflow: hidden; }
.attention-head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border-bottom: 1px solid var(--rule-soft); }
.attention-count { font: 600 var(--t-39)/1 var(--figures); font-variant-numeric: tabular-nums; color: var(--biru); min-width: 1ch; }
.attention.is-calm .attention-count { color: var(--untung); }
.attention-head h1 { font-size: var(--t-25); }
.attention-head p { color: var(--ink-3); font-size: var(--t-14); margin-top: 2px; }
.attention-group { padding: var(--sp-3) var(--sp-2) var(--sp-2); }
.attention-group > h2, .attention-group > .quiet-line { padding-left: var(--sp-2); padding-right: var(--sp-2); }
.attention-group + .attention-group { border-top: 1px solid var(--rule-soft); }
.attention-group > h2 { font-size: var(--t-12); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-1); }
.task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-3);
  min-height: 56px; padding: var(--sp-2); border-radius: var(--r-sm);
  transition: background-color 120ms var(--ease-out); }
.task:hover { background: var(--well); }
.task-flag { width: 4px; align-self: stretch; border-radius: 2px; background: var(--biru); }
.task-flag.f-checking { background: var(--s-checking); }
.task-flag.f-quoted { background: var(--s-quoted); }
.task-flag.f-inquiry { background: var(--s-inquiry); }
.task-main { min-width: 0; }
.task-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-sub { font-size: var(--t-14); color: var(--ink-3); }
.task-age { font: 600 var(--t-14) var(--figures); color: var(--rugi); white-space: nowrap; }
.task .i { color: var(--ink-4); }
@media (min-width: 900px) {
  .attention-head { padding: var(--sp-5); }
  .attention-group { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
}

/* --- dashboard: pipeline route strip --------------------------------------------------- */
.pipeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; padding: var(--sp-4) var(--sp-2) var(--sp-3); }
.pipeline::before { content: ""; position: absolute; left: 10%; right: 10%; top: calc(var(--sp-4) + 9px); height: 2px; background: var(--rule-strong); }
.stage { position: relative; display: grid; justify-items: center; gap: 2px; min-height: 44px; padding: 0 2px; border-radius: var(--r-sm); text-align: center; }
.stage:hover .stage-l { color: var(--ink); }
.stage-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--sheet); background: var(--s-inquiry); box-shadow: 0 0 0 1px var(--rule-strong); margin-bottom: 4px; }
.stage-n { font: 600 var(--t-25)/1.1 var(--figures); font-variant-numeric: tabular-nums; }
.stage-l { font-size: var(--t-12); font-weight: 600; color: var(--ink-3); line-height: 1.2; }
.stage.is-zero .stage-dot { background: var(--sheet); }
.stage.is-zero .stage-n { color: var(--ink-4); }
.stage.st-checking .stage-dot { background: var(--s-checking); }
.stage.st-quoted .stage-dot { background: var(--s-quoted); }
.stage.st-booked .stage-dot { background: var(--s-booked); }
.stage.st-ongoing .stage-dot { background: var(--s-ongoing); }
.pipeline-foot { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--rule-soft); font-size: var(--t-14); color: var(--ink-3); }
.pipeline-foot a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.pipeline-foot a:hover { color: var(--ink); }
.pipeline-foot b { font-family: var(--figures); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* --- dashboard: run sheet (signature) ------------------------------------------------------ */
.days { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .days { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } }
.run { position: relative; }
.run::before { content: ""; position: absolute; left: 63px; top: 18px; bottom: 18px; width: 2px; background: var(--rule); border-radius: 1px; }
.run-item { position: relative; display: grid; grid-template-columns: 48px 32px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1);
  min-height: 56px; padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; border-radius: var(--r-sm); transition: background-color 120ms var(--ease-out); }
.run-item:hover { background: var(--well); }
.run-time { font: 600 var(--t-16) var(--figures); font-variant-numeric: tabular-nums; text-align: right; padding-right: 4px; }
.run-stop { justify-self: center; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sheet); border: 2px solid var(--ink-2); color: var(--ink-2); }
.run-stop .i { width: 12px; height: 12px; stroke-width: 2.5; }
.run-item.k-return .run-stop { border-style: solid; background: var(--well); }
.run-main { min-width: 0; }
.run-title { font-weight: 600; overflow-wrap: anywhere; }
.run-sub { font-size: var(--t-14); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-kind { font-weight: 600; color: var(--ink-2); }

/* --- order detail -------------------------------------------------------------------- */
.order-head { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.order-head .cluster { gap: var(--sp-2) var(--sp-3); }
.order-head h1 { overflow-wrap: anywhere; }
.order-title-car { color: var(--ink-3); font-weight: 500; }

/* status card: track + next step */
.step-card .panel-body { display: grid; gap: var(--sp-4); }
.track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; padding-top: 4px; }
.track::before { content: ""; position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 11px; height: 2px; background: var(--rule-strong); }
.track li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.track .stop { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--sheet); border: 2px solid var(--rule-strong); }
.track .done .stop { background: var(--ink-3); border-color: var(--ink-3); }
.track .done::after { content: ""; position: absolute; top: 7px; left: 50%; width: 100%; height: 2px; background: var(--ink-3); z-index: 0; }
.track li:last-child::after { display: none; }
.track .done .stop, .track [aria-current] .stop { z-index: 1; }
.track [aria-current] .stop { width: 22px; height: 22px; margin-top: -3px; border: 0; background: var(--status-color, var(--biru));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-color, var(--biru)) 22%, transparent); }
.track .label { font-size: var(--t-12); font-weight: 500; color: var(--ink-3); line-height: 1.2; }
.track [aria-current] .label { color: var(--ink); font-weight: 600; }
.track.is-cancelled::before { background: repeating-linear-gradient(90deg, var(--rule-strong) 0 6px, transparent 6px 10px); }
@media (max-width: 559px) {
  .track .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.track-now { display: none; }
@media (max-width: 559px) { .track-now { display: block; font-size: var(--t-14); color: var(--ink-3); } .track-now b { color: var(--ink); } }
.next { display: grid; gap: var(--sp-2); }
.next .btn-primary { width: 100%; }
.next-why { font-size: var(--t-14); color: var(--ink-3); }
.more-steps { border-top: 1px solid var(--rule-soft); padding-top: var(--sp-3); }
.more-steps > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; list-style: none;
  color: var(--ink-2); font-weight: 500; font-size: var(--t-14); border-radius: var(--r-sm); }
.more-steps > summary::-webkit-details-marker { display: none; }
.more-steps > summary .i { transition: transform 150ms var(--ease-out); }
.more-steps[open] > summary .i { transform: rotate(180deg); }
.more-steps .cluster { margin-top: var(--sp-2); }
.cancel-zone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2);
  border-top: 1px solid var(--rule-soft); padding-top: var(--sp-3); font-size: var(--t-14); color: var(--ink-3); }
.final-note { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border-radius: var(--r-sm); background: var(--well); }
.final-note.is-cancelled { background: var(--s-cancelled-bg); }
.final-note.is-cancelled .i { color: var(--s-cancelled); }
.final-note .i { margin-top: 2px; color: var(--untung); }

/* trip ticket (signature) */
.ticket { display: grid; gap: 0; }
.ticket-stop { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-3); }
.ticket-rail { position: relative; display: flex; justify-content: center; }
.ticket-rail::before { content: ""; width: 14px; height: 14px; margin-top: 6px; border-radius: 50%; background: var(--sheet); border: 2.5px solid var(--ink); flex: none; z-index: 1; }
.ticket-stop.is-end .ticket-rail::before { background: var(--ink); }
.ticket-stop:first-child .ticket-rail::after { content: ""; position: absolute; top: 20px; bottom: -6px; left: 50%; width: 2px; margin-left: -1px; background: var(--ink-3); }
.ticket-what { padding-bottom: var(--sp-4); min-width: 0; }
.ticket-stop.is-end .ticket-what { padding-bottom: 0; }
.ticket-kind { font-size: var(--t-12); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ticket-time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
.ticket-time .num { font-size: var(--t-25); line-height: 1.15; }
.ticket-day { font-weight: 500; color: var(--ink-2); }
.ticket-place { display: flex; gap: 6px; align-items: flex-start; margin-top: 2px; color: var(--ink-2); overflow-wrap: anywhere; }
.ticket-place .i { margin-top: 2px; color: var(--ink-3); }

/* facts (car, partner, customer) */
.facts { display: grid; gap: 0; }
.fact { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--rule-soft); }
.fact:first-child { border-top: 0; padding-top: 0; }
.fact:last-child { padding-bottom: 0; }
.fact > .i { width: 22px; height: 22px; color: var(--ink-3); margin-top: 1px; }
.fact-label { font-size: var(--t-12); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.fact-value { font-weight: 500; overflow-wrap: anywhere; }
.fact-value.is-empty { color: var(--ink-4); font-weight: 400; }
.fact .cluster { margin-top: var(--sp-1); }
.wa { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-sm);
  background: var(--well); border: 1px solid var(--rule); color: var(--ink); font-weight: 600; font-size: var(--t-14);
  font-variant-numeric: tabular-nums; transition: background-color 120ms var(--ease-out); }
.wa:hover { background: var(--sheet); border-color: var(--rule-strong); }
.wa:active { transform: scale(.97); }
.wa .i { color: var(--s-booked); }
.kv { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); font-size: var(--t-14); }
.kv dt { color: var(--ink-3); }
.kv dd { color: var(--ink); overflow-wrap: anywhere; }

/* money ledger */
.ledger { display: grid; gap: var(--sp-2); }
.ledger-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.ledger-row .label { color: var(--ink-2); font-size: var(--t-14); }
.ledger-row .num { font-size: var(--t-16); white-space: nowrap; }
.ledger-row .minus { color: var(--ink-3); }
.ledger-row.is-missing .num { color: var(--ink-4); font-family: var(--sans); font-weight: 400; font-size: var(--t-14); }
.margin { display: grid; gap: 2px; margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--well); }
.margin-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.margin-label { font-weight: 600; }
.margin-figure { font: 600 var(--t-31)/1.1 var(--figures); font-variant-numeric: tabular-nums; color: var(--untung); white-space: nowrap; }
.margin-sub { font-size: var(--t-14); color: var(--ink-3); }
.margin.is-loss { background: var(--rugi-bg); }
.margin.is-loss .margin-figure, .margin.is-loss .margin-label { color: var(--rugi); }
.margin.is-loss .margin-label { display: inline-flex; align-items: center; gap: 6px; }
.margin.is-unknown .margin-figure { color: var(--ink-4); font-size: var(--t-20); }

/* invoices */
.paid { display: grid; gap: var(--sp-2); }
.paid-figures { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--t-14); color: var(--ink-3); }
.paid-figures b { color: var(--ink); font-family: var(--figures); font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--t-16); }
.invoice { border-top: 1px solid var(--rule-soft); padding-top: var(--sp-3); margin-top: var(--sp-3); }
.invoice h3 { font-size: var(--t-14); font-weight: 600; margin-bottom: var(--sp-2); }
.dues { display: grid; gap: 0; }
.due { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--rule-soft); font-size: var(--t-14); }
.due:first-child { border-top: 0; }
.due-kind { font-weight: 600; color: var(--ink); }
.due-date { color: var(--ink-3); }
.due-amount { text-align: right; font-family: var(--figures); font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--t-16); }
.due-left { text-align: right; color: var(--ink-3); }
.due-left.is-paid { color: var(--untung); font-weight: 600; }
.payments { margin-top: var(--sp-2); font-size: var(--t-14); color: var(--ink-3); display: grid; gap: var(--sp-1); }
.payments li { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); }
.payments b { color: var(--ink-2); font-family: var(--figures); font-weight: 600; }

/* --- version history (the same route line) -------------------------------------------- */
.history { position: relative; }
.history::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--rule); }
.history-item { position: relative; padding: 0 0 var(--sp-5) 32px; }
.history-item:last-child { padding-bottom: 0; }
.history-item::before { content: ""; position: absolute; left: 1px; top: 4px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--sheet); border: 2px solid var(--ink-3); }
.history-item.is-current::before { background: var(--biru); border-color: var(--biru); }
.history-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
.history-when strong { font-weight: 600; }
.history-who { color: var(--ink-2); font-size: var(--t-14); }
.history-id { display: block; margin-top: 2px; }
.history-note { margin-top: var(--sp-2); color: var(--ink-2); font-size: var(--t-14); }
.changes { margin-top: var(--sp-2); display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--well); font-size: var(--t-14); }
.changes li { display: grid; grid-template-columns: minmax(84px, 34%) minmax(0, 1fr); gap: var(--sp-2); }
.changes .field-name { color: var(--ink-3); font-weight: 500; }
.changes .diff { overflow-wrap: anywhere; color: var(--ink-3); }
.changes del { color: var(--ink-3); text-decoration-color: var(--rugi); text-decoration-thickness: 1.5px; }
.changes ins { color: var(--ink); font-weight: 600; text-decoration: none; }

/* --- confirm pages -------------------------------------------------------------------- */
.confirm { max-width: 520px; margin: 0 auto; }
.confirm .panel-body { display: grid; gap: var(--sp-4); }
.move { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.move .i { color: var(--ink-3); }
.confirm-actions { display: flex; flex-direction: column-reverse; gap: var(--sp-2); }
@media (min-width: 560px) { .confirm-actions { flex-direction: row; justify-content: flex-end; } }

/* --- partner list / detail ----------------------------------------------------------------- */
.contact-list { display: grid; gap: var(--sp-2); }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r-sm); background: var(--well); }
.contact-name { font-weight: 600; }
.contact-role { font-size: var(--t-14); color: var(--ink-3); }
.units { display: grid; gap: 0; }
.unit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--rule-soft); }
.unit:first-child { border-top: 0; padding-top: 0; }
.unit-name { font-weight: 600; }
.unit-meta { font-size: var(--t-14); color: var(--ink-3); }
.unit-price { text-align: right; }
.unit-price .num { font-size: var(--t-16); }
.unit-price .per { display: block; font-size: var(--t-12); color: var(--ink-3); }
.basis { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-12); font-weight: 600; color: var(--ink-3); }
.basis.is-partner { color: var(--s-booked); }
.leave-zone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4); border: 1px dashed var(--rule-strong); border-radius: var(--r-md); }
.leave-zone p { font-size: var(--t-14); color: var(--ink-3); max-width: 52ch; }

/* --- login and error ------------------------------------------------------------------------ */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5) var(--sp-4); }
.login-card { width: 100%; max-width: 400px; padding: var(--sp-6) var(--sp-5); background: var(--sheet);
  border: 1px solid var(--rule); border-radius: var(--r-lg); display: grid; gap: var(--sp-5); }
.login-brand { display: grid; gap: var(--sp-3); }
.login-brand .brand-logo { height: 30px; }
.login-brand p { color: var(--ink-3); font-size: var(--t-14); }
.login-card form { display: grid; gap: var(--sp-4); }
.login-card .alert { margin: 0; }
.otp { font: 600 var(--t-25)/1 var(--figures) !important; letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; }
.login-foot { font-size: var(--t-12); color: var(--ink-3); text-align: center; }
.error-page { max-width: 560px; margin: var(--sp-6) auto 0; display: grid; gap: var(--sp-4); }
.error-code { font: 600 var(--t-14) var(--figures); letter-spacing: .08em; color: var(--biru); }
.error-page p { color: var(--ink-2); }

/* --- htmx ------------------------------------------------------------------------------------- */
.htmx-indicator { opacity: 0; transition: opacity 150ms var(--ease-out); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.picker-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--ink-3); }
.htmx-request select { opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .btn:active, .tab:active, .wa:active { transform: none; }
}

/* --- dashboard grid ------------------------------------------------------------------------- */
.dash { display: grid; gap: var(--sp-5); grid-template-areas: "att" "days" "pipe"; }
.dash > .attention { grid-area: att; }
.dash > .days { grid-area: days; }
.dash > .pipe { grid-area: pipe; }
@media (min-width: 900px) {
  .dash { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "att pipe" "days days"; gap: var(--sp-6) var(--sp-5); align-items: start; }
}
.run-title, .run-sub, .task-title, .task-sub { display: block; }

/* --- order detail grid: two columns on desktop, one reading order on phones --------------------- */
.order-grid { display: grid; gap: var(--sp-4); }
.col-main, .col-side { display: contents; }
.o-step { order: 1; } .o-bill { order: 1; } .o-trip { order: 2; } .o-money { order: 3; } .o-facts { order: 4; } .o-bills { order: 5; } .o-history { order: 6; }
@media (min-width: 900px) {
  .order-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-5); align-items: start; }
  .col-main, .col-side { display: grid; gap: var(--sp-5); }
  .col-side { position: sticky; top: calc(var(--bar-h) + var(--sp-5)); }
}
.track.at-inquiry { --status-color: var(--s-inquiry); }
.track.at-checking { --status-color: var(--s-checking); }
.track.at-quoted { --status-color: var(--s-quoted); }
.track.at-booked { --status-color: var(--s-booked); }
.track.at-ongoing { --status-color: var(--s-ongoing); }
.track.at-completed { --status-color: var(--s-completed); }
.track.at-cancelled { --status-color: var(--s-cancelled); }
progress.paid-bar { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--well); overflow: hidden; color: var(--s-booked); }
progress.paid-bar::-webkit-progress-bar { background: var(--well); border-radius: 4px; }
progress.paid-bar::-webkit-progress-value { background: var(--s-booked); border-radius: 4px; }
progress.paid-bar::-moz-progress-bar { background: var(--s-booked); border-radius: 4px; }
.tabs .t-inquiry .dot { background: var(--s-inquiry); }
.tabs .t-checking .dot { background: var(--s-checking); }
.tabs .t-quoted .dot { background: var(--s-quoted); }
.tabs .t-booked .dot { background: var(--s-booked); }
.tabs .t-ongoing .dot { background: var(--s-ongoing); }
.tabs .t-completed .dot { background: var(--s-completed); }
.tabs .t-cancelled .dot { background: var(--s-cancelled); }
.tabs .zero .dot { background: var(--ink-4); }

/* form jump links (phones): the groups are one tap away */
.jump { display: flex; gap: var(--sp-1); margin: 0 calc(-1 * var(--sp-4)) var(--sp-4); padding: 0 var(--sp-4) var(--sp-1);
  overflow-x: auto; scrollbar-width: none; }
.jump::-webkit-scrollbar { display: none; }
.jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sp-3); border-radius: var(--r-sm);
  border: 1px solid var(--rule); background: var(--sheet); font-size: var(--t-14); font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.jump a:hover { border-color: var(--rule-strong); color: var(--ink); }
.group { scroll-margin-top: calc(var(--bar-h) + var(--sp-3)); }
@media (min-width: 900px) { .jump { display: none; } }
a.eyebrow { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; }
a.eyebrow:hover { color: var(--ink); }
@media (max-width: 719px) {
  .list-partners td.c-num { grid-row: 1; }
  .list-partners td.c-route { margin-top: var(--sp-2); }
}
.group-units { margin-top: var(--sp-4); }
@media (min-width: 900px) { .group-units { margin-top: var(--sp-5); } }
.js .row-add[hidden] { display: none; }
.sep { display: none; }

/* date inputs, enhanced: the Indonesian date sits in the box; the native text shows only while editing */
.dt { position: relative; display: block; }
.js .dt > input:not(:focus) { color: transparent; }
.js .dt > input:not(:focus)::-webkit-datetime-edit { opacity: 0; }
.js .dt > .preview, .js .dt > .date-preview { position: absolute; left: var(--sp-3); right: 40px; top: 50%; transform: translateY(-50%);
  margin: 0; min-height: 0; pointer-events: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--ink); font: 600 var(--t-16) var(--figures); font-variant-numeric: tabular-nums; }
.js .dt > .preview:empty::before, .js .dt > .date-preview:empty::before { content: "Pilih tanggal"; color: var(--ink-4); font-weight: 500; }
.js .dt > input:focus ~ .preview, .js .dt > input:focus ~ .date-preview { display: none; }
@media (max-width: 719px) { .list td.c-num .meta { display: none; } }
/* Chrome focuses a date input's inner segments without :focus-visible on the input itself */
.field input[type="date"]:focus, .field input[type="datetime-local"]:focus { outline: 2px solid var(--biru); outline-offset: 0; border-color: transparent; background: var(--sheet); }

/* the order is being handled by an AI employee (asking partners on WhatsApp) */
.auto-note { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border-radius: var(--r-sm);
  background: var(--biru-tint); color: var(--ink); font-size: var(--t-14); }
.auto-note > .i { color: var(--biru); margin-top: 1px; }

/* --- partner bill (ADR 0006): the same route line, five stops ---------------------------- */
.bill { display: grid; gap: var(--sp-4); }
.track.is-bill { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.track.is-bill::before { left: 10%; right: 10%; }
.decide { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); }
.decide > .i { margin-top: 2px; flex: none; }
.decide > div { display: grid; gap: var(--sp-3); min-width: 0; }
.decide.is-ok { background: var(--s-completed-bg); }
.decide.is-ok > .i { color: var(--s-completed); }
.decide.is-warn { background: var(--s-checking-bg); color: #4a2b00; }
.decide.is-warn > .i { color: var(--s-checking); }
.bill-block { display: grid; gap: var(--sp-2); border-top: 1px solid var(--rule-soft); padding-top: var(--sp-4); }
.bill-block-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.table-scroll { overflow-x: auto; margin: 0 calc(var(--sp-1) * -1); }
.bill-sheet { min-width: 560px; }
.bill-sheet td, .bill-sheet th { font-size: var(--t-14); }
.bill-sheet .is-over { color: var(--s-checking); }
.bill-sheet tfoot td { font-weight: 600; border-top: 1px solid var(--rule); padding: var(--sp-2) var(--sp-3); }
.bill-sheet .is-missing { color: var(--rugi); font-weight: 600; }
.checks { display: grid; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); align-items: baseline;
  padding: var(--sp-2) 0; border-top: 1px solid var(--rule-soft); font-size: var(--t-14); }
.checks li:first-child { border-top: 0; }
.check-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-weight: 700; font-size: var(--t-12);
  background: var(--well); color: var(--ink-3); align-self: center; }
.checks .is-ok .check-mark { background: var(--s-completed-bg); color: var(--s-completed); }
.checks .is-bad .check-mark { background: var(--s-checking-bg); color: var(--s-checking); }
.checks .is-bad .check-label { font-weight: 600; }
.check-value { text-align: right; color: var(--ink-2); white-space: nowrap; }
.ledger-row.is-total { border-top: 1px solid var(--rule); padding-top: var(--sp-2); }
.ledger-row.is-total .label { color: var(--ink); font-weight: 600; }
.bill-docs { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.bill-doc a { display: grid; width: 140px; border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; background: var(--sheet); }
.bill-doc a:hover { border-color: var(--rule-strong); }
.bill-doc img, .bill-doc-pdf { display: block; width: 100%; height: 104px; object-fit: cover; background: var(--well); }
.bill-doc-pdf { display: grid; place-items: center; font: 600 var(--t-20) var(--figures); color: var(--rugi); }
.bill-doc-label { display: grid; padding: 6px 8px; font-size: var(--t-12); color: var(--ink-3); border-top: 1px solid var(--rule-soft); }
.bill-doc-label b { color: var(--ink); font-size: var(--t-14); font-weight: 600; }
.bill-upload-form { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); }
.invoice-pdf { font-weight: 500; font-size: var(--t-14); margin-left: var(--sp-2); }
.bill-sheet th, .bill-sheet td { padding: var(--sp-2) var(--sp-3); }
.bill-sheet td:nth-child(6) { min-width: 200px; }

/* --- order: ask partners for availability (Tanya mitra) and the messages sent ------------------ */
.o-ask, .o-sent { order: 1; }
.ask { display: grid; gap: var(--sp-4); }
.ask .field textarea { min-height: 220px; font-size: var(--t-14); }
.ask-to { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--sp-2); }
.ask-to > legend { padding: 0; margin-bottom: var(--sp-2); }
.ask-list, .sent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.ask-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--sp-2); align-items: start;
  padding: var(--sp-1) var(--sp-3) var(--sp-2); border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--sheet); }
.ask-item .check { color: var(--ink); font-size: var(--t-16); }
.ask-who { grid-column: 1; padding-left: 28px; display: grid; gap: 2px; }
.ask-who .meta { margin: 0; overflow-wrap: anywhere; }
.ask-asked { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t-14); font-weight: 600; color: var(--s-completed); }
.ask-remove { grid-column: 2; grid-row: 1; width: 44px; padding: 0; color: var(--ink-3); }
.ask-add { display: flex; gap: var(--sp-2); }
.ask-add select { flex: 1; min-width: 0; }
.ask-results { display: grid; gap: var(--sp-3); }
.ask-results .check-value { white-space: normal; }
.ask-send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.ask-send .meta { margin: 0; }
.ask-send .btn[disabled] { opacity: .5; cursor: not-allowed; }
.sent-item { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--rule-soft); border-radius: var(--r-sm); }
.sent-item.is-bad { border-color: var(--rule-strong); }
.sent-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.sent-head .status { margin-left: auto; }
.sent-text summary { cursor: pointer; font-size: var(--t-14); color: var(--ink-3); }
.sent-text p { margin: var(--sp-2) 0 0; font-size: var(--t-14); }
.ask-resend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }