/* Screen-only branding. Receipt and print styles remain unchanged. */
.vehicle-customer-results { max-height: 240px; overflow-y: auto; border: 1px solid #b9bec6; border-radius: 5px; background: #fff; padding: 4px; }
.vehicle-customer-results [role="option"] { padding: 10px; cursor: pointer; overflow-wrap: anywhere; }
.vehicle-customer-results [role="option"]:hover, .vehicle-customer-results [aria-selected="true"] { background: #f5e6ea; color: #8e0020; }
body {
  --bg: #f4f5f6;
  --ink: #222328;
  --muted: #656a73;
  --line: #d9dce1;
  --accent: #c9002b;
  --accent-dark: #a80024;
  --card-border: #cfd2d8;
  --card-border-strong: #aeb3bd;
  --card-accent-line: #c4c7ce;
  --shadow: 0 3px 12px rgba(24, 25, 28, .06);
  --shadow-soft: 0 2px 6px rgba(24, 25, 28, .04);
  background: var(--bg);
}
.app .primary, dialog .primary, .auth-screen .primary { border-radius: 5px; }
.app .ghost, dialog .ghost { background: #eceef1; color: #303238; border-radius: 5px; }
.app .small:not(.danger):not(.whatsapp):not(.primary), dialog .small:not(.danger):not(.whatsapp):not(.primary) { background: #fff; border: 1px solid #cfd2d8; color: #303238; border-radius: 5px; }
.app .small:not(.danger):not(.whatsapp):not(.primary):hover, dialog .small:not(.danger):not(.whatsapp):not(.primary):hover { background: #eceef1; }
.app .chip, dialog .chip { border-radius: 5px; }
.app .chip.active, dialog .chip.active, .vehicle-report-tabs button.active { color: #fff; background: #303136; border-color: #303136; }
.app .row-card { background: #fff; border-color: #cfd2d8; border-left-color: #b6bac3; box-shadow: none; border-radius: 6px; }
.app .row-card:hover { border-color: #aeb3bd; box-shadow: 0 2px 8px rgba(24,25,28,.05); }
.app .work-surface { box-shadow: none; }
.app .stat { box-shadow: none; border-color: #cfd2d8; border-radius: 6px; }
.app .stat-link:hover { box-shadow: 0 2px 8px rgba(24,25,28,.06); }
.app input:focus-visible, .app select:focus-visible, .app textarea:focus-visible,
dialog input:focus-visible, dialog select:focus-visible, dialog textarea:focus-visible { outline: 2px solid #a50024; outline-offset: 2px; }
.app .badge.ready, dialog .badge.ready { color: #075f57; background: #dff4ef; }
.app-loading-spinner { border-top-color: #c9002b; }
.appointment-mode-options label.active { border-color: #c9002b; background: #fcf2f4; box-shadow: 0 0 0 2px rgba(201,0,43,.10); }
.dashboard-vehicle-match:hover { background: #fcf2f4; }
.dashboard-vehicle-match-plate mark { background: #f5dce3; }
.sidebar { background: #18191c; padding: 20px 14px; gap: 24px; }
.sidebar .brand { background: #fff; color: #19191c; border-radius: 5px; padding: 13px 10px; gap: 10px; }
.sidebar .brand-mark { width: 62px; height: 62px; border-radius: 0; flex: 0 0 62px; }
.sidebar .brand-name { font-size: 19px; line-height: 1.12; letter-spacing: 0; }
.sidebar .brand-name em { display: block; font-size: 21px; font-style: normal; color: #d5002d; }
.sidebar .brand span { color: #62646b; font-size: 10px; margin-top: 4px; }
.sidebar nav { gap: 4px; }
.sidebar .nav-button { display: flex; align-items: center; gap: 11px; }
.sidebar .navigation-icon { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.75; pointer-events: none; }
.sidebar .nav-button-with-badge { justify-content: flex-start; }
.sidebar .nav-alert-badge { margin-left: auto; }
.sidebar .nav-button { border-left: 3px solid transparent; border-radius: 4px; color: #d9dade; padding: 12px 14px; }
.sidebar .nav-button:hover { background: #28292d; color: #fff; }
.sidebar .nav-button.active { background: #332126; border-left-color: #ec1640; color: #fff; }
.sidebar .nav-button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.topbar { border-bottom: 1px solid #d8dade; padding-bottom: 20px; gap: 18px; }
.topbar .eyebrow { color: #70737b; }
.topbar h1 { color: #202126; letter-spacing: 0; }
.topbar-search input { background: #fff; border-color: #c8cbd1; border-radius: 5px; }
.topbar-search input:focus { outline: 2px solid #a50024; outline-offset: 2px; }
.auth-user-menu { border-color: #d8dade; border-radius: 5px; box-shadow: none; }
.topbar .small { background: #f0f1f3; color: #303238; border-radius: 4px; }
#dashboard { --ink: #222328; --muted: #656a73; --line: #d9dce1; --accent: #c9002b; --accent-dark: #a80024; --card-border: #cfd2d8; --shadow: none; --shadow-soft: none; }
#dashboard .dashboard-status-panel { gap: 0; background: transparent; border-bottom: 1px solid #d9dce1; }
#dashboard .dashboard-status-card { color: #33363d; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 12px 16px; }
#dashboard .dashboard-status-card + .dashboard-status-card { border-left: 1px solid #d9dce1; }
#dashboard .status-clock strong { color: #222328; }
#dashboard .dashboard-status-card small, #dashboard .dashboard-status-card span { color: #656a73; }
#dashboard .dashboard-toolbar { justify-content: flex-start; gap: 8px; }
#dashboard .dashboard-toolbar .primary { background: #fff; color: #303238; border: 1px solid #c8cbd1; border-radius: 5px; }
#dashboard .dashboard-toolbar .primary:hover { background: #e9ebee; }
#dashboard #dashboard-new-order-btn { background: #c9002b; border-color: #c9002b; color: #fff; }
#dashboard #dashboard-new-order-btn:hover { background: #a80024; }
#dashboard .stat { border: 1px solid #cfd2d8; border-radius: 6px; box-shadow: none; background: #fff; }
#dashboard .stat strong { font-size: 30px; line-height: 1.2; font-variant-numeric: tabular-nums; }
#dashboard .stat:hover { border-color: #a6aab2; box-shadow: none; }
#dashboard .stat:focus-visible { outline: 2px solid #a50024; outline-offset: 2px; }
#dashboard .dashboard-panel, #dashboard .dashboard-month-panel { border: 0; border-top: 1px solid #cbd0d6; border-radius: 0; box-shadow: none; background: transparent; padding: 18px 0; }
#dashboard .dashboard-grid { gap: 24px; }
#dashboard .dashboard-panel h2, #dashboard .dashboard-month-panel h2 { font-size: 19px; line-height: 1.3; }
#dashboard .dashboard-appointment-row { border: 0; border-bottom: 1px solid #d9dce1; border-radius: 0; background: transparent; padding: 13px 0; }
#dashboard .dashboard-appointment-row:first-child { border-top: 0; padding-top: 13px; }
#dashboard .dashboard-collection-row { border-radius: 0; box-shadow: none; }
#dashboard .dashboard-collection-amounts > div { border-radius: 4px; box-shadow: none; }
#dashboard .small { border: 1px solid #cfd2d8; border-radius: 5px; background: #fff; color: #303238; }
#dashboard .small:hover { background: #e9ebee; }
#dashboard .dashboard-attention { box-shadow: none; border-radius: 5px; }
#dashboard .dashboard-month-block { background: transparent; border: 0; border-top: 2px solid #303238; border-radius: 0; padding: 14px 0; }
@media (max-width: 700px) {
  .sidebar .brand { width: fit-content; max-width: 100%; }
  .sidebar .brand-mark { width: 48px; height: 48px; flex-basis: 48px; }
  .topbar { gap: 12px; }
  #dashboard .dashboard-status-card + .dashboard-status-card { border-left: 0; }
  #dashboard .dashboard-grid { gap: 16px; }
  #dashboard .stat strong { font-size: 26px; }
}