/* Approved Deal Cars glass: original colors, transparent surfaces.
   Base palette, artwork, type, layouts and semantic colors stay in their original stylesheets. */
html:root {
  --glass-surface: var(--workspace-surface, var(--surface));
  --glass-ink: var(--workspace-ink, var(--store-ink, var(--ink)));
  --glass-fill: color-mix(in srgb, var(--glass-surface) 42%, transparent);
  --glass-control: color-mix(in srgb, var(--glass-surface) 50%, transparent);
  --glass-raised: color-mix(in srgb, var(--glass-surface) 76%, transparent);
  --glass-record: color-mix(in srgb, var(--glass-surface) 92%, transparent);
  --glass-edge: color-mix(in srgb, var(--glass-ink) 17%, transparent);
  --glass-shine: rgb(255 255 255 / 16%);
  --glass-highlight: inset 0 1px 0 rgb(255 255 255 / 22%), inset 0 -1px 0 rgb(255 255 255 / 5%);
  --glass-shadow: 0 10px 28px rgb(0 0 0 / 9%);
  --glass-floating-shadow: 0 28px 80px rgb(0 0 0 / 30%);
  --glass-blur: blur(18px);
  --glass-control-blur: blur(10px);
  --glass-raised-blur: blur(24px);
  --glass-sheen: linear-gradient(145deg, var(--glass-shine), transparent 42%, rgb(255 255 255 / 2%));
  --glass-selected: var(--brand-soft, color-mix(in srgb, var(--brand) 12%, transparent));
}
html:root[data-theme="dark"] { --glass-shine: rgb(255 255 255 / 7%); }

/* Continuous navigation glass; inherit all original geometry and accent choices. */
html:root :is(.sidebar, .topbar, .top, .mobile-navigation,
  .vehicle-history-tabs, .vehicle-workspace-tabs, .layout-switch, .workspace-views, .invoice-view-toggle, .aw-tabs, .tabs) {
  background-color: var(--glass-fill);
  background-image: var(--glass-sheen);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
html:root :is(.vehicle-history-tabs, .vehicle-workspace-tabs, .layout-switch, .workspace-views, .invoice-view-toggle, .aw-tabs, .tabs) {
  max-width: 100%;
  border: 1px solid var(--glass-edge);
  border-radius: 17px;
  padding: 5px;
  gap: 6px;
}
html:root :is(.vehicle-history-tab, .vehicle-workspace-tabs .btn, .view-pill, .aw-tabs button, .tabs button, .layout-switch button, .invoice-view-toggle .btn) {
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}
html:root :is(.vehicle-history-tab.active, .vehicle-history-tab[aria-selected="true"],
  .vehicle-workspace-tabs .btn[aria-selected="true"], .view-pill[aria-pressed="true"],
  .aw-tabs button[aria-current], .tabs button.active, .layout-switch button[aria-pressed="true"], .invoice-view-toggle .btn[aria-pressed="true"]) {
  background: var(--glass-selected);
  color: var(--brand-strong, var(--brand));
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%);
}
html:root[data-theme="dark"] :is(.vehicle-history-tab.active, .vehicle-history-tab[aria-selected="true"],
  .vehicle-workspace-tabs .btn[aria-selected="true"], .view-pill[aria-pressed="true"],
  .aw-tabs button[aria-current], .tabs button.active, .layout-switch button[aria-pressed="true"], .invoice-view-toggle .btn[aria-pressed="true"]) {
  color: var(--ink, var(--store-ink));
}
html:root :is(.vehicle-history-tab, .view-pill, .aw-tabs button, .tabs button):hover {
  background-color: var(--glass-control);
}
html:root .aw-tabs { width: fit-content; }

/* Glass secondary controls. Filled primary, danger and status colors remain original. */
html:root :is(.btn-secondary, .icon-btn, .quick-nav-trigger,
  .top button:not(.primary), .top nav a, .pager button, .savebar button:not(.primary), .contact-options a) {
  background-color: var(--glass-control);
  background-image: linear-gradient(155deg, var(--glass-shine), transparent 55%);
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-control-blur);
  backdrop-filter: var(--glass-control-blur);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
}
html:root :is(.btn-secondary, .icon-btn, .quick-nav-trigger):hover {
  background-color: var(--glass-raised);
}
html:root :is(.input, .select, .textarea, .filters input, .filters select, .lang select,
  .panel input:not([type="checkbox"]):not([type="radio"]), .panel select, .panel textarea,
  dialog input:not([type="checkbox"]):not([type="radio"]), dialog select, dialog textarea) {
  background-color: var(--glass-control);
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-control-blur);
  backdrop-filter: var(--glass-control-blur);
}

