/* ═══ Base components (docs/UI_SPEC.md section 4) ══════════════════════════════════════════════════════════
   Plain HTML strings built with esc() (helpers in js/core/ui.js: money, chip, prov, plate, tile), tokens only.
   Every control: hover --surface-2, focus-visible --focus-ring, active --surface-3, disabled .5 with aria-disabled.
   The second half brings the existing screens' shared classes (.btn, .card, .tbl, .pill, .kpi, forms) onto the same
   type scale (14 px base, nothing below 12 px) without changing their structure. Loaded after modern.css. */

/* ─── Type helpers ─── */
.money, .num { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.money.loss { color: var(--money-loss); }
.money.in { color: var(--money-in); }
.money.zero, .money.none { color: var(--muted); }
.money.l { font-size: var(--fs-money-l); line-height: var(--lh-money-l); font-weight: 600; }
.money.xl { font-size: var(--fs-money-xl); line-height: var(--lh-money-xl); font-weight: 600; }
.id-no { font: 500 13px/18px var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─── Kbd ─── */
kbd.kbd, .btn kbd {
  display: inline-block; min-width: 18px; padding: 0 5px; border-radius: var(--r-xs); text-align: center;
  font: 500 11px/16px var(--font-mono); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}

/* ─── Buttons: btn-primary | btn-secondary | btn-ghost | btn-danger (+ btn-ai), one primary per region ─── */
.btn.btn-primary, .btn.btn-secondary, .btn.btn-ghost, .btn.btn-danger, .btn.btn-ai {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-h); padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid transparent; font: 500 14px/20px var(--font-ui); cursor: pointer;
  white-space: nowrap; text-decoration: none; box-shadow: none; filter: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.btn-secondary { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn.btn-secondary:hover { background: var(--surface-2); }
.btn.btn-ghost { background: transparent; color: var(--ink-2); }
.btn.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.btn-danger { background: var(--surface); border-color: var(--crit-line); color: var(--crit-text); }
.btn.btn-danger:hover { background: var(--crit-soft); }
.btn.btn-ai { background: var(--ai-soft); border-color: var(--ai-line); color: var(--ai-text); }
.btn.btn-ai:hover { border-color: var(--ai); }
.btn.btn-secondary:active, .btn.btn-ghost:active, .btn.btn-danger:active { background: var(--surface-3); }
.btn.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.is-loading { position: relative; overflow: hidden; }
.btn.is-loading::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); animation: aw-load 1s var(--ease) infinite; }
.btn kbd { display: none; margin-left: 2px; }
.btn.btn-primary kbd { background: rgba(255, 255, 255, .18); border-color: transparent; color: inherit; }
@media (hover: hover) and (min-width: 1024px) { .btn:hover kbd, .btn:focus-visible kbd { display: inline-block; } }
@media (max-width: 767px) { .btn.btn-sm { height: 40px; } }
.link { background: none; border: 0; padding: 0; color: var(--accent-text); cursor: pointer; font-weight: 500; text-decoration: none; }
.link:hover { text-decoration: underline; }
.btn:focus-visible, .link:focus-visible, .prov:focus-visible, .tile:focus-visible, .task:focus-visible, .views a:focus-visible, .seg button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ─── Status pill (core/status.js): five words, never colour alone ─── */
.st {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  font: 500 12px/1 var(--font-ui); white-space: nowrap; border: 1px solid transparent; vertical-align: middle;
}
.st > i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.st > svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.st-done { background: var(--good-soft); color: var(--good-text); border-color: var(--good-line); }
.st-due { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn-line); }
.st-late { background: var(--crit-soft); color: var(--crit-text); border-color: var(--crit-line); }
.st-blocked { background: var(--block); color: var(--block-ink); }
.st-draft { background: transparent; color: var(--ink-2); border: 1.5px dashed var(--draft-line); }
.st-draft > i { display: none; }
.st-void { background: transparent; color: var(--muted); text-decoration: line-through; border-color: var(--line); }
.st-void > i { display: none; }
.st-info { background: var(--info-soft); color: var(--info-text); }
.st-sub { margin-left: 6px; font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; }
/* tone bars: list rows and tasks carry a 3 px left bar in the same tone */
.tone-done, .tone-good { background: var(--good); }
.tone-due, .tone-warn { background: var(--warn); }
.tone-late, .tone-crit { background: var(--crit); }
.tone-blocked, .tone-block { background: var(--block); }
.tone-draft { background: var(--draft-line); }
.tone-void, .tone-none { background: transparent; }
.tone-info { background: var(--info); }
.tone-ai { background: var(--ai); }

/* ─── Word chips (chip()): "loss", "short", "owed", agent and info notes ─── */
.chip.chip-good, .chip.chip-done { background: var(--good-soft); color: var(--good-text); border-color: var(--good-line); }
.chip.chip-warn, .chip.chip-due { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn-line); }
.chip.chip-crit, .chip.chip-late, .chip.chip-loss { background: var(--crit-soft); color: var(--crit-text); border-color: var(--crit-line); }
.chip.chip-info { background: var(--info-soft); color: var(--info-text); border-color: transparent; }
.chip.chip-ai { background: var(--ai-soft); color: var(--ai-text); border-color: var(--ai-line); }
.chip.chip-neutral { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }

/* ─── Provenance chip: every agent- or autofill-set value says where it came from ─── */
.prov {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  border: 1px solid var(--ai-line); background: var(--ai-soft); color: var(--ai-text); font: 500 12px/18px var(--font-ui);
  cursor: pointer; white-space: nowrap; vertical-align: middle; text-decoration: none;
}
.prov:hover { border-color: var(--ai); }

/* ─── Count chip ─── */
.cnt {
  display: inline-block; min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-2);
  border: 1px solid var(--line); color: var(--ink-2); font: 600 12px/18px var(--font-ui); text-align: center;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.cnt.crit { background: var(--crit); border-color: var(--crit); color: var(--crit-ink); }

/* ─── Plate: vehicle numbers ─── */
.plate {
  display: inline-block; padding: 0 5px; border: 1px solid var(--line-2); border-radius: var(--r-xs); background: var(--surface);
  color: var(--ink); font: 600 12px/18px var(--font-mono); letter-spacing: .04em; white-space: nowrap; vertical-align: baseline;
}
.plate-in { display: inline-flex; align-items: stretch; height: var(--control-h); border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.plate-in > span { display: inline-grid; place-items: center; padding: 0 8px; background: var(--info); color: var(--info-ink); font: 600 12px var(--font-mono); letter-spacing: .06em; }
.plate-in > input { border: 0; outline: 0; min-width: 0; padding: 0 10px; background: transparent; color: var(--ink); font: 600 15px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.plate-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ─── Segmented: --surface-2 track, --surface thumb (the existing seg() keeps .on) ─── */
.seg { display: inline-flex; gap: 0; padding: 2px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); overflow: visible; }
.seg button {
  height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2);
  font: 500 13px var(--font-ui); cursor: pointer; white-space: nowrap; border-right: 0;
}
.seg button:hover { color: var(--ink); }
.seg button.on, .seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--e1), var(--highlight); }
@media (max-width: 767px) { .seg button { height: 36px; } }

/* ─── Saved-view tabs ─── */
.views { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.views a, .views button {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--ink-2); font: 500 14px var(--font-ui); white-space: nowrap; cursor: pointer; text-decoration: none; margin-bottom: -1px;
}
.views a:hover, .views button:hover { color: var(--ink); }
.views [aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent); }

