/* Canonical components: docs/design/global-design-spec-2026-09-24.md. */
@layer legacy, pages, components;
@layer components {
:root {
  --hl-sidebar: #142f38;
  --hl-primary: #254b53;
  --hl-primary-hover: #1d3b42;
  --hl-primary-active: #142f38;
  --hl-primary-soft: #eaf2f3;
  --hl-brand-accent: #b94f3c;
  --hl-page: #f8fafc;
  --hl-surface: #ffffff;
  --hl-border: #e2e8f0;
  --hl-border-subtle: #f1f5f9;
  --hl-control-border: #cbd5e1;
  --hl-text: #0f172a;
  --hl-text-secondary: #64748b;
  --hl-text-muted: #94a3b8;
  --hl-success-bg: #f0fdf4;
  --hl-success-text: #166534;
  --hl-success-border: #bbf7d0;
  --hl-info-bg: #eff6ff;
  --hl-info-text: #1d4ed8;
  --hl-info-border: #bfdbfe;
  --hl-warning-bg: #fffbeb;
  --hl-warning-text: #92400e;
  --hl-warning-border: #fde68a;
  --hl-danger-bg: #fef2f2;
  --hl-danger-text: #b91c1c;
  --hl-danger-border: #fecaca;
  --hl-neutral-bg: #f1f5f9;
  --hl-space-1: 4px;
  --hl-label-gap: 6px;
  --hl-space-2: 8px;
  --hl-action-gap: 12px;
  --hl-field-gap: 16px;
  --hl-section-gap: 24px;
  --hl-space-4: 32px;
  --hl-control-height: 36px;
  --hl-control-radius: 6px;
  --hl-card-radius: 12px;
  --hl-modal-sm: 640px;
  --hl-modal-md: 720px;
  --hl-modal-lg: 960px;
  --hl-shadow: 0 1px 4px rgb(15 23 42 / 5%);
  --hl-font: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* Compatibility aliases keep established templates on one token source. */
:root, .vehicle-workspace {
  --ink: var(--hl-text);
  --ink-soft: var(--hl-text-secondary);
  --muted: var(--hl-text-secondary);
  --line: var(--hl-border);
  --line-strong: var(--hl-control-border);
  --page: var(--hl-page);
  --paper: var(--hl-surface);
  --paper-soft: var(--hl-page);
  --brand: var(--hl-primary);
  --brand-strong: var(--hl-primary-hover);
  --brand-soft: var(--hl-primary-soft);
  --sidebar: var(--hl-sidebar);
  --sidebar-soft: var(--hl-primary-hover);
  --success: var(--hl-success-text);
  --success-soft: var(--hl-success-bg);
  --warning: var(--hl-warning-text);
  --warning-soft: var(--hl-warning-bg);
  --danger: var(--hl-danger-text);
  --danger-soft: var(--hl-danger-bg);
  --radius-card: var(--hl-card-radius);
  --radius-control: var(--hl-control-radius);
  --shadow-sm: var(--hl-shadow);
  --shadow-md: var(--hl-shadow);
  font-family: var(--hl-font);
}
body, .auth-main, .calendar-page { background: var(--hl-page); color: var(--hl-text); font-size: 14px; line-height: 20px; }
.sidebar { background: var(--hl-sidebar); }
.brand-mark { background: var(--hl-brand-accent); box-shadow: none; }
.sidebar details > a[aria-current="page"] { background: var(--hl-primary); border-radius: 8px; box-shadow: none; }
.sidebar details > a[aria-current="page"]::before { background: #fff; box-shadow: none; }
.sidebar-user { border-radius: var(--hl-card-radius); backdrop-filter: none; box-shadow: none; }
.topbar, .topbar-inner { min-height: 56px; }
.topbar { background: var(--hl-surface); border-bottom: 1px solid var(--hl-border); }
.topbar-inner > span { color: var(--hl-text-secondary); font-size: 12px; font-weight: 400; }
h1, .page-head h1, .demand-page-header h1, .calendar-page-head h1 { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: 0; }
h2, h3, .demand-card-header h3 { font-size: 14px; line-height: 20px; font-weight: 600; }
.page-head { gap: 24px; margin-bottom: 24px; }
.page-head p { margin-top: 4px; color: var(--hl-text-secondary); font-size: 13px; line-height: 20px; }
.eyebrow { color: var(--hl-text-secondary); letter-spacing: 0; }
.content { width: min(100%, 1440px); max-width: 1440px; padding: 32px 32px 64px; }
:is(.panel, .auth-card, .metric, .demand-card, .calendar-controls, .vehicle-calendar-wrap, .order-picker) {
  background: var(--hl-surface); border: 1px solid var(--hl-border);
  border-radius: var(--hl-card-radius); box-shadow: var(--hl-shadow);
}
.panel, .demand-card { padding: 24px; margin-bottom: 24px; }
.panel .panel { box-shadow: none; }
.panel-title { gap: 16px; }
.two-col, .metric-grid, .vehicle-dashboard-grid, .vehicle-resource-columns { gap: 24px; }
.metric { padding: 24px; }
.settlement-completion { grid-column: 1 / -1; }
.settlement-completion strong { font-size: 16px; line-height: 24px; }
.metric.highlight { background: var(--hl-sidebar); color: #fff; }
.metric.highlight::before { background: var(--hl-primary); }
.hero-empty, .vehicle-page-head, .brand-image-placeholder, .proposal-assets .brand-placeholder { background: var(--hl-surface); }
.subpanel, .record, .resource-record, .calendar-resource { border-color: var(--hl-border); border-radius: 8px; }

/* Button and Input: native controls, explicit density, no per-page overrides. */
.button {
  min-height: var(--hl-control-height); height: auto; padding: 7px 16px; gap: 8px;
  border: 1px solid var(--hl-control-border); border-radius: var(--hl-control-radius);
  background: transparent; color: var(--hl-text); box-shadow: none;
  font-size: 14px; line-height: 20px; font-weight: 600; white-space: normal;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.button:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--hl-page); border-color: var(--hl-primary); color: var(--hl-primary); box-shadow: none; transform: none; }
.button:active { transform: none; }
.button.primary, .button.calendar-config-action { background: var(--hl-primary); border-color: var(--hl-primary); color: #fff; }
.button.primary:hover:not(:disabled), .button.calendar-config-action:hover { background: var(--hl-primary-hover); border-color: var(--hl-primary-hover); color: #fff; }
.button.primary:active:not(:disabled) { background: var(--hl-primary-active); }
.button.danger { color: var(--hl-danger-text); border-color: var(--hl-danger-border); background: var(--hl-danger-bg); }
.button:disabled, .button[aria-disabled="true"], .button.primary:disabled:hover { background: var(--hl-neutral-bg); color: var(--hl-text-muted); border-color: var(--hl-border); box-shadow: none; cursor: not-allowed; }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--hl-primary); outline-offset: 2px; }
:where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%; min-width: 0; max-width: 100%; margin-top: 6px;
  min-height: var(--hl-control-height); height: var(--hl-control-height); padding: 7px 12px;
  border: 1px solid var(--hl-control-border); border-radius: var(--hl-control-radius);
  background: var(--hl-surface); color: var(--hl-text); box-shadow: none;
  font-family: var(--hl-font); font-size: 14px; font-weight: 400; line-height: 20px;
}
textarea { height: auto; min-height: 88px; resize: vertical; }
select[multiple] { height: auto; min-height: 88px; }
input[type="file"] { height: auto; }
input[type="color"] { padding: 4px; width: 80px; }
:is(input, select, textarea):focus { border-color: var(--hl-primary); box-shadow: none; }
:is(input, select, textarea):disabled { background: var(--hl-neutral-bg); color: var(--hl-text-muted); }
:is(input, textarea)::placeholder { color: var(--hl-text-muted); }
:is(input[type="checkbox"], input[type="radio"]) { width: 16px; height: 16px; min-height: 16px; border-radius: 4px; accent-color: var(--hl-primary); }
.form-layout--comfortable { --hl-control-height: 40px; --hl-control-radius: 8px; }
label, .form-layout label, .demand-form :is(label, legend) { color: var(--hl-text-secondary); font-size: 13px; line-height: 20px; font-weight: 500; }
.form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-field:has(> input[type="checkbox"]), .form-field:has(> input[type="radio"]) { flex-direction: row; align-items: center; flex-wrap: wrap; }
.form-layout, .form-grid.form-layout, .demand-form { gap: 24px; }
.form-layout .form-section { gap: 16px; }
.form-layout .form-section > :is(h2,h3,h4,legend) { font-size: 14px; font-weight: 600; color: var(--hl-text); padding-bottom: 8px; border-bottom: 1px solid var(--hl-border-subtle); }
.form-row { gap: 16px; }
.form-layout label { gap: 6px; }
.form-layout label > :is(input, select, textarea), .form-field > :is(input,select,textarea) { margin-top: 0; }
.form-layout .form-row > :is(label,fieldset,p,div,.form-field) { min-width: 0; max-width: 100%; }
.input-with-unit { border: 1px solid var(--hl-control-border); border-radius: var(--hl-control-radius); }
.input-with-unit > input { margin: 0; border: 0; border-radius: 0; min-height: 34px; height: 34px; }
.input-with-unit > span { background: var(--hl-page); color: var(--hl-text-secondary); padding: 0 12px; }
.input-with-unit:focus-within { border-color: var(--hl-primary); outline: 2px solid var(--hl-primary); outline-offset: 2px; }
.input-with-unit input:focus-visible { outline: none; }
:is(.errorlist, .demand-field-error, .field-error) { margin: 0; padding: 0; list-style: none; color: var(--hl-danger-text); font-size: 12px; line-height: 18px; font-weight: 400; }
.errorlist.nonfield { padding: 12px 16px; border: 1px solid var(--hl-danger-border); border-radius: 6px; background: var(--hl-danger-bg); }
:is(.form-field, label):has(.errorlist) > :is(input,select,textarea), [aria-invalid="true"], .has-field-error .input-with-unit { border-color: var(--hl-danger-text); }
.helptext { color: var(--hl-text-secondary); font-size: 12px; line-height: 18px; font-weight: 400; }

/* Card headers and compact toolbars retain page-specific grid definitions. */
.actions { gap: 12px; }
.form-actions { justify-content: flex-start; gap: 12px; min-height: 64px; padding: 12px 0 0; border-top: 1px solid var(--hl-border); }
.form-actions > .primary { margin-left: auto; }
.form-actions > .button:only-child { margin-left: auto; }
.form-filter { gap: 16px; }
:is(.status-filter, .tabs) { background: var(--hl-neutral-bg); border: 1px solid var(--hl-border); border-radius: 8px; padding: 4px; gap: 4px; box-shadow: none; backdrop-filter: none; }
:is(.status-filter, .tabs) a { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px 12px; border-radius: 6px; line-height: 20px; font-size: 13px; }
:is(.status-filter, .tabs) a.active { background: var(--hl-primary); color: #fff; box-shadow: none; }
.workbench-toolbar .button, .workbench-toolbar select, .workbench-bulk .button { min-height: 32px; height: 32px; padding-block: 5px; font-size: 12px; }
.workbench-filter select { margin: 0; }
.workbench-toolbar { padding: 16px 24px; }
.workbench-pagination { min-height: 48px; padding: 8px 24px; }

/* Data Table and StatusBadge */
.table-head, table:not(.vehicle-calendar) thead th { background: var(--hl-page); color: var(--hl-text-secondary); font-size: 12px; line-height: 18px; font-weight: 600; min-height: 40px; text-align: left; }
.table-head { padding-block: 11px; }
table:not(.vehicle-calendar) { width: 100%; border-collapse: collapse; }
table:not(.vehicle-calendar) th { height: 40px; }
table:not(.vehicle-calendar) :is(th,td) { border-bottom: 1px solid var(--hl-border); padding: 8px 16px; }
table:not(.vehicle-calendar) td { height: 48px; }
.table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.table-scroll > table { min-width: 100%; margin: 0; }
.table-row { min-height: 64px; padding-block: 12px; border-color: var(--hl-border); }
.workbench-table td { height: 64px; }
.empty { min-height: 144px; display: grid; place-items: center; padding: 24px; color: var(--hl-text-secondary); background: var(--hl-page); }
.status, .status-badge, .chip, .workbench-stage, .demand-status-badge {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  min-height: 24px; padding: 2px 8px; border: 1px solid var(--hl-info-border);
  border-radius: 999px; color: var(--hl-info-text); background: var(--hl-info-bg);
  font-size: 12px; line-height: 18px; font-weight: 600;
}
.status.complete, .status.completed, .status.confirmed, .status.success, .status-badge.completed { color: var(--hl-success-text); background: var(--hl-success-bg); border-color: var(--hl-success-border); }
.status.draft, .status.pending, .status.locked { color: var(--hl-warning-text); background: var(--hl-warning-bg); border-color: var(--hl-warning-border); }
.status.error, .status.discarded, .status.cancelled { color: var(--hl-danger-text); background: var(--hl-danger-bg); border-color: var(--hl-danger-border); }
.workbench-stage-dot { background: currentColor; }
.notice { border-radius: 8px; padding: 12px 16px; color: var(--hl-info-text); background: var(--hl-info-bg); border-color: var(--hl-info-border); }
.notice.success { color: var(--hl-success-text); background: var(--hl-success-bg); border-color: var(--hl-success-border); }
.notice.warning, .notice.warn { color: var(--hl-warning-text); background: var(--hl-warning-bg); border-color: var(--hl-warning-border); }
.notice.error { color: var(--hl-danger-text); background: var(--hl-danger-bg); border-color: var(--hl-danger-border); }

/* Modal: existing native dialog and iframe behaviors remain intact. */
:is(.resource-dialog, .model-config-dialog, #vehicle-inline-dialog, .quote-image-dialog, .plan-schedule-dialog) {
  width: min(var(--hl-modal-md), calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 48px);
  border: 1px solid var(--hl-border); border-radius: var(--hl-card-radius);
  background: var(--hl-surface); box-shadow: var(--hl-shadow);
}
:is(.resource-dialog, #vehicle-inline-dialog) { padding: 24px; }
:is(.resource-dialog, .model-config-dialog, #vehicle-inline-dialog, .quote-image-dialog, .plan-schedule-dialog)::backdrop { background: rgb(15 23 42 / 38%); backdrop-filter: none; }
.plan-schedule-dialog { padding: 0; overflow: hidden; }
.plan-schedule-dialog--compact { --hl-modal-md: 640px; }
.plan-dialog-head { display: flex; justify-content: flex-end; padding: 8px 16px; border-bottom: 1px solid var(--hl-border-subtle); }
.plan-schedule-dialog iframe { display: block; width: 100%; height: min(640px, calc(100dvh - 100px)); border: 0; }
.plan-schedule-dialog--compact iframe { height: min(480px, calc(100dvh - 100px)); }
.assignment-dialog-page > h2 { margin: 0 0 24px; font-size: 18px; line-height: 26px; }
.assignment-dialog-page .form-layout .form-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(80px, 1fr); }
.assignment-dialog-page .form-row > .form-field { width: 100%; }
:is(.resource-dialog-head, .model-config-dialog-head, #vehicle-inline-dialog > .panel-title) {
  position: sticky; top: -24px; z-index: 2; padding-block: 16px; margin-bottom: 24px;
  background: var(--hl-surface); border-bottom: 1px solid var(--hl-border);
}
:is(.resource-dialog-head, .model-config-dialog-head, .quote-image-dialog-head) :is(h2,h3) { font-size: 18px; line-height: 26px; font-weight: 600; }
.resource-dialog-close { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; border-radius: 6px; box-shadow: none; }
.resource-dialog .form-layout .form-row { gap: 16px; }
.resource-dialog .form-layout :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { min-height: 36px; height: 36px; }
:is(.resource-dialog, .model-config-dialog, #vehicle-inline-dialog) .form-actions {
  position: sticky; bottom: -24px; z-index: 2; width: calc(100% + 48px);
  margin: 0 -24px -24px; padding: 12px 24px; min-height: 64px;
  background: var(--hl-surface); border-top: 1px solid var(--hl-border);
}
.dialog-frame-page { background: var(--hl-surface); padding: 24px; }
.dialog-frame-page .form-actions { position: sticky; bottom: -24px; background: var(--hl-surface); padding: 12px 0; }

/* Shared Stepper on every vehicle stage, not just the demand form. */
.stage-page-navigation { display: flex; gap: 0; padding: 8px; overflow-x: auto; }
.stage-page-navigation .stage-node {
  position: relative; flex: 1 0 100px; display: flex; flex-direction: column;
  min-height: 0; padding: 0 4px; gap: 4px; border: 0; border-radius: 0;
  color: var(--hl-text-muted); background: transparent; box-shadow: none; cursor: pointer;
}
.stage-node::after { content: none; }
.stage-node:not(:first-child)::after { content: ""; position: absolute; top: 14px; left: calc(-50% + 20px); width: calc(100% - 40px); height: 1px; background: var(--hl-border); }
.stage-step-marker { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 4px; border: 1px solid var(--hl-border); border-radius: 50%; color: var(--hl-text-muted); background: var(--hl-page); font-size: 12px; }
.stage-node--completed { color: var(--hl-text-secondary); }
.stage-node--completed .stage-step-marker { color: var(--hl-success-text); background: var(--hl-success-bg); border-color: var(--hl-success-border); }
.stage-node[aria-current="page"] { color: var(--hl-primary); font-weight: 600; }
.stage-node[aria-current="page"] .stage-step-marker { color: #fff; background: var(--hl-primary); border-color: var(--hl-primary); }
.stage-page-navigation .stage-node--blocked { cursor: not-allowed; }
.stage-page-navigation .stage-node:hover:not(:disabled) { background: transparent; color: var(--hl-primary); }
.stage-node small { font-size: 12px; line-height: 18px; font-weight: 400; }
.vehicle-stage-actions { bottom: 0; min-height: 64px; padding: 12px 24px; margin-top: 24px; border-radius: 8px 8px 0 0; background: var(--hl-surface); border-top: 1px solid var(--hl-border); box-shadow: var(--hl-shadow); }
.vehicle-stage-actions .form-actions { min-height: 0; }
.demand-layout { gap: 24px; }
.demand-card-header { margin-bottom: 16px; }
.demand-layout .form-section { gap: 0; }
.demand-layout .form-section > .demand-subheading { border: 0; }
.demand-layout .demand-form .form-row { gap: 16px; }
.demand-layout .demand-form .form-row.demand-capacity-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }

/* Calendar keeps its business semantics and fixed week/month geometry. */
.calendar-cell.available { color: var(--hl-success-text); background: var(--hl-success-bg); border-color: var(--hl-success-border); }
.calendar-cell.intent { color: var(--hl-warning-text); background: var(--hl-warning-bg); border-color: var(--hl-warning-border); }
.calendar-cell.locked, .calendar-cell.unavailable { color: var(--hl-danger-text); background: var(--hl-danger-bg); border-color: var(--hl-danger-border); }
.calendar-cell.past, .calendar-cell.past-available { color: var(--hl-text-secondary); background: var(--hl-neutral-bg); border-color: var(--hl-border); }
.vehicle-calendar-legend span { border-radius: 999px; font-size: 12px; line-height: 18px; padding: 2px 8px; }
.calendar-cell { border-radius: 8px; }
.calendar-resource { background: var(--hl-page); }
.vehicle-calendar-period { background: var(--hl-surface); box-shadow: none; border-color: var(--hl-border); }

@media (max-width: 820px) {
  .content { padding: 24px 16px 64px; }
  .page-head { align-items: flex-start; }
}
@media (max-width: 639px) {
  .panel, .demand-card, .metric { padding: 16px; border-radius: 12px; }
  .stage-page-navigation { padding: 8px; }
  .two-col, .metric-grid, .vehicle-dashboard-grid, .vehicle-resource-columns { gap: 16px; }
  .form-layout .form-row, .form-layout .form-row:has(> :nth-child(3):last-child),
  .resource-dialog .form-layout .resource-form-row--three,
  .demand-layout .demand-form .form-row.demand-capacity-grid { grid-template-columns: minmax(0,1fr); }
  :is(.resource-dialog, #vehicle-inline-dialog) { padding: 16px; }
  :is(.resource-dialog-head, #vehicle-inline-dialog > .panel-title) { top: -16px; }
  :is(.resource-dialog, #vehicle-inline-dialog) .form-actions { width: calc(100% + 32px); margin: 0 -16px -16px; padding: 12px 16px; bottom: -16px; }
  .form-actions, .vehicle-stage-actions { flex-wrap: wrap; }
  .form-actions .button { width: auto; }
}
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }
.settlement-confirm { width: 84px; min-width: 84px; height: 36px; padding: 7px 8px; }
.settlement-confirm.is-pending { background: var(--hl-warning-bg); color: var(--hl-warning-text); border-color: var(--hl-warning-border); }
.settlement-confirm.is-confirmed:disabled { background: var(--hl-success-bg); color: var(--hl-success-text); border-color: var(--hl-success-border); cursor: default; }
.settlement-voucher-row.is-pending { background: var(--hl-warning-bg); border-left-color: var(--hl-warning-border); }
.settlement-voucher-row.is-confirmed { background: var(--hl-success-bg); border-left-color: var(--hl-success-border); }
.quote-image-dialog { width: min(var(--hl-modal-lg), calc(100vw - 32px)); }

/* Tourism uses the same connected stepper and restrained workspace panels. */
.stage-nav { display: flex; gap: 0; padding: 24px 8px; background: var(--hl-surface); border-radius: 12px; }
.stage-step { position: relative; flex: 1 0 120px; flex-direction: column; gap: 8px; padding: 0 8px; color: var(--hl-text-secondary); background: transparent; border: 0; border-radius: 0; font-weight: 500; }
.stage-step > span { width: 28px; height: 28px; flex-basis: 28px; font-size: 12px; color: var(--hl-text-muted); background: var(--hl-page); border: 1px solid var(--hl-border); }
.stage-step:not(:first-child)::after { content: ""; position: absolute; top: 14px; left: calc(-50% + 20px); width: calc(100% - 40px); height: 1px; background: var(--hl-border); }
.stage-step.complete, .stage-step.active { background: transparent; box-shadow: none; }
.stage-step.complete > span { color: var(--hl-success-text); background: var(--hl-success-bg); border-color: var(--hl-success-border); }
.stage-step.active { color: var(--hl-primary); font-weight: 600; }
.stage-step.active > span { color: #fff; background: var(--hl-primary); border-color: var(--hl-primary); }
.stage-step.locked { color: var(--hl-text-muted); background: transparent; opacity: 1; }
.current-task-card { padding: 24px; background: var(--hl-surface); }
.current-task-card h2 { font-size: 20px; line-height: 28px; }
.workspace-facts, .vehicle-summary-strip { border-radius: 12px; box-shadow: var(--hl-shadow); }
.workspace-dashboard { gap: 24px; }
.header-action > form { box-shadow: var(--hl-shadow); }
.voucher-actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid var(--hl-border); }
.button.voucher-primary { color: #fff; background: var(--hl-primary); border-color: var(--hl-primary); }
.settlement-confirm.is-pending:hover:not(:disabled) { color: var(--hl-warning-text); background: var(--hl-warning-bg); border-color: var(--hl-warning-text); }
.vehicle-calendar-legend .available { background: var(--hl-success-bg); color: var(--hl-success-text); border-color: var(--hl-success-border); }
.vehicle-calendar-legend .intent { background: var(--hl-warning-bg); color: var(--hl-warning-text); border-color: var(--hl-warning-border); }
.vehicle-calendar-legend :is(.locked,.unavailable) { background: var(--hl-danger-bg); color: var(--hl-danger-text); border-color: var(--hl-danger-border); }
.vehicle-calendar-legend .past { background: var(--hl-neutral-bg); color: var(--hl-text-secondary); border-color: var(--hl-border); }

/* Structural shells are not an additional card around their child cards. */
#vehicle-orders { padding: 0; margin: 0; }
#vehicle-sales:has(.demand-layout), .vehicle-demand-phase.demand-layout { padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; }
.demand-card { margin: 0; }
.vehicle-other-tasks { margin-top: 24px; }
.demand-status-badge.completed { color: var(--hl-success-text); background: var(--hl-success-bg); border-color: var(--hl-success-border); }

.vehicle-flow { --vehicle-flow-topbar-height: 56px; }
.vehicle-flow-bar { border-radius: 12px; box-shadow: var(--hl-shadow); }
.vehicle-flow-strip { gap: 0; }
.vehicle-flow-stage { flex-basis: 120px; min-width: 120px; height: 88px; }
.vehicle-flow-stage-button { align-items: center; padding: 8px 4px; border: 0; background: transparent; color: var(--hl-text-secondary); border-radius: 0; }
.vehicle-flow-stage:not(:first-child)::before { content: ""; position: absolute; top: 22px; left: calc(-50% + 20px); width: calc(100% - 40px); height: 1px; background: var(--hl-border); }
.vehicle-flow-stage:is(.state-active,.state-completed,.state-blocked,.state-stale,.state-cancelled,.state-not_applicable) > .vehicle-flow-stage-button { border: 0; background: transparent; }
.vehicle-flow-stage.state-completed .stage-step-marker { color: var(--hl-success-text); background: var(--hl-success-bg); border-color: var(--hl-success-border); }
.vehicle-flow-stage.state-active .stage-step-marker, .vehicle-flow-stage-button.is-current .stage-step-marker { color: #fff; background: var(--hl-primary); border-color: var(--hl-primary); }
.vehicle-flow-stage-button.is-current::before { content: none; }
.vehicle-flow-stage-button.is-current > .vehicle-flow-status { max-width: 100%; }
.vehicle-flow-stage-button.is-selected:not(:disabled), .vehicle-flow-stage-button:hover:not(:disabled) { background: var(--hl-primary-soft); }
.vehicle-flow-stage-button > .vehicle-flow-status { color: var(--hl-text-secondary); }
.vehicle-flow-stage-label { font-size: 12px; }
.vehicle-flow-stage-button:active:not(:disabled) { transform: none; }

.order-list-filters { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.order-list-filters .filter-actions { grid-column: 1 / -1; justify-content: flex-end; }
@media (max-width: 820px) { .order-list-filters { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 639px) { .order-list-filters { grid-template-columns: minmax(0,1fr); } }

}