/* Quiet records: translucent as a group, without an expensive blur on every row. */
html:root #mainContent :is(.panel, .stat-card, .vehicle-card, .invoice-card,
  .home-card, .home-attention, .billing-card, .billing-panel, .health-card, .aw-table-wrap, .aw-editor),
html:root :is(main > .panel, .card, .filters, .table-wrap, .empty, .stat) {
  background-color: var(--glass-record);
  border-color: var(--glass-edge);
}
html:root :is(.workspace-viewbar, .bm-filter-shell, .pagination, .panel-head, .modal-head,
  .modal-foot, .modal-footer, .quick-nav-search, .quick-nav-footer, .tour-footer) {
  background-color: transparent;
}
html:root :is(.data-table, .bm-table, .aw-table, .price, .stat-card strong) {
  font-variant-numeric: tabular-nums;
}

/* Raised glass stays readable over changing content. Preserve focus and scroll behavior. */
html:root :is(.auth-card, .page-utilities-menu, .bm-filter-menu, .bm-column-menu,
  .bm-filter-popover, .savebar, .app-update-notice, .toast, .busy-card, #notice, .contact-fab, .aw-notice) {
  background-color: var(--glass-raised);
  background-image: var(--glass-sheen);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
html:root dialog:has(.modal) { background: transparent; border: 0; }
html:root :is(dialog .modal, dialog:not(:has(.modal)):not(#photoDialog)) {
  background-color: var(--glass-raised);
  background-image: var(--glass-sheen);
  color: var(--glass-ink);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-highlight), var(--glass-floating-shadow);
  -webkit-backdrop-filter: var(--glass-raised-blur);
  backdrop-filter: var(--glass-raised-blur);
}
html:root dialog::backdrop { background: rgb(0 0 0 / 30%); }
html:root :is(.btn, .icon-btn, .button):disabled { box-shadow: none; }
html:root :is(input, textarea) { caret-color: var(--brand); }
html:root :is(button, a, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}
html:root :is(.sidebar, .modal-body, .quick-nav-results, .data-table-wrap, .aw-tabs) {
  scrollbar-color: var(--muted) transparent;
  scrollbar-width: thin;
}
html:root ::selection { background: var(--brand-strong, var(--store-action, var(--brand))); color: #fff; }

@media (max-width: 560px) {
  html:root .aw-tabs { width: 100%; gap: 2px; }
  html:root .aw-tabs button { flex: 1; padding-inline: 8px; font-size: 13px; }
  html:root .aw-tabs span { margin-inline-start: 4px; }
}
/* A 320px viewport with a persistent scrollbar has less than 320px of content space. */
@media (max-width: 360px) {
  html:root { min-width: 0; }
}
/* Accessible solid surfaces use the same palette; never invent a replacement theme. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:root {
    --glass-fill: var(--glass-surface); --glass-control: var(--glass-surface);
    --glass-raised: var(--glass-surface); --glass-record: var(--glass-surface);
    --glass-sheen: none;
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html:root {
    --glass-fill: var(--glass-surface); --glass-control: var(--glass-surface);
    --glass-raised: var(--glass-surface); --glass-record: var(--glass-surface);
    --glass-blur: none; --glass-control-blur: none; --glass-raised-blur: none;
    --glass-sheen: none;
  }
}
@media (forced-colors: active) {
  html:root {
    --glass-surface: Canvas; --glass-ink: CanvasText; --glass-edge: ButtonBorder;
    --glass-fill: Canvas; --glass-control: Canvas; --glass-raised: Canvas; --glass-record: Canvas;
    --glass-selected: Highlight; --glass-blur: none; --glass-control-blur: none; --glass-raised-blur: none;
    --glass-sheen: none;
  }
  html:root :is(.vehicle-history-tab.active, .vehicle-history-tab[aria-selected="true"],
    .vehicle-workspace-tabs .btn[aria-selected="true"], .view-pill[aria-pressed="true"],
    .aw-tabs button[aria-current], .tabs button.active, .layout-switch button[aria-pressed="true"], .invoice-view-toggle .btn[aria-pressed="true"]) { color: HighlightText; }
  html:root :focus-visible { outline-color: Highlight; }
}
@media print {
  html:root {
    --glass-fill: #fff; --glass-raised: #fff; --glass-control: #fff; --glass-record: #fff;
    --glass-ink: #000; --glass-edge: #777; --glass-sheen: none;
    --glass-blur: none; --glass-control-blur: none; --glass-raised-blur: none;
    --glass-shadow: none; --glass-floating-shadow: none; --glass-highlight: none;
  }
}