/* ─── Group header: the only uppercase text ─── */
.grp {
  display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; padding: 0 2px; min-height: 30px;
  font: 600 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.grp .money { letter-spacing: 0; color: var(--ink); font-size: 13px; }
.grp .gbtn { margin-left: auto; text-transform: none; letter-spacing: 0; }

/* ─── Task rows and job cards ─── */
.tasks { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--e1), var(--highlight); overflow: hidden; }
.task {
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) 58px auto; align-items: center; gap: 12px;
  min-height: var(--row-h); padding: 7px 10px 7px 14px; border-top: 1px solid var(--line); cursor: pointer; list-style: none;
  transition: background var(--t-fast), transform var(--t-exit) var(--ease), opacity var(--t-exit);
}
.tasks > .task:first-child { border-top: 0; }
.task:hover { background: var(--surface-2); }
.task[aria-selected="true"] { background: var(--sel); }
.task > .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.t-money { text-align: right; font-weight: 600; font-size: 14px; line-height: 20px; align-self: start; padding-top: 1px; font-variant-numeric: tabular-nums; }
.t-main { min-width: 0; display: flex; flex-direction: column; }
.t-title { font-size: var(--fs-title-row); line-height: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-why { font-size: 13px; line-height: 18px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-ai { font-size: 13px; line-height: 18px; color: var(--ai-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-clock { text-align: right; font-size: 13px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-clock.late { color: var(--crit-text); }
.t-clock.due { color: var(--warn-text); }
.t-act { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.task.leaving { opacity: 0; transform: translateX(16px); }
.job { list-style: none; border-top: 1px solid var(--line); }
.job > header { display: flex; align-items: center; gap: 8px; min-height: var(--row-h); padding: 7px 10px 7px 14px; font-weight: 500; }
.job-rows { list-style: none; margin: 0; padding: 0; background: var(--bg); }
.job-rows .task { padding-left: 30px; }
body.density-cozy .task { min-height: var(--row-h-cozy); padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 767px) {
  .task { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main money" "main clock" "act act"; gap: 2px 12px; padding: 12px 12px 12px 16px; }
  .t-main { grid-area: main; } .t-money { grid-area: money; } .t-clock { grid-area: clock; align-self: start; }
  .t-act { grid-area: act; justify-content: flex-start; margin-top: 8px; } .t-act:empty { display: none; }
  .t-title, .t-why, .t-ai { white-space: normal; }
}

/* ─── Number tile (strip): no tile without a link; a 2 px tone border only when the number is bad ─── */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--e1); }
a.tile, .strip .tile {
  position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 11px 14px 12px; border: 0; border-radius: 0;
  background: var(--surface); color: var(--ink); text-decoration: none; text-align: left; transition: background var(--t-fast);
}
a.tile:hover { background: var(--surface-2); }
.tile-l { font-size: 13px; line-height: 18px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile > b.money, .tile > b.num { font-size: var(--fs-money-l); line-height: var(--lh-money-l); font-weight: 600; font-family: var(--font-ui); }
.tile > b.money.xl { font-size: var(--fs-money-xl); line-height: var(--lh-money-xl); }
.tile-sub { font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.bad::after, .tile.tone-bad-crit::after, .tile.tone-bad-warn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--crit); }
.tile.tone-bad-warn::after { background: var(--warn); }
@media (max-width: 767px) {
  .strip { display: flex; overflow-x: auto; gap: 8px; background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0 calc(-1 * var(--gutter)) 4px; padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .strip .tile { flex: 0 0 auto; min-width: 156px; max-width: 220px; border: 1px solid var(--line); border-radius: var(--r-md); }
}

/* ─── Preview pane shell ─── */
.pv { position: sticky; top: 16px; max-height: calc(100vh - 104px); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--e1), var(--highlight); padding: 16px 18px 18px; overscroll-behavior: contain; }
.pv > * + * { margin-top: 14px; }
.pv .grab, .sheet .grab { display: none; width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 0 auto 10px; }
@media (max-width: 1023px) {
  .pv { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 88vh; border-radius: var(--r-lg) var(--r-lg) 0 0; z-index: 75; transform: translateY(105%); transition: transform var(--t-sheet) var(--ease); box-shadow: var(--e3); padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); visibility: hidden; }
  .pv.open { transform: none; visibility: visible; }
  .pv .grab { display: block; }
}

/* ─── Sheet: a centred dialog on desktop, rising from the bottom on phones ─── */
.sheet {
  position: fixed; z-index: 80; left: 50%; top: 12vh; width: min(560px, calc(100vw - 32px)); max-height: 76vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e3), var(--highlight); padding: 20px;
  transform: translateX(-50%);
}
.sheet[hidden] { display: none; }
@media (max-width: 767px) {
  .sheet { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 90vh; border-radius: var(--r-lg) var(--r-lg) 0 0; transform: none; padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); }
  .sheet .grab { display: block; }
}

/* ─── Banner: ai | warn | crit | info | practice ─── */
.banner { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 14px; line-height: 20px; }
.banner-ai { background: var(--ai-soft); border-color: var(--ai-line); color: var(--ai-text); }
.banner-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
.banner-crit { background: var(--crit-soft); border-color: var(--crit-line); color: var(--crit-text); }
.banner-info { background: var(--info-soft); border-color: transparent; color: var(--info-text); }
.banner-practice {
  background: repeating-linear-gradient(135deg, var(--warn-soft) 0 12px, color-mix(in srgb, var(--warn-soft) 85%, var(--warn-line)) 12px 24px);
  border-color: var(--warn-line); color: var(--warn-text); font-weight: 500;
}

/* ─── Checks line ─── */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; line-height: 18px; }
.checks li { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.checks li::before { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; }
.checks .ok::before { content: "✓"; background: var(--good-soft); color: var(--good-text); }
.checks .warn::before { content: "!"; background: var(--warn-soft); color: var(--warn-text); }
.checks .block::before { content: "■"; background: var(--block); color: var(--block-ink); border-radius: 4px; font-size: 9px; }
.checks .block { color: var(--crit-text); font-weight: 500; }

/* ─── Field (new forms; the generic form keeps its own .fld rules in forms.css) ─── */
.fld .ctl { min-width: 0; }
.fld .ctl input, .fld .ctl select, .fld .ctl textarea { width: 100%; min-width: 0; height: var(--control-h); padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 14px; }
.fld .ctl textarea { height: auto; min-height: 64px; padding: 8px 10px; resize: vertical; line-height: 20px; }
.fld .req { color: var(--crit-text); }
.fld-help { margin: 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.fld-err { margin: 0; font-size: 13px; line-height: 18px; color: var(--crit-text); }
.fld-err:empty { display: none; }
/* phones: 16 px text in every text control (iOS zooms into anything smaller on focus) and touch-height fields */
@media (max-width: 767px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea { font-size: 16px !important; }
  .fld input:not([type=checkbox]):not([type=file]):not([type=radio]), .fld select, .auth-form .fld input { min-height: var(--control-h); }
}

/* ─── Receipt (computed values, live) ─── */
.rcpt { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; background: var(--surface); }
.rcpt h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.rcpt dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin: 0; font-size: 14px; }
.rcpt dt { color: var(--ink-2); }
.rcpt dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.rcpt-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--line-2); font-weight: 500; }
.rcpt-total b { font-size: var(--fs-money-l); line-height: var(--lh-money-l); font-variant-numeric: tabular-nums; }

/* ─── Empty state: one sentence of good news plus the next thing ─── */
.empty { padding: 32px 20px; text-align: center; background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-md); }
.empty-h { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--ink); }
.empty p { margin: 0; }
.empty p + p { color: var(--ink-2); }
.empty .btn { margin-top: 12px; }

/* ─── Skeleton rows and the progress line ─── */
.skel-row { height: var(--row-h); border-radius: var(--r-sm); background: var(--surface-2); margin: 6px 0; position: relative; overflow: hidden; }
.skel-row::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent), transparent); animation: aw-shimmer 600ms var(--ease) 1; }
.progress { position: relative; height: 2px; overflow: hidden; background: transparent; }
.progress::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--accent); animation: aw-load 1.2s var(--ease) infinite; }
.progress.ai::before { background: var(--ai); }
.progress .progress-label { display: none; }
@keyframes aw-shimmer { to { transform: translateX(100%); } }
@keyframes aw-load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  .skel-row::after, .progress::before, .btn.is-loading::after { animation: none; }
  .progress { height: auto; }
  .progress::before { display: none; }
  .progress .progress-label { display: inline; font-size: 12px; color: var(--muted); }
}

/* ─── Toast (the shell's #toast keeps its .show / .on switch) ─── */
.toast {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: var(--r-md); background: var(--ink); color: var(--bg);
  box-shadow: var(--e2); font-size: 14px; line-height: 20px; max-width: calc(100vw - 32px);
}
.toast button { background: transparent; border: 0; color: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 4px; }
@media (max-width: 767px) { .toast { bottom: 84px; } }

