/* ServicePass V3.0.0 shared visual system
   Shared chrome and visual properties; working content geometry remains page-owned. */

html { background: var(--sp-bg); }
body {
  color: var(--sp-text);
  background:
    radial-gradient(circle at 82% -8%, rgba(138,32,54,.12), transparent 30rem),
    radial-gradient(circle at 8% 12%, rgba(104,122,145,.085), transparent 32rem),
    linear-gradient(150deg,rgba(255,255,255,.018),transparent 42%),
    var(--sp-bg);
  background-attachment:fixed;
}
::selection { color:#fff; background:rgba(167,42,66,.58); }

/* Shared typography and restrained hierarchy. */
h1, h2, h3 { color:var(--sp-text); text-wrap:balance; }
.eyebrow, .admin-kicker, .login-kicker, .workspace-kicker {
  color:var(--sp-muted);
  letter-spacing:.105em!important;
}
.subtitle, .login-copy, .signup-copy { color:var(--sp-muted); }

/* Controls remain solid and predictable, including native selects on touch devices. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border-color:var(--sp-border)!important;
  border-radius:var(--sp-radius-md)!important;
  color:var(--sp-text)!important;
  background:var(--sp-surface)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.025) inset;
}
input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover { border-color:var(--sp-border-strong)!important; }
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color:rgba(167,42,66,.72)!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(138,32,54,.16)!important;
}
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
  color:var(--sp-subtle)!important;
  border-color:rgba(210,220,232,.07)!important;
  background:#101216!important;
}

/* Buttons use one family without changing compact/icon dimensions owned by each page. */
.primary-button,
.button.primary,
.qr-actions button:not(.secondary),
button.primary,
.invoice-toolbar .primary {
  border-color:rgba(195,67,91,.62)!important;
  border-radius:var(--sp-radius-md)!important;
  color:#fff!important;
  background:linear-gradient(145deg,var(--sp-accent-hover),var(--sp-accent))!important;
  box-shadow:0 8px 20px rgba(86,15,30,.28), 0 1px 0 rgba(255,255,255,.13) inset!important;
}
.primary-button:hover,
.button.primary:hover,
.qr-actions button:not(.secondary):hover,
button.primary:hover,
.invoice-toolbar .primary:hover {
  background:linear-gradient(145deg,#b4324c,var(--sp-accent-hover))!important;
  box-shadow:0 10px 24px rgba(86,15,30,.34), 0 1px 0 rgba(255,255,255,.15) inset!important;
}
.secondary-button,
.button:not(.primary),
.qr-actions button.secondary,
.ghost-button,
.view-link,
.open-vehicle-button,
.tab-button,
.invoice-toolbar button:not(.primary) {
  border:1px solid var(--sp-border)!important;
  border-radius:var(--sp-radius-md)!important;
  color:var(--sp-text)!important;
  background:linear-gradient(180deg,var(--sp-surface-3),var(--sp-surface-2))!important;
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset!important;
}
.secondary-button:hover,
.button:not(.primary):hover,
.qr-actions button.secondary:hover,
.ghost-button:hover,
.view-link:hover,
.open-vehicle-button:hover,
.tab-button:hover,
.invoice-toolbar button:not(.primary):hover {
  border-color:var(--sp-border-strong)!important;
  background:linear-gradient(180deg,#272c33,var(--sp-surface-3))!important;
}
.icon-button,
.menu-button,
.app-menu-button,
.app-search-button,
.app-notification-button,
.customer-invoice-close {
  border-color:var(--sp-border)!important;
  border-radius:var(--sp-radius-sm)!important;
  color:var(--sp-muted)!important;
  background:var(--sp-surface-2)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset!important;
}
.icon-button:hover,
.menu-button:hover,
.app-menu-button:hover,
.app-search-button:hover,
.app-notification-button:hover,
.customer-invoice-close:hover {
  color:var(--sp-text)!important;
  border-color:var(--sp-border-strong)!important;
  background:var(--sp-surface-3)!important;
}
.danger-button,
.vehicle-delete-button,
.delete-vehicle-menu-button,
[data-delete-user],
[data-permanently-delete-workshop] {
  border-color:rgba(223,89,102,.34)!important;
  border-radius:var(--sp-radius-md)!important;
  color:#ff9aa6!important;
  background:rgba(116,25,37,.15)!important;
}
button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline:2px solid rgba(189,64,80,.72)!important;
  outline-offset:2px!important;
}

/* Custom selects share the native field surface, retaining their own compact sizing. */
.sp-select-trigger {
  border-color:var(--sp-border)!important;
  border-radius:var(--sp-radius-md)!important;
  background:var(--sp-surface)!important;
}
.sp-select-trigger:hover { border-color:var(--sp-border-strong)!important; }
.sp-select.is-open .sp-select-trigger {
  border-color:rgba(167,42,66,.72)!important;
  box-shadow:0 0 0 3px rgba(138,32,54,.16)!important;
}
:is(.primary-button,.secondary-button,.ghost-button,.icon-button,.sp-select-trigger):disabled {
  opacity:.45;
  cursor:not-allowed;
  transform:none!important;
}

/* Public page chrome shares the header rhythm; auth cards and printed sheets remain page-owned. */
@media screen {
  .about-nav, .topbar, .qr-topbar {
    box-sizing:border-box;
    min-height:var(--sp-header-height);
  }
}

/* Dense working content stays solid. */
.admin-card,
.settings-card,
.vehicle-panel,
.platform-card,
.workspace-service-editor,
.service-section-card,
.inspection-section,
.checklist-section,
.job-details-accordion,
.workflow-invoice-lines,
.quick-work-row,
.user-card {
  border-color:var(--sp-border)!important;
  border-radius:var(--sp-radius-lg)!important;
  background:var(--sp-surface)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.025) inset!important;
}
.form-section,
.job-line-group,
.inspection-check-list,
.pro-invoice-line,
.workflow-invoice-line,
.record-item,
.workspace-record {
  border-color:var(--sp-border)!important;
  border-radius:var(--sp-radius-md)!important;
  background:var(--sp-surface-2)!important;
}

/* Main SP header: a visibly floating glass panel with the page showing around it. */
.app-header {
  border:1px solid var(--sp-glass-border)!important;
  border-radius:var(--sp-radius-xl)!important;
  background:linear-gradient(135deg,rgba(34,40,48,.78),rgba(13,16,20,.68))!important;
  box-shadow:var(--sp-shadow-floating)!important;
  -webkit-backdrop-filter:blur(var(--sp-blur)) saturate(128%);
  backdrop-filter:blur(var(--sp-blur)) saturate(128%);
}
.app-header-inner { color:var(--sp-text); }
.app-account-copy span { color:var(--sp-muted)!important; }
.app-header .app-menu-button,
.app-header .app-notification-button,
.app-header .app-search-button {
  border-color:transparent!important;
  color:var(--sp-muted)!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:none!important;
}
.app-header .app-menu-button:hover,
.app-header .app-notification-button:hover,
.app-header :is(.app-menu-button,.app-search-button,.app-notification-button)[aria-expanded="true"],
.app-header .app-search-button:hover {
  border-color:rgba(255,255,255,.08)!important;
  color:var(--sp-text)!important;
  background:rgba(255,255,255,.075)!important;
}
.app-menu-popover,
.app-search-popover,
.vehicle-menu-popover,
.page-menu-popover,
.sp-select-menu,
.job-line-approval-menu,
.pro-dashboard-view-menu,
.pro-secondary-filters-menu,
.app-notification-popover,
.current-job-flag-options {
  border:1px solid var(--sp-glass-border)!important;
  border-radius:var(--sp-menu-radius)!important;
  background:var(--sp-menu-background)!important;
  box-shadow:var(--sp-shadow-floating)!important;
  -webkit-backdrop-filter:blur(var(--sp-blur)) saturate(126%);
  backdrop-filter:blur(var(--sp-blur)) saturate(126%);
}
.app-menu-item,
.app-search-result,
.page-menu-popover a,
.current-job-flag-options button { border-radius:var(--sp-radius-sm)!important; }
.app-menu-item:hover,
.app-search-result:hover,
.page-menu-popover a:hover,
.current-job-flag-options button:hover {
  color:var(--sp-text)!important;
  background:rgba(255,255,255,.055)!important;
}
.app-menu-item[aria-current="page"],
.sp-select-menu button.is-selected,
.pro-dashboard-view-menu button.is-active,
.app-search-scopes button.is-active {
  color:#fff!important;
  border-color:rgba(167,42,66,.4)!important;
  background:var(--sp-accent-soft)!important;
}

/* Settings: same elevated tab language, solid readable forms. */
.settings-tabs {
  gap:6px!important;
  padding:8px!important;
  border:1px solid var(--sp-glass-border)!important;
  border-radius:var(--sp-radius-xl)!important;
  background:linear-gradient(135deg,rgba(33,39,47,.76),rgba(13,16,20,.7))!important;
  box-shadow:0 22px 48px -26px rgba(0,0,0,.9),0 1px 0 var(--sp-glass-highlight) inset!important;
  -webkit-backdrop-filter:blur(20px) saturate(124%);
  backdrop-filter:blur(20px) saturate(124%);
}
.settings-tab {
  flex:0 0 auto!important;
  border-color:transparent!important;
  border-radius:var(--sp-radius-md)!important;
  color:var(--sp-muted)!important;
  background:transparent!important;
  box-shadow:none!important;
}
.settings-tab:hover { color:var(--sp-text)!important; border-color:transparent!important; background:rgba(255,255,255,.06)!important; }
.settings-tab.is-active {
  color:#fff!important;
  border-color:rgba(195,67,91,.54)!important;
  background:linear-gradient(145deg,var(--sp-accent-hover),var(--sp-accent))!important;
  box-shadow:0 8px 20px rgba(75,13,25,.34),0 1px 0 rgba(255,255,255,.13) inset!important;
}
.settings-category-panel>.settings-card,
.job-number-settings-card { border-color:var(--sp-border)!important; background:var(--sp-surface)!important; }
.job-number-toggle { background:var(--sp-surface-2)!important; }

/* Dashboard: one layered glass heading/control stack above solid workflow lanes. */
.dashboard-search-panel,
.pro-dashboard-heading {
  border:1px solid var(--sp-glass-border)!important;
  border-radius:var(--sp-radius-xl)!important;
  background:linear-gradient(135deg,rgba(31,37,44,.72),rgba(13,16,20,.68))!important;
  box-shadow:0 20px 44px -28px rgba(0,0,0,.9),0 1px 0 var(--sp-glass-highlight) inset!important;
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  backdrop-filter:blur(18px) saturate(120%);
}
body.workshop-pro-active .dashboard-main {
  padding-top:34px!important;
}
body.workshop-pro-active .dashboard-shell.dashboard-main {
  width:calc(100% - 2 * var(--app-header-inline));
}
#announcementMount.sp-announcement-wrap:not([hidden]) + .dashboard-main{padding-top:0!important}
body.workshop-pro-active .vehicle-panel { padding-top:0!important; }
.pro-workflow-section { isolation:isolate; }
.pro-dashboard-heading {
  position:relative;
  z-index:3;
  width:100%;
  margin:0 auto!important;
  padding:14px 16px!important;
  border-radius:var(--sp-radius-xl) var(--sp-radius-xl) var(--sp-radius-lg) var(--sp-radius-lg)!important;
}
.pro-workflow-toolbar {
  position:relative;
  z-index:2;
  width:100%;
  margin:-6px auto 16px!important;
  padding:15px 12px 10px!important;
  border:1px solid var(--sp-glass-border)!important;
  border-top-color:transparent!important;
  border-radius:0 0 14px 14px!important;
  background:linear-gradient(135deg,rgba(26,31,38,.82),rgba(12,15,19,.78))!important;
  box-shadow:0 22px 44px -28px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.035) inset!important;
  -webkit-backdrop-filter:blur(16px) saturate(118%);
  backdrop-filter:blur(16px) saturate(118%);
}

