/* BLVD Automotive — manual Rojo Vino v1.0. Authenticated workspace UI. */
.app-shell,
.sidebar {
  --ink: var(--brand-text);
  --muted: #aeb0b3;
  --bg: var(--brand-background);
  --paper: #1f2022;
  --line: #383a3d;
  --lime: var(--brand-accent);
  --green: var(--brand-text);
  --soft: #292b2e;
  --danger: #ffb1a5;
  --blvd-accent: var(--brand-accent);
  --blvd-accent-hover: var(--brand-accent-hover);
  --blvd-charcoal: #1f2022;
  --blvd-accent-soft: #26181e;
  --radius: 10px;
  color-scheme: dark;
}
.app-shell { margin-left: 246px; background: var(--bg); color: var(--ink); }
.app-shell ::selection,
.sidebar ::selection { background: var(--brand-accent); color: #ffffff; }
.app-shell :focus-visible,
.sidebar :focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; }
.app-shell h1 { font-weight: 800; letter-spacing: -.05em; }
.app-shell h2,
.app-shell h3 { font-weight: 750; }
.app-shell .eyebrow { color: #aeb0b3; font-weight: 750; }
.app-shell .accent-period { color: var(--blvd-accent); }
.app-shell a:hover { color: #ffffff; }
.app-shell :is(.text-link, .text-button, .back-link, .welcome-link) { text-decoration: underline; text-decoration-color: var(--brand-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.app-shell :is(.text-link, .text-button, .back-link, .welcome-link):hover { text-decoration-color: #ffffff; }
.app-shell .text-link { font-size: 12px; font-weight: 700; }
.app-shell .text-button { color: #ffffff; }
.app-shell .text-button.danger { color: var(--danger); }
.app-shell .back-link { font-size: 13px; }
.app-shell .live-dot,
.sidebar .live-dot { background: var(--blvd-accent); box-shadow: 0 0 0 1px #bfc1c4; }

/* Dark navigation and restrained panel hierarchy follow the brand manual. */
.sidebar {
  width: 246px; padding: 34px 19px 22px; background: var(--brand-background); color: #f2f2f2;
  border-right: 1px solid #303235; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #595b60 var(--brand-background);
}
.sidebar .brand-caption { color: #aeb0b3; font-size: 8px; letter-spacing: .18em; margin-bottom: 36px; }
.sidebar .workspace-name { color: #d4d5d6; font-size: 12px; }
.sidebar .workspace-name .tiny { border-color: #56595c; color: #b9bbbe; padding: 2px 5px; }
.sidebar .nav-link {
  color: #bfc1c4; font-size: 13px; font-weight: 550; padding: 12px 14px;
  min-height: 46px; margin: 5px 0; border-radius: 7px;
  transition: color .16s ease, background .16s ease;
}
.sidebar .nav-link:hover { background: #1f2022; color: #f2f2f2; }
.sidebar .nav-link.active { background: var(--brand-accent); color: #ffffff; font-weight: 700; }
.sidebar .nav-link.active svg { color: #ffffff; }
.sidebar .nav-divider { background: #303235; margin: 23px 12px 17px; }
.sidebar .count { background: var(--blvd-accent); color: #ffffff; font-weight: 800; border-radius: 4px; }
.sidebar .pilot-note { color: #d4d5d6; font-size: 12px; border-color: #303235; }
.sidebar .pilot-note span { color: #aeb0b3; font-size: 10px; }
.sidebar .sidebar-user { gap: 10px; }
.sidebar .sidebar-user strong { font-size: 12px; font-weight: 700; }
.sidebar .sidebar-user small { color: #aeb0b3; font-size: 11px; }
.sidebar .avatar { background: #26181e; color: #ffffff; border: 1px solid #777a80; border-radius: 8px; }
.sidebar .icon-button { color: #bfc1c4; }
.sidebar .icon-button:hover { background: #292b2e; color: #f2f2f2; }

/* Wine actions use white labels; focus indicators stay visible on dark surfaces. */
.app-shell .topbar { background: var(--brand-background); border-color: var(--line); height: 76px; }
.app-shell .breadcrumb { font-size: 12px; color: #aeb0b3; }
.app-shell .breadcrumb span { color: #8b8d90; }
.app-shell .location { font-size: 11px; }
.app-shell .notification-button { color: #c5c7ca; }
.app-shell .notification-dot { background: var(--blvd-accent); box-shadow: 0 0 0 1px #bfc1c4; }
.app-shell .avatar { background: #26181e; color: #ffffff; border-radius: 8px; font-weight: 750; }
.app-shell .icon-button:hover { background: #292b2e; }
.app-shell .content { padding-top: 38px; padding-bottom: 44px; }
.app-shell .page-heading { margin-bottom: 30px; }
.app-shell .page-heading .eyebrow { font-size: 10px; letter-spacing: .12em; }
.app-shell .page-heading p { font-size: 14px; line-height: 1.65; }
.app-shell .button { border-radius: 6px; font-weight: 750; min-height: 46px; }
.app-shell .button.primary { background: var(--blvd-accent); border-color: var(--blvd-accent); color: #ffffff; }
.app-shell .button.primary:hover { background: var(--blvd-accent-hover); border-color: var(--blvd-accent-hover); color: #ffffff; }
.app-shell .button.primary:active { background: #761c2e; border-color: #761c2e; }
.app-shell .button.outline { background: transparent; color: #f2f2f2; border-color: #727579; }
.app-shell .button.outline:hover { background: #303235; border-color: #aeb0b3; color: #f2f2f2; }
.app-shell .button.small-button { min-height: 40px; }
.app-shell .button:disabled { transform: none; opacity: .55; }
.app-shell .app-footer { color: #8b8d90; font-size: 10px; background: var(--brand-background); }

/* Dashboard: the same charcoal surface continues into vehicle and offer cards. */
.app-shell .welcome-panel { background: #1f2022; color: #f2f2f2; border: 1px solid #383a3d; border-radius: 10px; min-height: 292px; }
.app-shell .welcome-copy { padding: 36px; }
.app-shell .welcome-copy .eyebrow { color: #ffffff; font-size: 9px; }
.app-shell .welcome-copy h2 { font-size: clamp(31px, 3.4vw, 44px); font-weight: 750; line-height: 1.12; }
.app-shell .welcome-copy p { font-size: 12px; line-height: 1.7; color: #bfc1c4; }
.app-shell .welcome-link { color: #ffffff; font-size: 12px; font-weight: 750; }
.app-shell .welcome-link:hover { color: #ffffff; }
.app-shell .welcome-art { background: #292b2e; color: #d3d5d7; }
.app-shell .welcome-art::before,
.app-shell .welcome-art::after { border-color: #44474b; }
.app-shell :is(.welcome-art img, .garage-car, .vehicle-art, .vehicle-overview img) { filter: grayscale(1); }
.app-shell .art-coordinate,
.app-shell .art-caption { font-weight: 650; color: #bfc1c4; }
.app-shell .stats-strip { padding-top: 29px; padding-bottom: 29px; }
.app-shell .stats-strip span { font-size: 12px; }
.app-shell .stats-strip strong { color: #f2f2f2; font-weight: 750; font-variant-numeric: tabular-nums; }
.app-shell .stats-strip small { font-size: 10px; }
.app-shell .section-heading h2 { font-size: 19px; }
.app-shell .request-rows { border-radius: 8px; }
.app-shell .request-row { padding-top: 21px; padding-bottom: 21px; }
.app-shell .request-row:hover { background: #292b2e; color: #f2f2f2; }
.app-shell .row-title { font-size: 13px; font-weight: 700; }
.app-shell .request-info > .muted { font-size: 11px; }
.app-shell .service-symbol { background: var(--blvd-accent-soft); color: #ffffff; border-radius: 7px; }
.app-shell .request-meta > .small-text { font-size: 10px; }
.app-shell .activity-item { font-size: 12px; line-height: 1.65; }
.app-shell .activity-item small { font-size: 10px; }
.app-shell .activity-dot { background: var(--blvd-accent); box-shadow: 0 0 0 1px #bfc1c4; }
.app-shell .demo-tag { color: #b9bbbe; border-color: #56595c; background: #292b2e; font-size: 9px; }
.app-shell .garage-card { background: #1f2022; border-color: #383a3d; border-radius: 8px; }
.app-shell .garage-card:hover { background: #292b2e; color: #f2f2f2; }
.app-shell .garage-card h3 { font-size: 19px; }
.app-shell .garage-card-bottom { font-size: 11px; }
.app-shell .reminder-line { background: #292b2e; border-color: #383a3d; color: #c5c7ca; font-size: 10px; }
.app-shell .mini-empty { background: #1f2022; }
.app-shell .empty-line { color: #ffffff; }

/* Semantic color is reserved for service state and feedback. */
.app-shell .status { background: #2c2f32; color: #c6c8ca; font-weight: 650; font-size: 10px; border-radius: 5px; }
.app-shell .status-open { background: #3c2e16; color: #f3c77e; }
.app-shell :is(.status-selected, .status-received, .status-diagnosis) { background: #202c46; color: #bed2ff; }
.app-shell :is(.status-in_progress, .status-quality) { background: #163442; color: #abd8ed; }
.app-shell :is(.status-ready, .status-completed) { background: #183727; color: #a4d7b2; }
.app-shell .status-cancelled { background: #421f1f; color: #ffc0b2; }
.app-shell .message { background: #183727; color: #b5dfc0; border-color: #3c7250; }
.app-shell .message.error { background: #421f1f; color: #ffc0b2; border-color: #86483d; }
.app-shell .message.warning { background: #3c2e16; color: #f3c77e; border-color: #85663a; }
.app-shell :is(.reminder-banner.due, .reminder-line.due) { background: #3c2e16 !important; color: #f3c77e !important; border-color: #85663a; }

/* Forms retain large controls, visible borders and native dark widgets. */
.app-shell :is(.form-surface, .vehicle-card, .quote-card, .booking-summary) { background: #1f2022; border-radius: 9px; border-color: #383a3d; }
.app-shell .field > label { font-size: 13px; font-weight: 700; }
.app-shell .field input:not([type=checkbox]):not([type=radio]),
.app-shell .field textarea,
.app-shell .field select,
.app-shell select { border-color: #727579; border-radius: 6px; background: #131517; color: #f2f2f2; min-height: 46px; }
.app-shell .field input::placeholder,
.app-shell .field textarea::placeholder { color: #9c9ea1; }
.app-shell .field input:focus,
.app-shell .field textarea:focus,
.app-shell .field select:focus,
.app-shell select:focus { outline: 2px solid #ffffff; outline-offset: 2px; border-color: #ffffff; }
.app-shell .help-text { font-size: 12px; line-height: 1.65; }
.app-shell :is(.check-label input, .checkbox-field input) { accent-color: var(--brand-accent); }
.app-shell .checkbox-field > div > div { background: #1f2022; border-color: #727579; }
.app-shell .checkbox-field > div > div > label { font-size: 13px; }
.app-shell .checkbox-field > div > div:has(input:checked) { border-color: #bfc1c4; background: var(--brand-accent); color: #ffffff; }
.app-shell :is(.step-marker, .subtle-note svg) { color: #ffffff; }
.app-shell .steps-list li > span { background: var(--blvd-accent-soft); color: #ffffff; font-weight: 750; }
.app-shell .upload-zone { border-color: #727579; background: #181a1c; }
.app-shell input::file-selector-button { color: #f2f2f2; background: #303235; border: 1px solid #727579; border-radius: 5px; padding: 8px 12px; margin-right: 12px; cursor: pointer; }
.app-shell .filter-bar select,
.app-shell .inline-form select { min-height: 40px; }
.app-shell .filter-bar label { font-size: 13px; }
.app-shell .plate { background: #292b2e; border-color: #727579; color: #f2f2f2; }
.app-shell .spec-pair dt { font-size: 11px; }
.app-shell .spec-pair dd { font-size: 14px; }
.app-shell .action-banner { background: #1f2022; border-color: #53565a; }
.app-shell .neutral-count { background: #303235; color: #c5c7ca; }
.app-shell .quote-total-preview { background: var(--blvd-accent-soft); color: #f2f2f2; }
.app-shell .quote-total-preview small { color: #bfc1c4; }

/* Comparable prices and servicing details use the same accessible hierarchy. */
.app-shell .workshop-monogram { background: var(--blvd-accent-soft); color: #ffffff; }
.app-shell .quote-top h3 { font-size: 14px; font-weight: 750; }
.app-shell .quote-price { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }
.app-shell .quote-price > span { font-size: 10px; }
.app-shell .quote-facts > div { font-size: 12px; }
.app-shell .quote-facts dd { font-weight: 650; }
.app-shell .quote-breakdown { font-size: 12px; }
.app-shell .quote-breakdown summary { min-height: 44px; }
.app-shell .quote-line { font-size: 12px; }
.app-shell .quote-line > span,
.app-shell .quote-validity { font-size: 11px; }
.app-shell .quote-card .button { font-size: 12px; }
.app-shell .inspection-note { background: #3c2e16; color: #f3c77e; font-size: 11px; }
.app-shell .rating-inline { color: #edc577; font-size: 11px; }
.app-shell .rating-inline svg { fill: #edbd58; stroke: #edbd58; }
.app-shell .timeline li::before { background: #53565a; }
.app-shell .timeline-dot { background: var(--blvd-accent-soft); color: #ffffff; }
.app-shell .timeline-date,
.app-shell .timeline small { font-size: 10px; }
.app-shell .timeline p { font-size: 13px; }
.app-shell .service-action { background: #1f2022; border-color: #53565a; border-radius: 8px; }
.app-shell .service-action .button { font-size: 12px; }
.app-shell .booking-price { font-variant-numeric: tabular-nums; font-weight: 800; }
.app-shell .contact-block { font-size: 12px; }
.app-shell .adjustment { background: #3c2e16; border-color: #85663a; }
.app-shell .adjustment .eyebrow { color: #f3c77e; font-size: 10px; }
.app-shell .vehicle-overview { background: #1f2022; border: 1px solid #383a3d; border-radius: 9px; }
.app-shell .vehicle-overview dt { font-size: 12px; }
.app-shell .reminder-banner { background: #1f2022; border-color: #53565a; }
.app-shell .reminder-banner > svg { color: #ffffff; }
.app-shell .reminder-banner small { font-size: 11px; }

/* Workshop cards use charcoal, with no decorative green or cream panels. */
.app-shell .workshop-card { background: #1f2022; border-radius: 8px; border-color: #383a3d; }
.app-shell .workshop-cover { background: #292b2e; color: #ffffff; }
.app-shell .workshop-card:nth-child(2n) .workshop-cover { background: #292b2e; color: #ffffff; }
.app-shell .workshop-card:nth-child(3n) .workshop-cover { background: #242629; color: #c5c7ca; }
.app-shell .workshop-cover-label { color: #c5c7ca; font-size: 10px; }
.app-shell .workshop-cover > svg { color: #bfc1c4; opacity: .25; }
.app-shell .workshop-large-initial { color: #f2f2f2; }
.app-shell .verified-tag { color: #a4d7b2; font-size: 10px; }
.app-shell .workshop-card p { font-size: 12px; }
.app-shell .tag-list span { background: #292b2e; color: #c5c7ca; border-color: #53565a; font-size: 10px; }
.app-shell .workshop-card-footer > span { font-size: 10px; }
.app-shell .workshop-card-footer .text-link { font-size: 11px; }
.app-shell .reputation-panel { background: #1f2022; border-color: #53565a; border-radius: 8px; }
.app-shell .reputation-panel > strong { font-weight: 750; color: #f2f2f2; }
.app-shell .notification-item.unread { background: var(--blvd-accent-soft); }
.app-shell .notification-item:hover { background: #303235; color: #f2f2f2; }
.app-shell .table-wrap { border-radius: 8px; }
.app-shell th { background: #292b2e; color: #c5c7ca; font-size: 10px; }
.app-shell td { font-size: 12px; }
.app-shell td small { font-size: 11px; }

@media (max-width: 1200px) {
  .sidebar { width: 220px; padding-left: 15px; padding-right: 15px; }
  .app-shell { margin-left: 220px; }
  .app-shell .welcome-copy { padding: 30px; }
  .app-shell .quote-price { font-size: 28px; }
  .app-shell .quote-top h3 { font-size: 13px; }
}

@media (max-width: 1000px) {
  .app-shell .quote-price { font-size: 31px; }
  .app-shell .quote-facts { gap: 0 22px; }
  .app-shell .quote-top h3 { font-size: 15px; }
}

@media (max-width: 760px) {
  .sidebar { width: 246px; box-shadow: 10px 0 30px #0a0a0c80; }
  .app-shell { margin-left: 0; }
  .app-shell .content { padding-top: 28px; padding-bottom: 34px; }
  .app-shell .topbar { height: 68px; }
  .app-shell .breadcrumb { font-size: 11px; }
  .app-shell .page-heading h1 { font-size: 30px; }
  .app-shell .page-heading p { font-size: 13px; }
  .app-shell .page-heading > .button { min-height: 44px; font-size: 12px; }
  .app-shell .welcome-panel { min-height: 280px; }
  .app-shell .welcome-copy { padding: 28px; }
  .app-shell .welcome-copy h2 { font-size: 34px; }
  .app-shell .welcome-copy .eyebrow { font-size: 8px; }
  .app-shell .welcome-copy p { font-size: 11px; }
  .app-shell .welcome-link { font-size: 11px; }
  .app-shell .stats-strip span { font-size: 11px; }
  .app-shell .stats-strip strong { font-size: 29px; }
  .app-shell .request-row { padding-top: 18px; padding-bottom: 18px; }
  .app-shell .request-info > .muted { font-size: 11px; }
  .app-shell .garage-card h3 { font-size: 17px; }
  .app-shell .garage-card-bottom { font-size: 10px; }
  .app-shell .reminder-line { font-size: 10px; }
  .app-shell .field input:not([type=checkbox]):not([type=radio]),
  .app-shell .field textarea,
  .app-shell .field select,
  .app-shell select { font-size: 16px; }
  .app-shell .filter-bar select,
  .app-shell .inline-form select { font-size: 14px; min-height: 44px; }
  .app-shell .quote-price { font-size: 28px; }
  .app-shell .quote-facts dt,
  .app-shell .quote-facts dd { font-size: 12px; }
  .app-shell .quote-price > span { font-size: 10px; }
  .app-shell .app-footer { font-size: 10px; }
  .app-shell .workshop-card h2 { font-size: 19px; }
}

@media (max-width: 460px) {
  .app-shell .content { padding-left: 17px; padding-right: 17px; }
  .app-shell .welcome-copy { padding: 25px 22px; width: 72%; }
  .app-shell .welcome-copy h2 { font-size: 31px; }
  .app-shell .welcome-copy p { max-width: 180px; }
  .app-shell .welcome-art { left: 66%; }
  .app-shell .welcome-art img { top: 49%; }
  .app-shell .welcome-art .art-coordinate { font-size: 6px; right: 8px; }
  .app-shell .welcome-art .art-caption { display: none; }
  .app-shell .stats-strip span { font-size: 10px; }
  .app-shell .stats-strip strong { font-size: 27px; }
  .app-shell .section-heading h2 { font-size: 18px; }
  .app-shell .row-title { font-size: 12px; }
  .app-shell .garage-card h3 { font-size: 21px; }
  .app-shell .garage-card-bottom { font-size: 11px; }
  .app-shell .quote-top h3 { font-size: 16px; }
  .app-shell .quote-price { font-size: 32px; }
  .app-shell .quote-facts { display: block; }
  .app-shell .form-actions .button { font-size: 12px; }
  .app-shell .page-heading > .button-row > .button { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-link { transition: none; }
}

/* UI/UX Pro Max review: comfortable controls for the mobile web app. */
@media(max-width:760px){.app-shell .icon-button,.sidebar .icon-button,.app-shell .notification-button{min-width:44px;min-height:44px}.app-shell .filter-bar select,.app-shell .inline-form select{min-height:44px}.app-shell .back-link{display:inline-flex;align-items:center;min-height:44px}.app-shell .button{min-height:44px}.app-shell .form-actions{flex-wrap:wrap;gap:12px}.app-shell .text-button{min-height:44px}}

.sidebar-close{display:none}@media(max-width:760px){.sidebar-close{display:inline-flex;position:absolute;right:8px;top:8px}.menu-open{overflow:hidden}}@media(prefers-reduced-motion:reduce){.sidebar{transition:none}}