/* ─── Bulk bar ─── */
.bulk {
  position: sticky; bottom: 16px; z-index: 45; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; width: max-content; max-width: 100%;
  margin: 12px auto 0; padding: 8px 8px 8px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--e2), var(--highlight);
}
.bulk[hidden] { display: none; }

/* ─── Menu / popover ─── */
.menu { position: fixed; z-index: 88; min-width: 240px; max-width: calc(100vw - 16px); padding: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--e2), var(--highlight); }
.menu[hidden] { display: none; }
.menu .mi { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 36px; padding: 8px 10px; border: 0; background: none; border-radius: 6px; text-align: left; cursor: pointer; color: var(--ink); text-decoration: none; font: 400 14px/20px var(--font-ui); }
.menu .mi:hover, .menu .mi:focus-visible { background: var(--surface-2); outline: none; }
.menu .mi kbd { margin-left: auto; }
.menu .ml { padding: 8px 10px 2px; font-size: 12px; line-height: 16px; color: var(--muted); }
.menu .mrow { padding: 4px 10px 6px; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }

/* ─── Density ─── */
body.density-cozy { --row-h: var(--row-h-cozy); }
@media (pointer: coarse) { body.density-cozy, body.density-compact { --row-h: var(--row-h-touch); } }

/* ═══ The existing screens on the new scale (structure unchanged) ═════════════════════════════════════════ */
h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0; }
.small { font-size: 12px; }
.xs { font-size: 12px; }
.cap { font-size: 12px; letter-spacing: .06em; }
.muted { color: var(--muted); }
.chip { font-size: 12px; line-height: 18px; }
.pill { font-size: 12px; line-height: 18px; padding: 0 8px; font-weight: 500; }
.pill.accent { color: var(--accent-text); }
.badge { min-width: 18px; height: 18px; font-size: 12px; line-height: 18px; }
.tag { font-size: 12px; line-height: 18px; border-radius: var(--r-xs); }
.btn { height: 32px; padding: 0 12px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 13px; }
.btn.xs { height: 24px; padding: 0 8px; font-size: 12px; }
.btn svg { width: 14px; height: 14px; }
.card { border-radius: var(--r-md); box-shadow: var(--e1), var(--highlight); }
.card-h { padding: 12px 16px; gap: 8px; }
.card-h h3 { font-size: 15px; line-height: 22px; font-weight: 600; }
.card-h .sub { font-size: 12px; }
.card-b { padding: 14px 16px; }
.card-f { font-size: 12px; padding: 8px 16px; }
.kpi { border-radius: var(--r-md); box-shadow: var(--e1), var(--highlight); padding: 12px 14px; }
.kpi .l { font-size: 12px; letter-spacing: .04em; color: var(--ink-2); }
.kpi .v { font-family: var(--font-ui); font-size: var(--fs-money-l); line-height: var(--lh-money-l); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.kpi .d { font-size: 12px; }
.page-h { border-bottom: 0; padding-bottom: 0; margin-bottom: 16px; align-items: flex-end; }
.page-h h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -.005em; color: var(--ink); -webkit-text-fill-color: currentColor; background: none; }
.page-h p { font-size: 13px; line-height: 18px; color: var(--ink-2); margin-top: 2px; }
table.tbl { font-size: 13px; }
.tbl th { font-size: 12px; line-height: 16px; letter-spacing: .04em; color: var(--ink-2); padding: 8px 12px; }
.tbl td { padding: 8px 12px; line-height: 18px; }
.tbl .mono { font-size: 12.5px; }
.tbl tbody tr:nth-child(even) td { background: transparent; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl tbody tr.clickable:hover td { background: var(--sel); }
.toolbar input[type=search], .toolbar select, .toolbar input[type=date], .toolbar input[type=number], select.sel, input.inp { height: 32px; font-size: 13px; border-radius: var(--r-sm); }
.kv, .meter { font-size: 13px; }
.legend { font-size: 12px; }
.feed-item .m, .feed-item .when { font-size: 12px; }
.insight { border-color: var(--ai-line); background: var(--ai-soft); border-radius: var(--r-md); padding: 10px 12px; font-size: 13px; }
.insight .h { color: var(--ai-text); }
.detail-grid dt { font-size: 12px; color: var(--ink-2); }
.pager { font-size: 13px; }
.nav-count { font-size: 12px; }
.tooltip { font-size: 12px; }
.modal { border-radius: var(--r-lg); box-shadow: var(--e3), var(--highlight); }
.modal-h h3 { font-size: 16px; }
.palette { border-radius: var(--r-lg); box-shadow: var(--e3), var(--highlight); }
.pal-group { font-size: 12px; }
.pal-sub, .pal-foot { font-size: 12px; }
#toast.toast { position: fixed; display: block; width: max-content; }
/* modules.js toast() switches .show (base.css only knew .on, so the message never became visible) */
.toast.show { opacity: 1; transform: translateX(-50%); }

/* Setup › Modules (views/admin/modules.js): a group per row with its switch, its screens below when opened */
.msw-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.msw-bar input[type="search"] { flex: 1 1 260px; max-width: 420px; }
.msw-list { display: flex; flex-direction: column; gap: 8px; }
.msw-group { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.msw-group.is-off { background: var(--surface-2); }
.msw-group.is-off .msw-head b { color: var(--muted); text-decoration: line-through; }
.msw-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.msw-head .btn { margin-left: auto; }
.msw-switch { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.msw-switch input, .msw-item input { width: 16px; height: 16px; accent-color: var(--accent); }
.msw-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.msw-item { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.msw-item.is-locked { cursor: default; opacity: .7; }

/* Operations additions (views/plus, the ticket desk): shared bits */
.linklike { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-align: left; }
.linklike:hover { text-decoration: underline; }
.num.pos, b.pos { color: var(--good-text); } .num.neg, b.neg, .neg { color: var(--crit-text); }
.kpi.bad .v { color: var(--crit-text); }
.tkd-resolve { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tkd-resolve textarea { width: 100%; }

/* Owner dashboard (views/plus/owner_dash.js) */
.od-sec { margin: 0 0 18px; }
.od-sec h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.od-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.od-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: inherit; text-decoration: none; border-left: 4px solid var(--line-2); }
.od-tile:hover { background: var(--surface-2); }
.od-tile.is-good { border-left-color: var(--good); } .od-tile.is-warn { border-left-color: var(--warn); } .od-tile.is-crit { border-left-color: var(--crit); }
.od-tile.is-crit .od-v { color: var(--crit-text); }
.od-l { font-size: 12px; color: var(--muted); } .od-v { font-size: 24px; line-height: 1.1; } .od-s { font-size: 12px; color: var(--muted); }
.od-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* Profit & loss (views/plus/pnl.js) */
.pnl-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pnl-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.pnl-dates input { width: auto; }
.pnl-detail { border-top: 1px solid var(--line); padding: 8px 0; }
.pnl-detail h4 { margin: 0 0 6px; font-size: 13px; }
.pnl-heads { display: grid; grid-template-columns: max-content max-content; gap: 2px 24px; }

/* Live tracking (views/plus/tracking_board.js) */
.trk-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.trk-src { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.trk-src.is-off { opacity: .6; }
.trk-svg { width: 100%; max-height: 320px; background: var(--surface-2); border-radius: 8px; }
.trk-lbl { font-size: 11px; fill: var(--muted); }

/* Stamp LR (views/plus/lr_stamp.js) */
.lrs-find { display: flex; gap: 8px; margin-bottom: 12px; } .lrs-find input { flex: 1 1 260px; max-width: 420px; }
.lrs-track { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; counter-reset: s; }
.lrs-track li { flex: 1 1 110px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 6px 4px; position: relative; font-size: 13px; }
.lrs-track li::before { content: ""; position: absolute; top: 18px; left: -50%; width: 100%; height: 2px; background: var(--line-2); z-index: 0; }
.lrs-track li:first-child::before { display: none; }
.lrs-track .dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); display: grid; place-items: center; font-size: 12px; z-index: 1; }
.lrs-track li.done .dot { background: var(--good); border-color: var(--good); color: #fff; }
.lrs-track li.done::before { background: var(--good); }
.lrs-track li.now .dot { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft, rgba(80,120,255,.2)); }
.lrs-track small { color: var(--muted); font-size: 11px; }
.lrs-form .fld { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.lrs-form textarea, .lrs-form select, .lrs-form input[type="text"], .lrs-form input:not([type]) { width: 100%; }
.lrs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 640px) { .lrs-track li { flex-basis: 25%; } .od-v { font-size: 20px; } }

/* Inventory (views/plus/inventory.js) */
.inv-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.inv-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* Today (views/plus/today.js): greeting and quick buttons, a row of key numbers, a compact "Needs attention" card
   beside small Money and Inventory cards */
.td { max-width: 1200px; margin: 0 auto; padding: 2px 0 28px; }
.td-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 2px 0 16px; }
.td-head h1 { font-size: 22px; line-height: 1.2; margin: 0; letter-spacing: -.01em; }
.td-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.td-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.td-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.td-stat { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 11px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.td-stat:hover { border-color: var(--accent); box-shadow: 0 3px 12px rgba(15, 23, 42, .07); transform: translateY(-1px); }
/* every tile opens the list behind its number: an arrow in the corner says so on hover and keyboard focus */
.td-stat::after { content: "›"; position: absolute; top: 8px; right: 12px; color: var(--accent-text); font-size: 18px; line-height: 1; opacity: 0; transition: opacity .15s ease, transform .15s ease; }
.td-stat:hover::after, .td-stat:focus-visible::after { opacity: 1; transform: translateX(2px); }
.td-stat:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.td-stat::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.td-stat.is-crit::before { background: var(--crit); } .td-stat.is-warn::before { background: var(--warn); }
.td-stat-l { font-size: 12px; color: var(--muted); }
.td-stat-v { font-size: 24px; line-height: 1.2; font-weight: 600; }
.td-stat-n { font-size: 12px; color: var(--muted); }
.td-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.td-side { display: flex; flex-direction: column; gap: 14px; }
.td-box { border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); overflow: hidden; }
.td-box > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.td-box > header h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; }
.td-box > header a { font-size: 12px; color: var(--accent); text-decoration: none; }
.td-box > header a:hover { text-decoration: underline; }
.td-count { min-width: 20px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; text-align: center; }
.td-count.is-crit { background: var(--crit-soft); color: var(--crit-text); } .td-count.is-warn { background: var(--warn-soft); color: var(--warn-text); }
/* ═══ Today Dashboard: Clean Minimalist Enterprise Restructure ═══ */
.td { max-width: 1280px; margin: 0 auto; padding: 4px 0 32px; }

/* Header & Greeting */
.td-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 0 0 20px; }
.td-intro { display: flex; flex-direction: column; gap: 4px; }
.td-greet-row { display: flex; align-items: center; gap: 10px; }
.td-greeting { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: -0.02em; color: var(--ink); }
.td-date-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; font-size: 11.5px; font-weight: 500; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.td-subtitle { margin: 0; font-size: 13px; color: var(--muted); }
.td-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.td-quick-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); text-decoration: none; transition: all 0.15s ease; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.td-quick-btn:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); transform: translateY(-1px); }
.td-quick-plus { font-weight: 600; color: var(--accent); }