@media(min-width:761px) {
  .workspace-shell {
    margin-top:0!important;
    padding-top:20px!important;
  }
}
body.workshop-pro-active .vehicle-panel {
  padding-inline:0;
  border-color:transparent!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.pro-workflow-section { border-color:transparent!important; background:transparent!important; }
.pro-workflow-board { gap:14px!important; padding:6px 3px 18px!important; }
.pro-workflow-column {
  padding:12px!important;
  border-color:rgba(225,232,240,.11)!important;
  border-radius:var(--sp-radius-xl)!important;
  background:#101318!important;
  box-shadow:0 18px 38px rgba(0,0,0,.26),0 1px 0 rgba(255,255,255,.025) inset!important;
}
.pro-workflow-column-header {
  margin:-12px -12px 11px!important;
  padding:12px 13px!important;
  border-bottom-color:var(--sp-border)!important;
  border-radius:var(--sp-radius-xl) var(--sp-radius-xl) 0 0!important;
  background:linear-gradient(180deg,var(--sp-surface-2),#15181d)!important;
}
.pro-job-card {
  border-color:var(--sp-border)!important;
  border-radius:var(--sp-radius-lg)!important;
  background:var(--sp-surface)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.26),0 1px 0 rgba(255,255,255,.025) inset!important;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease!important;
}
.pro-job-card:hover {
  border-color:var(--sp-border-strong)!important;
  box-shadow:0 18px 36px rgba(0,0,0,.38),0 1px 0 rgba(255,255,255,.04) inset!important;
  transform:translateY(-2px);
}
.pro-job-card.is-expanded { border-color:rgba(225,232,240,.19)!important; box-shadow:0 16px 32px rgba(0,0,0,.32)!important; }
.pro-job-card.is-dragging { box-shadow:0 26px 54px rgba(0,0,0,.48)!important; transform:scale(1.015) rotate(.25deg); }
.pro-job-card-body { border-top-color:var(--sp-border)!important; background:#121519!important; }
.pro-job-card::before { background:var(--job-marker)!important; }
.pro-workflow-column.is-drop-target {
  border-color:rgba(167,42,66,.72)!important;
  background:rgba(138,32,54,.065)!important;
}

/* Modal shells use glass; inner working areas remain solid. */
.vehicle-dialog,
.pro-upcoming-dialog,
.platform-dialog,
.user-dialog,
.admin-next-service-dialog,
.customer-invoice-dialog {
  border:1px solid var(--sp-glass-border)!important;
  border-radius:var(--sp-radius-modal)!important;
  background:linear-gradient(145deg,rgba(35,41,49,.9),rgba(12,15,19,.86))!important;
  box-shadow:var(--sp-shadow-floating)!important;
  -webkit-backdrop-filter:blur(22px) saturate(124%);
  backdrop-filter:blur(22px) saturate(124%);
}
.vehicle-dialog::backdrop,
.pro-upcoming-dialog::backdrop,
.platform-dialog::backdrop,
.user-dialog::backdrop,
.admin-next-service-dialog::backdrop,
.customer-invoice-dialog::backdrop {
  background:rgba(3,5,8,.74)!important;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.dialog-header,
.pro-upcoming-dialog-header {
  border-bottom-color:var(--sp-border)!important;
  background:rgba(24,28,33,.9)!important;
}
.pro-upcoming-bookings-list,
.pro-history-list { background:#0f1216!important; }

/* Public vehicle history: lighter hierarchy, same ServicePass identity. */
.vehicle-header {
  border-color:var(--sp-glass-border)!important;
  border-radius:var(--sp-radius-xl)!important;
  background:linear-gradient(145deg,rgba(29,33,39,.96),rgba(18,21,25,.97))!important;
  box-shadow:0 20px 48px rgba(0,0,0,.28), 0 1px 0 var(--sp-glass-highlight) inset!important;
}
.customer-reminder-card,
.service-card,
.history-card,
.next-service-card {
  border-color:var(--sp-border)!important;
  border-radius:var(--sp-radius-lg)!important;
  background:var(--sp-surface)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.19)!important;
}
.customer-reminder-card:hover,
.history-card:hover { border-color:var(--sp-border-strong)!important; }
.customer-reminder-card .countdown {
  border-color:var(--sp-border)!important;
  background:var(--sp-surface-2)!important;
}
.history-expand-toggle,
.history-invoice-link,
.customer-copy-button {
  border-color:var(--sp-border)!important;
  color:var(--sp-muted)!important;
  background:var(--sp-surface-2)!important;
}
.history-expand-toggle:hover,
.history-invoice-link:hover,
.customer-copy-button:hover { color:var(--sp-text)!important; border-color:var(--sp-border-strong)!important; }
.image-lightbox { background:rgba(2,4,6,.92)!important; }

/* Invoice chrome is V3; printable invoice document remains intentionally white and stable. */
.invoice-screen { color:var(--sp-text); }
.invoice-toolbar {
  padding:8px;
  border:1px solid var(--sp-glass-border);
  border-radius:var(--sp-radius-xl);
  background:linear-gradient(135deg,rgba(31,37,44,.74),rgba(13,16,20,.68));
  box-shadow:0 20px 44px -26px rgba(0,0,0,.9),0 1px 0 var(--sp-glass-highlight) inset;
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  backdrop-filter:blur(18px) saturate(120%);
}
.invoice-paper { box-shadow:0 28px 80px rgba(0,0,0,.35)!important; }
.invoice-loading { border-color:var(--sp-border)!important; background:var(--sp-surface)!important; }

/* Auth, legal, QR and platform surfaces share the same finish. */
.login-card,
.signup-card,
.setup-card,
.legal,
.about-shell .feature,
.about-shell .pricing-card,
.qr-card,
.platform-card,
.announcement-admin {
  border-color:var(--sp-border)!important;
  border-radius:var(--sp-radius-xl)!important;
  background:linear-gradient(145deg,var(--sp-surface-elevated),var(--sp-surface))!important;
  box-shadow:var(--sp-shadow)!important;
}
.qr-code { border-color:var(--sp-border)!important; background:#fff!important; }

@media(max-width:760px) {
  body { background-attachment:scroll; }
  .app-header {
    border-radius:14px!important;
    box-shadow:0 18px 42px rgba(0,0,0,.38),0 1px 0 var(--sp-glass-highlight) inset!important;
  }
  .settings-tabs { padding:6px!important; border-radius:14px!important; }
  .dashboard-shell,
  body.workshop-pro-active .dashboard-shell.dashboard-main { width:calc(100% - 12px)!important; }
  .dashboard-search-panel { border-radius:14px!important; }
  .pro-dashboard-heading {
    width:100%;
    padding:12px!important;
    border-radius:14px 14px 10px 10px!important;
  }
  .pro-workflow-toolbar {
    width:100%;
    border-radius:0 0 12px 12px!important;
    overflow:hidden;
  }
  .pro-workflow-column { border-radius:14px!important; }
  .pro-workflow-column-header { border-radius:14px 14px 0 0!important; }
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .app-header,
  .settings-tabs,
  .app-menu-popover,
  .app-search-popover,
  .vehicle-menu-popover,
  .page-menu-popover,
  .current-job-flag-options,
  .vehicle-dialog,
  .pro-upcoming-dialog,
  .platform-dialog,
  .user-dialog,
  .admin-next-service-dialog,
  .customer-invoice-dialog,
  .invoice-toolbar,
  .dashboard-search-panel,
  .pro-dashboard-heading,
  .pro-workflow-toolbar { background:#15181d!important; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; }
}

@media print {
  .invoice-toolbar { padding:0; border:0; background:transparent; box-shadow:none; backdrop-filter:none; }
  .invoice-paper { box-shadow:none!important; }
}