/* 5 KPI Stat Cards Row */
.td-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.td-stat { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s, border-color 0.18s; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); }
.td-stat:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); transform: translateY(-2px); }
.td-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.td-stat-meta { display: flex; align-items: center; gap: 7px; min-width: 0; }
.td-stat-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--muted); flex-shrink: 0; }
.td-stat-ico svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }
.td-stat-l { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-stat-arrow { font-size: 13px; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity 0.15s, transform 0.15s; }
.td-stat:hover .td-stat-arrow { opacity: 1; transform: translateX(0); color: var(--accent); }
.td-stat-v { font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 2px 0; }
.td-stat-bottom { display: flex; align-items: center; min-height: 22px; }

/* Status Chips */
.td-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500; line-height: 1.3; }
.td-chip-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.td-chip.is-crit { background: var(--crit-soft); color: var(--crit-text); }
.td-chip.is-warn { background: var(--warn-soft); color: var(--warn-text); }
.td-chip.is-good { background: var(--good-soft); color: var(--good-text); }
.td-chip.is-neutral { background: var(--surface-2); color: var(--muted); }

/* Lower Layout Split */
.td-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }

/* Card Container */
.td-card { border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); overflow: hidden; }
.td-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.td-card-title-wrap { display: flex; align-items: center; gap: 8px; }
.td-card-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: var(--surface-2); color: var(--muted); }
.td-card-ico svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.td-card-ico.is-alert { background: var(--crit-soft); color: var(--crit-text); }
.td-card-ico.is-accent { background: var(--accent-soft); color: var(--accent); }
.td-card-title { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.td-count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 19px; padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.td-count-pill.is-crit { background: var(--crit-soft); color: var(--crit-text); }
.td-count-pill.is-warn { background: var(--warn-soft); color: var(--warn-text); }
.td-card-meta { font-size: 12px; color: var(--muted); }
.td-card-link { font-size: 12px; font-weight: 500; color: var(--accent); text-decoration: none; transition: color 0.15s; }
.td-card-link:hover { text-decoration: underline; }

/* Needs Attention List */
.td-att { list-style: none; margin: 0; padding: 0; }
.td-att-item { border-bottom: 1px solid var(--line); }
.td-att-item:last-child { border-bottom: 0; }
.td-att-item a { display: flex; align-items: center; gap: 12px; padding: 11px 16px; color: inherit; text-decoration: none; font-size: 13px; transition: background 0.12s; }
.td-att-item a:hover { background: var(--surface-2); }
.td-att-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.td-att-dot.is-crit { background: var(--crit); box-shadow: 0 0 0 3px var(--crit-soft); }
.td-att-dot.is-warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.td-att-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-att-t { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-att-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-att-btn { flex-shrink: 0; font-size: 12px; font-weight: 500; color: var(--accent); padding: 4px 10px; border-radius: 6px; background: transparent; transition: all 0.15s; border: 1px solid transparent; }
.td-att-item a:hover .td-att-btn { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line, transparent); }
.td-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px 16px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background 0.15s; }
.td-more:hover { background: var(--surface-2); }
.td-more-arrow { font-size: 11px; }
.td-allgood { display: flex; align-items: center; gap: 10px; padding: 24px 16px; color: var(--good-text); font-size: 13.5px; font-weight: 500; }
.td-allgood-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--good-soft); color: var(--good-text); font-weight: 700; font-size: 12px; }

/* Right Side Stack */
.td-side { display: flex; flex-direction: column; gap: 16px; }

/* Financial Card Body */
.td-fin-body { padding: 0; }
.td-fin-hero { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); text-decoration: none; color: inherit; transition: background 0.15s; }
.td-fin-hero:hover { background: var(--line); }
.td-fin-hero-lbl { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.td-fin-hero-val { font-size: 18px; font-weight: 700; color: var(--good-text); }
.td-fin-hero.is-neg .td-fin-hero-val { color: var(--crit-text); }
.td-fin-rows { padding: 4px 0; }
.td-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; color: inherit; text-decoration: none; font-size: 13px; transition: background 0.12s; }
.td-row:hover { background: var(--surface-2); }
.td-row:hover dt { color: var(--accent-text); }
.td-row:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.td-row dt { color: var(--muted); } .td-row dd { margin: 0; font-weight: 600; } .td-row dd.neg { color: var(--crit-text); }
@media (max-width: 900px) { .td-cols { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .td-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .td-stat-v { font-size: 20px; } .td-att-a { display: none; } }
.td-row-lbl { color: var(--muted); }
.td-row-val { font-weight: 600; color: var(--ink); }
.td-row-val.is-good { color: var(--good-text); }

/* Inventory Grid */
.td-inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.td-inv-cell { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; background: var(--surface); text-decoration: none; color: inherit; transition: background 0.12s; }
.td-inv-cell:hover { background: var(--surface-2); }
.td-inv-lbl { font-size: 11.5px; color: var(--muted); }
.td-inv-val { font-size: 16px; font-weight: 700; color: var(--ink); }
.td-inv-cell.is-alert .td-inv-val { color: var(--crit-text); }

/* Responsive Breakpoints */
@media (max-width: 1080px) { .td-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .td-layout { grid-template-columns: 1fr; } .td-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .td-stats { grid-template-columns: 1fr; } .td-head { flex-direction: column; align-items: flex-start; } }

/* Compact record forms (core/modules.js classic form, #rec-form): smaller controls and gaps so a form fits on one
   screen; the main fields first, "More details" folded. Touch screens keep their larger controls (tokens.css). */
#rec-form .card-b { padding: 16px 18px; }
#rec-form .form-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px 16px; }
#rec-form .fld { gap: 4px; }
#rec-form .fld > label:not(.check-row) { font-size: 12px; font-weight: 500; color: var(--ink-2, var(--muted)); }
#rec-form .fld input:not([type=checkbox]):not([type=file]):not([type=radio]), #rec-form .fld select { min-height: 34px; height: 34px; border-radius: 8px; padding: 0 10px; font-size: 13.5px; }
#rec-form .fld textarea { min-height: 60px; border-radius: 8px; padding: 7px 10px; font-size: 13.5px; }
#rec-form .fld .help { font-size: 11px; line-height: 1.35; }
#rec-form .form-sec { padding: 2px 0 10px; }
#rec-form .form-sec > summary { font-size: 13px; font-weight: 600; padding: 8px 0; }
#rec-form .form-actions { position: sticky; bottom: 0; margin: 8px -18px -16px; padding: 10px 18px; background: var(--surface); border-top: 1px solid var(--line); }
@media (max-width: 767px) {
  #rec-form .fld input:not([type=checkbox]):not([type=file]):not([type=radio]), #rec-form .fld select { min-height: var(--control-h); height: var(--control-h); }
}
/* the smart form (LR, trip, vehicle, driver …) at the same density as the record forms */
.sf .sf-fields { gap: 10px; }
.sf .fld { gap: 4px; }
.sf .fld > label:not(.check-row) { font-size: 12px; }
.sf .fld input:not([type=checkbox]):not([type=file]):not([type=radio]), .sf .fld select { min-height: 34px; height: 34px; border-radius: 8px; font-size: 13.5px; }
.sf .sf-needs .fld input:not([type=checkbox]):not([type=file]):not([type=radio]), .sf .sf-needs .fld select { height: 36px; min-height: 36px; font-size: 14px; }
.sf .fld textarea { min-height: 60px; border-radius: 8px; font-size: 13.5px; }
@media (max-width: 767px) {
  .sf .fld input:not([type=checkbox]):not([type=file]):not([type=radio]), .sf .fld select { min-height: var(--control-h); height: var(--control-h); }
}

/* ═══ Owner / Executive Dashboard: Clean Minimalist Enterprise Restructure ═══ */
.ow { max-width: 1280px; margin: 0 auto; padding: 4px 0 36px; }
.ow.is-loading { opacity: .6; pointer-events: none; }

/* Header & Period Bar */
.ow-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 0 0 20px; }
.ow-title-wrap { display: flex; flex-direction: column; gap: 4px; }
.ow-title-row { display: flex; align-items: center; gap: 10px; }
.ow-title { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: -0.02em; color: var(--ink); }
.ow-range-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 9999px; font-size: 11.5px; font-weight: 500; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.ow-range-badge svg { color: var(--muted); }
.ow-sub { margin: 0; font-size: 13px; color: var(--muted); }

/* Period Selector Tabs */
.ow-tabs { display: inline-flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04); }
.ow-tabs button { border: 0; background: transparent; padding: 6px 14px; border-radius: 7px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; transition: all 0.15s ease; }
.ow-tabs button:hover:not(.is-on) { color: var(--ink); }
.ow-tabs button.is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }

/* 4 Headline KPI Cards */
.ow-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.ow-kpi { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s, border-color 0.18s; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); }
.ow-kpi:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); transform: translateY(-2px); }
.ow-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ow-kpi-lbl { font-size: 12.5px; font-weight: 500; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.ow-margin-pill { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 9999px; font-size: 11px; font-weight: 600; background: var(--good-soft); color: var(--good-text); }
.ow-kpi-arrow { font-size: 13px; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity 0.15s, transform 0.15s; }
.ow-kpi:hover .ow-kpi-arrow { opacity: 1; transform: translateX(0); color: var(--accent); }
.ow-kpi-val { font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 2px 0; }
.ow-kpi-val.is-good { color: var(--good-text); }
.ow-kpi-val.neg { color: var(--crit-text); }
.ow-kpi-bottom { display: flex; align-items: center; min-height: 22px; }

/* Delta Changes */
.ow-chg { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500; line-height: 1.3; }
.ow-chg.up { background: var(--good-soft); color: var(--good-text); }
.ow-chg.down { background: var(--crit-soft); color: var(--crit-text); }
.ow-chg.neutral { background: var(--surface-2); color: var(--muted); }
.ow-chg-arrow { font-size: 9px; }

/* Subject Panels */
.ow-panel { margin-bottom: 24px; }
.ow-phead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ow-ptitle-wrap { display: flex; align-items: center; gap: 8px; }
.ow-pico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--muted); }
.ow-pico svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }
.ow-ptitle { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* Panel Column Layouts */
.ow-cols { display: grid; gap: 16px; align-items: stretch; }
.ow-panel-money .ow-cols { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1.1fr); }
.ow-panel-earns .ow-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ow-panel-ops .ow-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Card Columns */
.ow-col { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
.ow-col:hover { border-color: var(--line); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05); }
.ow-col-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.ow-col-head h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.ow-col-link { font-size: 12px; font-weight: 500; color: var(--accent); text-decoration: none; transition: color 0.15s; }
.ow-col-link:hover { text-decoration: underline; }
.ow-col-body { padding: 14px 16px 16px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }

/* Chart & Legend */
.ow-chart { width: 100%; height: auto; display: block; }
.ow-chart text { font-size: 10px; fill: var(--muted); font-family: var(--font-mono, monospace); }
.ow-chart .grid-l { stroke: var(--line); stroke-dasharray: 2 2; }
.ow-chart .axis-l { stroke: var(--line-2); }
.ow-bar-in { fill: var(--accent, #3550dc); background: var(--accent, #3550dc); }
.ow-bar-out { fill: var(--warn, #d9822b); background: var(--warn, #d9822b); }
.ow-legend { display: flex; align-items: center; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.ow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ow-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

/* Ranked Lists */
.ow-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ow-rank li { display: flex; flex-direction: column; gap: 5px; }
.ow-rank-t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.ow-rank-t > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink); }
.ow-rank-t a { color: inherit; text-decoration: none; transition: color 0.15s; }
.ow-rank-t a:hover { color: var(--accent); text-decoration: underline; }
.ow-rank-t small { margin-left: 6px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.ow-rank-t b { flex-shrink: 0; font-weight: 600; color: var(--ink); font-family: var(--font-mono, monospace); }
.ow-rank-t b.neg { color: var(--crit-text); }
.ow-rank-b { height: 5px; border-radius: 9999px; background: var(--surface-2); overflow: hidden; }
.ow-rank-b i { display: block; height: 100%; border-radius: 9999px; background: var(--accent, #3550dc); transition: width 0.3s ease; }
.ow-rank-b i.neg { background: var(--crit); }

/* Operations Fleet & Facts */
.ow-fleet { display: flex; align-items: center; gap: 16px; }
.ow-fleet .ow-facts { flex: 1 1 auto; }
.ow-facts { margin: 0; display: flex; flex-direction: column; width: 100%; }
.ow-facts > div { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.ow-facts > div:last-child { border-bottom: 0; }
.ow-facts dt { color: var(--muted); }
.ow-facts dd { margin: 0; font-weight: 600; color: var(--ink); font-family: var(--font-mono, monospace); }
.ow-facts dd.neg { color: var(--crit-text); }
.ow-facts dd.warn { color: var(--warn-text); }

/* Responsive Breakpoints */
@media (max-width: 1100px) {
  .ow-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ow-panel-money .ow-cols { grid-template-columns: 1fr; }
  .ow-panel-earns .ow-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ow-panel-ops .ow-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ow-kpis { grid-template-columns: 1fr; }
  .ow-head { flex-direction: column; align-items: flex-start; }
  .ow-panel-earns .ow-cols,
  .ow-panel-ops .ow-cols { grid-template-columns: 1fr; }
}

/* ─── Cleaner shell (Shanti): ☰ hides the sidebar, no count badges or "Ask" in the chrome ─── */
@media (min-width: 768px) {
  .app.shell.desk > .topbar > .nav-toggle { display: inline-flex !important; margin-left: -8px; }
  .app.shell.desk.sb-hidden { --sb-w: 0px; }
  .app.shell.desk.sb-hidden > .sb { display: none; }
}
.app.shell.desk .sb .n { display: none; }
.app.shell.desk #agent-st { display: none !important; }

/* Location form (views/plus/location_form.js): details left, map and geofence right */
.loc-form { border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); }
.loc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.loc-details { padding: 16px 18px; }
.loc-details h2 { margin: 0 0 12px; font-size: 16px; }
.loc-details .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.loc-mapcol { padding: 16px 18px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.loc-find { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.loc-find input { flex: 1 1 220px; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; }
.loc-views, .loc-shapes { display: inline-flex; padding: 2px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); }
.loc-views button, .loc-shapes button { border: 0; background: none; padding: 5px 10px; border-radius: 6px; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.loc-views button.is-on, .loc-shapes button.is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }
.loc-map { position: relative; height: 380px; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.loc-map-msg { padding: 14px; margin: 0; }
.loc-fence { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 13px; }
.loc-radius { display: inline-flex; align-items: center; gap: 8px; }
.loc-radius input { width: 170px; accent-color: var(--accent); }
.loc-hint { margin: 0; }
.loc-err { margin: 10px 0 0; }
.loc-form .form-actions { margin: 0; border-radius: 0 0 12px 12px; }
@media (max-width: 960px) { .loc-grid { grid-template-columns: 1fr; } .loc-mapcol { border-left: 0; border-top: 1px solid var(--line); } .loc-map { height: 300px; } }
@media (max-width: 560px) { .loc-details .form-grid { grid-template-columns: 1fr; } }
#rec-form.loc-form .form-actions { margin: 0; padding: 10px 18px; }

/* sidebar hover card: the row's name and what it is for (core/nav.js showTip) */
.sb-tip { width: 260px; padding: 8px 11px; font-size: 12.5px; line-height: 17px; }
.sb-tip .tip-d { margin-top: 2px; opacity: .85; }

/* Field help behind a small ⓘ (core/modules.js fieldBlock): shown on hover or keyboard focus, not printed under every field */
#rec-form .fld > .help:not(.auto), .sf .fld > .help:not(.auto) { display: none; }
.fld-info { position: relative; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 6px; vertical-align: 1px;
  border: 1px solid var(--line-2); border-radius: 50%; font: italic 600 10px/1 Georgia, serif; color: var(--muted); cursor: help; }
.fld-info:hover, .fld-info:focus { color: var(--accent); border-color: var(--accent); outline: none; }
.fld-info:hover::after, .fld-info:focus::after { content: attr(data-info); position: absolute; left: -6px; bottom: calc(100% + 7px); z-index: 60;
  width: max-content; max-width: 280px; padding: 7px 10px; border-radius: 7px; background: var(--ink); color: var(--bg);
  font: 400 12px/1.4 var(--font-ui, inherit); font-style: normal; white-space: normal; text-align: left; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }

/* ─── Simpler smart forms (LR, trip, vehicle, driver …; core/smartform.js) ───
   no agent banner, no duplicate buttons at the top, no keyboard hints; the estimate panel only once it has figures;
   the main questions two to a row so the whole form fits on one screen */
.sf { --sf-left: 760px; --sf-right: 340px; }
.sf .sf-agent { display: none !important; }
.sf .sf-head-acts { display: none !important; }
.sf .sf-keys > span { display: none; }
.sf .sf-keys { gap: 0; }
.sf-grid:has(.sf-rwait:not([hidden])):not(:has(.sf-noticed:not([hidden]))) { grid-template-columns: minmax(0, var(--sf-left)); }
.sf-side:has(.sf-rwait:not([hidden])):not(:has(.sf-noticed:not([hidden]))) { display: none; }
.sf .sf-needs .sf-fields, .sf .sf-filled .sf-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.sf .sf-fields > .fld.wide, .sf .sf-fields > .fld[data-field$="_links"], .sf .sf-fields > .fld:has(textarea) { grid-column: 1 / -1; }
.sf .sf-region { padding: 14px 16px; }
.sf .sf-region > .grp { font-size: 11.5px; letter-spacing: .06em; margin-bottom: 8px; }
.sf .sf-start { margin-top: 6px; }
.sf .sf-head { margin-bottom: 6px; }
@media (max-width: 720px) { .sf .sf-needs .sf-fields, .sf .sf-filled .sf-fields { grid-template-columns: 1fr; } }
/* ─── Report library (views/tools/report_library.js): the reports by section on the left, the chosen one open on the
   right (the report builder embedded: .rb-top = its name, PDF / Excel and quick filters; .rb-kpis = its figures) ─── */
.rp { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 16px; align-items: start; }
.rp-nav {
  position: sticky; top: 12px; max-height: calc(100vh - 220px); overflow-y: auto; padding: 12px 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); scrollbar-width: thin;
}
.rp-find { width: 100%; margin: 0 0 6px; }
.rp-sec + .rp-sec { margin-top: 10px; }
.rp-sec-h { display: flex; align-items: center; gap: 8px; padding: 8px 10px 4px; font: 600 11.5px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rp-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.rp-item {
  display: block; width: 100%; margin: 1px 0; padding: 8px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--ink-2); font: 400 14px/20px var(--font-ui); text-align: left; cursor: pointer;
}
.rp-item:hover { background: var(--surface-2); color: var(--ink); }
.rp-item[aria-current="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.rp-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rp-item:disabled { opacity: .5; cursor: not-allowed; }
.rp-item { display: flex; align-items: center; gap: 8px; }
.rp-n { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 12px; line-height: 18px; text-align: center; font-weight: 500; }
.rp-item[aria-current="true"] .rp-n { background: var(--surface); color: var(--accent-text); }
.rb-views { margin: 14px 0 0; flex-wrap: wrap; }
.rb-views + .rb-quick { margin-top: 10px; }
.rp-none { padding: 8px 10px; }
.rp-main { min-width: 0; }
.rp-main .rb-top { margin-bottom: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.rp-main .rb-top .page-h { margin: 0; }
.rp-main .rb-top .page-h h2 { font-size: 18px; }
.rb-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rb-quick select, .rb-quick input { flex: 1 1 160px; max-width: 260px; }
/* the quick filters and the report search look like the form fields (forms.css .fld) */
.rb-quick select, .rb-quick input, .rp-find {
  box-sizing: border-box; height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background-color: var(--surface);
  color: var(--ink); font: inherit; font-size: 14px; box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04); transition: border-color .15s ease, box-shadow .15s ease;
}
.rb-quick select {
  appearance: none; padding-right: 34px; cursor: pointer; background-repeat: no-repeat; background-position: right 12px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238a929e' stroke-width='1.6' stroke-linecap='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
}
.rb-quick select:focus, .rb-quick input:focus, .rp-find:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft), inset 0 1px 2px rgba(16, 24, 40, .04); }
.rb-kpis { margin-bottom: 12px; }
/* KPI scorecard (views/tools/kpis.js): the value opens the records behind it */
.kp-val { display: inline-block; font: 600 24px var(--font-head); color: var(--ink); text-decoration: none; border-bottom: 1px dashed transparent; }
a.kp-val:hover { color: var(--accent-text); border-bottom-color: currentColor; }
a.kp-val:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
@media (max-width: 1000px) { .rp { grid-template-columns: 1fr; } .rp-nav { position: static; max-height: 320px; } }

/* ═══ Alerts & Approvals Page: Clean Minimalist Enterprise Restructure ═══ */
.al-page { max-width: 1320px; margin: 0 auto; padding: 4px 0 36px; }

/* Tabs Bar */
.al-page .ms-tabs { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line-2); margin-bottom: 20px; padding-bottom: 0; }
.al-page .ms-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px 12px; font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; transition: all 0.15s ease; cursor: pointer; }
.al-page .ms-tabs [role="tab"]:hover { color: var(--ink); }
.al-page .ms-tabs [role="tab"][aria-selected="true"],
.al-page .ms-tabs [role="tab"].on { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }

/* Page Header */
.al-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 20px; }
.al-header-left { display: flex; flex-direction: column; gap: 4px; }
.al-title { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: -0.02em; color: var(--ink); }
.al-subtitle { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.al-header-actions { display: flex; align-items: center; gap: 8px; }
.al-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); cursor: pointer; transition: all 0.15s ease; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.al-btn:hover { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); transform: translateY(-1px); }
.al-btn svg { color: var(--muted); }

/* KPI Stat Cards Grid */
.al-kpis-grid { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 12px !important; margin-bottom: 20px !important; }
.al-page .kpi { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 14px 15px 12px; border: 1px solid var(--line-2) !important; border-radius: 12px; background: var(--surface); color: inherit; cursor: pointer; transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s, border-color 0.18s; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); }
.al-page .kpi:hover { border-color: var(--accent) !important; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); transform: translateY(-2px); }
.al-page .kpi.kpi-on { border-color: var(--accent) !important; background: var(--surface); box-shadow: 0 0 0 2px var(--accent-soft, rgba(53, 80, 220, 0.12)), 0 4px 12px rgba(15, 23, 42, 0.06); }
.al-page .kpi .l { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.al-page .kpi .v { font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-family: var(--font-mono, monospace); }
.al-page .kpi.crit .v { color: var(--crit-text); }
.al-page .kpi.warn .v { color: var(--warn-text); }
.al-page .kpi.good .v { color: var(--good-text); }
.al-page .kpi .d { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 16px; }

/* Main Grid & Cards */
.al-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.al-span-12 { grid-column: span 12; }
.al-span-6 { grid-column: span 6; }

.al-page .card { border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); overflow: hidden; }
.al-page .card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.al-page .card-h h3 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }

/* Filter Toolbar */
.al-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.al-toolbar-left { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.al-toolbar-right { display: flex; align-items: center; }

/* Segmented Control */
.al-toolbar .seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); }
.al-toolbar .seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; transition: all 0.15s ease; }
.al-toolbar .seg button:hover:not(.on) { color: var(--ink); }
.al-toolbar .seg button.on { background: var(--surface-2); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }

/* Select & Search */
.al-select-wrap select { height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; outline: none; transition: border-color 0.15s; }
.al-select-wrap select:focus { border-color: var(--accent); }
.al-search-wrap { position: relative; display: flex; align-items: center; }
.al-search-ico { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.al-search-wrap input { height: 34px; padding: 0 12px 0 32px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 13px; min-width: 220px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.al-search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.al-count-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--muted); border: 1px solid var(--line-2); font-family: var(--font-mono, monospace); }

/* Data Table Styling */
.al-tbl-wrap { border: 0 !important; background: var(--surface); }
.al-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.al-tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 16px; border-bottom: 1px solid var(--line-2); text-align: left; }
.al-tbl thead th.num { text-align: right; }
.al-tbl tbody td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.al-row { cursor: pointer; transition: background 0.12s ease; }
.al-row:hover { background: var(--surface-2) !important; }

/* Table Column Details */
.al-due-cell { display: flex; flex-direction: column; gap: 3px; }
.al-due-date { font-size: 13px; font-weight: 600; color: var(--ink); }
.al-item-code { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--accent); display: block; }
.al-item-sub { font-size: 11.5px; color: var(--muted); display: block; }
.al-what-title { font-weight: 500; color: var(--ink); display: block; }
.al-what-mod { font-size: 11.5px; color: var(--muted); display: block; }
.al-plate { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); letter-spacing: 0.02em; }
.al-status-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.al-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 12px; text-decoration: none; background: var(--surface-2); color: var(--accent); border: 1px solid var(--line-2); margin-right: 4px; }
.al-tag:hover { background: var(--accent-soft); border-color: var(--accent-line, transparent); }

/* Status Pills */
.al-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500; line-height: 1.3; width: fit-content; }
.al-pill-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.al-pill.is-crit { background: var(--crit-soft); color: var(--crit-text); }
.al-pill.is-warn { background: var(--warn-soft); color: var(--warn-text); }
.al-pill.is-good { background: var(--good-soft); color: var(--good-text); }
.al-pill.is-neutral { background: var(--surface-2); color: var(--muted); }

/* Responsive Grid */
@media (max-width: 1200px) { .al-kpis-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 860px) {
  .al-kpis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .al-span-6 { grid-column: span 12; }
  .al-toolbar { flex-direction: column; align-items: stretch; }
  .al-toolbar-left { flex-direction: column; align-items: stretch; }
  .al-search-wrap input { width: 100%; }
}
@media (max-width: 540px) { .al-kpis-grid { grid-template-columns: 1fr !important; } }

/* ═══ Inventory Overview: Clean Minimalist Enterprise Restructure ═══ */
.inv-page { max-width: 1320px; margin: 0 auto; padding: 4px 0 36px; }

/* Tabs Bar */
.inv-page .ms-tabs { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line-2); margin-bottom: 20px; padding-bottom: 0; }
.inv-page .ms-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px 12px; font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; transition: all 0.15s ease; cursor: pointer; }
.inv-page .ms-tabs [role="tab"]:hover { color: var(--ink); }
.inv-page .ms-tabs [role="tab"][aria-selected="true"],
.inv-page .ms-tabs [role="tab"].on { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }

/* Header */
.inv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 18px; }
.inv-head-left { display: flex; flex-direction: column; gap: 4px; }
.inv-title { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: -0.02em; color: var(--ink); }
.inv-subtitle { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.inv-head-actions { display: flex; align-items: center; gap: 8px; }
.inv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.15s ease; }
.inv-btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }
.inv-btn.primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.inv-btn-plus { font-weight: 700; font-size: 15px; line-height: 1; }

/* Quick Movements Bar */
.inv-acts-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); margin-bottom: 20px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); }
.inv-acts-lbl { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.inv-acts-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inv-act-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 500; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); text-decoration: none; transition: all 0.15s ease; }
.inv-act-btn:hover { background: var(--surface); border-color: var(--line-2); color: var(--ink); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04); }
.inv-act-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.inv-act-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.inv-act-btn.danger { color: var(--crit-text); border-color: var(--crit-line, var(--line)); }
.inv-act-btn.danger:hover { background: var(--crit-soft); }
.inv-act-ico { display: inline-flex; align-items: center; justify-content: center; color: currentColor; }

/* 4 KPI Cards Grid */
.inv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.inv-kpi { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: inherit; cursor: pointer; transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s, border-color 0.18s; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); outline: none; }
.inv-kpi:hover, .inv-kpi:focus-visible { border-color: var(--accent); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); transform: translateY(-2px); }
.inv-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inv-kpi-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.inv-kpi-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: var(--surface-2); color: var(--muted); }
.inv-kpi-ico svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.inv-kpi.is-warn .inv-kpi-ico { background: var(--warn-soft); color: var(--warn-text); }
.inv-kpi.is-crit .inv-kpi-ico { background: var(--crit-soft); color: var(--crit-text); }
.inv-kpi.is-good .inv-kpi-ico { background: var(--good-soft); color: var(--good-text); }
.inv-kpi-lbl { font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-kpi-arrow { font-size: 13px; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity 0.15s, transform 0.15s; }
.inv-kpi:hover .inv-kpi-arrow { opacity: 1; transform: translateX(0); color: var(--accent); }
.inv-kpi-val { font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 2px 0; }
.inv-kpi.is-good .inv-kpi-val { color: var(--good-text); }
.inv-kpi.is-crit .inv-kpi-val { color: var(--crit-text); }
.inv-kpi-bottom { display: flex; align-items: center; min-height: 20px; }
.inv-kpi-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500; line-height: 1.3; }
.inv-kpi-chip.is-neutral { background: var(--surface-2); color: var(--muted); }
.inv-kpi-chip.is-warn { background: var(--warn-soft); color: var(--warn-text); }
.inv-kpi-chip.is-crit { background: var(--crit-soft); color: var(--crit-text); }
.inv-kpi-chip.is-good { background: var(--good-soft); color: var(--good-text); }

/* Needs Attention Alert Card */
.inv-alert-card { margin-bottom: 20px; border-color: var(--line-2); }
.inv-alerts-list { list-style: none; margin: 0; padding: 0; }
.inv-alert-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 13px; transition: background 0.12s ease; }
.inv-alert-item:last-child { border-bottom: 0; }
.inv-alert-item:hover { background: var(--surface-2); }
.inv-alert-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inv-alert-body { color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inv-alert-hub { color: var(--ink); font-weight: 600; }
.inv-alert-act { flex-shrink: 0; font-size: 12px; font-weight: 500; color: var(--accent); padding: 4px 10px; border-radius: 6px; background: var(--accent-soft); text-decoration: none; transition: all 0.15s ease; border: 1px solid var(--accent-line, transparent); }
.inv-alert-act:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Main Grid & Cards */
.inv-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.inv-span-12 { grid-column: span 12; }
.inv-span-7 { grid-column: span 7; }
.inv-span-5 { grid-column: span 5; }

.inv-card { border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); overflow: hidden; }
.inv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.inv-card-title-wrap { display: flex; align-items: center; gap: 8px; }
.inv-card-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: var(--surface-2); color: var(--muted); }
.inv-card-ico svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.inv-card-ico.is-alert { background: var(--warn-soft); color: var(--warn-text); }
.inv-card-title { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.inv-card-meta { font-size: 12px; color: var(--muted); }
.inv-card-link { font-size: 12px; font-weight: 500; color: var(--accent); text-decoration: none; transition: color 0.15s; }
.inv-card-link:hover { text-decoration: underline; }
.inv-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 19px; padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.inv-badge.is-warn { background: var(--warn-soft); color: var(--warn-text); }

/* Table Details */
.inv-item-cell { display: flex; flex-direction: column; gap: 2px; }
.inv-item-name { font-weight: 600; color: var(--ink); text-decoration: none; transition: color 0.15s; }
.inv-item-name:hover { color: var(--accent); text-decoration: underline; }
.inv-item-sub { font-size: 11.5px; color: var(--muted); }
.inv-stock-num { font-size: 14px; font-weight: 700; color: var(--ink); }
.inv-action-pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--accent); padding: 4px 10px; border-radius: 6px; background: var(--surface-2); text-decoration: none; border: 1px solid var(--line); transition: all 0.15s ease; }
.inv-action-pill:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.inv-table-actions { display: inline-flex; align-items: center; gap: 6px; }
.inv-link { color: inherit; text-decoration: none; }
.inv-link:hover { color: var(--accent); text-decoration: underline; }
.inv-empty { padding: 24px 18px; }

/* Responsive Breakpoints */
@media (max-width: 1080px) {
  .inv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-span-7, .inv-span-5 { grid-column: span 12; }
}
@media (max-width: 640px) {
  .inv-kpis { grid-template-columns: 1fr; }
  .inv-head { flex-direction: column; align-items: flex-start; }
  .inv-acts-bar { flex-direction: column; align-items: stretch; }
  .inv-acts-btns { flex-direction: column; align-items: stretch; }
  .inv-act-btn { justify-content: center; }
  .inv-alert-item { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ═══ Stamp LR Page: Clean Minimalist Enterprise Restructure ═══ */
.lrs-page { max-width: 1320px; margin: 0 auto; padding: 4px 0 36px; }

/* Header */
.lrs-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; margin-bottom: 20px; }
.lrs-head-left { display: flex; flex-direction: column; gap: 6px; }
.lrs-crumb-row { margin-bottom: 2px; }
.lrs-back-link { font-size: 12.5px; font-weight: 500; color: var(--accent); text-decoration: none; transition: color 0.15s; }
.lrs-back-link:hover { text-decoration: underline; }
.lrs-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lrs-title { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: -0.02em; color: var(--ink); }
.lrs-title-code { font-family: var(--font-mono, monospace); color: var(--accent); }
.lrs-subtitle { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.lrs-head-actions { display: flex; align-items: center; gap: 8px; }
.lrs-route-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-2); }

/* Card Containers */
.lrs-card { border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); overflow: hidden; }
.lrs-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.lrs-card-title-wrap { display: flex; align-items: center; gap: 8px; }
.lrs-card-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: var(--surface-2); color: var(--muted); }
.lrs-card-ico.is-accent { background: var(--accent-soft); color: var(--accent); }
.lrs-card-title { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.lrs-card-body { padding: 18px; }

/* Toolbar & Search Form */
.lrs-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.lrs-find-form { display: flex; align-items: center; gap: 8px; flex: 1 1 360px; max-width: 540px; }
.lrs-search-box { position: relative; display: flex; align-items: center; flex: 1 1 auto; }
.lrs-search-ico { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
.lrs-search-box input { width: 100%; height: 36px; padding: 0 12px 0 34px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 13px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.lrs-search-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.lrs-find-btn { height: 36px; padding: 0 16px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; flex-shrink: 0; }
.lrs-count-wrap { display: flex; align-items: center; }
.lrs-count-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--surface); color: var(--muted); border: 1px solid var(--line-2); }

/* Table Styling */
.lrs-tbl-wrap { border: 0 !important; background: var(--surface); }
.lrs-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.lrs-tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 11px 18px; border-bottom: 1px solid var(--line-2); text-align: left; }
.lrs-tbl thead th.right { text-align: right; }
.lrs-tbl tbody td { padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lrs-row { transition: background 0.12s ease; }
.lrs-row:hover { background: var(--surface-2); }
.lrs-lr-code { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--accent); text-decoration: none; font-size: 13px; transition: color 0.15s; }
.lrs-lr-code:hover { text-decoration: underline; }
.lrs-cust-cell { font-weight: 500; color: var(--ink); }
.lrs-route-cell { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.lrs-city { font-weight: 500; color: var(--ink); }
.lrs-route-arr { color: var(--muted); font-weight: 600; }
.lrs-stamp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 600; background: var(--accent); color: var(--accent-ink); text-decoration: none; transition: all 0.15s ease; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
.lrs-stamp-btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12); }
.lrs-empty-td { padding: 32px 18px; text-align: center; }

/* Detail View Layout */
.lrs-detail-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.lrs-span-12 { grid-column: span 12; }
.lrs-span-7 { grid-column: span 7; }
.lrs-span-5 { grid-column: span 5; }

/* Stepper Tracker */
.lrs-track-wrap { padding: 22px 20px 24px; overflow-x: auto; }
.lrs-track { list-style: none; display: flex; align-items: flex-start; justify-content: space-between; margin: 0; padding: 0; min-width: 680px; position: relative; }
.lrs-track li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; position: relative; padding: 0 6px; }
.lrs-track li::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: var(--line-2); z-index: 0; }
.lrs-track li:first-child::before { display: none; }
.lrs-track .dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); display: grid; place-items: center; font-size: 12px; font-weight: 700; z-index: 1; transition: all 0.2s ease; }
.lrs-track li.done .dot { background: var(--good); border-color: var(--good); color: #fff; box-shadow: 0 0 0 3px var(--good-soft); }
.lrs-track li.done::before { background: var(--good); }
.lrs-track li.now .dot { border-color: var(--accent); background: var(--surface); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.lrs-track li b { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.lrs-track li.done b { color: var(--ink); }
.lrs-track small { color: var(--muted); font-size: 11px; line-height: 1.35; margin-top: 2px; }

/* Form */
.lrs-form .fld { margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; }
.lrs-form .fld label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.lrs-form select, .lrs-form input[type="text"], .lrs-form input:not([type]), .lrs-form textarea { width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 13px; font-family: inherit; outline: none; transition: border-color 0.15s; }
.lrs-form select:focus, .lrs-form input:focus, .lrs-form textarea:focus { border-color: var(--accent); }
.lrs-form input[type="file"] { font-size: 12.5px; color: var(--muted); }
.lrs-gps-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 4px; cursor: pointer; }
.lrs-form-btn-wrap { margin-top: 18px; margin-bottom: 0; }
.lrs-submit-btn { width: 100%; height: 38px; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; }

/* History List */
.lrs-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lrs-history-item { padding: 12px 14px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.lrs-history-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lrs-history-meta { font-size: 12px; color: var(--muted); }
.lrs-history-note { font-size: 13px; color: var(--ink); line-height: 1.4; }
.lrs-history-loc { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.lrs-view-photo-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 500; background: var(--surface); color: var(--accent); border: 1px solid var(--line-2); cursor: pointer; transition: all 0.15s; }
.lrs-view-photo-btn:hover { background: var(--accent-soft); border-color: var(--accent); }

/* Responsive */
@media (max-width: 900px) {
  .lrs-span-7, .lrs-span-5 { grid-column: span 12; }
  .lrs-toolbar { flex-direction: column; align-items: stretch; }
  .lrs-find-form { max-width: 100%; }
}