/* =============================================================================
   dealer-dashboard.css — Dealer Dashboard (v23 redesign)
   -----------------------------------------------------------------------------
   Premium dark SaaS UI: Linear / Stripe / Vercel / Framer composure with a
   subtle automotive accent. Every accent surface reads from --dealer-accent
   / --dealer-accent-rgb, both of which the JS populates from the active site
   theme snapshot. No hardcoded brand colors below the variable block.

   Layout target:
     - sidebar: 84px collapsed, 240px expanded
     - topbar: 52px compact sticky
     - content: 3 rows fit above the fold on a 1440 viewport
     - 1px hairlines, glass blur, soft gradients, 250ms motion ceiling

   Mobile-first; prefers-reduced-motion safe; multi-tenant clean (no hardcoded
   shop name, city, or stats below — all of those mount through data hooks).
============================================================================= */

:root {
  /* ── Accent — injected by JS from active site theme. Used for dealer
        identity moments (site name, edit-website CTA). Default is neutral
        electric blue so the chrome reads professional with or without
        a theme loaded. */
  --dealer-accent:        #4f7cff;
  --dealer-accent-rgb:    79, 124, 255;
  --dealer-accent-2:      #82a0ff;
  --dealer-accent-3:      #a7bcff;
  --dealer-accent-deep:   #4166d1;
  --dealer-accent-soft:   rgba(var(--dealer-accent-rgb), .12);
  --dealer-accent-line:   rgba(var(--dealer-accent-rgb), .38);

  /* ── System palette — generated from each dealer site's accent.
        Used for avatars, badges, active nav, charts, and primary CTAs
        so every dealer dashboard matches its own website theme. */
  --dd-sys-blue:          var(--dealer-accent);
  --dd-sys-violet:        var(--dealer-accent-2);
  --dd-sys-purple:        var(--dealer-accent-3);
  --dd-sys-grad:          linear-gradient(135deg, var(--dealer-accent-deep) 0%, var(--dealer-accent) 58%, var(--dealer-accent-3) 100%);
  --dd-sys-grad-soft:     linear-gradient(135deg, rgba(var(--dealer-accent-rgb),0.16), rgba(var(--dealer-accent-rgb),0.08) 62%, rgba(var(--dealer-accent-rgb),0.035));
  --dd-sys-soft:          rgba(var(--dealer-accent-rgb),0.12);
  --dd-sys-line:          rgba(var(--dealer-accent-rgb),0.30);
  --dd-sys-glow:          rgba(var(--dealer-accent-rgb),0.45);

  /* ── Background scale */
  --dd-bg-0:              #07080b;   /* page */
  --dd-bg-1:              #0b0d12;   /* sidebar / card base */
  --dd-bg-2:              #10131a;   /* card on card */
  --dd-bg-3:              #161a23;   /* hover surface */

  /* ── Glass / surface gradients */
  --dd-surface:           linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.006));
  --dd-surface-strong:    linear-gradient(180deg, rgba(255,255,255,.05),  rgba(255,255,255,.012));
  /* Disabled — backdrop-filter blur is the single biggest paint cost on
     dashboard. Empty value falls back to no filter. Card panels keep their
     gradient backgrounds; the glassy look was tanking smoothness during
     hover/scroll. */
  --dd-glass-blur:        none;
}

/* Global perf kill-switch: forcibly disable every backdrop-filter on the
   dealer dashboard page. Dozens of modal backdrops + chrome surfaces had
   blur(2-20px) which is one of the most expensive CSS properties on
   lower-end devices and during scroll/hover. Solid translucent backgrounds
   are visually fine and run at 60fps. Scoped via html[data-dealer-dashboard]
   so the broader site (public page, editor) is not affected. */
html[data-dealer-dashboard], html[data-dealer-dashboard] * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Suppress micro-translate hovers across the dashboard. Each `:hover {
   transform: translate*(...) }` promotes the element to its own layer and
   forces a repaint on enter/leave — at ~10-20 hoverable elements per
   screen this compounds into the "not smooth" feel. We keep the layer
   creation flat by neutralising the small hover translates; visual
   feedback still happens through border/background changes that already
   ride the same hover rules. */
html[data-dealer-dashboard] .dd-link-btn:hover span,
html[data-dealer-dashboard] .dd-next:hover .dd-next-arrow path:last-child,
html[data-dealer-dashboard] .dd-pchat-row:hover,
html[data-dealer-dashboard] .dd-cal-card:hover,
html[data-dealer-dashboard] .qb-btn:hover,
html[data-dealer-dashboard] .qg-row:hover,
html[data-dealer-dashboard] .dd-gal-item:hover,
html[data-dealer-dashboard] .dd-nav-item:hover,
html[data-dealer-dashboard] .dd-nav-item:hover .dd-nav-icon,
html[data-dealer-dashboard] .qb-addon:hover {
  transform: none !important;
}

/* placeholder to swallow the original closing brace below — keeps the var
   block syntactically intact */
:root {

  /* ── Ink scale */
  --dd-ink-0:             #ffffff;
  --dd-ink-1:             rgba(255,255,255,.84);
  --dd-ink-2:             rgba(255,255,255,.58);
  --dd-ink-3:             rgba(255,255,255,.40);
  --dd-ink-4:             rgba(255,255,255,.22);

  /* ── Hairlines */
  --dd-line:              rgba(255,255,255,.06);
  --dd-line-2:            rgba(255,255,255,.10);
  --dd-line-strong:       rgba(255,255,255,.18);

  /* ── Semantic (green/red are intentional non-accent functional colors) */
  --dd-ok:                #2ecf73;
  --dd-ok-rgb:            46, 207, 115;
  --dd-warn:              #d9a72a;
  --dd-warn-rgb:          217, 167, 42;
  --dd-danger:            #e0566e;
  --dd-danger-rgb:        224, 86, 110;
  --dd-info:              #4f9cff;
  --dd-info-rgb:          79, 156, 255;

  /* ── Radius */
  --dd-r-xs:              6px;
  --dd-r-sm:              8px;
  --dd-r:                 10px;
  --dd-r-lg:              14px;

  /* ── Spacing scale */
  --dd-s-1:               4px;
  --dd-s-2:               8px;
  --dd-s-3:               12px;
  --dd-s-4:               16px;
  --dd-s-5:               20px;
  --dd-s-6:               24px;
  --dd-s-8:               32px;

  /* ── Layout */
  --dd-sidebar-w:         240px;
  --dd-sidebar-w-mini:    84px;
  --dd-topbar-h:          52px;

  /* ── Motion (max 250ms per design spec) */
  --dd-t-1:               140ms;
  --dd-t-2:               200ms;
  --dd-t-3:               250ms;
  --dd-ease:              cubic-bezier(.2, .7, .2, 1);
  --dd-ease-out:          cubic-bezier(.16, 1, .3, 1);

  /* ── Type — TintPilot brand fonts */
  --dd-font-display:      'Bricolage Grotesque', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --dd-font-body:         'Geist', ui-sans-serif, system-ui, -apple-system,
                           BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── Shadows */
  --dd-shadow-sm:         0 2px 6px rgba(0,0,0,.30);
  --dd-shadow:            0 12px 30px -16px rgba(0,0,0,.6);
  --dd-shadow-lg:         0 28px 60px -22px rgba(0,0,0,.7);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--dd-ink-0);
  background: var(--dd-bg-0);
  font-family: var(--dd-font-body);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Ambient accent wash — subtle, only top-left, always dealer-branded */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(var(--dealer-accent-rgb), .022), transparent 60%),
    radial-gradient(40% 35% at 100% 100%, rgba(255,255,255, .012), transparent 60%);
  z-index: 0;
}

/* Codex review overlay must not capture pointer events */
#codex-browser-sidebar-comments-root { display: none !important; }

a { color: inherit; text-decoration: none; }
button { font: inherit; }


/* =============================================================================
   APP SHELL
============================================================================= */

.dd-app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--dd-sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns var(--dd-t-3) var(--dd-ease);
}

.dd-app[data-sidebar-collapsed="true"] {
  grid-template-columns: var(--dd-sidebar-w-mini) minmax(0, 1fr);
}


/* =============================================================================
   SIDEBAR
============================================================================= */

.dd-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--dd-s-3);
  padding: var(--dd-s-3) var(--dd-s-3) var(--dd-s-3);
  border-right: 1px solid var(--dd-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 30%),
    var(--dd-bg-1);
  overflow: hidden;
  z-index: 5;
}

/* Subtle accent hairline along the right edge */
.dd-sidebar::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 1px;
  background: linear-gradient(180deg, transparent 10%, rgba(var(--dealer-accent-rgb), .22) 50%, transparent 90%);
  pointer-events: none;
}

/* Brand row */
.dd-sidebar-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--dd-s-2);
  padding: 4px 4px 8px;
  border-bottom: 1px solid var(--dd-line);
}

.dd-brand {
  display: grid;
  /* 2026-05-27 - Anton: lightning bolt chip removed. Brand is now just
     the dealer's logo (top row) + city/state (bottom row). Single column. */
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  align-items: center;
  row-gap: 2px;
  min-width: 0;
  text-decoration: none;
  position: relative;
}

.dd-brand-mark {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--dd-font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--dd-ink-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-brand-mark img {
  display: block;
  max-height: 22px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.dd-brand-city {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--dd-font-mono, 'Geist Mono', monospace);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dd-ink-3);
  line-height: 1;
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* When sidebar collapses, hide the city but keep the logo visible
   (the logo is now the only visual identity since the chip was removed). */
.dd-app[data-sidebar-collapsed="true"] .dd-brand-city { display: none; }
.dd-app[data-sidebar-collapsed="true"] .dd-brand {
  grid-template-columns: 28px;
  justify-content: center;
}

/* Collapse button in sidebar head (mirrors topbar toggle) */
.dd-sidebar-collapse {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--dd-ink-2);
  cursor: pointer;
  transition: background var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease), transform var(--dd-t-2) var(--dd-ease);
}
.dd-sidebar-collapse:hover {
  background: var(--dd-bg-3);
  color: var(--dd-ink-0);
  border-color: var(--dd-line-2);
}
.dd-sidebar-collapse svg { width: 14px; height: 14px; }
.dd-app[data-sidebar-collapsed="true"] .dd-sidebar-collapse svg { transform: rotate(180deg); }

/* Collapsed: hide brand text, keep just the mark icon-sized */
.dd-app[data-sidebar-collapsed="true"] .dd-brand-mark {
  text-align: center;
  font-size: 0;
  position: relative;
  height: 22px;
}
.dd-app[data-sidebar-collapsed="true"] .dd-brand-mark::after {
  content: "T";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.dd-app[data-sidebar-collapsed="true"] .dd-brand-mark img {
  display: block;
  margin: 0 auto;
  max-height: 22px;
}
.dd-app[data-sidebar-collapsed="true"] .dd-brand-mark:has(img)::after { display: none; }
.dd-app[data-sidebar-collapsed="true"] .dd-brand-city { display: none; }

/* Nav */
.dd-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 0;
}
.dd-nav::-webkit-scrollbar { width: 4px; }
.dd-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 999px; }

.dd-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--dd-s-3);
  padding: 7px 12px;
  border-radius: 9px;
  color: var(--dd-ink-2);
  font-family: var(--dd-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  cursor: pointer;
  transition:
    background var(--dd-t-2) var(--dd-ease),
    color var(--dd-t-2) var(--dd-ease);
}
.dd-nav-item:hover {
  background: rgba(255,255,255,0.035);
  color: var(--dd-ink-0);
}
.dd-nav-item.is-active {
  background: linear-gradient(90deg, rgba(var(--dealer-accent-rgb),0.10), rgba(var(--dealer-accent-rgb),0.04) 60%, transparent);
  color: var(--dd-ink-0);
}
.dd-nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 16%;
  bottom: 16%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--dd-sys-grad);
  box-shadow: 0 0 12px rgba(var(--dealer-accent-rgb),.6);
}

.dd-nav-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: currentColor;
  opacity: .9;
  transition:
    color var(--dd-t-2) var(--dd-ease),
    opacity var(--dd-t-2) var(--dd-ease),
    transform var(--dd-t-2) var(--dd-ease);
}
.dd-nav-icon svg { width: 18px; height: 18px; }
.dd-nav-item:hover .dd-nav-icon {
  opacity: 1;
  transform: translateX(1px);
}
.dd-nav-item.is-active .dd-nav-icon {
  color: var(--dealer-accent);
  opacity: 1;
}

/* Collapsible submenus — a sub group is hidden until its parent section is
   active (or the wrap is hovered/focused). Smooth, tactile reveal. */
.dd-nav-sub-wrap { display: flex; flex-direction: column; }
.dd-nav-sub {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  /* Collapse is slightly delayed + eased so moving the mouse between the parent
     and its children (or across nearby items) doesn't snap shut abruptly. */
  transition:
    max-height .34s cubic-bezier(.4,0,.2,1) .06s,
    opacity .2s ease .06s;
}
.dd-nav-sub-wrap:hover .dd-nav-sub,
.dd-nav-sub-wrap:focus-within .dd-nav-sub,
.dd-nav-sub-wrap.is-expanded .dd-nav-sub {
  max-height: 240px;
  opacity: 1;
  /* Opening is immediate + springy (no delay) so it feels responsive. */
  transition:
    max-height .42s cubic-bezier(.22,1,.36,1),
    opacity .26s ease;
}
/* Each subitem eases in with a gentle slide + tiny stagger for a tactile feel. */
.dd-nav-subitem {
  margin-left: 14px;
  padding-left: 12px;
  border-left: 1px solid var(--dd-line-2);
  border-radius: 0 10px 10px 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .26s ease, transform .3s cubic-bezier(.22,1,.36,1), background-color .15s ease, color .15s ease;
}
.dd-nav-sub-wrap:hover .dd-nav-subitem,
.dd-nav-sub-wrap:focus-within .dd-nav-subitem,
.dd-nav-sub-wrap.is-expanded .dd-nav-subitem {
  opacity: 1;
  transform: translateX(0);
}
.dd-nav-sub .dd-nav-subitem:nth-child(1) { transition-delay: .04s; }
.dd-nav-sub .dd-nav-subitem:nth-child(2) { transition-delay: .09s; }
.dd-nav-sub .dd-nav-subitem:nth-child(3) { transition-delay: .14s; }
.dd-nav-sub .dd-nav-subitem:nth-child(4) { transition-delay: .19s; }
.dd-nav-subitem .dd-nav-icon { transform: scale(.88); opacity: .8; }
.dd-nav-subitem .dd-nav-label { font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) {
  .dd-nav-sub, .dd-nav-subitem { transition: opacity .15s linear; transform: none; }
}
/* When sidebar is collapsed to the icon rail, always show subitems inline
   (no hover reveal needed) and drop the indent guide. */
.dd-sidebar.is-mini .dd-nav-sub { max-height: 240px; opacity: 1; }
.dd-sidebar.is-mini .dd-nav-subitem { margin-left: 0; padding-left: 0; border-left: 0; opacity: 1; transform: none; }

.dd-nav-label {
  font: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dd-nav-badge {
  margin-left: auto;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--dd-sys-grad);
  color: #fff;
  font-family: var(--dd-font-mono, 'Geist Mono', monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 4px 10px -3px rgba(var(--dealer-accent-rgb),.5);
}
.dd-nav-badge[hidden] { display: none; }
.dd-nav-badge.is-live,
.dd-icon-btn-badge.is-live {
  animation: dd-live-badge 1.15s var(--dd-ease-out) 3;
}

@keyframes dd-live-badge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--dealer-accent-rgb), .52), 0 4px 10px -3px rgba(var(--dealer-accent-rgb),.5); }
  56% { box-shadow: 0 0 0 8px rgba(var(--dealer-accent-rgb), 0), 0 8px 20px -6px rgba(var(--dealer-accent-rgb),.72); }
}

/* Collapsed sidebar — icon-only nav */
.dd-app[data-sidebar-collapsed="true"] .dd-nav-item {
  justify-content: center;
  padding: 8px 0;
}
.dd-app[data-sidebar-collapsed="true"] .dd-nav-label,
.dd-app[data-sidebar-collapsed="true"] .dd-nav-badge { display: none; }

/* ── Current Website card (bottom of sidebar above admin) — mini hero */
.dd-site-card {
  margin-top: auto;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--dd-line);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.004)),
    var(--dd-bg-1);
  transition:
    border-color var(--dd-t-2) var(--dd-ease),
    transform var(--dd-t-2) var(--dd-ease),
    box-shadow var(--dd-t-2) var(--dd-ease);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.dd-site-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 50% at 50% 0%, rgba(var(--dealer-accent-rgb),0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.dd-site-card:hover {
  border-color: var(--dd-line-strong);
  box-shadow: 0 18px 36px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--dealer-accent-rgb),0.10);
}
.dd-site-media {
  position: relative; z-index: 1;
  height: 76px;
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 20% 10%, rgba(var(--dealer-accent-rgb),0.16), transparent 60%),
    linear-gradient(135deg, rgba(var(--dealer-accent-rgb),0.10), rgba(var(--dealer-accent-rgb),0.04) 60%),
    linear-gradient(180deg, var(--dd-bg-3), var(--dd-bg-2));
  border: 1px solid var(--dd-line);
}
.dd-site-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dd-site-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.5));
  pointer-events: none;
}
/* "Online" live dot on the site media corner */
.dd-site-media::before {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dd-ok);
  box-shadow: 0 0 8px rgba(46, 207, 115, 0.6);
  animation: dd-site-live-pulse 2s ease-out infinite;
}
@keyframes dd-site-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.dd-site-meta {
  position: relative; z-index: 1;
  display: grid;
  gap: 3px;
  min-width: 0;
}
.dd-site-eyebrow {
  font-family: var(--dd-font-mono, 'Geist Mono', monospace);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dd-ink-3);
}
.dd-site-name {
  font-family: var(--dd-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--dd-ink-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-site-domain {
  font-family: var(--dd-font-mono, 'Geist Mono', monospace);
  font-size: 10.5px;
  color: var(--dd-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dd-t-2) var(--dd-ease);
}
.dd-site-domain:hover { color: var(--dd-sys-blue); }

.dd-site-actions {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.dd-site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--dd-line-2);
  background: rgba(255,255,255,.03);
  color: var(--dd-ink-1);
  font-family: var(--dd-font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dd-t-2) var(--dd-ease),
    border-color var(--dd-t-2) var(--dd-ease),
    color var(--dd-t-2) var(--dd-ease),
    transform var(--dd-t-2) var(--dd-ease);
}
.dd-site-btn svg { width: 12px; height: 12px; }
.dd-site-btn:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--dd-line-strong);
  color: var(--dd-ink-0);
  transform: translateY(-1px);
}
/* Edit button uses dealer's accent — this IS their identity moment */
.dd-site-btn-primary {
  background: rgba(var(--dealer-accent-rgb), .14);
  border-color: rgba(var(--dealer-accent-rgb), .42);
  color: var(--dealer-accent);
}
.dd-site-btn-primary:hover {
  background: rgba(var(--dealer-accent-rgb), .22);
  border-color: rgba(var(--dealer-accent-rgb), .6);
  color: var(--dealer-accent);
}

.dd-app[data-sidebar-collapsed="true"] .dd-site-card {
  padding: 6px;
}
.dd-app[data-sidebar-collapsed="true"] .dd-site-media { height: 44px; }
.dd-app[data-sidebar-collapsed="true"] .dd-site-meta { display: none; }
.dd-app[data-sidebar-collapsed="true"] .dd-site-actions {
  grid-template-columns: 1fr;
}
.dd-app[data-sidebar-collapsed="true"] .dd-site-btn span { display: none; }
.dd-app[data-sidebar-collapsed="true"] .dd-site-btn { height: 26px; padding: 0; }

/* Sidebar footer — account button pinned to the bottom of the navigation rail */
.dd-sidebar-foot {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--dd-line);
  display: grid;
  gap: 8px;
}
.dd-sidebar-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
}
/* Log out is hidden until the account button is clicked. */
.dd-logout {
  overflow: hidden;
  max-height: 0; opacity: 0;
  margin-top: -8px; pointer-events: none;
  transition: max-height var(--dd-t-3) var(--dd-ease-out), opacity var(--dd-t-2) var(--dd-ease), margin-top var(--dd-t-3) var(--dd-ease-out);
}
.dd-sidebar-foot.is-menu-open .dd-logout {
  max-height: 60px; opacity: 1; margin-top: 0; pointer-events: auto;
}
.dd-sidebar-foot.is-menu-open .dd-admin-caret { transform: rotate(180deg); }
.dd-admin-caret { transition: transform var(--dd-t-2) var(--dd-ease); }
.dd-admin {
  width: 100%;
  min-width: 0;
  height: 44px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 6px;
  border: 1px solid var(--dd-line);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018)),
    rgba(255,255,255,.018);
  color: var(--dd-ink-0);
  cursor: pointer;
  text-align: left;
  transition:
    background var(--dd-t-1) var(--dd-ease),
    border-color var(--dd-t-1) var(--dd-ease),
    transform var(--dd-t-2) var(--dd-ease);
}
.dd-admin:hover {
  background: var(--dd-bg-3);
  border-color: var(--dd-line-strong);
  transform: translateY(-1px);
}
.dd-admin-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--dd-line-2);
  color: var(--dd-ink-1);
  font-family: var(--dd-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.dd-admin-label {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.dd-admin-label strong {
  overflow: hidden;
  color: var(--dd-ink-0);
  font: 700 11.5px var(--dd-font-body);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-admin-label small {
  color: var(--dd-ink-3);
  font: 550 9.5px var(--dd-font-body);
  line-height: 1.1;
}
.dd-admin-caret {
  width: 9px;
  height: 9px;
  color: var(--dd-ink-3);
}
.dd-logout {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.dd-logout-inner {
  width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--dd-line);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
  color: var(--dd-ink-2);
  font: 750 11px var(--dd-font-body);
  transition:
    background var(--dd-t-1) var(--dd-ease),
    border-color var(--dd-t-1) var(--dd-ease),
    color var(--dd-t-1) var(--dd-ease),
    transform var(--dd-t-2) var(--dd-ease);
}
.dd-logout:hover .dd-logout-inner {
  color: var(--dd-ink-0);
  border-color: var(--dd-line-strong);
  background: var(--dd-bg-3);
  transform: translateY(-1px);
}
.dd-logout svg {
  width: 14px;
  height: 14px;
  color: var(--dd-ink-3);
}

.dd-app[data-sidebar-collapsed="true"] .dd-sidebar-foot {
  padding-top: 8px;
}
.dd-app[data-sidebar-collapsed="true"] .dd-admin {
  height: 40px;
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 5px;
  border-radius: 11px;
}
.dd-app[data-sidebar-collapsed="true"] .dd-admin-label,
.dd-app[data-sidebar-collapsed="true"] .dd-admin-caret {
  display: none;
}
.dd-app[data-sidebar-collapsed="true"] .dd-logout {
  width: 40px;
  min-height: 36px;
  padding: 0;
  justify-self: center;
}
.dd-app[data-sidebar-collapsed="true"] .dd-logout span {
  display: none;
}


/* =============================================================================
   MAIN AREA
============================================================================= */

.dd-main {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* =============================================================================
   TOPBAR  —  compact sticky, glass blur
============================================================================= */

.dd-topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(180px, max-content) minmax(320px, 1fr) max-content;
  align-items: center;
  gap: var(--dd-s-3);
  height: var(--dd-topbar-h);
  padding: 0 var(--dd-s-4);
  background: rgba(11, 13, 18, .72);
  backdrop-filter: var(--dd-glass-blur);
  -webkit-backdrop-filter: var(--dd-glass-blur);
  border-bottom: 1px solid var(--dd-line);
}
/* Faint gradient glow strip below — ties back to marketing site */
.dd-topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--dealer-accent-rgb),0.20) 30%, rgba(var(--dealer-accent-rgb),0.16) 70%, transparent);
  pointer-events: none;
  opacity: 0.6;
}

.dd-topbar-left {
  display: flex;
  align-items: center;
  gap: var(--dd-s-2);
  min-width: 0;
}
.dd-sidebar-toggle {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--dd-ink-2);
  cursor: pointer;
  transition: background var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease);
}
.dd-sidebar-toggle:hover {
  background: var(--dd-bg-3);
  border-color: var(--dd-line-2);
  color: var(--dd-ink-0);
}
.dd-sidebar-toggle svg { width: 14px; height: 14px; }

.dd-topbar-title {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.dd-topbar-eyebrow {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dd-ink-3);
}
.dd-title {
  margin: 0;
  font-family: var(--dd-font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--dd-ink-0);
}

/* Search */
.dd-topbar-center {
  display: flex;
  align-items: center;
  justify-content: stretch;
  min-width: 0;
}
.dd-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: none;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--dd-line);
  background: rgba(255,255,255,.022);
  transition: border-color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease);
}
.dd-search:focus-within {
  border-color: rgba(var(--dealer-accent-rgb), .5);
  background: rgba(var(--dealer-accent-rgb), .04);
}
.dd-search svg {
  width: 14px;
  height: 14px;
  color: var(--dd-ink-2);
  flex: 0 0 auto;
}
.dd-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--dd-ink-0);
  font: 500 12px var(--dd-font-body);
  letter-spacing: -.005em;
}
.dd-search input::placeholder { color: var(--dd-ink-3); }
.dd-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* Right cluster: status pulse + notif + create + profile */
.dd-topbar-right {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--dd-s-2);
  justify-content: flex-end;
  min-width: max-content;
}
.dd-topbar-right .dd-btn {
  flex: 0 0 auto;
}

.dd-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--dd-line);
  background: rgba(255,255,255,.022);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--dd-ink-1);
  white-space: nowrap;
}
.dd-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dd-ok);
  box-shadow: 0 0 0 0 rgba(var(--dd-ok-rgb), .55);
  animation: dd-pulse 2.2s var(--dd-ease) infinite;
}
@keyframes dd-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(var(--dd-ok-rgb), .55); }
  60%  { box-shadow: 0 0 0 7px rgba(var(--dd-ok-rgb), 0); }
  100% { box-shadow: 0 0 0 0   rgba(var(--dd-ok-rgb), 0); }
}
.dd-status-label { color: var(--dd-ink-0); font-weight: 600; }
.dd-status-sep { color: var(--dd-ink-3); }
.dd-status-sync { color: var(--dd-ink-2); }
.dd-status-sync strong { color: var(--dd-ink-1); font-weight: 600; }
.dd-status[data-realtime-state="connecting"] .dd-status-dot,
.dd-status[data-realtime-state="reconnecting"] .dd-status-dot {
  background: var(--dd-warn);
  box-shadow: 0 0 0 0 rgba(var(--dd-warn-rgb), .45);
  animation: dd-pulse-warn 1.4s var(--dd-ease) infinite;
}
@keyframes dd-pulse-warn {
  0%   { box-shadow: 0 0 0 0   rgba(var(--dd-warn-rgb), .5); }
  60%  { box-shadow: 0 0 0 6px rgba(var(--dd-warn-rgb), 0); }
  100% { box-shadow: 0 0 0 0   rgba(var(--dd-warn-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) { .dd-status-dot { animation: none !important; } }
.dd-status[data-realtime-state="disabled"] .dd-status-dot,
.dd-status[data-realtime-state="offline"] .dd-status-dot {
  background: var(--dd-ink-3);
  box-shadow: none;
  animation: none;
}
.dd-status[data-realtime-state="error"] .dd-status-dot {
  background: var(--dd-danger);
  box-shadow: 0 0 0 0 rgba(var(--dd-danger-rgb), .45);
}

.dd-icon-btn {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid var(--dd-line);
  background: rgba(255,255,255,.022);
  color: var(--dd-ink-1);
  cursor: pointer;
  transition: background var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease);
}
.dd-icon-btn:hover {
  background: var(--dd-bg-3);
  border-color: var(--dd-line-strong);
  color: var(--dd-ink-0);
}
.dd-icon-btn svg { width: 14px; height: 14px; }
.dd-icon-btn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--dealer-accent);
  color: #fff;
  font: 700 9.5px var(--dd-font-body);
  border: 2px solid var(--dd-bg-1);
}
.dd-icon-btn-badge[hidden] { display: none; }

.dd-notification-panel[hidden] { display: none; }

.dd-notification-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 168px;
  z-index: 24;
  width: min(380px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - var(--dd-topbar-h) - 24px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(var(--dealer-accent-rgb), .12), transparent 60%),
    rgba(14, 16, 21, .98);
  box-shadow: 0 24px 70px -28px rgba(0,0,0,.85);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px) scale(.985);
  transform-origin: top right;
  pointer-events: none;
  transition:
    opacity 320ms var(--dd-ease-out),
    transform 420ms var(--dd-ease-out),
    visibility 0s linear 420ms;
}
.dd-notification-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity 320ms var(--dd-ease-out),
    transform 420ms var(--dd-ease-out),
    visibility 0s;
}
.dd-notification-panel.is-closing {
  opacity: 0;
  transform: translateY(-8px) scale(.99);
  pointer-events: none;
}

@keyframes dd-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.dd-notification-head,
.dd-notification-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--dd-line);
}

.dd-notification-foot {
  justify-content: flex-end;
  border-top: 1px solid var(--dd-line);
  border-bottom: 0;
}

.dd-notification-head span {
  display: block;
  color: var(--dd-ink-3);
  font: 800 9.5px var(--dd-font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dd-notification-head strong {
  display: block;
  margin-top: 3px;
  color: var(--dd-ink-0);
  font: 750 15px var(--dd-font-body);
}

.dd-notification-list {
  display: grid;
  gap: 0;
  min-height: 120px;
  overflow-y: auto;
}

.dd-notification-row {
  width: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 66px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--dd-line);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background 220ms var(--dd-ease),
    transform 260ms var(--dd-ease-out),
    border-color 220ms var(--dd-ease);
}

.dd-notification-row:hover {
  background: rgba(255,255,255,.035);
  transform: translateX(2px);
}

.dd-notification-row.is-unread {
  background: rgba(var(--dealer-accent-rgb), .07);
}

.dd-notification-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--dd-sys-grad);
  color: #fff;
  font: 750 11px var(--dd-font-display);
}

.dd-notification-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dd-notification-main strong {
  color: var(--dd-ink-0);
  font: 700 12px var(--dd-font-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dd-notification-main em {
  color: var(--dd-ink-2);
  font: 550 11px var(--dd-font-body);
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dd-notification-row time {
  color: var(--dd-ink-3);
  font: 700 10px var(--dd-font-mono, 'Geist Mono', monospace);
}

.dd-create-panel[hidden] { display: none; }

/* Command palette ("/" or Cmd/Ctrl-K) */
[data-command-palette] { position: fixed; inset: 0; z-index: 200; }
[data-command-palette][hidden] { display: none; }
.dd-cmd-backdrop { position: absolute; inset: 0; background: rgba(4,5,8,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--dd-t-2) var(--dd-ease-out); }
[data-command-palette].is-visible .dd-cmd-backdrop { opacity: 1; }
.dd-cmd-dialog {
  position: absolute; left: 50%; top: 14vh; transform: translateX(-50%) translateY(-8px) scale(.98);
  width: min(560px, calc(100vw - 28px));
  background: linear-gradient(180deg, var(--dd-bg-2), var(--dd-bg-1));
  border: 1px solid var(--dd-line-2); border-radius: var(--dd-r-lg); box-shadow: var(--dd-shadow-lg);
  overflow: hidden; opacity: 0; transition: opacity var(--dd-t-2) var(--dd-ease-out), transform var(--dd-t-3) var(--dd-ease-out);
}
[data-command-palette].is-visible .dd-cmd-dialog { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.dd-cmd-search { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid var(--dd-line); }
.dd-cmd-search svg { width: 18px; height: 18px; color: var(--dd-ink-3); flex: none; }
.dd-cmd-search input { flex: 1; background: none; border: 0; outline: none; color: var(--dd-ink-0); font: 500 15px var(--dd-font-body); }
.dd-cmd-search input::placeholder { color: var(--dd-ink-3); }
.dd-cmd-list { max-height: 320px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.dd-cmd-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 12px; border: 0; border-radius: 11px; background: none; color: var(--dd-ink-1); cursor: pointer; transition: background var(--dd-t-1) var(--dd-ease); }
.dd-cmd-item:hover, .dd-cmd-item.is-active { background: rgba(var(--dealer-accent-rgb), .14); }
.dd-cmd-label { font: 650 14px var(--dd-font-body); color: var(--dd-ink-0); }
.dd-cmd-hint { flex: 1; font: 500 12px var(--dd-font-body); color: var(--dd-ink-3); }
.dd-cmd-enter { opacity: 0; font-size: 13px; color: var(--dealer-accent); }
.dd-cmd-item.is-active .dd-cmd-enter { opacity: 1; }
.dd-cmd-empty { padding: 22px; text-align: center; color: var(--dd-ink-3); font: 500 13px var(--dd-font-body); }
.dd-cmd-foot { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--dd-line); color: var(--dd-ink-3); font: 500 11px var(--dd-font-body); }
.dd-cmd-foot kbd { padding: 2px 6px; border-radius: 6px; background: var(--dd-bg-3); border: 1px solid var(--dd-line-2); font: 600 10px var(--dd-font-mono, monospace); color: var(--dd-ink-2); }
@media (prefers-reduced-motion: reduce) { .dd-cmd-dialog, .dd-cmd-backdrop { transition: none; } }

.dd-create-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 25;
  width: min(310px, calc(100vw - 24px));
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background:
    radial-gradient(95% 70% at 100% 0%, rgba(var(--dealer-accent-rgb), .18), transparent 58%),
    rgba(12, 14, 20, .96);
  box-shadow: var(--dd-shadow-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.dd-create-panel::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 84px;
  width: 10px;
  height: 10px;
  border-left: 1px solid rgba(255,255,255,.1);
  border-top: 1px solid rgba(255,255,255,.1);
  background: rgba(12, 14, 20, .96);
  transform: rotate(45deg);
}

.dd-create-option {
  position: relative;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--dd-ink-0);
  text-align: left;
  cursor: pointer;
  transition:
    background var(--dd-t-1) var(--dd-ease),
    border-color var(--dd-t-1) var(--dd-ease),
    transform var(--dd-t-2) var(--dd-ease);
}

.dd-create-option:hover {
  background: rgba(255,255,255,.045);
  border-color: rgba(var(--dealer-accent-rgb), .28);
  transform: translateY(-1px);
}

.dd-create-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--dd-sys-grad);
  color: #fff;
  font: 850 13px var(--dd-font-display);
  box-shadow: 0 10px 24px -12px rgba(var(--dealer-accent-rgb), .85);
}

.dd-create-option span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dd-create-option strong {
  color: var(--dd-ink-0);
  font: 750 13px var(--dd-font-body);
}

.dd-create-option small {
  overflow: hidden;
  color: var(--dd-ink-2);
  font: 550 11px/1.35 var(--dd-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =============================================================================
   BUTTONS (shared)
============================================================================= */

.dd-btn,
.dealer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 7px;
  border: 1px solid var(--dd-line-2);
  background: rgba(255,255,255,.025);
  color: var(--dd-ink-0);
  font: 600 11.5px var(--dd-font-body);
  letter-spacing: -.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease), transform var(--dd-t-2) var(--dd-ease);
}
.dd-btn:hover,
.dealer-btn:hover {
  background: var(--dd-bg-3);
  border-color: var(--dd-line-strong);
  transform: translateY(-1px);
}
.dd-btn:active,
.dealer-btn:active { transform: translateY(0); }
.dd-btn svg,
.dealer-btn svg { width: 12px; height: 12px; }
.dd-btn-sm  { height: 28px; padding: 0 10px; font-size: 11px; }
.dd-btn-xs  { height: 24px; padding: 0 8px;  font-size: 10.5px; gap: 4px; }
.dd-btn-xs svg { width: 11px; height: 11px; }

.dd-btn-preview {
  color: var(--dd-ink-1);
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.12);
}
.dd-btn-preview:hover {
  color: var(--dd-ink-0);
  border-color: rgba(var(--dealer-accent-rgb), .42);
  background: rgba(var(--dealer-accent-rgb), .12);
}

.dd-btn-primary,
.dealer-btn.dealer-btn-primary {
  background: var(--dd-sys-grad);
  border: 1px solid transparent;
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(var(--dealer-accent-rgb),.55);
  font-weight: 500;
}
.dd-btn-primary:hover,
.dealer-btn.dealer-btn-primary:hover {
  box-shadow: 0 12px 28px -8px rgba(var(--dealer-accent-rgb),.7);
  transform: translateY(-1px);
}

.dealer-btn.dealer-btn-danger {
  background: rgba(var(--dd-danger-rgb), .14);
  border-color: rgba(var(--dd-danger-rgb), .5);
  color: var(--dd-danger);
}

/* Profile button (topbar right) */
.dd-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 8px 0 4px;
  border-radius: 999px;
  border: 1px solid var(--dd-line);
  background: rgba(255,255,255,.022);
  cursor: pointer;
  transition: background var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease);
}
.dd-profile:hover {
  background: var(--dd-bg-3);
  border-color: var(--dd-line-strong);
}
.dd-profile-avatar {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--dd-sys-grad);
  color: #fff;
  font-family: var(--dd-font-display);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px -3px rgba(var(--dealer-accent-rgb),0.45);
}
.dd-profile-label {
  display: grid;
  gap: 0;
  min-width: 0;
  text-align: left;
}
.dd-profile-label strong {
  font: 600 11px var(--dd-font-body);
  color: var(--dd-ink-0);
  line-height: 1.1;
  white-space: nowrap;
}
.dd-profile-label small {
  font: 500 9.5px var(--dd-font-body);
  color: var(--dd-ink-3);
  line-height: 1.1;
}
.dd-profile-caret { width: 9px; height: 9px; color: var(--dd-ink-3); }


/* =============================================================================
   CONTENT GRID  —  compressed, fit-above-fold target
============================================================================= */

.dd-content {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;  /* prevent rows from stretching to fill viewport */
  gap: var(--dd-s-3);
  padding: var(--dd-s-3) var(--dd-s-4) var(--dd-s-4);
  min-width: 0;
  flex: 1;
}

.dd-app.is-view-entering .dd-topbar-title,
.dd-app.is-view-entering .dd-content > .dd-row:not([hidden]),
.dd-app.is-view-entering .dd-content > [data-full-list-view]:not([hidden]),
.dd-app.is-view-entering .dd-content > [data-activity-list-view]:not([hidden]),
.dd-app.is-view-entering .dd-content > [data-website-settings-view]:not([hidden]),
.dd-app.is-view-entering .dd-content > [data-account-settings-view]:not([hidden]),
.dd-app.is-view-entering .dd-content > [data-analytics-view]:not([hidden]),
.dd-app.is-view-entering .dd-content > [data-calendar-full-view]:not([hidden]),
.dd-app.is-view-entering .dd-content > [data-invoice-generator-view]:not([hidden]),
.dd-app.is-view-entering .dd-content > [data-pricing-settings-view]:not([hidden]),
.dd-app.is-view-entering .dd-content > [data-integrations-view]:not([hidden]) {
  animation: dd-view-enter 520ms var(--dd-ease-out) both;
}

@keyframes dd-view-enter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.992);
    filter: blur(2px);
  }
  60% {
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.dd-app[data-view="full-list"] .dd-content {
  grid-template-rows: minmax(calc(100vh - var(--dd-topbar-h) - 32px), auto);
}

.dd-app[data-view="full-list"] .dd-full-list-card {
  min-height: calc(100vh - var(--dd-topbar-h) - 48px);
  align-content: start;
}

.dd-row {
  display: grid;
  gap: var(--dd-s-3);
  min-width: 0;
}
.dd-row[hidden],
[data-overview-section][hidden],
[data-full-list-view][hidden],
[data-activity-list-view][hidden],
[data-website-settings-view][hidden],
[data-account-settings-view][hidden],
[data-analytics-view][hidden],
[data-calendar-full-view][hidden],
[data-invoice-generator-view][hidden],
[data-integrations-view][hidden] {
  display: none !important;
}
.dd-row-main   { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); align-items: start; }
.dd-row-bottom { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); align-items: start; }


/* =============================================================================
   CARDS
============================================================================= */

.dd-card,
.dealer-card {
  position: relative;
  border: 1px solid var(--dd-line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.004)),
    var(--dd-bg-1);
  padding: 16px 18px;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  animation: dd-fade-in var(--dd-t-3) var(--dd-ease-out) forwards;
  isolation: isolate;
  transition: border-color var(--dd-t-2) var(--dd-ease), box-shadow var(--dd-t-2) var(--dd-ease);
}
/* Cards stay neutral — no accent wash. A faint top highlight gives depth
   without tinting the whole surface red. */
.dd-card::before,
.dealer-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%);
  pointer-events: none;
  z-index: 0;
}
.dd-card > *,
.dealer-card > * {
  position: relative;
  z-index: 1;
}
.dd-card:hover,
.dealer-card:hover {
  border-color: var(--dd-line-2);
}
@keyframes dd-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dd-row-kpi    { animation-delay: 0ms; }
.dd-row-main .dd-card:nth-child(1) { animation-delay: 60ms; }
.dd-row-main .dd-card:nth-child(2) { animation-delay: 100ms; }
.dd-row-bottom .dd-card:nth-child(1) { animation-delay: 140ms; }
.dd-row-bottom .dd-card:nth-child(2) { animation-delay: 180ms; }

.dd-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dd-s-2);
  margin-bottom: var(--dd-s-3);
}
.dd-card-head > div:first-child { min-width: 0; }

.dd-eyebrow {
  display: block;
  font: 600 9.5px var(--dd-font-body);
  color: var(--dd-ink-3);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dd-card-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--dd-font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--dd-ink-0);
}
.dd-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.dd-unread-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(var(--dealer-accent-rgb), .42);
  background: rgba(var(--dealer-accent-rgb), .14);
  color: var(--dealer-accent);
  font: 800 10px var(--dd-font-body);
  white-space: nowrap;
  box-shadow: 0 8px 20px -14px rgba(var(--dealer-accent-rgb), .9);
}
.dd-unread-pill[hidden] { display: none; }
.dd-unread-pill.is-live {
  animation: dd-unread-pulse 1.05s var(--dd-ease-out) 3;
}
@keyframes dd-unread-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--dealer-accent-rgb), .38), 0 8px 20px -14px rgba(var(--dealer-accent-rgb), .9); }
  56% { box-shadow: 0 0 0 7px rgba(var(--dealer-accent-rgb), 0), 0 12px 28px -14px rgba(var(--dealer-accent-rgb), .95); }
}
.dd-card-sub {
  margin: 4px 0 0;
  font: 500 10.5px var(--dd-font-body);
  color: var(--dd-ink-3);
  letter-spacing: -.005em;
}

.dd-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dd-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--dd-font-body);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: -.005em;
  color: var(--dd-ink-3);
  cursor: pointer;
  transition: color var(--dd-t-2) var(--dd-ease);
}
.dd-link-btn:hover { color: var(--dd-sys-blue); }
.dd-link-btn span {
  display: inline-block;
  transition: transform var(--dd-t-2) var(--dd-ease);
}
.dd-link-btn:hover span { transform: translateX(3px); }

/* Pill button */
.dd-pill-btn {
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--dd-line-2);
  background: rgba(255,255,255,.025);
  color: var(--dd-ink-1);
  font-family: var(--dd-font-mono, 'Geist Mono', monospace);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background var(--dd-t-2) var(--dd-ease), border-color var(--dd-t-2) var(--dd-ease), color var(--dd-t-2) var(--dd-ease);
}
.dd-pill-btn:hover {
  background: rgba(255,255,255,.04);
  border-color: var(--dd-line-strong);
  color: var(--dd-ink-0);
}
.dd-pill-btn.is-active {
  background: rgba(255,255,255,.1);
  border-color: var(--dd-line-strong);
  color: var(--dd-ink-0);
}

/* Nudge group */
.dd-nudge-group { display: inline-flex; }
.dd-nudge {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--dd-line-2);
  background: rgba(255,255,255,.025);
  color: var(--dd-ink-1);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease);
}
.dd-nudge:first-child { border-radius: 5px 0 0 5px; border-right-width: 0; }
.dd-nudge:last-child  { border-radius: 0 5px 5px 0; }
.dd-nudge:hover {
  background: rgba(var(--dealer-accent-rgb), .14);
  border-color: rgba(var(--dealer-accent-rgb), .45);
  color: var(--dealer-accent);
}

.dd-select,
select[data-calendar-view] {
  height: 24px;
  padding: 0 22px 0 8px;
  border-radius: 5px;
  border: 1px solid var(--dd-line-2);
  background:
    url("data:image/svg+xml,%3csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,.6)' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") no-repeat right 7px center / 8px 4px,
    rgba(255,255,255,.025);
  color: var(--dd-ink-1);
  font: 600 10.5px var(--dd-font-body);
  letter-spacing: -.005em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--dd-t-1) var(--dd-ease), background-color var(--dd-t-1) var(--dd-ease);
}
.dd-select:hover { border-color: rgba(var(--dealer-accent-rgb), .42); }


/* =============================================================================
   ROW 1 — KPI STRIP
============================================================================= */

.dd-row-kpi {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
}
.dd-kpi-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr));
  gap: var(--dd-s-3);
}
/* ── Next recommended action (smart hero banner — whole card is tappable) */
.dd-row-next { margin-top: 2px; }
.dd-next {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--dd-r);
  border: 1px solid rgba(var(--dealer-accent-rgb), .26);
  background:
    linear-gradient(90deg, rgba(var(--dealer-accent-rgb), .16), rgba(var(--dealer-accent-rgb), .04) 38%, transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 42%, rgba(0,0,0,.12)),
    var(--dd-bg-1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 10px 24px -16px rgba(0,0,0,.7);
  cursor: pointer;
  animation: dd-fade-in var(--dd-t-3) var(--dd-ease-out);
  transition: opacity var(--dd-t-2) var(--dd-ease), transform var(--dd-t-2) var(--dd-ease), border-color var(--dd-t-2) var(--dd-ease), box-shadow var(--dd-t-2) var(--dd-ease);
}
.dd-next:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--dealer-accent-rgb), .42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 16px 30px -18px rgba(0,0,0,.75);
}
.dd-next:active { transform: translateY(0) scale(.995); }
.dd-next:focus-visible { outline: none; border-color: var(--dealer-accent); box-shadow: 0 0 0 3px rgba(var(--dealer-accent-rgb), .3); }
.dd-next.is-leaving { opacity: 0; transform: translateX(8px); }
/* "Stack" hint — peeked card edges behind the banner when more actions wait */
.dd-next-stack {
  position: absolute; left: 10px; right: 10px; bottom: -5px; height: 14px;
  border-radius: var(--dd-r); z-index: -1;
  border: 1px solid var(--dd-line-2);
  background: var(--dd-bg-2);
}
.dd-next-stack-2 { left: 18px; right: 18px; bottom: -9px; opacity: .6; }
.dd-next-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--dealer-accent-deep), var(--dealer-accent)); }
.dd-next-ico svg { width: 19px; height: 19px; }
.dd-next-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.dd-next-kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 9px var(--dd-font-body); letter-spacing: .15em; text-transform: uppercase; color: var(--dealer-accent-3); }
.dd-next-prio { font-style: normal; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; font-size: 8.5px; }
.dd-next-prio.is-high { background: rgba(var(--dealer-accent-rgb), .16); color: var(--dealer-accent); }
.dd-next-prio.is-med  { background: rgba(255,255,255,.07); color: var(--dd-ink-2); }
.dd-next-prio.is-low  { background: rgba(255,255,255,.05); color: var(--dd-ink-3); }
.dd-next-eta { display: inline-flex; align-items: center; gap: 3px; font-style: normal; letter-spacing: .02em; font-size: 9px; color: var(--dd-ink-3); text-transform: none; }
.dd-next-eta svg { width: 10px; height: 10px; }
.dd-next-label { font: 700 15px var(--dd-font-display); color: var(--dd-ink-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-next-sub { font: 500 12px var(--dd-font-body); color: var(--dd-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-next-cta { display: flex; align-items: center; gap: 8px; flex: none; }
.dd-next-more { font: 600 11px var(--dd-font-body); color: var(--dd-ink-3); margin-right: 2px; }
/* Step between recommended actions */
.dd-next-stepper { display: inline-flex; align-items: center; gap: 2px; }
.dd-next-nav {
  width: 26px; height: 28px; display: grid; place-items: center; border-radius: 8px;
  border: 0; background: transparent; color: var(--dd-ink-2); cursor: pointer;
  transition: color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease);
}
.dd-next-nav svg { width: 16px; height: 16px; }
.dd-next-nav:hover:not([disabled]) { color: var(--dd-ink-0); background: rgba(255,255,255,.06); }
.dd-next-nav:active:not([disabled]) { transform: scale(.9); }
.dd-next-nav[disabled] { opacity: .3; cursor: default; }
.dd-next-count { font: 700 11px var(--dd-font-mono, 'Geist Mono', monospace); color: var(--dd-ink-1); min-width: 30px; text-align: center; }
.dd-next-count i { font-style: normal; color: var(--dd-ink-3); }
.dd-next-divider { width: 1px; height: 20px; background: var(--dd-line-2); margin: 0 2px; }
.dd-next-icon-btn {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px;
  border: 1px solid var(--dd-line-2); background: var(--dd-bg-3); color: var(--dd-ink-2); cursor: pointer;
  transition: color var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease);
}
.dd-next-icon-btn svg { width: 15px; height: 15px; }
.dd-next-icon-btn:active { transform: scale(.92); }
.dd-next-icon-btn[data-action="task-done"]:hover { color: var(--dd-ok); border-color: rgba(var(--dd-ok-rgb), .6); background: rgba(var(--dd-ok-rgb), .12); }
.dd-next-icon-btn[data-action="task-dismiss"]:hover { color: var(--dd-ink-0); border-color: var(--dd-line-strong); }
/* Run cue — NOT a button. A quiet label + arrow that signals the whole card
   is tappable ("tap to {verb}"). It can't be clicked on its own. */
.dd-next-go {
  display: inline-flex; align-items: center; gap: 9px; padding: 0 4px 0 4px;
  background: none; border: 0;
  font: 750 13px var(--dd-font-body); letter-spacing: .01em;
  pointer-events: none;
}
.dd-next-go-text {
  font-style: normal;
  background: linear-gradient(180deg, var(--dealer-accent-3), var(--dealer-accent-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
}
.dd-next-arrow { width: 24px; height: 15px; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
/* The shaft starts short and grows to full as the head slides right — a clean,
   confident "go" motion instead of a boxed button. */
.dd-next-arrow-shaft {
  stroke-dasharray: 18;
  stroke-dashoffset: 9;
  transition: stroke-dashoffset var(--dd-t-2) var(--dd-ease-out);
}
.dd-next-arrow path:last-child { transition: transform var(--dd-t-2) var(--dd-ease-out); transform-box: fill-box; }
.dd-next:hover .dd-next-arrow-shaft { stroke-dashoffset: 0; }
.dd-next:hover .dd-next-arrow path:last-child { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .dd-next-arrow-shaft { stroke-dashoffset: 0; transition: none; }
  .dd-next:hover .dd-next-arrow path:last-child { transform: none; }
}
@media (max-width: 720px) {
  .dd-next { flex-wrap: wrap; }
  .dd-next-sub { display: none; }
  .dd-next-label { white-space: normal; }
  .dd-next-main { flex-basis: calc(100% - 52px); }
  .dd-next-cta { width: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .dd-next, .dd-next:hover, .dd-next:active { transform: none; }
  .dd-next:hover .dd-next-go svg { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .dd-next, .dd-next.is-leaving { animation: none; transition: none; } .dd-next-btn:hover, .dd-next-icon-btn:active { transform: none; } }

/* ── Today's Tasks */
.dd-tasks { display: flex; flex-direction: column; gap: 6px; }
.dd-task {
  display: grid; grid-template-columns: 26px minmax(0,1fr) auto auto; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 11px; border: 1px solid var(--dd-line);
  background: rgba(255,255,255,.018);
  transition: background var(--dd-t-2) var(--dd-ease), border-color var(--dd-t-2) var(--dd-ease), transform var(--dd-t-2) var(--dd-ease), opacity var(--dd-t-2) var(--dd-ease);
}
.dd-task:hover { background: rgba(255,255,255,.035); border-color: var(--dd-line-strong); }
.dd-task.is-leaving { opacity: 0; transform: translateX(8px); }
.dd-task-check {
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; cursor: pointer;
  border: 1.5px solid var(--dd-line-strong); background: transparent; color: transparent;
  transition: background var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease);
}
.dd-task-check svg { width: 13px; height: 13px; }
.dd-task-check:hover { border-color: var(--dd-ok); color: var(--dd-ok); background: rgba(var(--dd-ok-rgb), .12); }
.dd-task-ico { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--dd-ink-2); background: rgba(255,255,255,.05); }
.dd-task-ico svg { width: 14px; height: 14px; }
.dd-task-main { min-width: 0; display: grid; gap: 1px; }
.dd-task-main strong { font: 650 13px var(--dd-font-body); color: var(--dd-ink-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-task-main span { font: 500 11px var(--dd-font-body); color: var(--dd-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-task-go {
  flex: none; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--dd-line-2);
  background: var(--dd-bg-3); color: var(--dd-ink-1); font: 650 12px var(--dd-font-body); cursor: pointer;
  transition: border-color var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease);
}
.dd-task-go:hover { border-color: rgba(var(--dealer-accent-rgb), .55); color: #fff; background: rgba(var(--dealer-accent-rgb), .2); }
.dd-task-skip {
  flex: none; padding: 6px 9px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--dd-ink-3); font: 700 11px var(--dd-font-body); cursor: pointer;
  transition: color var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease);
}
.dd-task-skip:hover { color: var(--dd-ink-0); border-color: var(--dd-line-2); background: rgba(255,255,255,.04); }
.dd-tasks-clear { display: grid; justify-items: center; gap: 6px; padding: 26px 16px; text-align: center; }
.dd-tasks-clear-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--dd-ok); background: rgba(var(--dd-ok-rgb), .12); }
.dd-tasks-clear-ico svg { width: 22px; height: 22px; }
.dd-tasks-clear strong { font: 700 14px var(--dd-font-display); color: var(--dd-ink-0); }
.dd-tasks-clear span { font: 500 12px var(--dd-font-body); color: var(--dd-ink-3); }
@media (prefers-reduced-motion: reduce) { .dd-task { transition: none; } }
@media (max-width: 520px) {
  .dd-task { grid-template-columns: 26px minmax(0,1fr) auto; }
  .dd-task-skip { grid-column: 2 / 4; justify-self: start; padding-left: 0; }
}
/* Revenue is the hero: spans two columns and reads bigger. */
.dd-kpi-hero { grid-column: 1; }
@media (max-width: 1100px) { .dd-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-kpi-hero { grid-column: 1 / -1; } }
@media (max-width: 560px) { .dd-kpi-grid { grid-template-columns: 1fr; } .dd-kpi-hero { grid-column: 1; } }

.dd-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: auto;
  min-height: 96px;
  padding: 15px 18px;
  border-radius: 14px;
  border: 1px solid var(--dd-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.004)),
    var(--dd-bg-1);
  overflow: hidden;
  opacity: 0;
  animation: dd-fade-in var(--dd-t-3) var(--dd-ease-out) forwards;
  transition:
    border-color var(--dd-t-2) var(--dd-ease),
    transform var(--dd-t-2) var(--dd-ease),
    box-shadow var(--dd-t-2) var(--dd-ease);
  isolation: isolate;
}
.dd-kpi:nth-child(1) { animation-delay: 20ms; }
.dd-kpi:nth-child(2) { animation-delay: 50ms; }
.dd-kpi:nth-child(3) { animation-delay: 80ms; }
.dd-kpi:nth-child(4) { animation-delay: 110ms; }
.dd-kpi:nth-child(5) { animation-delay: 140ms; }

/* Only the Revenue hero carries an accent wash; the rest stay neutral. */
.dd-kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 45%);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--dd-t-2);
  z-index: 0;
}
.dd-kpi:hover {
  transform: translateY(-2px);
  border-color: var(--dd-line-strong);
  box-shadow: 0 16px 32px -22px rgba(0,0,0,0.65);
}
.dd-kpi:hover::before { opacity: 1; }

/* Top row: icon + label */
.dd-kpi-top {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
}

.dd-kpi-ico {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--dd-sys-grad);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -6px var(--dd-sys-glow);
  position: relative;
  overflow: hidden;
}
/* Disciplined palette: the accent (red) marks the Revenue hero only; every
   other metric icon is neutral. Color carries meaning (success/trend), not
   per-metric decoration. */
.dd-kpi.is-tone-accent  .dd-kpi-ico { background: linear-gradient(135deg, var(--dealer-accent-deep), var(--dealer-accent)); box-shadow: 0 6px 14px -6px var(--dd-sys-glow); }
.dd-kpi.is-tone-success .dd-kpi-ico,
.dd-kpi.is-tone-info    .dd-kpi-ico,
.dd-kpi.is-tone-neutral .dd-kpi-ico { background: rgba(255,255,255,.07); color: var(--dd-ink-1); box-shadow: none; border: 1px solid var(--dd-line-2); }
/* Subtle breathing shimmer on icon — feels alive */
.dd-kpi-ico::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  animation: dd-icon-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
.dd-kpi.is-tone-neutral .dd-kpi-ico::after { display: none; }
@keyframes dd-icon-shimmer {
  0%, 100% { transform: translateX(-100%); opacity: 0; }
  40%      { opacity: 1; }
  60%      { transform: translateX(100%); opacity: 0; }
}
.dd-kpi:nth-child(2) .dd-kpi-ico::after { animation-delay: 0.8s; }
.dd-kpi:nth-child(3) .dd-kpi-ico::after { animation-delay: 1.6s; }
.dd-kpi:nth-child(4) .dd-kpi-ico::after { animation-delay: 2.4s; }
.dd-kpi:nth-child(5) .dd-kpi-ico::after { animation-delay: 3.2s; }
/* Hero (Revenue) emphasis */
.dd-kpi-hero {
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(var(--dealer-accent-rgb), .07), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.006)),
    var(--dd-bg-1);
  border-color: rgba(var(--dealer-accent-rgb), .16);
}
.dd-kpi-hero .dd-kpi-value { font-size: 30px; }
.dd-kpi-hero::before { opacity: 1; }
.dd-kpi-ico svg {
  width: 15px; height: 15px;
  position: relative; z-index: 1;
}

.dd-kpi-label {
  flex: 1; min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--dd-font-body);
  font-weight: 500;
  font-size: 10.5px;
  color: var(--dd-ink-3);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Big number row */
.dd-kpi-value-row {
  position: relative; z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.dd-kpi-value {
  font: 600 28px/1 var(--dd-font-display);
  letter-spacing: -.035em;
  color: var(--dd-ink-0);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dd-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  font: 600 10px var(--dd-font-mono, 'Geist Mono', monospace);
  letter-spacing: -.005em;
  white-space: nowrap;
}
.dd-kpi-trend.is-up   { background: rgba(var(--dd-ok-rgb), .14);    color: var(--dd-ok); }
.dd-kpi-trend.is-down { background: rgba(var(--dd-danger-rgb), .14); color: var(--dd-danger); }
.dd-kpi-trend.is-flat { background: rgba(255,255,255,.05);          color: var(--dd-ink-3); }
.dd-kpi-trend svg { width: 9px; height: 9px; }

/* Sparkline at bottom — taller, more visible, with path-draw animation */
.dd-kpi-spark {
  position: relative; z-index: 1;
  width: calc(100% + 36px);
  margin-left: -18px;
  margin-right: -18px;
  margin-top: auto;
  margin-bottom: -16px;
  height: 24px;
  overflow: hidden;
}
.dd-kpi-spark svg {
  width: 100%; height: 100%; display: block;
  overflow: visible;
}
.dd-kpi-spark {
  color: var(--dd-ink-3);
}
.dd-kpi.is-tone-accent .dd-kpi-spark { color: var(--dealer-accent); }
.dd-kpi-spark .dd-spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Animate the line being drawn in */
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dd-spark-draw 1.4s var(--dd-ease-out) forwards;
}
.dd-kpi-spark .dd-spark-line.is-empty {
  stroke: var(--dd-ink-3);
  opacity: .5;
  stroke-width: 1.3;
}
.dd-kpi-spark .dd-spark-fill {
  fill: currentColor;
  stroke: none;
  opacity: 0;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 92%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 92%);
  animation: dd-spark-fade 1.6s var(--dd-ease-out) 0.6s forwards;
}
.dd-kpi-spark .dd-spark-fill.is-empty {
  opacity: 0;
  animation: dd-spark-fade-empty 1.6s var(--dd-ease-out) 0.6s forwards;
}
@keyframes dd-spark-fade-empty {
  to { opacity: 0.45; }
}
@keyframes dd-spark-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes dd-spark-fade {
  to { opacity: .22; }
}
.dd-kpi:nth-child(1) .dd-kpi-spark .dd-spark-line { animation-delay: 0.15s; }
.dd-kpi:nth-child(2) .dd-kpi-spark .dd-spark-line { animation-delay: 0.28s; }
.dd-kpi:nth-child(3) .dd-kpi-spark .dd-spark-line { animation-delay: 0.41s; }
.dd-kpi:nth-child(4) .dd-kpi-spark .dd-spark-line { animation-delay: 0.54s; }
.dd-kpi:nth-child(5) .dd-kpi-spark .dd-spark-line { animation-delay: 0.67s; }


/* =============================================================================
   ROW 2 — TODAY'S PIPELINE (3-column kanban)
============================================================================= */

.dd-pipeline-card { display: flex; flex-direction: column; min-width: 0; }
.dd-pipeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dd-s-3);
  min-width: 0;
  flex: 1;
}

.dd-pipeline-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--dd-line);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.014), rgba(255,255,255,0.004));
}
.dd-pipeline-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--dd-line);
}
.dd-pipeline-column-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--dd-font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -.015em;
  color: var(--dd-ink-0);
}
.dd-pipeline-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dd-sys-blue);
  box-shadow: 0 0 8px rgba(var(--dealer-accent-rgb),0.55);
}
/* Column-specific dot colors using the system gradient progression */
.dd-pipeline-column:nth-child(1) .dd-pipeline-dot {
  background: var(--dd-sys-blue);
  box-shadow: 0 0 8px rgba(var(--dealer-accent-rgb),0.55);
}
.dd-pipeline-column:nth-child(2) .dd-pipeline-dot {
  background: var(--dd-sys-violet);
  box-shadow: 0 0 8px rgba(var(--dealer-accent-rgb),0.46);
}
.dd-pipeline-column:nth-child(3) .dd-pipeline-dot {
  background: var(--dd-sys-purple);
  box-shadow: 0 0 8px rgba(var(--dealer-accent-rgb),0.38);
}

.dd-pipeline-column-count {
  font-family: var(--dd-font-mono, 'Geist Mono', monospace);
  font-weight: 500;
  font-size: 10.5px;
  color: var(--dd-ink-2);
  background: rgba(255,255,255,.04);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.dd-pipeline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  min-height: 0;
  flex: 1;
  max-height: 280px;
  overflow-y: auto;
}
.dd-pipeline-list::-webkit-scrollbar { width: 5px; }
.dd-pipeline-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 999px; }

.dd-pipeline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 12px 32px;
  text-align: center;
  color: var(--dd-ink-3);
  font-family: var(--dd-font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -.005em;
  position: relative;
}
.dd-pipeline-empty::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--dealer-accent-rgb),0.10), transparent 65%),
    rgba(255,255,255,.015);
  border: 1px dashed var(--dd-line-2);
  position: relative;
}
/* Subtle plus-sign hint inside the dashed circle */
.dd-pipeline-empty::after {
  content: "";
  position: absolute;
  top: 28px;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  color: var(--dd-ink-4);
  opacity: 0.4;
}

/* Pipeline lead/quote/booking card — booking-row style from marketing mockup */
.dd-pcard {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--dd-line);
  background: rgba(255,255,255,0.025);
  cursor: pointer;
  transition:
    background var(--dd-t-2) var(--dd-ease),
    border-color var(--dd-t-2) var(--dd-ease),
    transform var(--dd-t-2) var(--dd-ease);
}
.dd-pcard:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--dd-line-strong);
  transform: translateY(-1px);
}

/* Avatar removed per dealer request — cards lead with the customer name. */
.dd-pcard::before { content: none; display: none; }

.dd-pcard-name {
  grid-column: 1;
  font-family: var(--dd-font-body);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: -.005em;
  color: var(--dd-ink-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-pcard-badge {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--dd-font-mono, 'Geist Mono', monospace);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.dd-pcard-badge.is-new       { background: var(--dd-sys-soft); color: var(--dd-sys-blue); }
.dd-pcard-badge.is-contacted { background: rgba(255,255,255,.06); color: var(--dd-ink-1); }
.dd-pcard-badge.is-scheduled { background: rgba(var(--dd-ok-rgb), .13); color: var(--dd-ok); }
.dd-pcard-badge.is-sent      { background: rgba(var(--dd-warn-rgb), .14); color: var(--dd-warn); }
.dd-pcard-badge.is-viewed    { background: rgba(255,255,255,.08); color: var(--dd-ink-1); }
.dd-pcard-badge.is-confirmed { background: rgba(var(--dd-ok-rgb), .13); color: var(--dd-ok); }
.dd-pcard-badge.is-pending   { background: var(--dd-sys-soft); color: var(--dd-sys-blue); }

.dd-pcard-sub {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--dd-font-mono, 'Geist Mono', monospace);
  font-weight: 400;
  font-size: 10.5px;
  color: var(--dd-ink-3);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-pcard-foot {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  margin-top: 0;
}
.dd-pcard-price {
  font-family: var(--dd-font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: -.02em;
  color: var(--dd-ink-0);
  font-variant-numeric: tabular-nums;
}
.dd-pcard-time {
  font-family: var(--dd-font-mono, 'Geist Mono', monospace);
  font-weight: 400;
  font-size: 10px;
  color: var(--dd-ink-3);
}

/* Mini chat column (replaces New Leads in Today's Pipeline) */
.dd-pchat-list { display: flex; flex-direction: column; gap: 6px; }
.dd-pchat-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 9px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--dd-line);
  background: rgba(255,255,255,0.025);
  cursor: pointer;
  transition: background var(--dd-t-2) var(--dd-ease), border-color var(--dd-t-2) var(--dd-ease), transform var(--dd-t-2) var(--dd-ease);
}
.dd-pchat-row:hover { background: rgba(255,255,255,0.045); border-color: var(--dd-line-strong); transform: translateY(-1px); }
.dd-pchat-row.is-unread { border-color: color-mix(in srgb, var(--dealer-accent) 38%, var(--dd-line)); }
.dd-pchat-av {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--dd-font-mono, 'Geist Mono', monospace);
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  color: var(--dd-ink-1);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--dd-line-2);
}
.dd-pchat-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dd-pchat-main strong { font-family: var(--dd-font-body); font-weight: 500; font-size: 12px; color: var(--dd-ink-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-pchat-main span { font-size: 10.5px; color: var(--dd-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-pchat-time { font-family: var(--dd-font-mono, 'Geist Mono', monospace); font-size: 9.5px; color: var(--dd-ink-3); font-style: normal; white-space: nowrap; }
.dd-pchat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dealer-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dealer-accent) 22%, transparent); }
.dd-pchat-all {
  margin-top: 8px; width: 100%;
  padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--dd-line);
  background: transparent; color: var(--dd-ink-1);
  font-family: var(--dd-font-mono, 'Geist Mono', monospace); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; transition: background var(--dd-t-2) var(--dd-ease), color var(--dd-t-2) var(--dd-ease), border-color var(--dd-t-2) var(--dd-ease);
}
.dd-pchat-all:hover { background: rgba(255,255,255,0.04); color: var(--dd-ink-0); border-color: var(--dd-line-strong); }

.dd-row-quote-booking { min-width: 0; }
.dd-qb-card { min-width: 0; }
.dd-qb-timeline-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.dd-qb-empty {
  grid-column: 1 / -1;
  min-height: 142px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 26px 18px;
  border: 1px dashed rgba(var(--dealer-accent-rgb), .28);
  border-radius: 14px;
  background:
    radial-gradient(55% 90% at 50% 0%, rgba(var(--dealer-accent-rgb), .11), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.006));
}
.dd-qb-empty-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(var(--dealer-accent-rgb), .32);
  background: rgba(var(--dealer-accent-rgb), .11);
  color: var(--dealer-accent);
  box-shadow: 0 16px 34px -24px rgba(var(--dealer-accent-rgb), .9);
}
.dd-qb-empty-icon svg {
  width: 24px;
  height: 24px;
}
.dd-qb-empty strong {
  color: var(--dd-ink-0);
  font: 760 13px var(--dd-font-body);
}
.dd-qb-empty span:not(.dd-qb-empty-icon) {
  max-width: 380px;
  color: var(--dd-ink-2);
  font: 540 11.5px/1.45 var(--dd-font-body);
}
.dd-qb-item {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--dd-line);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
  cursor: pointer;
  transition:
    background var(--dd-t-2) var(--dd-ease),
    border-color var(--dd-t-2) var(--dd-ease),
    transform var(--dd-t-2) var(--dd-ease);
}
.dd-qb-item:hover {
  background: rgba(255,255,255,.03);
  border-color: var(--dd-line-strong);
  transform: translateY(-1px);
}
.dd-qb-item-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.dd-qb-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--dd-line-2);
  color: var(--dd-ink-1);
  font: 800 11px var(--dd-font-display);
}
.dd-qb-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.dd-qb-main strong {
  overflow: hidden;
  color: var(--dd-ink-0);
  font: 750 12.5px var(--dd-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-qb-main span {
  overflow: hidden;
  color: var(--dd-ink-2);
  font: 540 10.5px var(--dd-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-qb-meta {
  display: grid;
  justify-items: end;
  gap: 3px;
}
.dd-qb-meta b {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(var(--dealer-accent-rgb), .12);
  color: var(--dealer-accent);
  font: 800 9px var(--dd-font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dd-qb-meta b.is-booking {
  background: rgba(var(--dd-ok-rgb), .13);
  color: var(--dd-ok);
}
.dd-qb-meta span {
  color: var(--dd-ink-3);
  font: 650 9.5px var(--dd-font-body);
}
.dd-qb-meta .dd-qb-amount {
  color: var(--dd-ink-0);
  font: 800 15px var(--dd-font-display);
  letter-spacing: -.01em;
}
.dd-qb-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  /* The dots + track are always visible at a fixed height (no layout jump);
     only the labels fade in on hover. One smooth, calm transition. */
  padding-top: 4px;
  transition: none;
}
.dd-qb-item:hover, .dd-qb-item:focus-within { /* placeholder to keep specificity grouping */ }
@media (prefers-reduced-motion: reduce) { .dd-qb-steps { transition: none; } }
.dd-qb-steps::before,
.dd-qb-steps::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 13px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.dd-qb-steps::after {
  right: auto;
  width: var(--qb-progress, 0%);
  background: var(--dd-ok);
  opacity: .85;
}
.dd-qb-steps span {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
}
.dd-qb-steps i {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: #151820;
}
.dd-qb-steps .is-done i {
  border-color: rgba(var(--dd-ok-rgb), .5);
  background: rgba(var(--dd-ok-rgb), .85);
}
.dd-qb-steps b {
  overflow: hidden;
  max-width: 100%;
  color: var(--dd-ink-3);
  font: 700 9.5px/1.2 var(--dd-font-body);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Height is always reserved so nothing jumps; labels simply fade in on hover. */
  opacity: 0;
  transition: opacity var(--dd-t-2) var(--dd-ease-out);
}
.dd-qb-item:hover .dd-qb-steps b,
.dd-qb-item:focus-within .dd-qb-steps b { opacity: 1; }
.dd-qb-steps .is-done b { color: var(--dd-ink-1); }
@media (prefers-reduced-motion: reduce) {
  .dd-qb-steps b { transition: none; }
}


/* =============================================================================
   ROW 2 — LIVE FEED (timeline)
============================================================================= */

.dd-feed-card { display: flex; flex-direction: column; min-width: 0; }
.dd-feed {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 300px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
.dd-feed::-webkit-scrollbar { width: 5px; }
.dd-feed::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 999px; }

.dealer-activity-header { display: none; }

/* Day-group subheader in the activity feed (Today / Yesterday / Earlier) */
.dd-feed-group {
  position: sticky; top: 0; z-index: 3;
  padding: 6px 4px 4px;
  font: 800 8.5px var(--dd-font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--dd-ink-3);
  background: linear-gradient(180deg, var(--dd-bg-1) 60%, transparent);
}
.dd-feed-group:first-child { padding-top: 0; }

.dealer-activity-row,
.dd-feed-row {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: flex-start;
  gap: 0 10px;
  padding: 6px 4px 6px 0;
  border-bottom: 1px solid var(--dd-line);
  transition: background var(--dd-t-1) var(--dd-ease);
  animation: dd-feed-in var(--dd-t-3) var(--dd-ease-out);
}
@keyframes dd-feed-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .dd-feed-row { animation: none; } }
.dealer-activity-row:last-child,
.dd-feed-row:last-child { border-bottom: 0; }
.dealer-activity-row:hover,
.dd-feed-row:hover {
  background: rgba(255,255,255,.018);
}
.dealer-activity-row.is-unread,
.dd-feed-row.is-unread {
  border-color: rgba(var(--dealer-accent-rgb), .25);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(var(--dealer-accent-rgb), .095), transparent 58%),
    rgba(var(--dealer-accent-rgb), .035);
}
.dealer-activity-row.is-unread::after,
.dd-feed-row.is-unread::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--dealer-accent);
  box-shadow: 0 0 14px rgba(var(--dealer-accent-rgb), .85);
}

/* Timeline rail bullet — gradient avatar matching marketing mockup */
.dealer-type-icon,
.dd-feed-bullet {
  position: relative;
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--dd-line-2);
  color: var(--dd-ink-1);
  font-family: var(--dd-font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: -.02em;
  z-index: 2;
}
/* Disciplined palette: feed bullets are neutral and differentiate by their
   type letter, not by hue. Color is reserved for meaning — only alerts get
   the warning amber. */
.dd-feed-row.is-cat-booking .dd-feed-bullet,
.dd-feed-row.is-cat-message .dd-feed-bullet,
.dd-feed-row.is-cat-quote   .dd-feed-bullet,
.dd-feed-row.is-cat-invoice .dd-feed-bullet,
.dd-feed-row.is-cat-visit   .dd-feed-bullet { background: rgba(255,255,255,.08); color: var(--dd-ink-1); box-shadow: none; border: 1px solid var(--dd-line-2); }
.dd-feed-row.is-cat-alert   .dd-feed-bullet { background: rgba(var(--dd-warn-rgb), .16); color: var(--dd-warn); box-shadow: none; border: 1px solid rgba(var(--dd-warn-rgb), .4); }
/* Unread rows get a soft live pulse — the single brand "needs attention" cue. */
.dd-feed-row.is-unread .dd-feed-bullet::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(var(--dealer-accent-rgb), .5);
  animation: dd-feed-pulse 2.4s var(--dd-ease-out) infinite;
}
@keyframes dd-feed-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--dealer-accent-rgb), .45); } 70% { box-shadow: 0 0 0 7px rgba(var(--dealer-accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--dealer-accent-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .dd-feed-row.is-unread .dd-feed-bullet::after { animation: none; } }
.dd-feed-row::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--dd-line);
  z-index: 1;
}
.dd-feed-row:first-child::before { top: 12px; }
.dd-feed-row:last-child::before  { bottom: calc(100% - 14px); }

/* Activity main column */
.dealer-activity-detail,
.dd-feed-main {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.dealer-activity-badge,
.dd-feed-kind {
  display: none; /* compress: row icon already encodes type */
}
.dealer-activity-detail strong,
.dd-feed-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font: 600 11.5px var(--dd-font-body);
  color: var(--dd-ink-0);
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-row-unread {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(var(--dealer-accent-rgb), .16);
  border: 1px solid rgba(var(--dealer-accent-rgb), .36);
  color: var(--dealer-accent);
  font: 800 8.5px var(--dd-font-body);
  text-transform: uppercase;
}
.dealer-activity-detail > span:not(.dealer-activity-badge),
.dd-feed-sub {
  font: 500 10.5px var(--dd-font-body);
  color: var(--dd-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dealer-activity-meta,
.dd-feed-meta {
  display: none; /* hidden in compact view; legacy nodes still rendered for parity */
}
.dd-feed-meta-line {
  color: var(--dd-ink-3);
  font: 500 10.5px var(--dd-font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dealer-activity-customer { display: none; }

.dealer-activity-time,
.dd-feed-time {
  grid-row: 1;
  grid-column: 3;
  font: 500 10px var(--dd-font-body);
  color: var(--dd-ink-3);
  white-space: nowrap;
}

/* Actions appear on hover */
.dealer-activity-actions,
.dd-feed-actions {
  grid-row: 2;
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--dd-t-1) var(--dd-ease), transform var(--dd-t-2) var(--dd-ease);
}
.dealer-activity-row:hover .dealer-activity-actions,
.dd-feed-row:hover .dd-feed-actions {
  opacity: 1;
  transform: translateY(0);
}
.dealer-activity-actions button,
.dd-feed-actions button {
  height: 22px;
  padding: 0 7px;
  border-radius: 5px;
  border: 1px solid var(--dd-line-2);
  background: rgba(255,255,255,.025);
  color: var(--dd-ink-1);
  font: 600 9.5px var(--dd-font-body);
  cursor: pointer;
  transition: background var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease);
}
.dealer-activity-actions button:hover,
.dd-feed-actions button:hover {
  background: var(--dd-bg-3);
  border-color: var(--dd-line-strong);
  color: var(--dd-ink-0);
}
.dealer-action-primary {
  background: rgba(var(--dealer-accent-rgb), .14) !important;
  border-color: rgba(var(--dealer-accent-rgb), .42) !important;
  color: var(--dealer-accent) !important;
}
.dealer-action-primary:hover {
  background: rgba(var(--dealer-accent-rgb), .22) !important;
}
.dealer-action-danger {
  background: rgba(var(--dd-danger-rgb), .14) !important;
  border-color: rgba(var(--dd-danger-rgb), .4) !important;
  color: var(--dd-danger) !important;
}


/* =============================================================================
   ROW 3 — MINI CALENDAR (week)
============================================================================= */

.dd-calendar-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dd-calendar {
  display: grid;
  grid-template-columns: 38px repeat(7, minmax(0, 1fr));
  grid-auto-rows: 46px;
  border: 1px solid var(--dd-line);
  border-radius: var(--dd-r);
  overflow: hidden;
  background: rgba(255,255,255,.010);
  min-height: 0;
}
.dd-calendar .dealer-calendar-head { height: auto; }
.dealer-calendar-cell {
  position: relative;
  min-height: 27px;
  padding: 4px;
  border-right: 1px solid var(--dd-line);
  border-bottom: 1px solid var(--dd-line);
  font: 500 10px var(--dd-font-body);
  color: var(--dd-ink-2);
}
.dealer-calendar-cell:nth-child(8n) { border-right: 0; }
.dealer-calendar-cell.dealer-calendar-head {
  text-align: center;
  background: rgba(255,255,255,.015);
}
.dealer-calendar-head span {
  display: block;
  font: 700 8.5px var(--dd-font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dd-ink-3);
}
.dealer-calendar-head strong {
  display: block;
  font: 600 15px var(--dd-font-display);
  letter-spacing: -.015em;
  color: var(--dd-ink-0);
}
.dealer-calendar-head.is-today strong {
  color: var(--dealer-accent);
  border: 1.5px solid rgba(var(--dealer-accent-rgb), .55);
  border-radius: 999px;
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  margin: 2px auto 0;
}
.dealer-calendar-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 6px 0 0;
  font-family: var(--dd-font-mono, 'Geist Mono', monospace);
  font-weight: 500;
  font-size: 10px;
  color: var(--dd-ink-3);
  letter-spacing: 0;
  line-height: 1;
}

.dealer-event {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 4px;
  display: grid;
  gap: 1px;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--dd-line-2);
  border-left: 2px solid rgba(var(--dealer-accent-rgb), .5);
  color: var(--dd-ink-0);
  font-family: var(--dd-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: -.005em;
  cursor: default;
  transition: background var(--dd-t-2) var(--dd-ease), transform var(--dd-t-2) var(--dd-ease), border-color var(--dd-t-2) var(--dd-ease);
}
.dealer-event:hover {
  background: rgba(255,255,255,.08);
  border-left-color: var(--dealer-accent);
  transform: translateY(-1px);
}
.dealer-event strong {
  font-weight: 700;
  font-size: 10px;
  color: var(--dd-ink-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dealer-event span {
  font-size: 9px;
  color: rgba(255,255,255,.78);
}
.dealer-calendar-empty {
  grid-column: 1 / -1;
  display: grid; justify-items: center; gap: 7px;
  padding: 22px 14px;
  text-align: center;
  font: 500 11px var(--dd-font-body);
  color: var(--dd-ink-3);
}
.dd-cal-empty-ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--dd-ink-2); background: rgba(255,255,255,.05); }
.dd-cal-empty-ico svg { width: 19px; height: 19px; }
.dealer-calendar-empty strong { font: 700 13px var(--dd-font-display); color: var(--dd-ink-1); }
.dd-cal-empty-sub { font: 500 11px var(--dd-font-body); color: var(--dd-ink-3); }
.dealer-calendar-empty .dd-btn { margin-top: 4px; }

.dd-app[data-view="calendar-full"] .dd-content {
  grid-template-rows: minmax(calc(100vh - var(--dd-topbar-h) - 32px), auto);
}

.dd-calendar-full-row { min-width: 0; }

.dd-calendar-full-card {
  min-height: calc(100vh - var(--dd-topbar-h) - 48px);
  display: flex;
  flex-direction: column;
}

.dd-calendar-full-card .dd-card-head {
  align-items: center;
}

.dd-calendar-full-card .dd-card-actions {
  gap: 9px;
}

.dd-calendar-full-card .dd-pill-btn {
  height: 38px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 750;
}

.dd-calendar-full-card .dd-nudge-group {
  overflow: hidden;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--dd-line-2);
}

.dd-calendar-full-card .dd-nudge {
  width: 42px;
  height: 38px;
  border-color: transparent;
  background: rgba(255,255,255,.035);
  font-size: 22px;
  font-weight: 700;
}

.dd-calendar-full-card .dd-nudge:first-child,
.dd-calendar-full-card .dd-nudge:last-child {
  border-radius: 0;
}

.dd-calendar-full-card .dd-btn {
  min-height: 38px;
  padding-inline: 16px;
  border-radius: 12px;
  font-size: 11.5px;
}

.dd-calendar-full-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 14px;
  min-height: 0;
  margin-top: 14px;
  flex: 1;
}

.dd-calendar-full-main,
.dd-calendar-agenda {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  overflow: hidden;
}

.dd-calendar-day-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--dd-line);
}

.dd-calendar-day {
  display: grid;
  gap: 4px;
  min-height: 86px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: var(--dd-ink-2);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease);
}

.dd-calendar-day:hover {
  transform: translateY(-1px);
  border-color: var(--dd-line-strong);
}

.dd-calendar-day.is-selected {
  border-color: rgba(var(--dealer-accent-rgb), .55);
  background: rgba(var(--dealer-accent-rgb), .12);
}

.dd-calendar-day span {
  color: var(--dd-ink-3);
  font: 800 10px var(--dd-font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dd-calendar-day strong {
  color: var(--dd-ink-0);
  font: 700 28px/1 var(--dd-font-display);
}

.dd-calendar-day.is-today strong {
  color: var(--dealer-accent);
}

.dd-calendar-day em {
  color: var(--dd-ink-3);
  font: 600 11px var(--dd-font-body);
  font-style: normal;
}
/* Days with bookings: accent ring + a dot+count badge so it's obvious which
   weekdays have jobs scheduled. */
.dd-calendar-day.has-events {
  border-color: var(--dd-line-2);
}
.dd-calendar-day-count {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--dealer-accent); font-weight: 700;
}
.dd-calendar-day-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--dealer-accent);
  box-shadow: 0 0 0 3px rgba(var(--dealer-accent-rgb), .18);
}
.dd-calendar-day-open { color: var(--dd-ink-3); opacity: .7; }
/* Flash highlight when jumping to a focused booking */
.is-focus-flash {
  animation: dd-focus-flash 2.2s ease;
  border-color: var(--dealer-accent) !important;
}
@keyframes dd-focus-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--dealer-accent-rgb), 0); }
  15% { box-shadow: 0 0 0 4px rgba(var(--dealer-accent-rgb), .5); }
  50% { box-shadow: 0 0 0 4px rgba(var(--dealer-accent-rgb), .28); }
}

.dd-calendar-full-timeline {
  display: grid;
  max-height: calc(100vh - var(--dd-topbar-h) - 245px);
  overflow-y: auto;
}

.dd-calendar-hour {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  min-height: 74px;
  border-bottom: 1px solid var(--dd-line);
}

.dd-calendar-hour:last-child { border-bottom: 0; }

.dd-calendar-hour time {
  padding: 14px 12px;
  color: var(--dd-ink-3);
  text-align: right;
  font: 600 10px var(--dd-font-mono, 'Geist Mono', monospace);
  border-right: 1px solid var(--dd-line);
}

.dd-calendar-hour > div {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 10px;
  min-width: 0;
}

.dd-calendar-open-slot {
  color: var(--dd-ink-3);
  font: 600 11px var(--dd-font-body);
  padding: 8px 10px;
}

/* ===== Rich timeline booking card ===== */
.dd-cal-card {
  display: grid;
  grid-template-columns: 72px 44px minmax(150px, 1.2fr) minmax(150px, 1.1fr) minmax(120px, 1fr) auto 24px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--dd-line-2);
  background: rgba(255,255,255,.02);
  cursor: pointer;
  border-left: 3px solid rgba(var(--dealer-accent-rgb), .55);
  transition: border-color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease), transform var(--dd-t-2) var(--dd-ease);
}
.dd-cal-card:hover { transform: translateY(-1px); border-color: var(--cust, rgba(var(--dealer-accent-rgb), .4)); background: var(--cust-soft, rgba(var(--dealer-accent-rgb), .05)); }
/* Customer accent stripe on the left edge so each booking reads as that
   customer at a glance, matching the same per-customer color used in the
   Active Clients cards and the manage popup. */
.dd-cal-card { position: relative; }
.dd-cal-card::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--cust, transparent);
  opacity: .9;
}
.dd-cal-card-avatar-cust {
  background: var(--cust-soft, rgba(255,255,255,.07)) !important;
  border-color: var(--cust, var(--dd-line-2)) !important;
  color: var(--cust, var(--dd-ink-1)) !important;
}
.dd-cal-card.is-selected {
  border-color: rgba(var(--dealer-accent-rgb), .55); border-left-color: var(--dealer-accent);
  background: linear-gradient(135deg, rgba(var(--dealer-accent-rgb), .12), rgba(255,255,255,.02));
  box-shadow: 0 0 0 1px rgba(var(--dealer-accent-rgb), .25);
}
.dd-cal-card-time { font: 700 11.5px/1.3 var(--dd-font-mono, 'Geist Mono', monospace); color: var(--dd-ink-2); }
.dd-cal-card-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.07); border: 1px solid var(--dd-line-2); color: var(--dd-ink-1); font: 800 16px var(--dd-font-body); }
.dd-cal-card-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dd-cal-card-id > strong { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 750 14px var(--dd-font-body); color: var(--dd-ink-0); }
.dd-cal-card-tag { padding: 2px 8px; border-radius: 999px; font: 700 9.5px var(--dd-font-body); letter-spacing: .02em; font-style: normal; background: rgba(var(--dealer-accent-rgb), .14); color: var(--dealer-accent); border: 1px solid rgba(var(--dealer-accent-rgb), .3); }
.dd-cal-card-id > span { font: 500 11.5px var(--dd-font-body); color: var(--dd-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-cal-card-veh { color: var(--dd-ink-3) !important; font-size: 11px !important; }
.dd-cal-card-contact { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dd-cal-card-contact span { display: flex; align-items: center; gap: 7px; font: 500 11.5px var(--dd-font-body); color: var(--dd-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-cal-card-contact svg { width: 13px; height: 13px; color: var(--dd-ink-3); flex: none; }
.dd-cal-card-svc { font: 550 11.5px var(--dd-font-body); color: var(--dd-ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-cal-card-status { justify-self: end; padding: 4px 10px; border-radius: 999px; font: 800 9px var(--dd-font-body); letter-spacing: .08em; background: rgba(var(--dealer-accent-rgb), .14); color: var(--dealer-accent); border: 1px solid rgba(var(--dealer-accent-rgb), .3); white-space: nowrap; }
.dd-cal-card-arrow { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: var(--dd-ink-3); }
.dd-cal-card-arrow svg { width: 16px; height: 16px; }
.dd-cal-card:hover .dd-cal-card-arrow, .dd-cal-card.is-selected .dd-cal-card-arrow { color: var(--dealer-accent); }

/* ===== Selected booking detail panel (right aside) ===== */
.dd-calendar-agenda { display: flex; flex-direction: column; padding: 20px; overflow-y: auto; }
.dd-cald-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dd-cald-kicker { font: 800 10px var(--dd-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--dd-ink-3); }
.dd-cald-x { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.06); color: var(--dd-ink-2); }
.dd-cald-x:hover { background: rgba(255,255,255,.12); color: var(--dd-ink-0); }
.dd-cald-x svg { width: 15px; height: 15px; }
.dd-cald-chips { display: flex; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.dd-cald-chip { padding: 4px 11px; border-radius: 999px; font: 700 11.5px var(--dd-font-body); text-transform: capitalize; background: rgba(var(--dealer-accent-rgb), .14); color: var(--dealer-accent); border: 1px solid rgba(var(--dealer-accent-rgb), .3); }
.dd-cald-chip-status { background: rgba(var(--dealer-accent-rgb), .16); }
.dd-cald-name { margin: 0; font: 800 24px/1.1 var(--dd-font-display); color: var(--dd-ink-0); }
.dd-cald-sub { margin: 4px 0 16px; font: 500 14px var(--dd-font-body); color: var(--dd-ink-2); }
.dd-cald-when { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 13px 14px; border-radius: 14px; background: rgba(var(--dealer-accent-rgb), .08); border: 1px solid rgba(var(--dealer-accent-rgb), .28); }
.dd-cald-when svg { width: 20px; height: 20px; color: var(--dealer-accent); flex: none; }
.dd-cald-when strong { display: block; font: 700 14px var(--dd-font-body); color: var(--dd-ink-0); }
.dd-cald-when span { display: block; margin-top: 2px; font: 500 12.5px var(--dd-font-body); color: var(--dd-ink-2); }
.dd-cald-rows { display: flex; flex-direction: column; }
.dd-cald-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.dd-cald-row:last-child { border-bottom: 0; }
.dd-cald-ico { width: 18px; height: 18px; color: var(--dd-ink-3); flex: none; }
.dd-cald-ico svg { width: 18px; height: 18px; }
.dd-cald-k { flex: 1; font: 500 13px var(--dd-font-body); color: var(--dd-ink-2); }
.dd-cald-v { font: 700 13px var(--dd-font-body); color: var(--dd-ink-0); text-align: right; word-break: break-word; }
.dd-cald-v.is-accent { color: var(--dealer-accent-3); }
.dd-cald-actions-head { margin: 18px 0 12px; font: 800 10px var(--dd-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--dd-ink-3); }
.dd-cald-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.dd-cald-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 12px; cursor: pointer; background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.14); color: var(--dd-ink-0); font: 650 14px var(--dd-font-body); }
.dd-cald-btn svg { width: 16px; height: 16px; }
.dd-cald-btn:hover { background: rgba(255,255,255,.09); }
.dd-cald-btn-primary { background: var(--dd-sys-grad); border: 0; color: #fff; }
.dd-cald-btn-primary:hover { filter: brightness(1.07); }
.dd-cal-detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; text-align: center; padding: 30px; }
.dd-cal-detail-empty-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--dd-line-2); color: var(--dd-ink-3); }
.dd-cal-detail-empty-ico svg { width: 24px; height: 24px; }
.dd-cal-detail-empty strong { font: 700 16px var(--dd-font-body); color: var(--dd-ink-1); }
.dd-cal-detail-empty span { font: 500 12.5px var(--dd-font-body); color: var(--dd-ink-3); }
.dd-cal-detail-hint { max-width: 200px; }
.dd-cal-detail-newbtn { margin-top: 8px; padding: 10px 18px; border-radius: 11px; cursor: pointer; background: var(--dd-sys-grad); border: 0; color: #fff; font: 700 13px var(--dd-font-body); }


/* =============================================================================
   ROW 3 — WEBSITE PERFORMANCE
============================================================================= */

.dd-perf-card { display: flex; flex-direction: column; min-width: 0; }

.dd-perf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dd-s-2);
  min-width: 0;
}

.dd-perf-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--dd-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.004));
  min-width: 0;
  position: relative;
  isolation: isolate;
}
.dd-perf-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 10% 0%, rgba(var(--dealer-accent-rgb),0.05), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.dd-perf-cell > * { position: relative; z-index: 1; }

.dd-perf-cell-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--dd-font-mono, 'Geist Mono', monospace);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dd-ink-3);
}
.dd-perf-cell-value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.dd-perf-cell-value {
  font: 600 26px/1 var(--dd-font-display);
  letter-spacing: -.035em;
  color: var(--dd-ink-0);
  font-variant-numeric: tabular-nums;
}
.dd-perf-cell-sub {
  font-family: var(--dd-font-mono, 'Geist Mono', monospace);
  font-weight: 400;
  font-size: 10px;
  color: var(--dd-ink-3);
  letter-spacing: 0;
}
.dd-perf-spark {
  width: 100%;
  height: 28px;
  margin-top: auto;
}
.dd-perf-spark svg { width: 100%; height: 100%; display: block; }
.dd-perf-spark .dd-spark-line {
  fill: none;
  stroke: var(--dd-ink-3);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dd-perf-spark .dd-spark-fill {
  fill: var(--dd-ink-3);
  opacity: .14;
  stroke: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 92%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 92%);
}

.dd-perf-health {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding-top: 4px;
}
.dd-perf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid var(--dd-line);
  background: rgba(255,255,255,.018);
  font-family: var(--dd-font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: -.005em;
  color: var(--dd-ink-1);
  min-width: 0;
}
.dd-perf-chip-dot {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--dd-ok-rgb), .18);
  color: var(--dd-ok);
}
.dd-perf-chip-dot svg { width: 9px; height: 9px; }
.dd-perf-chip[data-state="pending"] { color: var(--dd-ink-2); }
.dd-perf-chip[data-state="pending"] .dd-perf-chip-dot { background: rgba(255,255,255,.06); color: var(--dd-ink-3); }
.dd-perf-chip[data-state="warn"] .dd-perf-chip-dot { background: rgba(var(--dd-warn-rgb), .16); color: var(--dd-warn); }
.dd-perf-chip[data-state="fail"] .dd-perf-chip-dot { background: rgba(var(--dd-danger-rgb), .16); color: var(--dd-danger); }
.dd-perf-chip span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* =============================================================================
   AUX SECTIONS (hidden: invoices + chat mounts preserved for JS)
============================================================================= */

.dd-row-aux[hidden] { display: none; }

.dd-full-list-row[hidden] { display: none; }
.dd-full-list-card {
  display: grid;
  gap: 12px;
}
.dd-full-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--dd-line);
  background: rgba(255,255,255,.014);
}
.dd-full-list-search {
  flex: 1 1 auto;
  max-width: none;
  width: 100%;
}
.dd-full-list-count {
  flex: 0 0 auto;
  font: 700 10px var(--dd-font-mono, 'Geist Mono', monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dd-ink-3);
}
.dd-full-list {
  display: grid;
  gap: 14px;
}
.dd-activity-list-row[hidden] { display: none; }
.dd-activity-list-row {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: start;
}
.dd-app[data-view="activity-list"] .dd-content {
  grid-template-rows: minmax(calc(100vh - var(--dd-topbar-h) - 32px), auto);
}
.dd-app[data-view="activity-list"] .dd-activity-full-card,
.dd-app[data-view="activity-list"] .dd-activity-status-card {
  min-height: calc(100vh - var(--dd-topbar-h) - 48px);
}
.dd-activity-full-card {
  display: flex;
  flex-direction: column;
}
.dd-activity-full {
  display: grid;
  gap: 9px;
  min-height: 0;
  max-height: calc(100vh - var(--dd-topbar-h) - 170px);
  overflow-y: auto;
  padding: 2px 4px 2px 8px;
}
.dd-activity-full::-webkit-scrollbar { width: 5px; }
.dd-activity-full::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 999px; }
.dd-activity-full-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 0 12px;
  min-height: 70px;
  padding: 12px 8px 12px 2px;
  border: 1px solid var(--dd-line);
  border-radius: 12px;
  background: rgba(255,255,255,.016);
}
.dd-activity-full-row::before { left: 18px; }
.dd-activity-full-row:last-child::before { bottom: calc(100% - 18px); }
.dd-activity-full-row .dd-feed-bullet {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 12px;
}
.dd-activity-full-row .dd-feed-title {
  font-size: 13px;
}
.dd-activity-full-row .dd-feed-sub {
  margin-top: 3px;
  font-size: 11.5px;
}
.dd-activity-full-row .dealer-activity-actions,
.dd-activity-full-row .dd-feed-actions {
  opacity: 1;
  transform: none;
}
.dd-activity-status-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dd-activity-status-card h2 {
  font-size: 36px;
  line-height: .9;
  color: var(--dealer-accent);
}
.dd-activity-status-copy {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--dd-line);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
}
.dd-activity-status-copy strong {
  color: var(--dd-ink-0);
  font: 700 13px var(--dd-font-body);
}
.dd-activity-status-copy span {
  color: var(--dd-ink-2);
  font: 500 12px/1.45 var(--dd-font-body);
}

/* Full-screen Website / Account settings */
.dd-settings-row { min-width: 0; }
.dd-settings-card {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: calc(100vh - var(--dd-topbar-h) - 48px);
}
.dd-settings-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(var(--dealer-accent-rgb), .28);
  border-radius: 14px;
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(var(--dealer-accent-rgb), .16), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
}
.dd-settings-hero span {
  display: block;
  color: var(--dealer-accent);
  font: 800 10px var(--dd-font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dd-settings-hero strong {
  display: block;
  margin-top: 5px;
  color: var(--dd-ink-0);
  font: 760 26px/1.05 var(--dd-font-display);
}
.dd-settings-hero p {
  margin: 6px 0 0;
  color: var(--dd-ink-2);
  font: 540 12px var(--dd-font-body);
}
.dd-settings-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.dd-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.dd-settings-panel {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--dd-line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.006)),
    rgba(255,255,255,.012);
}
.dd-settings-panel-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--dealer-accent-rgb), .32);
  border-radius: 14px;
  background: rgba(var(--dealer-accent-rgb), .12);
  color: var(--dealer-accent);
  font: 850 15px var(--dd-font-display);
}
.dd-settings-panel h3 {
  margin: 0;
  color: var(--dd-ink-0);
  font: 750 14px var(--dd-font-body);
}
.dd-settings-panel p {
  margin: 6px 0 0;
  color: var(--dd-ink-2);
  font: 540 12px/1.45 var(--dd-font-body);
}
.dd-settings-panel p strong {
  color: var(--dd-ink-0);
  font-weight: 750;
}
.dd-settings-panel-wide {
  grid-column: 1 / -1;
}
.dd-settings-chip-list,
.dd-settings-swatch-list,
.dd-theme-choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.dd-settings-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: var(--dd-ink-1);
  font: 750 10.5px var(--dd-font-body);
}
.dd-settings-chip b {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(var(--dealer-accent-rgb), .14);
  color: var(--dealer-accent);
  font: 850 9.5px var(--dd-font-body);
}
.dd-settings-swatch {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  cursor: pointer;
}
.dd-settings-swatch::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: inherit;
  background: var(--swatch-color, var(--dealer-accent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--swatch-color, var(--dealer-accent)) 42%, transparent);
}
.dd-settings-swatch.is-active {
  border-color: rgba(var(--dealer-accent-rgb), .78);
  box-shadow: 0 0 0 3px rgba(var(--dealer-accent-rgb), .12);
}
.dd-theme-choice {
  flex: 1 1 150px;
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.026);
  color: var(--dd-ink-1);
  text-align: left;
}
.dd-theme-choice strong {
  color: var(--dd-ink-0);
  font: 750 12px var(--dd-font-body);
}
.dd-theme-choice span {
  color: var(--dd-ink-3);
  font: 700 9.5px var(--dd-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dd-theme-choice.is-active {
  border-color: rgba(var(--dealer-accent-rgb), .42);
  background: rgba(var(--dealer-accent-rgb), .08);
}
.dd-theme-choice.is-disabled {
  opacity: .48;
  cursor: not-allowed;
}

.dd-pricing-card {
  min-height: calc(100vh - var(--dd-topbar-h) - 48px);
}
.dd-pricing-layout {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.dd-pricing-sidebar,
.dd-pricing-main-panel {
  min-width: 0;
  border: 1px solid var(--dd-line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.006)),
    rgba(255,255,255,.012);
}
.dd-pricing-sidebar {
  position: sticky;
  top: calc(var(--dd-topbar-h) + 14px);
  overflow: hidden;
}
.dd-pricing-sidebar-head {
  display: grid;
  gap: 3px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--dd-line);
}
.dd-pricing-sidebar-head span {
  color: var(--dd-ink-3);
  font: 800 9.5px var(--dd-font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dd-pricing-sidebar-head b {
  color: var(--dd-ink-0);
  font: 760 13px var(--dd-font-body);
}
.dd-pricing-main-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.dd-pricing-categories {
  display: grid;
  gap: 6px;
  max-height: min(560px, calc(100vh - var(--dd-topbar-h) - 260px));
  overflow-y: auto;
  padding: 8px;
}
.dd-pricing-category {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 11px;
  border: 1px solid var(--dd-line);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.006));
  color: var(--dd-ink-1);
  cursor: pointer;
  text-align: left;
  transition: background var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease);
}
.dd-pricing-category:hover {
  transform: translateX(2px);
  border-color: rgba(var(--dealer-accent-rgb), .26);
  background: rgba(var(--dealer-accent-rgb), .06);
}
.dd-pricing-category span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 720 11px var(--dd-font-body);
}
.dd-pricing-category b {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: var(--dd-ink-2);
  font: 820 10px var(--dd-font-body);
}
.dd-pricing-category.is-active {
  border-color: rgba(var(--dealer-accent-rgb), .42);
  background:
    linear-gradient(90deg, rgba(var(--dealer-accent-rgb), .18), rgba(var(--dealer-accent-rgb), .05));
  color: var(--dd-ink-0);
  box-shadow: inset 3px 0 0 var(--dealer-accent);
}
.dd-pricing-search {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--dd-line);
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  color: var(--dd-ink-3);
}
.dd-pricing-search:focus-within {
  border-color: rgba(var(--dealer-accent-rgb), .48);
  box-shadow: 0 0 0 3px rgba(var(--dealer-accent-rgb), .08);
}
.dd-pricing-search svg {
  width: 16px;
  height: 16px;
}
.dd-pricing-search input {
  width: 100%;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--dd-ink-0);
  font: 600 12px var(--dd-font-body);
}
.dd-pricing-search input::placeholder {
  color: var(--dd-ink-3);
}
.dd-pricing-table-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px 96px;
  gap: 12px;
  padding: 0 6px;
  color: var(--dd-ink-3);
  font: 800 9.5px var(--dd-font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dd-pricing-table-head span:nth-child(2),
.dd-pricing-table-head span:nth-child(3) {
  text-align: center;
}
.dd-pricing-table {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.dd-pricing-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px 96px;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid var(--dd-line);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.006)),
    rgba(255,255,255,.012);
}
.dd-pricing-row:hover {
  border-color: rgba(var(--dealer-accent-rgb), .22);
  background:
    linear-gradient(180deg, rgba(var(--dealer-accent-rgb), .04), rgba(255,255,255,.006)),
    rgba(255,255,255,.018);
}
.dd-pricing-main {
  min-width: 0;
}
.dd-pricing-cat-label {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(var(--dealer-accent-rgb), .08);
  color: var(--dealer-accent);
  font: 820 8.5px var(--dd-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dd-pricing-main strong {
  display: block;
  margin-top: 6px;
  color: var(--dd-ink-0);
  font: 760 13px var(--dd-font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-kpi-label > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dd-help {
  position: relative;
  z-index: 6;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  display: inline-grid;
  place-items: center;
  margin-left: 2px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: var(--dd-ink-3);
  font: 800 9.5px/1 var(--dd-font-body);
  text-transform: none;
  letter-spacing: 0;
  cursor: help;
  vertical-align: middle;
  transition: background var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease);
}
.dd-help:hover,
.dd-help:focus {
  outline: 0;
  border-color: rgba(var(--dealer-accent-rgb), .46);
  background: rgba(var(--dealer-accent-rgb), .14);
  color: var(--dealer-accent);
}
.dd-help::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  background: rgba(12, 14, 20, .96);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.9);
  color: var(--dd-ink-1);
  font: 600 10.5px/1.35 var(--dd-font-body);
  text-align: left;
  white-space: normal;
  text-transform: none;
  letter-spacing: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px);
  visibility: hidden;
  transition: opacity var(--dd-t-1) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease), visibility var(--dd-t-1) var(--dd-ease);
}
.dd-help::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  width: 8px;
  height: 8px;
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(12, 14, 20, .96);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px) rotate(45deg);
  visibility: hidden;
  transition: opacity var(--dd-t-1) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease), visibility var(--dd-t-1) var(--dd-ease);
}
.dd-help:hover::after,
.dd-help:hover::before,
.dd-help:focus::after,
.dd-help:focus::before {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}
.dd-help:hover::before,
.dd-help:focus::before {
  transform: translate(-50%, 0) rotate(45deg);
}
.dd-pricing-main p {
  margin: 3px 0 0;
  color: var(--dd-ink-3);
  font: 520 10.5px/1.28 var(--dd-font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-pricing-price {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  height: 38px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: rgba(0,0,0,.16);
  overflow: hidden;
}
.dd-pricing-price span {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--dealer-accent);
  font: 850 12px var(--dd-font-body);
}
.dd-pricing-price input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--dd-ink-0);
  font: 780 13px var(--dd-font-body);
}
.dd-pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--dd-ink-2);
  font: 720 11px var(--dd-font-body);
}
.dd-pricing-toggle input {
  accent-color: var(--dealer-accent);
}

.dd-invoice-generator-row { min-width: 0; }
.dd-app[data-view="invoice-generator"] .dd-content {
  grid-template-rows: minmax(calc(100vh - var(--dd-topbar-h) - 32px), auto);
}
.dd-invoice-generator-card {
  min-height: calc(100vh - var(--dd-topbar-h) - 48px);
  align-content: start;
}
.dd-invoice-generator-placeholder {
  display: grid;
  grid-template-columns: minmax(280px, .7fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 420px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(var(--dealer-accent-rgb), .11), transparent 58%),
    rgba(255,255,255,.016);
}
.dd-invoice-generator-preview {
  display: grid;
  gap: 12px;
  min-height: 320px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    #11141b;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.dd-invoice-generator-preview span {
  display: block;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}
.dd-invoice-generator-preview span:nth-child(1) { width: 48%; height: 24px; background: rgba(var(--dealer-accent-rgb), .42); }
.dd-invoice-generator-preview span:nth-child(2) { width: 78%; height: 12px; }
.dd-invoice-generator-preview span:nth-child(3) { width: 100%; height: 120px; border-radius: 12px; }
.dd-invoice-generator-preview span:nth-child(4) { width: 62%; height: 18px; justify-self: end; }
.dd-invoice-generator-placeholder > div:last-child {
  display: grid;
  gap: 10px;
  align-content: center;
}
.dd-invoice-generator-placeholder span {
  color: var(--dealer-accent);
  font: 850 10px var(--dd-font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dd-invoice-generator-placeholder strong {
  color: var(--dd-ink-0);
  font: 760 30px/1.05 var(--dd-font-display);
}
.dd-invoice-generator-placeholder p {
  max-width: 560px;
  margin: 0;
  color: var(--dd-ink-2);
  font: 540 13px/1.55 var(--dd-font-body);
}
.dd-invoice-generator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.dd-settings-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  margin-top: 12px;
  padding: 0 11px;
  border: 1px solid rgba(var(--dealer-accent-rgb), .32);
  border-radius: 999px;
  background: rgba(var(--dealer-accent-rgb), .1);
  color: var(--dd-ink-0);
  font: 750 10.5px var(--dd-font-body);
  cursor: pointer;
}
.dd-settings-action:hover {
  background: rgba(var(--dealer-accent-rgb), .18);
  border-color: rgba(var(--dealer-accent-rgb), .48);
}
.dd-settings-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.dd-settings-action-row .dd-settings-action {
  margin-top: 0;
}
.dd-user-account-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.dd-user-account-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.022);
}
.dd-user-account-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(var(--dealer-accent-rgb), .12);
  border: 1px solid rgba(var(--dealer-accent-rgb), .3);
  color: var(--dealer-accent);
  font: 850 12px var(--dd-font-display);
}
.dd-user-account-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.dd-user-account-main strong {
  overflow: hidden;
  color: var(--dd-ink-0);
  font: 750 12.5px var(--dd-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-user-account-main span {
  overflow: hidden;
  color: var(--dd-ink-2);
  font: 540 11px var(--dd-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-user-account-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}
.dd-user-role {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--dd-ink-1);
  font: 800 9.5px var(--dd-font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dd-user-role.is-owner,
.dd-user-role.is-admin {
  background: rgba(var(--dealer-accent-rgb), .12);
  border-color: rgba(var(--dealer-accent-rgb), .3);
  color: var(--dealer-accent);
}
.dd-user-account-row .dd-settings-action {
  min-height: 26px;
  margin-top: 0;
  padding: 0 9px;
}

.dd-integrations-row { min-width: 0; }

.dd-app[data-view="integrations"] .dd-content {
  grid-template-rows: minmax(calc(100vh - var(--dd-topbar-h) - 32px), auto);
}

.dd-integrations-card {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: calc(100vh - var(--dd-topbar-h) - 48px);
}

.dd-integrations-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(var(--dealer-accent-rgb), .28);
  border-radius: 14px;
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(var(--dealer-accent-rgb), .14), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
}

.dd-integrations-hero span {
  display: block;
  color: var(--dealer-accent);
  font: 800 10px var(--dd-font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dd-integrations-hero strong {
  display: block;
  margin-top: 5px;
  color: var(--dd-ink-0);
  font: 760 26px/1.05 var(--dd-font-display);
}

.dd-integrations-hero p {
  margin: 6px 0 0;
  color: var(--dd-ink-2);
  font: 540 12px/1.45 var(--dd-font-body);
}

.dd-integrations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dd-integration-panel {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 13px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--dd-line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.006)),
    rgba(255,255,255,.012);
}

.dd-integration-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--dealer-accent-rgb), .32);
  border-radius: 14px;
  background: rgba(var(--dealer-accent-rgb), .12);
  color: var(--dealer-accent);
  font: 850 16px var(--dd-font-display);
}

.dd-integration-panel h3 {
  margin: 0;
  color: var(--dd-ink-0);
  font: 760 15px var(--dd-font-body);
}

.dd-integration-panel p {
  margin: 7px 0 0;
  color: var(--dd-ink-2);
  font: 540 12px/1.5 var(--dd-font-body);
}

.dd-integration-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.dd-integration-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: var(--dd-ink-3);
  font: 700 10px var(--dd-font-body);
}

.dd-analytics-row { min-width: 0; }

.dd-app[data-view="analytics"] .dd-content {
  grid-template-rows: minmax(calc(100vh - var(--dd-topbar-h) - 32px), auto);
}

.dd-analytics-card {
  min-height: calc(100vh - var(--dd-topbar-h) - 48px);
}

.dd-analytics-body {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.dd-analytics-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
  gap: 14px;
  align-items: stretch;
}

.dd-analytics-summary-main,
.dd-analytics-summary-side,
.dd-analytics-panel,
.dd-analytics-stat {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border-radius: 14px;
  min-width: 0;
}

.dd-analytics-summary-main {
  padding: 18px;
  display: grid;
  gap: 12px;
}

.dd-analytics-summary-main span,
.dd-analytics-summary-side span,
.dd-analytics-panel > span,
.dd-analytics-stat span {
  color: var(--dd-ink-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dd-analytics-summary-main strong {
  color: var(--dd-ink-1);
  font-family: var(--dd-font-display);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1;
}

.dd-analytics-summary-main p,
.dd-analytics-summary-side p,
.dd-analytics-panel p {
  margin: 0;
  color: var(--dd-ink-2);
  line-height: 1.55;
}

.dd-analytics-summary-side {
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: center;
}

.dd-analytics-summary-side strong {
  color: var(--dd-ink-1);
  font-size: 22px;
}

.dd-analytics-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dd-analytics-stat {
  padding: 14px;
  display: grid;
  gap: 8px;
  min-height: 118px;
}

.dd-analytics-stat strong {
  color: var(--dd-ink-1);
  font-family: var(--dd-font-display);
  font-size: 30px;
  line-height: 1;
}

.dd-analytics-stat em {
  color: var(--dd-ink-3);
  font-style: normal;
  font-size: 12px;
}

.dd-analytics-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.dd-analytics-panel {
  padding: 16px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.dd-analytics-panel h3 {
  margin: 0;
  color: var(--dd-ink-1);
  font-size: 18px;
}

.dd-analytics-list {
  display: grid;
  gap: 9px;
}

.dd-analytics-line {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr) auto;
  gap: 10px;
  align-items: center;
  color: var(--dd-ink-2);
  font-size: 13px;
}

.dd-analytics-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}

.dd-analytics-bar i {
  display: block;
  height: 100%;
  width: var(--bar-width, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.16));
}

.dd-analytics-mini-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  height: 120px;
}

.dd-analytics-day {
  display: grid;
  gap: 7px;
  align-content: end;
  min-width: 0;
}

.dd-analytics-day i {
  display: block;
  height: max(8px, var(--bar-height, 8px));
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.1));
}

.dd-analytics-day span {
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
}

.dd-analytics-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dd-analytics-chip {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  color: var(--dd-ink-2);
  font-size: 12px;
  padding: 7px 10px;
}

.dd-analytics-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dd-detail-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--dd-line);
  background:
    radial-gradient(55% 80% at 0% 0%, rgba(var(--dealer-accent-rgb), .045), transparent 58%),
    rgba(255,255,255,.018);
  transition: border-color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease), transform var(--dd-t-2) var(--dd-ease);
}
.dd-detail-row:hover {
  border-color: rgba(var(--dealer-accent-rgb), .32);
  background:
    radial-gradient(55% 80% at 0% 0%, rgba(var(--dealer-accent-rgb), .075), transparent 58%),
    rgba(255,255,255,.028);
  transform: translateY(-1px);
}
.dd-detail-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--dd-sys-grad);
  color: #fff;
  font: 800 12px var(--dd-font-body);
  box-shadow: 0 8px 18px -10px rgba(var(--dealer-accent-rgb), .75);
}
.dd-detail-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.dd-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.dd-detail-head strong {
  display: block;
  color: var(--dd-ink-0);
  font: 700 13px var(--dd-font-body);
  letter-spacing: -.01em;
}
.dd-detail-head span {
  display: block;
  margin-top: 2px;
  color: var(--dd-ink-2);
  font: 500 11px var(--dd-font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-detail-status {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(var(--dealer-accent-rgb), .12);
  border: 1px solid rgba(var(--dealer-accent-rgb), .28);
  color: var(--dealer-accent);
  font: 800 9px var(--dd-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-style: normal;
}
/* ===== Bookings card — concept layout (header strip + 2-col body) ===== */
.dd-bk-card {
  display: block; padding: 0; overflow: hidden;
  border: 1px solid var(--dd-line); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.01));
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -34px rgba(0,0,0,.9);
  transition: border-color var(--dd-t-1) var(--dd-ease), box-shadow var(--dd-t-1) var(--dd-ease);
}
.dd-bk-card:hover { border-color: var(--dd-line-strong); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 50px -30px rgba(0,0,0,.95); transform: none; }
.dd-bk-card[data-expanded="true"] { border-color: var(--dd-line-2); }
/* header strip */
.dd-bk-head {
  display: grid; align-items: center; gap: 18px;
  grid-template-columns: minmax(200px, 1.4fr) minmax(150px, 1fr) minmax(110px, .7fr) minmax(100px, .7fr) minmax(150px, 1fr) auto auto;
  padding: 17px 20px;
  background:
    radial-gradient(70% 140% at 0% 0%, rgba(var(--dealer-accent-rgb), .08), transparent 62%);
}
.dd-bk-card[data-expanded="true"] .dd-bk-head { border-bottom: 1px solid var(--dd-line-2); }
.dd-bk-headname { display: flex; align-items: center; gap: 13px; min-width: 0; }
.dd-bk-avatar {
  flex: none; width: 46px; height: 46px; display: inline-grid; place-items: center; border-radius: 13px;
  background: rgba(255,255,255,.07); border: 1px solid var(--dd-line-2); color: var(--dd-ink-1);
}
.dd-bk-avatar svg { width: 22px; height: 22px; }
.dd-bk-avatar-initial { font: 800 18px var(--dd-font-body); letter-spacing: .01em; }
.dd-bk-headid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dd-bk-headid strong { font: 750 16px var(--dd-font-body); color: var(--dd-ink-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-bk-headid span { font: 500 12.5px var(--dd-font-body); color: var(--dd-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-bk-headcol { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dd-bk-headcol > b { font: 700 9.5px var(--dd-font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--dd-ink-3); }
.dd-bk-headcol > span { font: 600 13px var(--dd-font-body); color: var(--dd-ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-bk-headdate {
  flex-direction: row; align-items: center; gap: 10px; padding: 9px 13px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--dd-line-2);
}
.dd-bk-headdate > svg { width: 18px; height: 18px; color: var(--dd-ink-3); flex: none; }
.dd-bk-headdate span { display: flex; flex-direction: column; min-width: 0; }
.dd-bk-headdate b { font: 700 13px var(--dd-font-body); color: var(--dd-ink-0); white-space: nowrap; }
.dd-bk-headdate i { font: 500 11.5px var(--dd-font-body); font-style: normal; color: var(--dd-ink-2); }
.dd-bk-status {
  align-self: flex-start; padding: 4px 11px; border-radius: 999px; font: 800 9.5px var(--dd-font-body); letter-spacing: .09em;
  background: rgba(255,255,255,.06); color: var(--dd-ink-1);
  border: 1px solid var(--dd-line-2); font-style: normal;
}
.dd-bk-status.is-completed,
.dd-bk-status.is-finished,
.dd-bk-status.is-done { background: rgba(var(--dd-ok-rgb), .14); color: var(--dd-ok); border-color: rgba(var(--dd-ok-rgb), .4); }
.dd-bk-status.is-scheduled,
.dd-bk-status.is-confirmed { background: rgba(var(--dd-warn-rgb), .14); color: var(--dd-warn); border-color: rgba(var(--dd-warn-rgb), .4); }
.dd-bk-status.is-cancelled,
.dd-bk-status.is-canceled { background: rgba(var(--dd-danger-rgb), .14); color: var(--dd-danger); border-color: rgba(var(--dd-danger-rgb), .4); }
.dd-bk-headlead > span { font-family: var(--dd-font-mono, var(--dd-font-body)); font-size: 12px; color: var(--dd-ink-1); }
.dd-bk-headval { font: 800 19px var(--dd-font-display) !important; color: var(--dd-ink-0) !important; }
.dd-bk-calbtn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap;
  padding: 10px 16px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--dd-line-2);
  color: var(--dd-ink-1); font: 700 12.5px var(--dd-font-body);
  transition: background var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease);
}
.dd-bk-calbtn svg { width: 15px; height: 15px; }
.dd-bk-calbtn:hover { background: rgba(255,255,255,.06); border-color: var(--dd-line-strong); color: var(--dd-ink-0); }
.dd-bk-toggle {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px;
  border: 1px solid var(--dd-line); background: rgba(255,255,255,.03); color: var(--dd-ink-2); cursor: pointer;
  transition: transform var(--dd-t-2) var(--dd-ease-out), color var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease);
}
.dd-bk-toggle:hover { border-color: var(--dd-line-strong); color: var(--dd-ink-0); }
.dd-bk-toggle svg { width: 16px; height: 16px; transition: transform 320ms var(--dd-ease-out); }
.dd-bk-card[data-expanded="true"] .dd-bk-toggle svg { transform: rotate(180deg); }
.dd-bk-card[data-expanded="true"] .dd-bk-toggle { color: var(--dd-ink-0); border-color: var(--dd-line-strong); }
/* body */
.dd-bk-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 20px 20px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 460ms var(--dd-ease-out), opacity 320ms var(--dd-ease-out), padding 320ms var(--dd-ease-out);
}
.dd-bk-card[data-expanded="true"] .dd-bk-body { max-height: 820px; opacity: 1; padding-top: 16px; }
.dd-bk-info {
  align-self: start; padding: 6px 18px 10px; border-radius: 16px; border: 1px solid var(--dd-line-2);
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.006));
}
.dd-bk-info-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 8px; margin-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.05); }
.dd-bk-info-head > span { font: 700 10px var(--dd-font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--dd-ink-3); }
.dd-bk-edit {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 13px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid var(--dd-line-2); color: var(--dd-ink-1); font: 650 11.5px var(--dd-font-body);
  transition: background var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease);
}
.dd-bk-edit svg { width: 13px; height: 13px; }
.dd-bk-edit:hover { background: rgba(255,255,255,.07); border-color: var(--dd-line-strong); color: var(--dd-ink-0); }
.dd-bk-bigval { font: 800 19px var(--dd-font-display) !important; color: var(--dd-ink-0) !important; }
.dd-bk-inforow-value { align-items: center; }
.dd-bk-inforow { display: grid; grid-template-columns: 130px 1fr 22px; align-items: center; gap: 12px; padding: 12px 8px; margin: 0 -8px; border-radius: 10px; border-bottom: 1px solid rgba(255,255,255,.05); transition: background var(--dd-t-1) var(--dd-ease); }
.dd-bk-inforow:last-child { border-bottom: 0; }
.dd-bk-inforow:hover { background: rgba(255,255,255,.02); }
.dd-bk-info-k { font: 500 13px var(--dd-font-body); color: var(--dd-ink-2); }
.dd-bk-info-v { font: 600 13.5px var(--dd-font-body); color: var(--dd-ink-0); text-align: right; overflow: hidden; text-overflow: ellipsis; }
.dd-bk-info-v.is-accent { color: var(--dd-ink-0); }
.dd-bk-info-ico { width: 18px; height: 18px; color: var(--dd-ink-3); justify-self: end; opacity: .85; }
.dd-bk-info-ico svg { width: 18px; height: 18px; }
.dd-bk-info-body { width: 26px; height: 18px; }
.dd-bk-info-body svg { width: 26px; height: auto; max-height: 18px; color: var(--dd-ink-3); }
.dd-bk-right { display: flex; flex-direction: column; gap: 14px; }
.dd-bk-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dd-bk-stat {
  position: relative; padding: 15px 16px; border-radius: 14px; border: 1px solid var(--dd-line-2);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
.dd-bk-stat-k { display: block; font: 700 10px var(--dd-font-body); letter-spacing: .11em; text-transform: uppercase; color: var(--dd-ink-3); margin-bottom: 7px; }
.dd-bk-stat-v { display: block; font: 650 14px var(--dd-font-body); color: var(--dd-ink-0); padding-right: 24px; }
.dd-bk-stat-ico { position: absolute; top: 15px; right: 15px; width: 16px; height: 16px; color: var(--dd-ink-3); }
.dd-bk-stat-ico svg { width: 16px; height: 16px; }
.dd-bk-stat.is-editable { cursor: pointer; transition: border-color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease), box-shadow var(--dd-t-1) var(--dd-ease); }
.dd-bk-stat.is-editable:hover { border-color: var(--dd-line-strong); background: rgba(255,255,255,.03); }
.dd-bk-stat.is-editable:hover .dd-bk-stat-ico { color: var(--dd-ink-1); }
.bkr-typelist { display: flex; flex-direction: column; gap: 8px; }
.bkr-typeopt { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 11px; cursor: pointer; border: 1.5px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--dd-ink-0, #f3f5fa); font: 600 13.5px var(--dd-font-body); }
.bkr-typeopt:hover { border-color: rgba(255,255,255,.22); }
.bkr-typeopt.is-sel { border-color: var(--dealer-accent, #4f7cff); background: rgba(var(--dash-accent-rgb,79,124,255),.1); }
.bkr-typeopt input { accent-color: var(--dealer-accent, #4f7cff); }
.bkr-msg-grid { display: grid; grid-template-columns: 210px 1fr; gap: 16px; }
.bkr-tpl-list { display: flex; flex-direction: column; gap: 7px; }
.bkr-tpl { text-align: left; padding: 11px 13px; border-radius: 11px; cursor: pointer; border: 1.5px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: var(--dd-ink-0, #f3f5fa); font: 600 12.5px var(--dd-font-body); transition: border-color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease); }
.bkr-tpl:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); }
.bkr-tpl.is-sel { border-color: var(--dealer-accent, #4f7cff); background: rgba(var(--dealer-accent-rgb, 79,124,255), .12); color: #fff; }
.bkr-msg-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bkr-msg-side textarea { width: 100%; resize: vertical; min-height: 120px; padding: 11px 13px; border-radius: 11px; border: 1.5px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); color: var(--dd-ink-0, #f3f5fa); font: 500 13px/1.5 var(--dd-font-body); }
.bkr-msg-side textarea:focus { outline: none; border-color: var(--dealer-accent, #4f7cff); }
@media (max-width: 640px) { .bkr-msg-grid { grid-template-columns: 1fr; } }
.dd-cald-actions-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dd-cald-actions-row .dd-cald-btn { padding: 11px 8px; font-size: 13px; }
.dd-bk-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: auto; padding-top: 4px; }
.dd-bk-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 12px 20px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--dd-line-2); color: var(--dd-ink-0); font: 650 13.5px var(--dd-font-body);
  transition: border-color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease);
}
.dd-bk-btn svg { width: 16px; height: 16px; }
.dd-bk-btn:hover { border-color: var(--dd-line-strong); background: rgba(255,255,255,.07); }
.dd-bk-btn-primary { background: var(--dd-sys-grad); border: 0; color: #fff; box-shadow: 0 10px 24px -12px rgba(var(--dealer-accent-rgb), .8); }
.dd-bk-btn-primary:hover { filter: brightness(1.08); }
@media (max-width: 1080px) {
  .dd-bk-head { grid-template-columns: 1fr auto auto; row-gap: 12px; }
  .dd-bk-headcol { grid-column: span 1; }
  .dd-bk-body { grid-template-columns: 1fr; }
}
.dd-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.dd-detail-grid span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.018);
  border: 1px solid rgba(255,255,255,.04);
}
.dd-detail-grid b {
  color: var(--dd-ink-3);
  font: 700 8.5px var(--dd-font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dd-detail-grid strong {
  color: var(--dd-ink-1);
  font: 600 10.5px var(--dd-font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 6px;
  align-items: stretch;
  min-width: 244px;
  max-width: 320px;
}
.dd-detail-actions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--dd-line);
  border-radius: 8px;
  background: rgba(255,255,255,.024);
  color: var(--dd-ink-1);
  font: 700 10.5px var(--dd-font-body);
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition:
    background var(--dd-t-1) var(--dd-ease),
    border-color var(--dd-t-1) var(--dd-ease),
    color var(--dd-t-1) var(--dd-ease),
    transform var(--dd-t-1) var(--dd-ease);
}
.dd-detail-actions button:hover {
  background: var(--dd-bg-3);
  border-color: var(--dd-line-strong);
  color: var(--dd-ink-0);
  transform: translateY(-1px);
}
.dd-detail-actions .dealer-action-primary {
  grid-column: span 2;
}
.dd-detail-actions .is-paid {
  color: var(--dd-ok);
  border-color: rgba(37, 211, 102, .35);
  background: rgba(37, 211, 102, .08);
}
.dd-detail-actions .is-unpaid {
  color: var(--dd-ink-1);
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
}

.dd-lead-row {
  grid-template-columns: 38px minmax(0, 1fr) minmax(300px, auto) 30px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
/* Pre-promote rows to their own compositor layer so the first hover doesn't
   pay the "create layer + repaint" cost — that was the 20-30s warm-up lag
   the user reported on the Customers / Quotes lists. transform:translateZ(0)
   gives a stable GPU layer; will-change tells the browser to keep it
   reserved for transform changes (the hover lift). */
.dd-lead-row {
  transform: translateZ(0);
  will-change: transform;
  contain: layout paint;
}
.dd-lead-row:hover {
  transform: translate3d(0,-1px,0);
}
.dd-lead-summary {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.dd-lead-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dd-lead-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--dd-ink-0);
  font: 720 13px var(--dd-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-lead-title .dd-detail-status {
  padding: 2px 7px;
}
.dd-lead-sub {
  overflow: hidden;
  color: var(--dd-ink-2);
  font: 520 11px var(--dd-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-lead-actions {
  min-width: 0;
}
.dd-lead-actions .dd-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  max-width: none;
}
.dd-lead-actions .dd-detail-actions .dealer-action-primary {
  grid-column: auto;
}
.dd-lead-actions .dd-detail-actions button {
  min-width: 116px;
  min-height: 32px;
  border-radius: 9px;
}
.dd-lead-toggle {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--dd-line);
  background: rgba(255,255,255,.025);
  color: var(--dd-ink-2);
  cursor: pointer;
  transition:
    background var(--dd-t-1) var(--dd-ease),
    border-color var(--dd-t-1) var(--dd-ease),
    color var(--dd-t-1) var(--dd-ease),
    transform var(--dd-t-2) var(--dd-ease-out);
}
.dd-lead-toggle svg {
  width: 15px;
  height: 15px;
  transition: transform 320ms var(--dd-ease-out);
}
.dd-lead-row[data-expanded="true"] .dd-lead-toggle {
  color: var(--dealer-accent);
  border-color: rgba(var(--dealer-accent-rgb), .28);
  background: rgba(var(--dealer-accent-rgb), .08);
}
.dd-lead-row[data-expanded="true"] .dd-lead-toggle svg {
  transform: rotate(180deg);
}
.dd-lead-details {
  grid-column: 2 / -1;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height 440ms var(--dd-ease-out),
    opacity 300ms var(--dd-ease-out),
    transform 360ms var(--dd-ease-out),
    padding-top 300ms var(--dd-ease-out);
}
.dd-lead-row[data-expanded="true"] .dd-lead-details {
  max-height: 260px;
  opacity: 1;
  transform: translateY(0);
  padding-top: 4px;
}
.dd-lead-details .dd-detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ===== Quote row — collapsed summary + rich expanded detail ===== */
.dd-quote-row {
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}
.dd-q-summary {
  display: grid;
  grid-template-columns: 42px minmax(180px, 1.4fr) minmax(120px, 1fr) minmax(90px, .8fr) minmax(150px, 1fr) minmax(90px, .7fr);
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.dd-q-avatar {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px;
  background: var(--dd-sys-grad); color: #fff; box-shadow: 0 8px 18px -10px rgba(var(--dealer-accent-rgb), .75);
}
.dd-q-avatar svg { width: 22px; height: 22px; }
.dd-q-id-col { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dd-q-name { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--dd-ink-0); font: 750 15px var(--dd-font-body); }
.dd-q-veh { color: var(--dd-ink-2); font: 500 12px var(--dd-font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-q-phone { color: var(--dd-ink-3); font: 500 11.5px var(--dd-font-body); }
.dd-q-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dd-q-col > b { font: 700 10px var(--dd-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--dd-ink-3); }
.dd-q-col > span { font: 600 12.5px var(--dd-font-body); color: var(--dd-ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-q-total-col { text-align: right; }
.dd-q-total { font: 800 17px var(--dd-font-display); color: var(--dd-ink-0); }
/* mini progress dots in the collapsed summary */
.dd-q-mini { display: flex; align-items: center; }
.dd-q-mini-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--dd-line-strong); background: var(--dd-bg-3); flex: none; }
.dd-q-mini-dot.is-done { background: var(--dealer-accent); border-color: var(--dealer-accent); box-shadow: 0 0 0 2px rgba(var(--dealer-accent-rgb), .2); }
.dd-q-mini-line { width: 12px; height: 2px; background: var(--dd-line-strong); flex: none; }
.dd-q-mini-line.is-done { background: var(--dealer-accent); }
.dd-q-toggle {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
  border: 1px solid var(--dd-line); background: rgba(255,255,255,.025); color: var(--dd-ink-2); cursor: pointer;
  transition: background var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease), transform var(--dd-t-2) var(--dd-ease-out);
}
.dd-q-toggle svg { width: 15px; height: 15px; transition: transform 320ms var(--dd-ease-out); }
.dd-quote-row[data-expanded="true"] .dd-q-toggle { color: var(--dealer-accent); border-color: rgba(var(--dealer-accent-rgb), .28); background: rgba(var(--dealer-accent-rgb), .08); }
.dd-quote-row[data-expanded="true"] .dd-q-toggle svg { transform: rotate(180deg); }
/* expanded container */
.dd-quote-details {
  grid-column: 1 / -1;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 480ms var(--dd-ease-out), opacity 320ms var(--dd-ease-out), padding-top 320ms var(--dd-ease-out);
}
.dd-quote-row[data-expanded="true"] .dd-quote-details { max-height: 1600px; opacity: 1; padding-top: 16px; }
.dd-qd { display: flex; flex-direction: column; gap: 14px; }
.dd-qd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dd-qd-card { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--dd-line-2); background: rgba(255,255,255,.02); }
.dd-qd-card h4 { margin: 0 0 12px; font: 700 10.5px var(--dd-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--dd-ink-3); }
.dd-qd-kv { margin-bottom: 12px; }
.dd-qd-kv:last-child { margin-bottom: 0; }
.dd-qd-kv b { display: block; font: 600 11px var(--dd-font-body); color: var(--dd-ink-3); margin-bottom: 2px; }
.dd-qd-kv span { font: 600 13px var(--dd-font-body); color: var(--dd-ink-0); }
.dd-qd-price-line { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font: 500 12.5px var(--dd-font-body); color: var(--dd-ink-1); }
.dd-qd-price-line b { color: var(--dd-ink-0); font-weight: 700; font-variant-numeric: tabular-nums; }
.dd-qd-price-line.is-neg b { color: #46c79a; }
.dd-qd-price-rule { height: 1px; background: var(--dd-line-2); margin: 6px 0; }
.dd-qd-price-total { border-top: 1px solid var(--dd-line-2); margin-top: 4px; padding-top: 10px; }
.dd-qd-price-total span { font-weight: 700; color: var(--dd-ink-0); }
.dd-qd-price-total b { font: 800 16px var(--dd-font-display); color: var(--dealer-accent-3); }
.dd-qd-contact { display: flex; align-items: center; gap: 9px; padding: 6px 0; font: 600 13px var(--dd-font-body); color: var(--dd-ink-1); }
.dd-qd-contact svg { width: 16px; height: 16px; color: var(--dd-ink-3); flex: none; }
.dd-qd-links-head { margin: 12px 0 8px; font: 700 10px var(--dd-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--dd-ink-3); }
.dd-qd-links { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-qd-link { padding: 9px 14px; border-radius: 10px; cursor: pointer; font: 650 12.5px var(--dd-font-body); background: var(--dd-bg-3); border: 1px solid var(--dd-line-2); color: var(--dd-ink-1); }
.dd-qd-link:hover { color: var(--dd-ink-0); border-color: var(--dd-line-strong); }
.dd-qd-link.is-primary { background: var(--dd-sys-grad); border: 0; color: #fff; }
.dd-qd-link.is-primary:hover { filter: brightness(1.07); color: #fff; }
/* progress timeline */
.dd-qd-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
.dd-qd-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 4px; }
.dd-qd-step-line { position: absolute; top: 19px; right: 50%; width: 100%; height: 2px; background: var(--dd-line-strong); z-index: 0; }
.dd-qd-step-line.is-done { background: var(--dealer-accent); }
.dd-qd-step-ico { position: relative; z-index: 1; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--dd-line-strong); background: var(--dd-bg-2); color: var(--dd-ink-3); }
.dd-qd-step-ico svg { width: 17px; height: 17px; }
.dd-qd-step.is-done .dd-qd-step-ico { border-color: var(--dealer-accent); background: var(--dealer-accent); color: #fff; box-shadow: 0 0 0 3px rgba(var(--dealer-accent-rgb), .16); }
.dd-qd-step-lbl { font: 700 11px var(--dd-font-body); color: var(--dd-ink-2); }
.dd-qd-step.is-done .dd-qd-step-lbl { color: var(--dd-ink-0); }
.dd-qd-step-at { font: 500 10px var(--dd-font-body); color: var(--dd-ink-3); }
/* actions & next steps */
.dd-qd-next-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dd-qd-next { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--dd-line-2); background: var(--dd-bg-1); }
.dd-qd-next.is-disabled { opacity: .55; }
.dd-qd-next-top { display: flex; gap: 10px; align-items: flex-start; }
.dd-qd-next-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(var(--dealer-accent-rgb), .12); color: var(--dealer-accent); }
.dd-qd-next-ico svg { width: 16px; height: 16px; }
.dd-qd-next-top strong { display: block; font: 700 12.5px var(--dd-font-body); color: var(--dd-ink-0); }
.dd-qd-next-top span { display: block; margin-top: 2px; font: 500 11px var(--dd-font-body); color: var(--dd-ink-3); line-height: 1.35; }
.dd-qd-next-btn { margin-top: auto; padding: 10px; border-radius: 9px; cursor: pointer; font: 650 12.5px var(--dd-font-body); background: var(--dd-bg-3); border: 1px solid var(--dd-line-2); color: var(--dd-ink-0); }
.dd-qd-next-btn:hover:not(:disabled) { border-color: var(--dealer-accent-line); }
.dd-qd-next-btn:disabled { cursor: not-allowed; }
@media (max-width: 1100px) {
  .dd-qd-cards { grid-template-columns: 1fr; }
  .dd-qd-next-grid { grid-template-columns: repeat(2, 1fr); }
  .dd-q-summary { grid-template-columns: 42px 1.4fr 1fr auto; gap: 12px; }
  .dd-q-col.dd-q-progress-col, .dd-q-summary > .dd-q-col:nth-child(4) { display: none; }
}

.dd-invoice-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) minmax(112px, auto);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--dd-line);
  border-radius: 13px;
  background:
    radial-gradient(50% 90% at 0% 0%, rgba(var(--dealer-accent-rgb), .055), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.006));
  transition: border-color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease), transform var(--dd-t-2) var(--dd-ease);
}
.dd-invoice-card:hover {
  border-color: rgba(var(--dealer-accent-rgb), .32);
  background:
    radial-gradient(50% 90% at 0% 0%, rgba(var(--dealer-accent-rgb), .09), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  transform: translateY(-1px);
}
.dd-invoice-card-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(var(--dealer-accent-rgb), .32);
  background: rgba(var(--dealer-accent-rgb), .12);
  color: var(--dealer-accent);
}
.dd-invoice-card-icon svg {
  width: 19px;
  height: 19px;
}
.dd-invoice-card-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.dd-invoice-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.dd-invoice-card-title > div {
  min-width: 0;
}
.dd-invoice-card-title strong {
  display: block;
  overflow: hidden;
  color: var(--dd-ink-0);
  font: 760 13px var(--dd-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-invoice-card-title span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--dd-ink-2);
  font: 540 11px var(--dd-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-invoice-status {
  flex: 0 0 auto;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(var(--dealer-accent-rgb), .32);
  background: rgba(var(--dealer-accent-rgb), .11);
  color: var(--dealer-accent);
  font: 850 8.5px var(--dd-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-style: normal;
}
.dd-invoice-status.is-paid {
  border-color: rgba(var(--dd-ok-rgb), .32);
  background: rgba(var(--dd-ok-rgb), .11);
  color: var(--dd-ok);
}
.dd-invoice-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dd-invoice-card-meta span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.026);
  color: var(--dd-ink-3);
  font: 650 10px var(--dd-font-body);
  white-space: nowrap;
}
.dd-invoice-card-note {
  margin: 0;
  overflow: hidden;
  color: var(--dd-ink-3);
  font: 520 10.5px/1.35 var(--dd-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-invoice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dd-invoice-actions button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--dd-line-2);
  border-radius: 999px;
  background: rgba(255,255,255,.028);
  color: var(--dd-ink-1);
  font: 740 10.5px var(--dd-font-body);
  cursor: pointer;
  transition: background var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease);
}
.dd-invoice-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--dealer-accent-rgb), .32);
  background: rgba(var(--dealer-accent-rgb), .09);
  color: var(--dd-ink-0);
}
.dd-invoice-actions .is-primary {
  border-color: rgba(var(--dealer-accent-rgb), .42);
  background: rgba(var(--dealer-accent-rgb), .16);
  color: var(--dealer-accent);
}
.dd-invoice-actions .is-paid {
  border-color: rgba(var(--dd-ok-rgb), .35);
  background: rgba(var(--dd-ok-rgb), .1);
  color: var(--dd-ok);
}
.dd-invoice-actions .is-unpaid {
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  color: var(--dd-ink-2);
}
.dd-invoice-card-total {
  display: grid;
  justify-items: end;
  gap: 3px;
  min-width: 104px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 11px;
  background: rgba(0,0,0,.14);
}
.dd-invoice-card-total span,
.dd-invoice-card-total small {
  color: var(--dd-ink-3);
  font: 750 9px var(--dd-font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.dd-invoice-card-total strong {
  color: var(--dd-ink-0);
  font: 800 19px/1 var(--dd-font-display);
  letter-spacing: -.02em;
}
.dd-invoice-card-total small {
  display: none;
}

/* Chat (used by JS render targets, exposed when user navigates) */
.dd-chat-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 14px;
  min-height: calc(100vh - var(--dd-topbar-h) - 48px);
}
.dd-chat-shell {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  min-height: min(620px, calc(100vh - var(--dd-topbar-h) - 150px));
  border: 1px solid var(--dd-line);
  border-radius: 14px;
  background: rgba(255,255,255,.012);
  overflow: hidden;
}
.dd-chat-inbox {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid var(--dd-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006)),
    rgba(255,255,255,.01);
}
.dd-chat-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--dd-line);
}
.dd-chat-inbox-title { display: inline-flex; align-items: center; gap: 8px; }
.dd-chat-inbox-head span {
  color: var(--dd-ink-0);
  font: 750 13px var(--dd-font-body);
  letter-spacing: 0;
  text-transform: none;
}
.dd-chat-inbox-head b {
  display: inline-grid;
  place-items: center;
  min-width: 18px; height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--dealer-accent);
  color: #fff;
  font: 800 10.5px var(--dd-font-body);
}
.dd-chat-inbox-filter {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--dd-line);
  background: rgba(255,255,255,.025);
  color: var(--dd-ink-2);
  cursor: pointer;
  transition: color var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease);
}
.dd-chat-inbox-filter:hover { color: var(--dd-ink-0); border-color: rgba(var(--dealer-accent-rgb), .5); }
.dd-chat-inbox-filter.is-on { color: var(--dealer-accent); border-color: rgba(var(--dealer-accent-rgb), .6); }
.dd-chat-inbox-filter svg { width: 14px; height: 14px; }
.dd-chat-inbox-search {
  position: relative;
  padding: 10px 12px;
  border-bottom: 1px solid var(--dd-line);
}
.dd-chat-inbox-search svg {
  position: absolute;
  left: 22px; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  color: var(--dd-ink-3);
  pointer-events: none;
}
.dd-chat-inbox-search input {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border: 1px solid var(--dd-line);
  border-radius: 9px;
  background: rgba(255,255,255,.02);
  color: var(--dd-ink-0);
  font: 540 12px var(--dd-font-body);
  outline: none;
}
.dd-chat-inbox-search input:focus { border-color: rgba(var(--dealer-accent-rgb), .55); }
.dd-chat-inbox-search input::placeholder { color: var(--dd-ink-3); }
.dealer-chat-row.is-search-hidden { display: none !important; }
.dd-chat-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
}
.dealer-chat-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.014);
  text-align: left;
  color: var(--dd-ink-1);
  cursor: pointer;
  transition:
    background var(--dd-t-1) var(--dd-ease),
    border-color var(--dd-t-1) var(--dd-ease),
    transform var(--dd-t-2) var(--dd-ease),
    box-shadow var(--dd-t-2) var(--dd-ease);
}
.dealer-chat-row:hover {
  background: var(--dd-bg-3);
  transform: translateY(-1px);
}
.dealer-chat-row.is-active {
  border-color: rgba(var(--dealer-accent-rgb), .48);
  background:
    linear-gradient(90deg, rgba(var(--dealer-accent-rgb), .16), rgba(var(--dealer-accent-rgb), .035)),
    rgba(255,255,255,.018);
  box-shadow: inset 3px 0 0 var(--dealer-accent);
}
.dealer-chat-row.is-unread {
  border-color: rgba(var(--dealer-accent-rgb), .44);
  background:
    linear-gradient(90deg, rgba(var(--dealer-accent-rgb), .14), rgba(var(--dealer-accent-rgb), .035)),
    rgba(255,255,255,.018);
  box-shadow: inset 3px 0 0 var(--dealer-accent), 0 10px 28px -24px rgba(var(--dealer-accent-rgb), .9);
}
.dealer-chat-row.is-unread .dealer-chat-avatar {
  box-shadow: 0 0 0 2px rgba(var(--dealer-accent-rgb), .42);
}
.dealer-chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(var(--dealer-accent-rgb), .14);
  border: 1px solid rgba(var(--dealer-accent-rgb), .3);
  color: var(--dealer-accent);
  font: 800 12px var(--dd-font-body);
}
.dealer-chat-row-main { min-width: 0; }
.dealer-chat-row strong {
  display: block;
  overflow: hidden;
  color: var(--dd-ink-0);
  font: 700 12.5px var(--dd-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dealer-chat-row p {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--dd-ink-2);
  font: 520 11px/1.35 var(--dd-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dealer-chat-meta {
  display: grid;
  justify-items: end;
  align-self: stretch;
  align-content: space-between;
  text-align: right;
  font: 600 10px var(--dd-font-body);
  color: var(--dd-ink-3);
}
.dealer-chat-meta b {
  display: inline-grid;
  place-items: center;
  min-width: 16px; height: 16px;
  margin-top: 2px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--dealer-accent);
  color: #fff;
  font: 700 9.5px var(--dd-font-body);
}

.dd-chat-conversation {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(var(--dealer-accent-rgb), .045), transparent 58%),
    rgba(5,7,11,.16);
}
.dd-chat-thread {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}
.dealer-chat-thread-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  gap: 11px;
  align-items: center;
  min-height: 64px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dd-line);
}
.dealer-chat-thread-head-text { min-width: 0; }
.dealer-chat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: 999px;
  font: 700 11px var(--dd-font-body);
  letter-spacing: .02em;
}
.dealer-chat-pill.is-online,
.dealer-chat-pill.is-active {
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.35);
  color: rgb(74,222,128);
}
.dealer-chat-pill.is-online i,
.dealer-chat-pill.is-active i {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: rgb(34,197,94);
  box-shadow: 0 0 0 3px rgba(34,197,94,.22);
}
.dealer-chat-pill.is-away {
  background: rgba(234,179,8,.12);
  border: 1px solid rgba(234,179,8,.32);
  color: rgb(250,204,21);
}
.dealer-chat-pill.is-away i {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: rgb(234,179,8);
}
.dealer-chat-pill.is-offline {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--dd-line);
  color: var(--dd-ink-3);
}
.dealer-chat-pill.is-offline i {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--dd-ink-3);
  opacity: .6;
}
.dealer-chat-receipt { color: var(--dd-ink-3); }
.dealer-chat-receipt.is-read { color: rgb(96,165,250); }
.dealer-chat-thread-menu { position: relative; }
.dealer-chat-thread-menu-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--dd-line);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: var(--dd-ink-2);
  cursor: pointer;
  transition: color var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease);
}
.dealer-chat-thread-menu-btn:hover { color: var(--dd-ink-0); border-color: rgba(var(--dealer-accent-rgb), .55); }
.dealer-chat-thread-menu-btn svg { width: 16px; height: 16px; }
.dealer-chat-thread-menu-pop {
  position: absolute;
  right: 0; top: calc(100% + 6px);
  z-index: 20;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--dd-line);
  border-radius: 10px;
  background: var(--dd-bg-2, #14171e);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.6);
}
.dealer-chat-thread-menu-pop[hidden] { display: none; }
.dealer-chat-thread-menu-pop button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--dd-danger, #f87171);
  font: 600 12.5px var(--dd-font-body);
  text-align: left;
  cursor: pointer;
}
.dealer-chat-thread-menu-pop button:hover { background: rgba(var(--dd-danger-rgb, 248,113,113), .12); }
.dealer-chat-day {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0;
  color: var(--dd-ink-3);
  font: 600 10.5px var(--dd-font-body);
}
.dealer-chat-day::before,
.dealer-chat-day::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.06);
}
.dealer-chat-day span {
  padding: 0 8px;
  letter-spacing: .02em;
}
.dealer-chat-receipt {
  width: 14px; height: 9px;
  margin-left: 5px;
  color: rgb(96,165,250);
  vertical-align: -1px;
}
.dealer-chat-meta-line { display: inline-flex; align-items: center; }
.dealer-chat-thread-head strong {
  display: block;
  overflow: hidden;
  color: var(--dd-ink-0);
  font: 750 14px var(--dd-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dealer-chat-thread-head span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--dd-ink-2);
  font: 540 11px var(--dd-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dealer-chat-delete-thread {
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--dd-danger-rgb), .34);
  background: rgba(var(--dd-danger-rgb), .1);
  color: var(--dd-danger);
  font: 700 10.5px var(--dd-font-body);
  cursor: pointer;
}

.dealer-chat-messages {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 18px;
}
.dealer-chat-message { display: grid; gap: 4px; }
.dealer-chat-message.is-dealer { justify-items: end; }
.dealer-chat-message-bubble {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: min(620px, 78%);
  padding: 10px 12px;
  border-radius: 14px 14px 14px 4px;
  border: 1px solid var(--dd-line);
  background: rgba(255,255,255,.035);
  box-shadow: 0 16px 36px -30px rgba(0,0,0,.75);
}
.dealer-chat-message.is-dealer .dealer-chat-message-bubble {
  border-radius: 14px 14px 4px 14px;
  background: rgba(var(--dealer-accent-rgb), .16);
  border-color: rgba(var(--dealer-accent-rgb), .42);
}
.dealer-chat-message-bubble p {
  margin: 0;
  color: var(--dd-ink-0);
  font: 540 12.5px/1.45 var(--dd-font-body);
}
.dealer-chat-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(var(--dealer-accent-rgb), .32);
  background: rgba(var(--dealer-accent-rgb), .12);
  color: var(--dd-ink-0);
  font: 750 11px var(--dd-font-body);
  text-decoration: none;
}
.dealer-chat-attachment small {
  color: var(--dd-ink-3);
  font: inherit;
  font-weight: 650;
}
.dealer-chat-message-delete {
  align-self: start;
  background: transparent;
  border: 0;
  color: var(--dd-ink-3);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 1px 0 0 4px;
  opacity: .55;
}
.dealer-chat-message-delete:hover { opacity: 1; color: var(--dd-danger); }
.dealer-chat-message span { font: 550 10px var(--dd-font-body); color: var(--dd-ink-3); }

.dealer-chat-thread-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 360px;
  padding: 28px;
  text-align: center;
  color: var(--dd-ink-3);
}
.dealer-chat-thread-empty > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(var(--dealer-accent-rgb), .12);
  border: 1px solid rgba(var(--dealer-accent-rgb), .28);
  color: var(--dealer-accent);
  font: 850 18px var(--dd-font-display);
}
.dealer-chat-thread-empty strong { color: var(--dd-ink-0); font: 750 15px var(--dd-font-body); }
.dealer-chat-thread-empty p { max-width: 280px; margin: 0; font: 520 12px/1.45 var(--dd-font-body); }

.dd-chat-reply {
  display: grid;
  grid-template-areas:
    "input  input  input"
    "tools  .      send";
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--dd-line);
  background: rgba(255,255,255,.012);
}
.dd-chat-reply textarea {
  grid-area: input;
  resize: none;
  width: 100%;
  min-height: 42px;
  max-height: 120px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--dd-line-2);
  background: rgba(255,255,255,.04);
  color: var(--dd-ink-0);
  font: 540 12.5px/1.4 var(--dd-font-body);
}
.dd-chat-reply textarea:focus { outline: 0; border-color: rgba(var(--dealer-accent-rgb), .5); }
.dd-chat-reply-tools {
  grid-area: tools;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dd-chat-reply-tool {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--dd-ink-3);
  cursor: pointer;
  transition: color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease);
}
.dd-chat-reply-tool:hover { color: var(--dd-ink-0); background: rgba(255,255,255,.04); }
.dd-chat-reply-tool.is-on { color: var(--dealer-accent); }
.dd-chat-reply-tool svg { width: 16px; height: 16px; }
.dd-chat-send {
  grid-area: send;
  min-width: 78px;
  height: 36px;
  border-radius: 10px;
}
.dealer-chat-message-delete svg { width: 10px; height: 10px; }

/* Invoices (rendered by JS into [data-invoices]) */
.dealer-invoice-list { display: grid; gap: 6px; }
.dealer-invoice-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--dd-line);
  background: rgba(255,255,255,.012);
}
.dealer-invoice-row > div:first-child { display: grid; min-width: 0; }
.dealer-invoice-row strong { font: 600 11.5px var(--dd-font-body); color: var(--dd-ink-0); }
.dealer-invoice-row span { font: 500 10.5px var(--dd-font-body); color: var(--dd-ink-2); }
.dealer-invoice-row small { font: 500 9.5px var(--dd-font-body); color: var(--dd-ink-3); }
.dealer-invoice-status { font: 700 9.5px var(--dd-font-body); text-transform: uppercase; letter-spacing: .12em; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.04); color: var(--dd-ink-1); }
.dealer-invoice-actions { display: inline-flex; gap: 4px; }


/* =============================================================================
   EMPTY STATES
============================================================================= */

.dealer-empty {
  display: grid;
  gap: 4px;
  padding: 20px 16px;
  text-align: center;
  color: var(--dd-ink-3);
  font: 500 11px var(--dd-font-body);
}
.dealer-empty strong { color: var(--dd-ink-1); font-weight: 600; font-size: 12px; }


/* =============================================================================
   TOAST + INVOICE MODAL + DELETE CONFIRM
============================================================================= */

.dd-toast,
.dealer-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(20, 22, 28, .94);
  border: 1px solid var(--dd-line-2);
  backdrop-filter: var(--dd-glass-blur);
  color: var(--dd-ink-0);
  font: 600 11.5px var(--dd-font-body);
  box-shadow: var(--dd-shadow-lg);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px) scale(.98);
  transition:
    opacity 520ms var(--dd-ease-out),
    transform 620ms var(--dd-ease-out),
    visibility 0s linear 620ms;
}
.dd-toast.is-visible,
.dealer-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition:
    opacity 520ms var(--dd-ease-out),
    transform 620ms var(--dd-ease-out),
    visibility 0s;
}
.dd-toast.is-hiding,
.dealer-toast.is-hiding {
  opacity: 0;
  visibility: visible;
  transform: translate(-50%, 8px) scale(.99);
}
@keyframes dd-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ===== Big center-screen "new quote / booking" announcement ===== */
[data-new-quote-alert] {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 24px;
  opacity: 0; visibility: hidden;
  /* Single short transition on the whole layer — opacity flip is GPU-cheap
     and avoids the layout-thrash glitch where the card kept resizing as the
     parent faded in. */
  transition: opacity .2s ease, visibility .2s ease;
  will-change: opacity;
}
[data-new-quote-alert].is-visible { opacity: 1; visibility: visible; }
.dd-nqa-backdrop {
  position: absolute; inset: 0;
  /* Fully opaque so the dashboard underneath can't bleed through. The
     transparent-looking card the dealer reported was caused by both the
     backdrop AND the card resolving to undefined CSS variables on this
     page — `--dash-panel-2` is only defined in dashboard.css, not the
     dealer dashboard, so the card had no background at all. */
  background: #0b0d12;
}
.dd-nqa-card {
  position: relative; z-index: 1;
  /* 2026-05-27 — Anton: "слишком большое окно - сделай компактнее чтобы
     на одном экране было все видно и Estimated Value чтобы было видно и
     кнопки". Trimmed width 460→400, reduced vertical padding 28+22→18+14,
     and tightened all the child gaps below so a typical alert fits the
     viewport without scroll. Card also gets max-height + internal scroll
     as a belt-and-suspenders for unusually long records. */
  width: min(400px, calc(100vw - 40px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 18px 22px 14px;
  background: var(--dd-bg-2, #10131a);
  border: 1px solid var(--dd-line, rgba(255,255,255,.08));
  border-radius: 18px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.75);
  transform: translateY(8px);
  transition: transform .22s cubic-bezier(.2,.9,.3,1);
  will-change: transform;
  contain: layout paint;
}
[data-new-quote-alert].is-visible .dd-nqa-card { transform: translateY(0); }

.dd-nqa-x {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.06); color: var(--dd-ink-1, rgba(255,255,255,.78));
}
.dd-nqa-x:hover { background: rgba(255,255,255,.12); color: var(--dd-ink-0, #f3f5fa); }
.dd-nqa-x svg { width: 16px; height: 16px; }

/* Hero icon: clean accent-colored rounded square with a checkmark sticker on
   the corner. 2026-05-27 — Anton: "иконка машины стоит криво подними ее
   чтобы было по центру сама машина". The car SVG body sat in the bottom
   half of its viewBox — geometric centering put wheels at the bottom of
   the tile. Re-anchored to the OPTICAL center (translateY -7) so the car
   sits properly framed inside the tile. Hero also shrunk 76→60 to fit
   the compact layout. */
.dd-nqa-hero {
  position: relative; display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 18px;
  background: var(--dealer-accent, #2ecf73);
  color: #fff;
  margin-bottom: 12px;
}
.dd-nqa-hero svg { width: 32px; height: 32px; transform: translateY(-2px); }
.dd-nqa-hero-tick {
  position: absolute; right: -5px; bottom: -5px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--dealer-accent, #2ecf73);
  border: 2.5px solid var(--dd-bg-2, #10131a);
  color: #fff;
}
.dd-nqa-hero-tick svg { width: 12px; height: 12px; }

.dd-nqa-kind {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dealer-accent, #2ecf73); font-weight: 800; margin-bottom: 5px;
}
.dd-nqa-name {
  font-family: var(--dd-font-display, inherit);
  font-size: 22px; font-weight: 800; color: var(--dd-ink-0, #f3f5fa);
  line-height: 1.1; margin: 0 0 8px;
}
.dd-nqa-chip {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: transparent;
  color: var(--dealer-accent, #2ecf73);
  border: 1px solid color-mix(in srgb, var(--dealer-accent, #2ecf73) 55%, transparent);
  font-size: 11px; font-weight: 700; margin-bottom: 10px;
}

/* Vehicle card — photo on left, label + Y/M/M middle, body chip right.
   2026-05-27 - Anton: "иконку машины подвинь выше значительно чтобы сама
   машина была по центру слева от текста и чуть больше". Bumped thumb
   140x100 (was 128x78), object-position center (was center bottom so the
   car sat flush to the bottom edge), and pulled it up with translateY
   to optically center it next to the text. */
.dd-veh-card {
  width: 100%;
  display: grid; grid-template-columns: minmax(132px, 152px) minmax(0,1fr) auto; gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--dd-line, rgba(255,255,255,.08));
}
.dd-veh-thumb {
  width: 152px; height: 100px;
  display: grid; place-items: center;
  border-radius: 0;
  background: transparent;
  overflow: visible; flex-shrink: 0;
}
.dd-veh-photo { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; transform: translateY(-6px); filter: drop-shadow(0 14px 18px rgba(0,0,0,.5)); }
.dd-veh-silhouette { width: 138px; height: 88px; display: grid; place-items: center; color: var(--dealer-accent, #2ecf73); transform: translateY(-4px); filter: drop-shadow(0 12px 14px rgba(0,0,0,.5)); }
/* 2026-05-28 - Anton: "вверх превью авто и чуть левее и чуть больше" - in the
   new-quote alert, nudge the vehicle photo up + slightly left and scale it up
   a touch. Scoped to .dd-nqa-card so the manage-modal vehicle card is unaffected. */
.dd-nqa-card .dd-veh-photo { transform: translate(-10px, -16px) scale(1.12); }
.dd-nqa-card .dd-veh-silhouette { transform: translate(-10px, -14px) scale(1.12); }
.dd-veh-silhouette svg { width: 100%; height: 100%; object-fit: contain; }
.dd-veh-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.dd-veh-label { font-size: 10px; font-weight: 600; color: var(--dd-ink-2, rgba(255,255,255,.58)); letter-spacing: .04em; }
.dd-veh-ymm { font-size: 15px; font-weight: 700; color: var(--dd-ink-0, #f3f5fa); line-height: 1.15; }
.dd-veh-chip {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: transparent;
  color: var(--dealer-accent, #2ecf73);
  border: 1px solid color-mix(in srgb, var(--dealer-accent, #2ecf73) 50%, transparent);
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
}

/* Info rows (Service / Booking Time / Email) — green leading icon, label
   left, value right. Padding tightened so 6 rows fit without scroll. */
.dd-nqa-info {
  width: 100%; margin-top: 8px;
  display: flex; flex-direction: column;
  border: 1px solid var(--dd-line, rgba(255,255,255,.08));
  border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,.025);
}
.dd-nqa-info-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(0, auto);
  align-items: center; gap: 10px;
  padding: 8px 12px;
  text-align: left;
}
.dd-nqa-info-row + .dd-nqa-info-row { border-top: 1px solid rgba(255,255,255,.06); }
.dd-nqa-info-ico { display: grid; place-items: center; color: var(--dealer-accent, #2ecf73); }
.dd-nqa-info-ico svg { width: 15px; height: 15px; }
.dd-nqa-info-label { font-size: 12px; color: var(--dd-ink-2, rgba(255,255,255,.58)); font-weight: 600; }
.dd-nqa-info-value { font-size: 12px; color: var(--dd-ink-0, #f3f5fa); font-weight: 700; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Booking value card — green-tinted bordered card, large value centered. */
.dd-nqa-est-block {
  width: 100%; margin-top: 10px; padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--dealer-accent, #2ecf73) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--dealer-accent, #2ecf73) 38%, transparent);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.dd-nqa-est-label {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dealer-accent, #2ecf73); font-weight: 800;
}
.dd-nqa-est {
  font-family: var(--dd-font-display, inherit);
  font-size: 26px; font-weight: 800; color: var(--dd-ink-0, #f3f5fa);
  letter-spacing: -.01em;
}

.dd-nqa-actions { display: flex; gap: 8px; width: 100%; margin-top: 12px; }
.dd-nqa-btn {
  flex: 1; padding: 10px 14px;
  border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--dd-ink-0, #f3f5fa);
  font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s ease, border-color .15s ease;
}
.dd-nqa-btn svg { width: 14px; height: 14px; }
.dd-nqa-btn { font-size: 13px; }
.dd-nqa-btn:hover { background: rgba(255,255,255,.08); }
.dd-nqa-btn-primary {
  background: var(--dealer-accent, #2ecf73);
  border-color: var(--dealer-accent, #2ecf73);
  color: #061811;
}
.dd-nqa-btn-primary:hover {
  background: color-mix(in srgb, var(--dealer-accent, #2ecf73) 88%, #fff);
  border-color: color-mix(in srgb, var(--dealer-accent, #2ecf73) 88%, #fff);
  color: #061811;
}

@media (max-width: 560px) {
  .dd-nqa-card { padding: 24px 20px 18px; width: min(380px, calc(100vw - 24px)); }
  .dd-nqa-name { font-size: 22px; }
  .dd-nqa-est { font-size: 28px; }
  .dd-veh-card { grid-template-columns: 120px minmax(0,1fr); gap: 12px; padding: 12px; }
  .dd-veh-thumb { width: 120px; height: 76px; }
  .dd-veh-silhouette { width: 112px; height: 66px; }
  .dd-veh-chip { grid-column: 2; justify-self: flex-start; }
  .dd-veh-ymm { font-size: 15px; }
  .dd-nqa-actions { flex-direction: column-reverse; }
}

/* ===== Edit-customer popup (from the quote builder) ===== */
[data-qb-customer-modal] {
  position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
[data-qb-customer-modal].is-visible { opacity: 1; visibility: visible; }
.qbc-backdrop { position: absolute; inset: 0; background: rgba(4,5,9,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.qbc-card {
  position: relative; z-index: 1; width: min(480px, calc(100vw - 40px));
  background: var(--dd-bg-2, #10131a); border: 1px solid var(--dd-line, rgba(255,255,255,.08));
  border-radius: 20px; box-shadow: 0 40px 110px -30px rgba(0,0,0,.8); overflow: hidden;
  transform: translateY(12px) scale(.97); transition: transform .26s cubic-bezier(.2,.9,.3,1.15);
}
[data-qb-customer-modal].is-visible .qbc-card { transform: translateY(0) scale(1); }
.qbc-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.qbc-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--dd-ink-0, #f3f5fa); }
.qbc-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.06); color: var(--dd-ink-1, rgba(255,255,255,.78)); }
.qbc-x:hover { background: rgba(255,255,255,.12); color: var(--dd-ink-0, #f3f5fa); }
.qbc-x svg { width: 16px; height: 16px; }
.qbc-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.qbc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qbc-row3 { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 12px; }
.qbc-field { display: flex; flex-direction: column; gap: 5px; }
.qbc-field span { font-size: 12px; font-weight: 600; color: var(--dd-ink-2, rgba(255,255,255,.58)); }
.qbc-field input,
.qbc-field select {
  padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.14); color: var(--dd-ink-0, #f3f5fa); font-size: 14px; outline: none;
  /* Custom chevron + dark background. Native option popup colors fall back
     to the rules below; on Chromium-based browsers they now render with
     the dark theme. Firefox/Safari pre-17 always paints the option list in
     OS colors — that's a browser limitation, not fixable from CSS. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23a8b0bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m1 1 5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
.qbc-field input { background-image: none; padding-right: 12px; }
.qbc-field select option,
.qbc-field select optgroup {
  background-color: #14171e;
  color: #e8eaf0;
}
.qbc-field input:focus,
.qbc-field select:focus { border-color: var(--dealer-accent, #4f7cff); }
/* Same dark option popup for every native select in the dealer modals. */
.dd-create-modal select option,
.dd-field select option,
.qb-dialog select option {
  background-color: #14171e;
  color: #e8eaf0;
}
.qbc-foot { display: flex; gap: 10px; padding: 0 20px 20px; }
.qbc-btn { flex: 1; padding: 12px 16px; border-radius: 12px; cursor: pointer; background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.14); color: var(--dd-ink-1, rgba(255,255,255,.78)); font-weight: 650; font-size: 14px; }
.qbc-btn:hover { background: rgba(255,255,255,.08); color: var(--dd-ink-0, #f3f5fa); }
.qbc-btn-primary { background: var(--dash-sys-grad, var(--dealer-accent, #4f7cff)); border: 0; color: #fff; }
.qbc-btn-primary:hover { filter: brightness(1.07); }
@media (max-width: 480px) { .qbc-row3 { grid-template-columns: 1fr 1fr; } }

/* ===== Booking detail — right-side docked panel ===== */
[data-booking-detail-modal] {
  position: fixed; inset: 0; z-index: 210;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
[data-booking-detail-modal].is-visible { opacity: 1; visibility: visible; }
.bkd-backdrop { position: absolute; inset: 0; background: rgba(4,5,9,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.bkd-card {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(380px, 100vw);
  display: flex; flex-direction: column; overflow-y: auto;
  background: var(--dd-bg-2, #10131a); border-left: 1px solid var(--dd-line, rgba(255,255,255,.08));
  box-shadow: -30px 0 80px -30px rgba(0,0,0,.7);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.3,.9,.3,1);
  padding: 20px 22px 24px;
}
[data-booking-detail-modal].is-visible .bkd-card { transform: translateX(0); }
.bkd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bkd-kicker { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dd-ink-2, rgba(255,255,255,.58)); }
.bkd-x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.06); color: var(--dd-ink-1, rgba(255,255,255,.78)); }
.bkd-x:hover { background: rgba(255,255,255,.12); color: var(--dd-ink-0, #f3f5fa); }
.bkd-x svg { width: 15px; height: 15px; }
.bkd-chips { display: flex; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.bkd-chip {
  padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-transform: capitalize;
  background: rgba(var(--dash-accent-rgb,79,124,255),.16); color: var(--dealer-accent, #7fb2ff);
  border: 1px solid rgba(var(--dash-accent-rgb,79,124,255),.3);
}
.bkd-chip-status { background: rgba(225,29,42,.16); color: #ff7a85; border-color: rgba(225,29,42,.34); }
.bkd-name { margin: 0; font-size: 24px; font-weight: 800; color: var(--dd-ink-0, #f3f5fa); line-height: 1.1; }
.bkd-sub { margin: 4px 0 16px; font-size: 14px; color: var(--dd-ink-1, rgba(255,255,255,.78)); }
.bkd-when {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 13px 14px;
  border-radius: 14px; background: rgba(225,29,42,.08); border: 1px solid rgba(225,29,42,.28);
}
.bkd-when svg { width: 20px; height: 20px; color: var(--dealer-accent); flex: none; }
.bkd-when strong { display: block; font-size: 14.5px; color: var(--dd-ink-0, #f3f5fa); font-weight: 700; }
.bkd-when span { display: block; font-size: 13px; color: var(--dd-ink-1, rgba(255,255,255,.78)); margin-top: 2px; }
.bkd-body { display: flex; flex-direction: column; }
.bkd-row { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.bkd-row:last-child { border-bottom: 0; }
.bkd-row-ico { flex: none; width: 18px; height: 18px; color: var(--dd-ink-2, rgba(255,255,255,.58)); display: grid; place-items: center; }
.bkd-row-ico svg { width: 18px; height: 18px; }
.bkd-k { font-size: 13.5px; font-weight: 500; color: var(--dd-ink-1, rgba(255,255,255,.78)); flex: 1; }
.bkd-v { font-size: 13.5px; font-weight: 700; color: var(--dd-ink-0, #f3f5fa); text-align: right; word-break: break-word; }
.bkd-actions-head { margin: 20px 0 12px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dd-ink-2, rgba(255,255,255,.58)); }
.bkd-foot { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.bkd-foot-row { display: flex; gap: 10px; }
.bkd-btn {
  flex: 1; padding: 13px 14px; border-radius: 12px; cursor: pointer; text-align: center; text-decoration: none;
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.14); color: var(--dd-ink-0, #f3f5fa);
  font-weight: 650; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.bkd-btn svg { width: 16px; height: 16px; }
.bkd-btn:hover { background: rgba(255,255,255,.09); }
.bkd-btn-wide { width: 100%; flex: none; }
.bkd-btn-primary { background: var(--dash-sys-grad, var(--dealer-accent, #4f7cff)); border: 0; color: #fff; }
.bkd-btn-primary:hover { filter: brightness(1.07); color: #fff; }
@media (max-width: 480px) { .bkd-card { width: 100vw; } }

/* ===== Reschedule + Text reminder popups ===== */
[data-bkd-reschedule-modal], [data-bkd-reminder-modal] {
  position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
}
[data-bkd-reschedule-modal].is-visible, [data-bkd-reminder-modal].is-visible { opacity: 1; visibility: visible; }
.bkr-backdrop { position: absolute; inset: 0; background: rgba(4,5,9,.74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bkr-card {
  position: relative; z-index: 1; width: min(440px, calc(100vw - 40px));
  background: var(--dd-bg-2, #10131a); border: 1px solid var(--dd-line, rgba(255,255,255,.08));
  border-radius: 20px; box-shadow: 0 40px 110px -30px rgba(0,0,0,.8); overflow: hidden;
  transform: translateY(12px) scale(.97); transition: transform .24s cubic-bezier(.2,.9,.3,1.15);
}
[data-bkd-reschedule-modal].is-visible .bkr-card, [data-bkd-reminder-modal].is-visible .bkr-card { transform: translateY(0) scale(1); }
.bkr-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 8px; }
.bkr-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--dd-ink-0, #f3f5fa); }
.bkr-x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.06); color: var(--dd-ink-1, rgba(255,255,255,.78)); }
.bkr-x:hover { background: rgba(255,255,255,.12); color: var(--dd-ink-0, #f3f5fa); }
.bkr-x svg { width: 16px; height: 16px; }
.bkr-sub { margin: 0; padding: 0 20px 6px; font-size: 13px; color: var(--dd-ink-1, rgba(255,255,255,.78)); }
.bkr-body { padding: 12px 20px; display: flex; flex-direction: column; gap: 12px; }
.bkr-field { display: flex; flex-direction: column; gap: 5px; }
.bkr-field span { font-size: 12px; font-weight: 600; color: var(--dd-ink-2, rgba(255,255,255,.58)); }
.bkr-field input, .bkr-field textarea {
  padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.14); color: var(--dd-ink-0, #f3f5fa); font-size: 14px; outline: none; resize: vertical;
  font-family: inherit;
}
.bkr-field input:focus, .bkr-field textarea:focus { border-color: var(--dealer-accent, #4f7cff); }
.bkr-foot { display: flex; gap: 10px; padding: 6px 20px 20px; }
.bkr-btn { flex: 1; padding: 12px 14px; border-radius: 12px; cursor: pointer; background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.14); color: var(--dd-ink-1, rgba(255,255,255,.78)); font-weight: 650; font-size: 14px; }
.bkr-btn:hover { background: rgba(255,255,255,.08); color: var(--dd-ink-0, #f3f5fa); }
.bkr-btn-primary { background: var(--dash-sys-grad, var(--dealer-accent, #4f7cff)); border: 0; color: #fff; }
.bkr-btn-primary:hover { filter: brightness(1.07); }



/* Invoice modal */
.invoice-modal,
.dealer-confirm-modal {
  position: fixed;
  inset: 0;
  /* Confirm dialogs must sit ABOVE the manage popup (z-index: 120) and the
     create-modal backdrops (also 120) so the "Delete this record?" prompt
     isn't hidden behind them. */
  z-index: 200;
  display: grid;
  place-items: center;
}
.invoice-backdrop,
.dealer-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
}
.invoice-dialog,
.dealer-confirm-dialog {
  position: relative;
  z-index: 1;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--dd-line-strong);
  background: linear-gradient(180deg, var(--dd-bg-2), var(--dd-bg-1));
  box-shadow: var(--dd-shadow-lg);
}
.invoice-dialog header,
.dealer-confirm-dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.invoice-dialog h2,
.dealer-confirm-dialog h2 {
  margin: 0;
  font-family: var(--dd-font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.015em;
  color: var(--dd-ink-0);
}
.invoice-dialog header span,
.dealer-confirm-kicker {
  font: 700 9.5px var(--dd-font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dealer-accent);
}
.invoice-dialog header button {
  background: transparent;
  border: 0;
  color: var(--dd-ink-2);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.invoice-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font: 600 11px var(--dd-font-body);
  color: var(--dd-ink-3);
}
.invoice-steps span.is-active { color: var(--dealer-accent); }
.invoice-step-panel { display: grid; gap: 12px; }
.invoice-step-panel h3 {
  margin: 0;
  font: 600 13px var(--dd-font-body);
  color: var(--dd-ink-0);
}
.invoice-step-panel h4 {
  margin: 0 0 6px;
  font: 700 9.5px var(--dd-font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dd-ink-3);
}
.invoice-readonly-grid,
.invoice-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.invoice-detail-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--dd-line);
  font: 500 11.5px var(--dd-font-body);
}
.invoice-detail-line span { color: var(--dd-ink-3); }
.invoice-detail-line strong { color: var(--dd-ink-0); font-weight: 600; text-align: right; }
.invoice-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 8px;
}
.invoice-mode-row { display: flex; gap: 12px; font: 600 11px var(--dd-font-body); }
.invoice-package-grid, .invoice-addon-list { display: grid; gap: 8px; }
.invoice-package-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.invoice-option-card,
.invoice-addon-row {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--dd-line-2);
  background: rgba(255,255,255,.012);
  font: 500 11px var(--dd-font-body);
}
.invoice-option-card input[type="text"],
.invoice-option-card input[type="number"],
.invoice-addon-row input[type="number"] {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--dd-line-2);
  background: rgba(255,255,255,.022);
  color: var(--dd-ink-0);
  font: 500 11px var(--dd-font-body);
}
.invoice-field,
.invoice-money-row label {
  display: grid;
  gap: 4px;
  font: 600 10.5px var(--dd-font-body);
  color: var(--dd-ink-2);
}
.invoice-field textarea,
.invoice-field input[type="text"],
.invoice-money-row input {
  width: 100%;
  min-height: 32px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--dd-line-2);
  background: rgba(255,255,255,.022);
  color: var(--dd-ink-0);
  font: 500 11px var(--dd-font-body);
  resize: vertical;
}
.invoice-money-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.invoice-muted { font: 500 11px var(--dd-font-body); color: var(--dd-ink-3); }
.invoice-package-review {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
  font: 500 11px var(--dd-font-body);
  color: var(--dd-ink-2);
}
.invoice-package-review b { color: var(--dd-ink-0); }

.dealer-confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 22px;
  text-align: left;
}
.dealer-confirm-dialog p { margin: 0; font: 500 11.5px var(--dd-font-body); color: var(--dd-ink-2); }
.dealer-confirm-preview {
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--dd-line);
  background: rgba(255,255,255,.012);
  margin-top: 12px;
  font: 500 11px var(--dd-font-body);
  color: var(--dd-ink-1);
}
.dealer-confirm-preview strong { color: var(--dd-ink-0); }
.dealer-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}

.dd-created-invoice-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
}
.dd-created-invoice-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
}
.dd-created-invoice-dialog {
  position: relative;
  z-index: 1;
  width: min(500px, 100%);
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(var(--dealer-accent-rgb), .32);
  border-radius: 16px;
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(var(--dealer-accent-rgb), .16), transparent 60%),
    linear-gradient(180deg, var(--dd-bg-2), var(--dd-bg-1));
  box-shadow: var(--dd-shadow-lg);
  text-align: left;
}
.dd-created-invoice-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(var(--dd-ok-rgb), .12);
  border: 1px solid rgba(var(--dd-ok-rgb), .38);
  color: var(--dd-ok);
}
.dd-created-invoice-icon svg { width: 24px; height: 24px; }
.dd-created-invoice-dialog h2 {
  margin: 4px 0 0;
  color: var(--dd-ink-0);
  font: 760 22px/1 var(--dd-font-display);
}
.dd-created-invoice-dialog p {
  margin: 8px 0 0;
  color: var(--dd-ink-2);
  font: 540 12.5px/1.5 var(--dd-font-body);
}
.dd-created-invoice-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.dd-created-invoice-actions .dd-btn-primary { grid-column: 1 / -1; }

/* Search hiding */
.dealer-activity-row.dd-search-hidden,
.dealer-invoice-row.dd-search-hidden,
.dealer-chat-row.dd-search-hidden,
.dd-detail-row.dd-search-hidden,
.dd-invoice-card.dd-search-hidden,
.dd-pcard.dd-search-hidden,
.dd-feed-row.dd-search-hidden { display: none !important; }


/* =============================================================================
   FOCUS-VISIBLE
============================================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(var(--dealer-accent-rgb), .55);
  outline-offset: 2px;
  border-radius: 6px;
}


/* =============================================================================
   RESPONSIVE
============================================================================= */

@media (max-width: 1440px) {
  .dd-kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
  .dd-row-main   { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
  .dd-row-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 1100px) {
  .dd-content { padding: var(--dd-s-3); gap: var(--dd-s-3); }
  .dd-topbar { padding: 0 var(--dd-s-3); }
  .dd-topbar-eyebrow { display: none; }
  .dd-kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .dd-row-main   { grid-template-columns: 1fr; }
  .dd-row-bottom { grid-template-columns: 1fr; }
  .dd-pipeline   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dd-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-lead-row {
    grid-template-columns: 38px minmax(0, 1fr) 30px;
  }
  .dd-lead-actions {
    grid-column: 2 / -1;
    width: 100%;
  }
  .dd-lead-actions .dd-detail-actions {
    justify-content: stretch;
  }
  .dd-lead-actions .dd-detail-actions button {
    flex: 1 1 0;
  }
  .dd-lead-details {
    grid-column: 2 / -1;
  }
}

@media (max-width: 900px) {
  :root { --dd-sidebar-w: 220px; --dd-sidebar-w-mini: 64px; }
  .dd-app { grid-template-columns: var(--dd-sidebar-w-mini) minmax(0, 1fr); }
  .dd-app[data-sidebar-collapsed="false"] {
    grid-template-columns: var(--dd-sidebar-w) minmax(0, 1fr);
  }
  .dd-sidebar { padding: var(--dd-s-2); }
  .dd-nav-label, .dd-nav-badge, .dd-brand-city { display: none; }
  .dd-app[data-sidebar-collapsed="false"] .dd-nav-label,
  .dd-app[data-sidebar-collapsed="false"] .dd-nav-badge,
  .dd-app[data-sidebar-collapsed="false"] .dd-brand-city { display: block; }
  .dd-app[data-sidebar-collapsed="false"] .dd-nav-badge { display: inline-flex; }
  .dd-site-card { display: none; }
  .dd-app[data-sidebar-collapsed="false"] .dd-site-card { display: grid; }

  .dd-topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dd-topbar-center { display: none; }
  .dd-status { display: none; }
  .dd-profile-label { display: none; }
  .dd-profile-caret { display: none; }

  /* Tablet — KPI to 2x3 (5 cards: 2/2/1), Row-main + bottom stack */
  .dd-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-kpi:nth-child(4),
  .dd-kpi:nth-child(5) { grid-column: auto; }

  .dd-row-main   { grid-template-columns: 1fr; }
  .dd-row-bottom { grid-template-columns: 1fr; }
  .dd-activity-list-row { grid-template-columns: 1fr; }
  .dd-qb-timeline-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-analytics-summary,
  .dd-analytics-layout { grid-template-columns: 1fr; }
  .dd-analytics-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-calendar-full-layout { grid-template-columns: 1fr; }
  .dd-calendar-agenda { min-height: 420px; }
  .dd-invoice-generator-placeholder { grid-template-columns: 1fr; }

  .dd-pipeline   { grid-template-columns: 1fr; }
  .dd-qb-timeline-list { grid-template-columns: 1fr; }
  .dd-perf       { grid-template-columns: 1fr 1fr; }
  .dd-perf-health{ grid-template-columns: 1fr 1fr; }
  .dd-detail-row { grid-template-columns: 34px minmax(0, 1fr); }
  .dd-detail-actions {
    grid-column: 2;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    min-width: 0;
    max-width: none;
  }
  .dd-detail-actions .dealer-action-primary {
    grid-column: auto;
  }
  .dd-lead-row {
    grid-template-columns: 34px minmax(0, 1fr) 30px;
  }
  .dd-lead-actions .dd-detail-actions {
    flex-wrap: wrap;
  }
  .dd-lead-actions .dd-detail-actions button {
    min-width: 130px;
  }
  .dd-lead-details .dd-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dd-invoice-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .dd-invoice-card-total {
    grid-column: 2;
    justify-items: start;
    width: fit-content;
  }
}

@media (max-width: 820px) {
  .dd-pricing-layout {
    grid-template-columns: 1fr;
  }
  .dd-pricing-sidebar {
    position: static;
  }
  .dd-pricing-categories {
    position: static;
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .dd-pricing-category {
    flex: 0 0 auto;
    width: auto;
    min-width: 132px;
  }
  .dd-pricing-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .dd-pricing-table-head {
    display: none;
  }
  .dd-pricing-toggle {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  /* Sidebar on phones: ALWAYS visible as a thin icon-only rail by default
     (data-sidebar-collapsed="true"). Tapping the header burger expands it
     into a fuller drawer that overlays the content (data-sidebar-collapsed="false").
     The rail stays in the grid; the expanded drawer is positioned absolutely. */
  :root { --dd-sidebar-rail-w: 58px; }
  .dd-app,
  .dd-app[data-sidebar-collapsed="true"] {
    grid-template-columns: var(--dd-sidebar-rail-w) minmax(0, 1fr);
  }
  .dd-app[data-sidebar-collapsed="false"] {
    grid-template-columns: var(--dd-sidebar-rail-w) minmax(0, 1fr);
  }
  /* Default state — pinned rail */
  .dd-app .dd-sidebar {
    position: sticky;
    top: 0;
    width: var(--dd-sidebar-rail-w);
    height: 100dvh;
    z-index: 30;
    padding: 12px 6px;
    transform: none;
    transition: width 0.28s cubic-bezier(0.2, 0.9, 0.25, 1), box-shadow 0.28s ease;
  }
  /* Rail: hide every label/text, show only icons centered */
  .dd-app[data-sidebar-collapsed="true"] .dd-nav-label,
  .dd-app[data-sidebar-collapsed="true"] .dd-nav-badge,
  .dd-app[data-sidebar-collapsed="true"] .dd-brand-city,
  .dd-app[data-sidebar-collapsed="true"] .dd-brand-name,
  .dd-app[data-sidebar-collapsed="true"] .dd-site-card,
  .dd-app[data-sidebar-collapsed="true"] .dd-sidebar-foot { display: none !important; }
  .dd-app[data-sidebar-collapsed="true"] .dd-nav-link {
    justify-content: center;
    padding: 10px 6px;
    gap: 0;
  }
  .dd-app[data-sidebar-collapsed="true"] .dd-brand {
    justify-content: center;
    padding: 4px;
    margin-bottom: 10px;
  }
  .dd-app[data-sidebar-collapsed="true"] .dd-brand-logo {
    width: 36px; height: 36px; margin: 0;
  }
  /* Expanded — overlay drawer */
  .dd-app[data-sidebar-collapsed="false"] .dd-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 240px;
    padding: 16px 12px;
    box-shadow: 0 30px 80px -10px rgba(0,0,0,0.65);
  }
  .dd-app[data-sidebar-collapsed="false"] .dd-nav-label,
  .dd-app[data-sidebar-collapsed="false"] .dd-nav-badge,
  .dd-app[data-sidebar-collapsed="false"] .dd-brand-city,
  .dd-app[data-sidebar-collapsed="false"] .dd-brand-name { display: block; }
  .dd-app[data-sidebar-collapsed="false"] .dd-nav-badge { display: inline-flex; }
  .dd-app[data-sidebar-collapsed="false"] .dd-site-card { display: grid; }

  /* Scrim behind the drawer when expanded */
  .dd-app[data-sidebar-collapsed="false"]::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 29;
    animation: dd-scrim-in 0.25s var(--dd-ease-out);
  }
  @keyframes dd-scrim-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Tighten the topbar */
  .dd-topbar {
    padding: 0 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }
  .dd-topbar-right .dd-btn { display: none; }
  .dd-icon-btn { width: 32px; height: 32px; }
  .dd-topbar-title { min-width: 0; overflow: hidden; }
  .dd-title { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 600px) {
  :root { --dd-sidebar-w-mini: 56px; --dd-topbar-h: 52px; }
  .dd-content { padding: 12px; gap: 12px; }
  .dd-card, .dealer-card { padding: 14px; border-radius: 12px; }
  .dd-card-head h2 { font-size: 15px; }

  /* KPI — 2 cards per row, but Conversion (5th) gets full width */
  .dd-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dd-kpi { min-height: 92px; padding: 14px; }
  .dd-kpi:nth-child(5) { grid-column: 1 / -1; }
  .dd-kpi-hero { grid-column: 1 / -1; }
  .dd-kpi-value { font-size: 26px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .dd-kpi-hero .dd-kpi-value { font-size: 27px; }
  .dd-kpi-spark { height: 26px; margin-bottom: -14px; }
  .dd-kpi-ico { width: 28px; height: 28px; }
  .dd-kpi-ico svg { width: 14px; height: 14px; }

  /* Pipeline cards bigger touch targets */
  .dd-pcard { padding: 12px; gap: 10px 12px; }
  .dd-pcard::before { width: 36px; height: 36px; }
  .dd-pcard-name { font-size: 13px; }

  /* Performance — full single column */
  .dd-perf { grid-template-columns: 1fr; gap: 10px; }
  .dd-perf-health { grid-template-columns: 1fr 1fr; }
  .dd-chat-card { min-height: auto; }
  .dd-chat-shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .dd-chat-inbox {
    max-height: 280px;
    border-right: 0;
    border-bottom: 1px solid var(--dd-line);
  }
  .dd-chat-conversation { min-height: 440px; }
  .dealer-chat-messages { max-height: 360px; }
  .dealer-chat-message-bubble { max-width: 88%; }
  .dd-settings-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .dd-settings-hero-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .dd-settings-grid { grid-template-columns: 1fr; }
  .dd-analytics-stats { grid-template-columns: 1fr; }
  .dd-analytics-line { grid-template-columns: minmax(90px, 1fr) minmax(0, 1.5fr) auto; }
  .dd-analytics-mini-chart { height: 100px; gap: 6px; }
  .dd-integrations-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .dd-integrations-grid { grid-template-columns: 1fr; }
  .dd-invoice-generator-placeholder { min-height: auto; }
  .dd-invoice-generator-preview { min-height: 240px; }
  .dd-calendar-day-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-calendar-day:nth-child(7) { grid-column: 1 / -1; }
  .dd-calendar-hour { grid-template-columns: 54px minmax(0, 1fr); }
  .dd-calendar-agenda-summary { grid-template-columns: 1fr; }
  .dd-full-list-toolbar { align-items: stretch; flex-direction: column; }
  .dd-full-list-search { max-width: none; flex-basis: auto; width: 100%; }
  .dd-detail-row { grid-template-columns: 1fr; }
  .dd-detail-avatar { display: none; }
  .dd-invoice-card {
    grid-template-columns: 1fr;
  }
  .dd-invoice-card-icon {
    display: none;
  }
  .dd-invoice-card-total {
    grid-column: auto;
  }
  .dd-invoice-card-title {
    flex-direction: column;
  }
  .dd-detail-actions {
    grid-column: auto;
    grid-template-columns: 1fr 1fr;
  }
  .dd-detail-grid { grid-template-columns: 1fr; }

  /* Calendar — denser, fewer hour labels */
  .dealer-calendar-head strong { font-size: 13px; }
  .dealer-calendar-time { font-size: 9.5px; }

  .dd-toast,
  .dealer-toast {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
    transform: translateY(12px) scale(.98);
  }
  .dd-toast.is-visible,
  .dealer-toast.is-visible {
    transform: translateY(0) scale(1);
  }
  .dd-toast.is-hiding,
  .dealer-toast.is-hiding {
    transform: translateY(8px) scale(.99);
  }
  @keyframes dd-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 420px) {
  /* Phone — full-bleed sidebar drawer */
  .dd-app[data-sidebar-collapsed="false"] .dd-sidebar {
    width: 88%;
    max-width: 320px;
  }
  /* KPI to single column for max readability */
  .dd-kpi-grid { grid-template-columns: 1fr; gap: 10px; }
  .dd-kpi { min-height: 88px; }
  .dd-kpi:nth-child(5) { grid-column: auto; }

  /* Topbar tightens further */
  .dd-topbar-title small,
  .dd-topbar-title-eyebrow { display: none; }
}


/* =============================================================================
   REDUCED MOTION
============================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body::before { animation: none; }
  .dd-status-dot { animation: none; }
}


/* =============================================================================
   PRINT
============================================================================= */

@media print {
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .dd-sidebar, .dd-topbar, .dd-toast { display: none !important; }
  .dd-card, .dealer-card { background: #fff !important; color: #000 !important; border-color: #ccc !important; box-shadow: none !important; }
}

/* =============================================================================
   QUOTE BUILDER  (single-screen estimate modal — redesign 2026-05-21)
   Replaces the old 4-step .invoice-* wizard. GPU-friendly transitions only
   (opacity/transform), reduced-motion safe via the global block above.
============================================================================= */
.qb-backdrop {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(4, 5, 8, .66);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: qb-fade var(--dd-t-2) var(--dd-ease-out);
}
.qb-dialog {
  position: fixed; z-index: 121;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--dd-bg-2), var(--dd-bg-1));
  border: 1px solid var(--dd-line-2);
  border-radius: var(--dd-r-lg);
  box-shadow: var(--dd-shadow-lg);
  overflow: hidden;
  animation: qb-pop var(--dd-t-3) var(--dd-ease-out);
  will-change: transform, opacity;
}
.qb-dialog.is-success { width: min(560px, calc(100vw - 32px)); }
@keyframes qb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qb-pop  { from { opacity: 0; transform: translate(-50%, -46%) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.qb-dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; border-bottom: 1px solid var(--dd-line);
  background: var(--dd-surface);
}
.qb-eyebrow {
  display: block; font: 700 10px/1 var(--dd-font-body); letter-spacing: .14em;
  text-transform: uppercase; color: var(--dealer-accent-3);
}
.qb-dialog-head h2 { margin: 6px 0 0; font: 700 18px/1.1 var(--dd-font-display); color: var(--dd-ink-0); }
/* wizard step / progress indicator */
.qb-steps { display: flex; align-items: center; gap: 10px; margin-left: auto; margin-right: 8px; }
.qb-step { display: inline-flex; align-items: center; gap: 7px; font: 700 11px var(--dd-font-body); letter-spacing: .03em; color: var(--dd-ink-3); white-space: nowrap; }
.qb-step i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 10px; border: 1.5px solid var(--dd-line-strong); background: var(--dd-bg-3); color: var(--dd-ink-3); transition: background var(--dd-t-2) var(--dd-ease), border-color var(--dd-t-2) var(--dd-ease), color var(--dd-t-2) var(--dd-ease); }
.qb-step.is-current { color: var(--dd-ink-0); }
.qb-step.is-current i { border-color: var(--dealer-accent); color: var(--dealer-accent); box-shadow: 0 0 0 3px rgba(var(--dealer-accent-rgb), .15); }
.qb-step.is-done { color: var(--dd-ink-1); }
.qb-step.is-done i { background: var(--dealer-accent); border-color: var(--dealer-accent); color: #fff; }
.qb-step-bar { width: 46px; height: 3px; border-radius: 999px; background: var(--dd-line-strong); overflow: hidden; }
.qb-step-bar b { display: block; height: 100%; background: var(--dealer-accent); border-radius: 999px; transition: width 420ms var(--dd-ease-out); }
@media (max-width: 760px) { .qb-steps { display: none; } }
/* Coming-soon disabled button */
.qb-btn-soon { opacity: .55; cursor: not-allowed; }
.qb-btn-soon:hover { border-color: var(--dd-line-2); background: var(--dd-bg-3); }
.qb-soon-tag { margin-left: 6px; padding: 2px 7px; border-radius: 999px; font: 800 8.5px var(--dd-font-body); letter-spacing: .08em; text-transform: uppercase; font-style: normal; background: rgba(var(--dealer-accent-rgb), .16); color: var(--dealer-accent); }
.qb-close {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--dd-r-sm); border: 1px solid var(--dd-line-2);
  background: var(--dd-bg-3); color: var(--dd-ink-2); cursor: pointer;
  transition: color var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease);
}
.qb-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.qb-close:hover { color: var(--dd-ink-0); border-color: var(--dd-line-strong); transform: rotate(90deg); }

.qb-dialog-body { overflow: auto; padding: 0; flex: 1; }
.qb-grid { display: grid; grid-template-columns: 280px 1fr; min-height: 0; }
@media (max-width: 760px) { .qb-grid { grid-template-columns: 1fr; } }

/* ── Context aside (the customer's request) */
.qb-context {
  padding: 20px; border-right: 1px solid var(--dd-line);
  background: var(--dd-bg-1);
  display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 760px) { .qb-context { border-right: none; border-bottom: 1px solid var(--dd-line); } }
.qb-customer { display: flex; align-items: center; gap: 12px; }
.qb-avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font: 700 16px var(--dd-font-display);
  color: #fff; background: linear-gradient(135deg, var(--dealer-accent), var(--dealer-accent-deep));
}
.qb-customer-meta { display: flex; flex-direction: column; min-width: 0; }
.qb-customer-meta strong { font: 600 14px var(--dd-font-body); color: var(--dd-ink-0); }
.qb-customer-meta span { font: 500 12px var(--dd-font-body); color: var(--dd-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-context-chips { display: flex; flex-direction: column; gap: 6px; }
.qb-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 12px var(--dd-font-body); color: var(--dd-ink-1);
  padding: 6px 10px; border-radius: var(--dd-r-sm);
  background: var(--dd-bg-2); border: 1px solid var(--dd-line);
}
.qb-chip svg { width: 13px; height: 13px; fill: var(--dealer-accent-3); flex: none; }
.qb-request-card {
  background: var(--dd-bg-2); border: 1px solid var(--dd-line);
  border-radius: var(--dd-r); padding: 14px;
}
.qb-request-title { display: block; font: 700 10px/1 var(--dd-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--dd-ink-2); margin-bottom: 10px; }
.qb-request-grid { display: grid; gap: 9px; margin: 0; }
.qb-request-grid div { display: flex; flex-direction: column; gap: 2px; }
.qb-request-grid dt { font: 600 10.5px var(--dd-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--dd-ink-2); }
.qb-request-grid dd { margin: 0; font: 500 13px var(--dd-font-body); color: var(--dd-ink-0); }
.qb-request-note { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--dd-line); font: italic 400 12.5px/1.5 var(--dd-font-body); color: var(--dd-ink-1); }

/* ── Build area */
.qb-build { padding: 20px; display: flex; flex-direction: column; gap: 22px; }
.qb-section-head h3 { margin: 0; font: 700 14px var(--dd-font-display); color: var(--dd-ink-0); }
.qb-section-head p { margin: 3px 0 12px; font: 500 12px var(--dd-font-body); color: var(--dd-ink-2); }

/* Packages */
.qb-pkg-grid { display: grid; gap: 12px; }
.qb-pkg {
  position: relative; border: 1px solid var(--dd-line-2); border-radius: var(--dd-r);
  padding: 14px; background: var(--dd-bg-2);
  transition: border-color var(--dd-t-2) var(--dd-ease), box-shadow var(--dd-t-2) var(--dd-ease), opacity var(--dd-t-2) var(--dd-ease);
}
.qb-pkg:not(.is-offered) { opacity: .5; }
.qb-pkg.is-reco.is-offered {
  border-color: var(--dealer-accent-line);
  box-shadow: 0 0 0 1px var(--dealer-accent-line), 0 14px 30px -20px rgba(var(--dealer-accent-rgb), .5);
}
.qb-pkg-head { display: flex; align-items: center; gap: 10px; }
.qb-pkg-name {
  flex: 1; min-width: 0; background: transparent; border: none;
  font: 700 15px var(--dd-font-display); color: var(--dd-ink-0);
  border-bottom: 1px dashed transparent; padding: 2px 0;
  transition: border-color var(--dd-t-1) var(--dd-ease);
}
.qb-pkg-name:focus { outline: none; border-bottom-color: var(--dealer-accent-line); }
.qb-heat { flex: none; font: 600 11px var(--dd-font-body); color: var(--dd-ok); background: rgba(var(--dd-ok-rgb), .12); padding: 3px 8px; border-radius: 999px; }
.qb-pkg-benefits { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.qb-pkg-benefits li { font: 500 11px var(--dd-font-body); color: var(--dd-ink-1); background: var(--dd-bg-3); border: 1px solid var(--dd-line); padding: 3px 8px; border-radius: 999px; }
.qb-pkg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }

/* iOS-style toggle */
.qb-switch { flex: none; position: relative; display: inline-flex; cursor: pointer; }
.qb-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.qb-switch-track {
  width: 38px; height: 22px; border-radius: 999px; background: var(--dd-bg-3);
  border: 1px solid var(--dd-line-2); position: relative;
  transition: background var(--dd-t-2) var(--dd-ease), border-color var(--dd-t-2) var(--dd-ease);
}
.qb-switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: var(--dd-shadow-sm);
  transition: transform var(--dd-t-2) var(--dd-ease-out);
}
.qb-switch input:checked + .qb-switch-track { background: var(--dealer-accent); border-color: var(--dealer-accent); }
.qb-switch input:checked + .qb-switch-track::after { transform: translateX(16px); }
.qb-switch input:focus-visible + .qb-switch-track { box-shadow: 0 0 0 3px var(--dealer-accent-soft); }

/* Money field */
.qb-money-field {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--dd-bg-1); border: 1px solid var(--dd-line-2); border-radius: var(--dd-r-sm);
  padding: 6px 10px; transition: border-color var(--dd-t-1) var(--dd-ease);
}
.qb-money-field:focus-within { border-color: var(--dealer-accent-line); }
.qb-money-field span { font: 600 13px var(--dd-font-body); color: var(--dd-ink-2); }
.qb-money-field input {
  width: 78px; background: transparent; border: none; color: var(--dd-ink-0);
  font: 700 15px var(--dd-font-body); -moz-appearance: textfield;
}
.qb-money-field input::-webkit-outer-spin-button,
.qb-money-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qb-money-field input:focus { outline: none; }
.qb-pct-field input { flex: 1; }
.qb-pct-field span { order: 2; }
.qb-reco-pick { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: 600 12px var(--dd-font-body); color: var(--dd-ink-2); }
.qb-reco-pick input { accent-color: var(--dealer-accent); width: 15px; height: 15px; cursor: pointer; }
.qb-pkg.is-reco .qb-reco-pick { color: var(--dealer-accent-3); }

/* Add-ons */
.qb-addon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 620px) { .qb-addon-grid { grid-template-columns: 1fr; } }
/* "Add any service from pricing" search above the suggested add-ons */
.qb-addon-search { position: relative; margin-bottom: 12px; }
.qb-addon-search-field {
  display: flex; align-items: center; gap: 9px;
  background: var(--dd-bg-1); border: 1px solid var(--dd-line-2); border-radius: var(--dd-r-sm);
  padding: 9px 12px; transition: border-color var(--dd-t-1) var(--dd-ease);
}
.qb-addon-search-field:focus-within { border-color: var(--dealer-accent-line); }
.qb-addon-search-field svg { width: 17px; height: 17px; color: var(--dd-ink-2); flex: none; }
.qb-addon-search-field input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--dd-ink-0); font: 500 14px var(--dd-font-body); min-width: 0;
}
.qb-addon-search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  background: var(--dash-panel-2, #14151c); border: 1px solid var(--dash-border-strong, rgba(255,255,255,.16));
  border-radius: var(--dd-r-sm); padding: 5px; max-height: 320px; overflow-y: auto;
  box-shadow: 0 24px 60px -22px rgba(0,0,0,.75); display: flex; flex-direction: column; gap: 2px;
}
.qb-addon-search-results[hidden] { display: none; }
.qb-addon-search-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  color: var(--dd-ink-0); transition: background var(--dd-t-1) var(--dd-ease);
}
.qb-addon-search-row:hover:not(:disabled) { background: rgba(255,255,255,.06); }
.qb-addon-search-row.is-added { opacity: .55; cursor: default; }
.qb-addon-search-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qb-addon-search-row-main strong { font: 650 13.5px var(--dd-font-body); color: var(--dd-ink-0); }
.qb-addon-search-row-main small { font: 500 11.5px var(--dd-font-body); color: var(--dd-ink-2); }
.qb-addon-search-row-price { font: 700 13px var(--dd-font-body); color: var(--dd-ink-1); flex: none; }
.qb-addon-search-row-add {
  font: 700 12px var(--dd-font-body); color: var(--dealer-accent, #7fb2ff); flex: none;
  padding: 3px 8px; border-radius: 7px; background: rgba(var(--dash-accent-rgb,79,124,255),.14);
}
.qb-addon-search-row.is-added .qb-addon-search-row-add { color: var(--dd-ink-2); background: rgba(255,255,255,.06); }
.qb-addon-search-empty { padding: 12px; text-align: center; color: var(--dd-ink-2); font: 500 13px var(--dd-font-body); }
.qb-addon {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--dd-line-2); border-radius: var(--dd-r); padding: 8px;
  background: var(--dd-bg-2);
  transition: border-color var(--dd-t-2) var(--dd-ease), background var(--dd-t-2) var(--dd-ease);
}
.qb-addon.is-on { border-color: var(--dealer-accent-line); background: var(--dealer-accent-soft); }
.qb-addon-pick { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.qb-addon-pick > input { flex: none; accent-color: var(--dealer-accent); width: 16px; height: 16px; cursor: pointer; }
.qb-addon-thumb {
  flex: none; width: 42px; height: 42px; border-radius: var(--dd-r-sm);
  background-size: cover; background-position: center; background-color: var(--dd-bg-3);
  border: 1px solid var(--dd-line);
}
.qb-addon-thumb-mono { display: grid; place-items: center; font: 700 16px var(--dd-font-display); color: var(--dealer-accent-3); }
.qb-addon-body { display: flex; flex-direction: column; min-width: 0; }
.qb-addon-body strong { font: 600 13px var(--dd-font-body); color: var(--dd-ink-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-addon-body small { font: 500 11px/1.35 var(--dd-font-body); color: var(--dd-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qb-addon-price { flex: none; }
.qb-addon-price input { width: 56px; font-size: 13px; }

/* Adjustments */
.qb-adjust-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 520px) { .qb-adjust-row { grid-template-columns: 1fr; } }
.qb-adjust-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qb-adjust-field > em { font: 600 11px var(--dd-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--dd-ink-2); font-style: normal; }
.qb-adjust-field .qb-money-field { width: 100%; box-sizing: border-box; }
.qb-adjust-field .qb-money-field input { flex: 1; width: auto; min-width: 0; }
.qb-labeled { position: relative; }
.qb-labeled em { position: absolute; top: -8px; left: 8px; padding: 0 4px; background: var(--dd-bg-1); font: 600 9.5px var(--dd-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--dd-ink-2); font-style: normal; }
.qb-note-field { display: block; margin-top: 12px; }
.qb-note-field em { display: block; font: 600 11px var(--dd-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--dd-ink-2); font-style: normal; margin-bottom: 6px; }
.qb-note-field textarea {
  width: 100%; min-height: 58px; resize: vertical; box-sizing: border-box;
  background: var(--dd-bg-1); border: 1px solid var(--dd-line-2); border-radius: var(--dd-r-sm);
  padding: 10px 12px; color: var(--dd-ink-0); font: 500 13px/1.5 var(--dd-font-body);
  transition: border-color var(--dd-t-1) var(--dd-ease);
}
.qb-note-field textarea:focus { outline: none; border-color: var(--dealer-accent-line); }

/* ── Sticky total bar + create button */
.qb-total-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; border-top: 1px solid var(--dd-line);
  background: linear-gradient(180deg, var(--dd-bg-1), var(--dd-bg-2));
}
.qb-total-meta { display: flex; flex-direction: column; }
.qb-total-label { font: 600 10px var(--dd-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--dd-ink-2); }
.qb-total-value { font: 800 26px/1 var(--dd-font-display); color: var(--dd-ink-0); margin: 2px 0; transition: color var(--dd-t-2) var(--dd-ease); }
.qb-total-sub { font: 500 11.5px var(--dd-font-body); color: var(--dd-ink-2); }

.qb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--dd-r-sm); cursor: pointer;
  font: 600 13px var(--dd-font-body); color: var(--dd-ink-1);
  background: var(--dd-bg-3); border: 1px solid var(--dd-line-2);
  transition: background var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease);
}
.qb-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qb-btn:hover { color: var(--dd-ink-0); border-color: var(--dd-line-strong); transform: translateY(-1px); }
.qb-btn:active { transform: translateY(0); }
.qb-btn-primary { color: #fff; background: linear-gradient(135deg, var(--dealer-accent), var(--dealer-accent-deep)); border-color: transparent; box-shadow: 0 10px 22px -12px rgba(var(--dealer-accent-rgb), .8); }
.qb-btn-primary:hover { color: #fff; filter: brightness(1.06); }
.qb-btn-ghost { background: transparent; }
.qb-btn.is-loading,
.qb-btn[disabled] { cursor: wait; opacity: .82; transform: none; }
.qb-btn.is-copied { background: rgba(var(--dd-ok-rgb), .15); border-color: rgba(var(--dd-ok-rgb), .45); color: var(--dd-ok); }
.qb-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: qb-spin .7s linear infinite;
}
@keyframes qb-spin { to { transform: rotate(360deg); } }

/* ── Success */
.qb-success { padding: 28px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.qb-success-icon {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
  background: rgba(var(--dd-ok-rgb), .14); color: var(--dd-ok);
  animation: qb-check-pop var(--dd-t-3) var(--dd-ease-out);
}
.qb-success-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes qb-check-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.qb-success h3 { margin: 0; font: 700 19px var(--dd-font-display); color: var(--dd-ink-0); }
.qb-success p { margin: 0 0 8px; font: 500 13px/1.5 var(--dd-font-body); color: var(--dd-ink-2); max-width: 380px; }
.qb-link-field { width: 100%; max-width: 440px; }
.qb-link-field input {
  width: 100%; box-sizing: border-box; text-align: center;
  background: var(--dd-bg-1); border: 1px solid var(--dealer-accent-line); border-radius: var(--dd-r-sm);
  padding: 11px 14px; color: var(--dealer-accent-3); font: 600 13px var(--dd-font-mono, monospace);
}
.qb-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .qb-backdrop, .qb-dialog, .qb-success-icon, .qb-spinner { animation: none; }
  .qb-close:hover { transform: none; }
}

/* =============================================================================
   BOOKING — nav group + Availability (Hours & Days) editor   (2026-05-21)
============================================================================= */
.dd-nav-group {
  margin: 11px 12px 4px; padding: 0;
  font: 700 9px/1 var(--dd-font-body); letter-spacing: .15em; text-transform: uppercase;
  color: var(--dd-ink-3);
}
.dd-nav-top { margin-bottom: 4px; }
.dd-nav-item.is-sub { padding-left: 22px; }
.dd-nav-item.is-sub .dd-nav-icon { transform: scale(.92); opacity: .9; }
[data-sidebar-collapsed="true"] .dd-nav-group { text-align: center; font-size: 0; margin: 10px 0 2px; }
[data-sidebar-collapsed="true"] .dd-nav-group::before { content: '·'; font-size: 14px; color: var(--dd-ink-2); }
[data-sidebar-collapsed="true"] .dd-nav-item.is-sub { padding-left: 0; }

.dd-availability-card { padding: 0; overflow: hidden; }
.av-grid { display: grid; grid-template-columns: 1fr 320px; gap: 0; }
@media (max-width: 880px) { .av-grid { grid-template-columns: 1fr; } }

.av-editor { padding: 20px; display: flex; flex-direction: column; gap: 22px; }
.av-block-head h3 { margin: 0; font: 700 14px var(--dd-font-display); color: var(--dd-ink-0); }
.av-block-head p { margin: 3px 0 12px; font: 500 12px var(--dd-font-body); color: var(--dd-ink-2); }

/* Day rows */
.av-days { display: flex; flex-direction: column; gap: 8px; }
.av-day {
  display: grid; grid-template-columns: 44px 92px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--dd-line); border-radius: var(--dd-r);
  background: var(--dd-bg-2);
  transition: border-color var(--dd-t-2) var(--dd-ease), opacity var(--dd-t-2) var(--dd-ease);
}
.av-day:not(.is-open) { opacity: .58; }
.av-day.is-open { border-color: var(--dd-line-2); }
.av-day-name { font: 600 13px var(--dd-font-body); color: var(--dd-ink-0); }
.av-day-times { display: inline-flex; align-items: center; gap: 8px; }
.av-day:not(.is-open) .av-day-times { display: none; }
.av-day.is-open .av-day-closed { display: none; }
.av-day-closed { font: 600 12px var(--dd-font-body); color: var(--dd-ink-2); justify-self: start; }
.av-dash { color: var(--dd-ink-2); }
.av-time { min-width: 96px; }
@media (max-width: 520px) {
  .av-day { grid-template-columns: 40px 1fr; grid-template-areas: 'toggle name' 'toggle times'; row-gap: 8px; }
  .av-day .qb-switch { grid-area: toggle; }
  .av-day-name { grid-area: name; }
  .av-day-times, .av-day-closed { grid-area: times; }
}

/* Rules */
.av-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.av-rule { display: flex; flex-direction: column; gap: 6px; }
.av-rule span { font: 600 11px var(--dd-font-body); letter-spacing: .03em; text-transform: uppercase; color: var(--dd-ink-2); }
.av-lunch { margin-top: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.av-lunch-toggle { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--dd-font-body); color: var(--dd-ink-1); cursor: pointer; }
.av-lunch-toggle input { accent-color: var(--dealer-accent); width: 15px; height: 15px; }
.av-lunch-times { display: inline-flex; align-items: center; gap: 8px; }
.av-lunch-times.is-hidden { display: none; }

/* Blackouts */
.av-blackout-add { display: flex; gap: 8px; margin-bottom: 12px; }
.av-date { max-width: 200px; }
.av-blackout-list { display: flex; flex-wrap: wrap; gap: 8px; }
.av-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px; border-radius: 999px;
  background: var(--dd-bg-3); border: 1px solid var(--dd-line-2);
  font: 600 12px var(--dd-font-body); color: var(--dd-ink-1);
}
.av-chip button {
  width: 18px; height: 18px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--dd-bg-1); color: var(--dd-ink-2); font-size: 14px; line-height: 1;
  display: grid; place-items: center;
  transition: background var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease);
}
.av-chip button:hover { background: var(--dd-danger); color: #fff; }
.av-empty { font: 500 12.5px var(--dd-font-body); color: var(--dd-ink-2); margin: 0; }

/* Preview */
.av-preview {
  padding: 20px; border-left: 1px solid var(--dd-line); background: var(--dd-bg-1);
  position: sticky; top: 0; align-self: start;
}
@media (max-width: 880px) { .av-preview { border-left: none; border-top: 1px solid var(--dd-line); position: static; } }
.av-preview-head h3 { margin: 4px 0 2px; font: 700 15px var(--dd-font-display); color: var(--dd-ink-0); }
.av-preview-head p { margin: 0 0 14px; font: 500 12px var(--dd-font-body); color: var(--dd-ink-2); }
.av-preview-body { display: flex; flex-direction: column; gap: 14px; }
.av-preview-day strong { display: block; font: 600 12.5px var(--dd-font-body); color: var(--dd-ink-1); margin-bottom: 6px; }
.av-slot-row { display: flex; flex-wrap: wrap; gap: 6px; }
.av-slot {
  font: 600 11.5px var(--dd-font-mono, monospace); color: var(--dealer-accent-3);
  padding: 5px 9px; border-radius: var(--dd-r-sm);
  background: var(--dealer-accent-soft); border: 1px solid var(--dealer-accent-line);
}
.av-slot.is-none { color: var(--dd-ink-2); background: var(--dd-bg-3); border-color: var(--dd-line); }

/* =============================================================================
   QUOTE GENERATOR — incoming request list (replaces old Invoice Generator)
============================================================================= */
.qg-intro { margin: 0 0 18px; font: 500 13px/1.5 var(--dd-font-body); color: var(--dd-ink-2); max-width: 60ch; }
.qg-group { margin-bottom: 22px; }
.qg-group-title { margin: 0 0 10px; font: 700 11px var(--dd-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--dd-ink-2); display: flex; align-items: center; gap: 8px; }
.qg-group-title b { font: 700 11px var(--dd-font-body); color: var(--dealer-accent-3); background: var(--dealer-accent-soft); border-radius: 999px; padding: 1px 8px; }
.qg-list { display: flex; flex-direction: column; gap: 8px; }
.qg-row {
  display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--dd-line); border-radius: var(--dd-r);
  background: var(--dd-bg-2);
  transition: border-color var(--dd-t-2) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease);
}
.qg-row:hover { border-color: var(--dd-line-2); transform: translateY(-1px); }
.qg-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--dd-font-display); color: #fff; background: linear-gradient(135deg, var(--dealer-accent), var(--dealer-accent-deep)); }
.qg-main { display: flex; flex-direction: column; min-width: 0; }
.qg-main strong { font: 600 13.5px var(--dd-font-body); color: var(--dd-ink-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qg-main span { font: 500 12px var(--dd-font-body); color: var(--dd-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qg-status { font: 600 11px var(--dd-font-body); color: var(--dd-warn); white-space: nowrap; }
.qg-status.is-quoted { color: var(--dd-ok); }
.qg-actions { display: flex; gap: 6px; }
.qg-actions button {
  font: 600 12px var(--dd-font-body); padding: 7px 12px; border-radius: var(--dd-r-sm); cursor: pointer;
  background: var(--dd-bg-3); border: 1px solid var(--dd-line-2); color: var(--dd-ink-1); white-space: nowrap;
  transition: background var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease);
}
.qg-actions button:hover { color: var(--dd-ink-0); border-color: var(--dd-line-strong); }
.qg-actions button.is-primary { color: #fff; background: linear-gradient(135deg, var(--dealer-accent), var(--dealer-accent-deep)); border-color: transparent; }
.qg-actions button.is-primary:hover { filter: brightness(1.06); color: #fff; }
@media (max-width: 620px) {
  .qg-row { grid-template-columns: 32px 1fr; grid-template-areas: 'avatar main' 'status status' 'actions actions'; row-gap: 8px; }
  .qg-avatar { grid-area: avatar; } .qg-main { grid-area: main; } .qg-status { grid-area: status; justify-self: start; } .qg-actions { grid-area: actions; }
  .qg-actions button { flex: 1; }
}

/* =============================================================================
   GALLERY — Supabase media library (per-dealer uploads + shared global)
============================================================================= */
.dd-gallery-card { display: block; }
.dd-gal-uploading { font: 600 12.5px var(--dd-font-body); color: var(--dealer-accent-3); background: var(--dealer-accent-soft); border: 1px solid var(--dealer-accent-line); border-radius: var(--dd-r-sm); padding: 10px 14px; margin-bottom: 16px; }
.dd-gal-loading { padding: 30px 12px; text-align: center; color: var(--dd-ink-2); font: 500 13.5px var(--dd-font-body); }
.dd-gal-block { margin-bottom: 24px; }
.dd-gal-head { margin: 0 0 12px; font: 700 11px var(--dd-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--dd-ink-2); display: flex; align-items: center; gap: 8px; }
.dd-gal-head b { font: 700 11px var(--dd-font-body); color: var(--dealer-accent-3); background: var(--dealer-accent-soft); border-radius: 999px; padding: 1px 8px; }
.dd-gal-empty { font: 500 12.5px var(--dd-font-body); color: var(--dd-ink-2); margin: 0; }
.dd-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dd-gal-item {
  position: relative; margin: 0; border: 1px solid var(--dd-line-2); border-radius: var(--dd-r);
  overflow: hidden; background: var(--dd-bg-2);
  transition: border-color var(--dd-t-2) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease);
}
.dd-gal-item:hover { border-color: var(--dealer-accent-line); transform: translateY(-2px); }
.dd-gal-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--dd-bg-3); }
.dd-gal-badge {
  position: absolute; top: 8px; left: 8px; font: 700 9.5px var(--dd-font-body); letter-spacing: .04em; text-transform: uppercase;
  color: var(--dd-ink-1); background: rgba(8, 9, 12, .72); border: 1px solid var(--dd-line-2);
  padding: 3px 7px; border-radius: 999px; backdrop-filter: blur(6px);
}
.dd-gal-badge.is-mine { color: #fff; background: rgba(var(--dealer-accent-rgb), .85); border-color: transparent; }
.dd-gal-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; }
.dd-gal-title { font: 500 11.5px var(--dd-font-body); color: var(--dd-ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-gal-copy {
  flex: none; font: 600 11px var(--dd-font-body); color: var(--dd-ink-2); cursor: pointer;
  background: var(--dd-bg-3); border: 1px solid var(--dd-line-2); border-radius: var(--dd-r-xs); padding: 4px 8px;
  transition: color var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease);
}
.dd-gal-copy:hover { color: var(--dd-ink-0); border-color: var(--dd-line-strong); }
/* Delete photo button — top-right, fades in on hover, red on hover */
.dd-gal-del {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  border: 1px solid rgba(255,255,255,.16); border-radius: 9px;
  background: rgba(8, 9, 12, .68); color: #fff; backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-2px);
  transition: opacity var(--dd-t-1) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease);
}
.dd-gal-item:hover .dd-gal-del,
.dd-gal-del:focus-visible { opacity: 1; transform: translateY(0); }
.dd-gal-del:hover { background: rgba(225,29,42,.9); border-color: transparent; }
.dd-gal-del svg { width: 15px; height: 15px; }
@media (hover: none) { .dd-gal-del { opacity: 1; transform: none; } }

/* =============================================================================
   QUOTE BUILDER v2 — fit one screen, no horizontal scroll, richer client panel
============================================================================= */
/* Dialog: cap to viewport, never overflow horizontally */
.qb-dialog { width: min(1000px, calc(100vw - 28px)) !important; max-height: calc(100dvh - 28px) !important; }
.qb-dialog, .qb-dialog * { box-sizing: border-box; }
.qb-dialog-body { overflow: hidden auto; }
.qb-grid { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) !important; }
.qb-grid > * { min-width: 0; }                 /* allow children to shrink, kills h-scroll */
.qb-build { min-width: 0; overflow-x: hidden; }
.qb-pkg-grid, .qb-addon-grid { grid-template-columns: 1fr; }
@media (min-width: 880px) { .qb-addon-grid { grid-template-columns: 1fr 1fr; } }
.qb-pkg, .qb-addon { min-width: 0; }
.qb-pkg-name, .qb-addon input, .qb-money-field input { min-width: 0; max-width: 100%; }
.qb-money-field { flex: 0 0 auto; }

/* Make X reliably clickable: lift dialog head above any sibling, give the
   close button its own stacking + pointer guarantees, and let the SVG ignore
   clicks so the button (with data-action) always receives them. */
.qb-dialog-head { position: relative; z-index: 2; }
.qb-close { position: relative; z-index: 3; pointer-events: auto; }
.qb-close * { pointer-events: none; }

/* Ensure the whole modal layer captures clicks (backdrop close also works) */
.invoice-modal { position: fixed; inset: 0; z-index: 119; }
.invoice-modal[hidden] { display: none !important; }

/* ── Redesigned client context panel: schematic stat tiles + tags */
.qb-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qb-stat {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px 11px; border-radius: var(--dd-r); background: var(--dd-bg-2);
  border: 1px solid var(--dd-line);
}
.qb-stat.is-accent { border-color: color-mix(in srgb, var(--dealer-accent) 45%, var(--dd-line)); background: color-mix(in srgb, var(--dealer-accent) 10%, var(--dd-bg-2)); }
.qb-stat-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
  background: color-mix(in srgb, var(--dealer-accent) 16%, transparent); color: var(--dealer-accent-3); }
.qb-stat-ic svg { width: 17px; height: 17px; }
.qb-stat-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qb-stat-meta em { font: 600 9.5px var(--dd-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--dd-ink-2); font-style: normal; }
.qb-stat-meta strong { font: 600 12.5px var(--dd-font-body); color: var(--dd-ink-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-stat.is-accent .qb-stat-meta strong { color: var(--dealer-accent-3); }

.qb-req-tags { display: flex; flex-direction: column; gap: 7px; }
.qb-req-tags em { font: 600 9.5px var(--dd-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--dd-ink-2); font-style: normal; }
.qb-req-tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.qb-req-tag { font: 500 11.5px var(--dd-font-body); color: var(--dd-ink-1); padding: 4px 9px; border-radius: 999px; background: var(--dd-bg-3); border: 1px solid var(--dd-line); }
.qb-note-card { position: relative; padding: 12px 14px 12px 30px; border-radius: var(--dd-r); background: var(--dd-bg-2); border: 1px solid var(--dd-line); }
.qb-note-card p { margin: 0; font: italic 400 12.5px/1.5 var(--dd-font-body); color: var(--dd-ink-1); }
.qb-note-quote { position: absolute; left: 9px; top: 4px; font: 800 26px var(--dd-font-display); color: color-mix(in srgb, var(--dealer-accent) 50%, transparent); }
.qb-chip { text-decoration: none; }
.qb-chip:hover { border-color: var(--dealer-accent-3); color: var(--dd-ink-0); }

/* total bar pinned, never causes h-scroll */
.qb-total-bar { flex-wrap: wrap; gap: 12px; }

/* =============================================================================
   SIDEBAR NAV v2 — categorized groups, entrance animation, richer hover
============================================================================= */
.dd-nav-group-block { display: flex; flex-direction: column; gap: 1px; padding-bottom: 4px; }
.dd-nav-group-block + .dd-nav-group-block { margin-top: 2px; border-top: 1px solid color-mix(in srgb, var(--dd-line) 60%, transparent); padding-top: 4px; }
.dd-nav-group-block:first-child .dd-nav-group { margin-top: 6px; }

/* entrance: groups fade/slide in, staggered by --dd-nav-delay */
@keyframes ddNavIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.dd-nav-group-block { animation: ddNavIn .42s var(--dd-ease-out, cubic-bezier(.22,1,.36,1)) both; animation-delay: calc(var(--dd-nav-delay, 0) * 70ms + 40ms); }
@media (prefers-reduced-motion: reduce) { .dd-nav-group-block { animation: none; } }

/* nicer group label */
.dd-nav-group { color: color-mix(in srgb, var(--dd-ink-2) 90%, var(--dealer-accent-3)); }

/* hover lift + icon pop; active gets a soft glow */
.dd-nav-item { transition: background var(--dd-t-2) var(--dd-ease), color var(--dd-t-2) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease); }
.dd-nav-item:hover { transform: translateX(2px); }
.dd-nav-item:active { transform: translateX(1px) scale(.99); }
.dd-nav-item .dd-nav-icon { transition: color var(--dd-t-2) var(--dd-ease), opacity var(--dd-t-2) var(--dd-ease), transform var(--dd-t-2) var(--dd-ease); }
.dd-nav-item:hover .dd-nav-icon { transform: translateX(1px) scale(1.06); }
.dd-nav-item.is-active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dealer-accent) 18%, transparent); }
.dd-nav-item.is-active .dd-nav-icon { transform: scale(1.04); }

/* collapsed: hide group dividers/labels cleanly, center icons */
[data-sidebar-collapsed="true"] .dd-nav-group-block + .dd-nav-group-block { border-top-color: color-mix(in srgb, var(--dd-line) 70%, transparent); }
[data-sidebar-collapsed="true"] .dd-nav-group { display: none; }
[data-sidebar-collapsed="true"] .dd-nav-group-block { padding-top: 6px; }

/* =============================================================================
   QUOTE LIFECYCLE STATUS — badge + 5-step timeline in the Quotes list
============================================================================= */
.dd-quote-stage { display: inline-flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.dd-quote-stage-label {
  font: 600 11px var(--dd-font-body); font-style: normal; letter-spacing: .01em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--dd-line-2); color: var(--dd-ink-1); background: var(--dd-bg-2);
}
/* color the pill per stage */
.is-stage-pending   .dd-quote-stage-label { color: #c8c8d2; border-color: color-mix(in srgb, #8b8b97 40%, var(--dd-line)); }
.is-stage-created   .dd-quote-stage-label { color: #7fb2ff; border-color: color-mix(in srgb, #4f7cff 45%, var(--dd-line)); background: color-mix(in srgb, #4f7cff 12%, var(--dd-bg-2)); }
.is-stage-sent      .dd-quote-stage-label { color: #d6a44f; border-color: color-mix(in srgb, #d99a2b 50%, var(--dd-line)); background: color-mix(in srgb, #d99a2b 12%, var(--dd-bg-2)); }
.is-stage-confirmed .dd-quote-stage-label { color: #46c79a; border-color: color-mix(in srgb, #19b87f 50%, var(--dd-line)); background: color-mix(in srgb, #19b87f 13%, var(--dd-bg-2)); }
.is-stage-booked    .dd-quote-stage-label { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--dealer-accent), var(--dealer-accent-deep)); }

.dd-quote-timeline { display: inline-flex; align-items: center; gap: 5px; }
.dd-quote-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--dd-line-strong);
  position: relative; transition: background var(--dd-t-2) var(--dd-ease), transform var(--dd-t-2) var(--dd-ease);
}
.dd-quote-dot + .dd-quote-dot::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: 5px; height: 2px;
  transform: translateY(-50%); background: var(--dd-line-strong);
}
.dd-quote-dot.is-done { background: var(--dealer-accent-3); }
.dd-quote-dot.is-done + .dd-quote-dot::before,
.dd-quote-dot.is-current::before { background: var(--dealer-accent-3); }
.dd-quote-dot.is-current { background: var(--dealer-accent); transform: scale(1.45); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dealer-accent) 22%, transparent); }
@media (prefers-reduced-motion: reduce) { .dd-quote-dot.is-current { transform: none; } }


/* =============================================================================
   QUOTE BUILDER v3 — inline customer row, price breakdown, package carousel,
   total beside the Create button. Appended last so it wins the cascade.
============================================================================= */

/* ── Left column: inline customer (no boxes) ─────────────────────────────── */
.qb-context { gap: 14px; }
.qb-cust-row { display: flex; align-items: center; gap: 11px; }
.qb-cust-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.qb-cust-main strong { font: 700 15px var(--dd-font-body); color: var(--dd-ink-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-cust-main span { font: 500 12px var(--dd-font-body); color: var(--dd-ink-2); }
.qb-edit-btn {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--dd-line-2); background: var(--dd-bg-2); color: var(--dd-ink-1);
  font: 600 11.5px var(--dd-font-body);
  transition: border-color var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease);
}
.qb-edit-btn:hover { border-color: var(--dealer-accent-3); color: var(--dd-ink-0); background: color-mix(in srgb, var(--dealer-accent) 12%, var(--dd-bg-2)); }
.qb-edit-btn svg { width: 13px; height: 13px; }
.qb-cust-contact { font: 500 12px var(--dd-font-body); color: var(--dd-ink-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qb-cust-contact a { color: var(--dd-ink-1); text-decoration: none; }
.qb-cust-contact a:hover { color: var(--dealer-accent-3); }
.qb-cust-contact .qb-dot { color: var(--dd-ink-3); }

/* facts as a clean one-per-line list (no boxes) */
.qb-facts { margin: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--dd-line); }
.qb-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--dd-line); }
.qb-fact dt { margin: 0; font: 600 11px var(--dd-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--dd-ink-2); }
.qb-fact dd { margin: 0; font: 600 13px/1.35 var(--dd-font-body); color: var(--dd-ink-0); text-align: right; max-width: 66%; white-space: normal; overflow-wrap: anywhere; }

/* ── Price breakdown card under the customer info ────────────────────────── */
.qb-breakdown {
  border: 1px solid var(--dd-line); border-radius: var(--dd-r); padding: 12px 14px;
  background: var(--dd-bg-2);
}
.qb-bd-head { font: 700 10px var(--dd-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--dd-ink-2); margin-bottom: 8px; }
.qb-bd-rows { display: flex; flex-direction: column; }
.qb-bd-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; font: 500 12.5px var(--dd-font-body); color: var(--dd-ink-1); }
.qb-bd-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-bd-row b { color: var(--dd-ink-0); font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.qb-bd-row.is-neg b { color: #46c79a; }
.qb-bd-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--dd-line-2); }
.qb-bd-total span { font: 600 11px var(--dd-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--dd-ink-2); }
.qb-bd-total b { font: 800 20px var(--dd-font-display); color: var(--dealer-accent-3); font-variant-numeric: tabular-nums; }
/* Editable breakdown lines */
.qb-bd-line { display: flex; align-items: center; gap: 8px; padding: 5px 0; font: 500 12.5px var(--dd-font-body); color: var(--dd-ink-1); }
.qb-bd-line-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-bd-price {
  display: inline-flex; align-items: center; gap: 1px; flex: none;
  background: var(--dd-bg-1); border: 1px solid var(--dd-line-2); border-radius: var(--dd-r-sm);
  padding: 3px 8px; transition: border-color var(--dd-t-1) var(--dd-ease);
}
.qb-bd-price:focus-within { border-color: var(--dealer-accent-line); }
.qb-bd-price i { font-style: normal; font-size: 12px; color: var(--dd-ink-2); }
.qb-bd-line.is-neg .qb-bd-price i { color: #46c79a; }
.qb-bd-price input {
  width: 58px; background: transparent; border: 0; outline: none; color: var(--dd-ink-0);
  font: 700 13px var(--dd-font-body); -moz-appearance: textfield; text-align: right;
}
.qb-bd-price input::-webkit-outer-spin-button, .qb-bd-price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qb-bd-remove {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border: 0; border-radius: 6px; cursor: pointer; padding: 0;
  background: rgba(255,255,255,.05); color: var(--dd-ink-2); transition: background var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease);
}
.qb-bd-remove:hover { background: rgba(225,29,42,.16); color: #ff6b78; }
.qb-bd-remove svg { width: 13px; height: 13px; }

/* ── Package carousel ────────────────────────────────────────────────────── */
.qb-section-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.qb-section-actions { display: inline-flex; align-items: center; gap: 14px; }
.qb-section-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  position: relative; cursor: pointer;
  padding: 6px 10px;
  border: 1px solid var(--dd-line);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  transition: background var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease);
}
.qb-section-toggle:hover { background: rgba(255,255,255,.045); }
.qb-section-toggle input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; top: 0; left: 0;
}
.qb-section-toggle .qb-switch-track { width: 32px; height: 18px; }
.qb-section-toggle .qb-switch-track::after { width: 14px; height: 14px; }
.qb-section-toggle input:checked + .qb-switch-track { background: var(--dealer-accent); border-color: var(--dealer-accent); }
.qb-section-toggle input:checked + .qb-switch-track::after { transform: translateX(14px); }
.qb-section-toggle-label {
  font: 700 11px var(--dd-font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dd-ink-1);
}
.qb-pkg-section.is-disabled .qb-pkg-carousel {
  opacity: .35;
  pointer-events: none;
  filter: saturate(.6);
}
.qb-pkg-section.is-disabled .qb-carousel-nav { opacity: .4; pointer-events: none; }
.qb-service-search { margin-bottom: 14px; }
.qb-service-grid { margin-top: 12px; }
.qb-service-empty {
  padding: 22px 18px;
  border: 1px dashed var(--dd-line);
  border-radius: 12px;
  background: rgba(255,255,255,.015);
  color: var(--dd-ink-3);
  font: 540 12.5px var(--dd-font-body);
  text-align: center;
}
.qb-carousel-nav { display: inline-flex; gap: 6px; flex: none; }
.qb-carousel-btn {
  width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
  border-radius: 9px; border: 1px solid var(--dd-line-2); background: var(--dd-bg-2); color: var(--dd-ink-1);
  transition: border-color var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease);
}
.qb-carousel-btn:hover { border-color: var(--dealer-accent-3); color: var(--dd-ink-0); }
.qb-carousel-btn:active { transform: scale(.92); }
.qb-carousel-btn svg { width: 16px; height: 16px; }

.qb-pkg-carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(248px, 1fr);
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 10px; margin: 0 -2px; scroll-padding-left: 2px;
  overscroll-behavior-inline: contain;
}
@media (min-width: 1080px) { .qb-pkg-carousel { grid-auto-columns: minmax(260px, 1fr); } }
.qb-pkg-carousel > .qb-pkg { scroll-snap-align: start; }
.qb-pkg-carousel::-webkit-scrollbar { height: 6px; }
.qb-pkg-carousel::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 999px; }
.qb-pkg-carousel::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--dealer-accent) 55%, transparent); border-radius: 999px; }
.qb-pkg { min-width: 0; }
.qb-pkg-head { position: relative; }
.qb-pkg-del {
  position: absolute; top: -2px; right: -2px; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--dd-ink-3); cursor: pointer;
  opacity: 0; transition: opacity var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease);
}
.qb-pkg:hover .qb-pkg-del { opacity: 1; }
.qb-pkg-del:hover { color: #ff8088; background: rgba(232,70,90,.14); }
.qb-pkg-del svg { width: 12px; height: 12px; }
.qb-pkg-benefits-empty li { color: var(--dd-ink-3); font-style: italic; }

/* Add-package card */
.qb-pkg-add {
  scroll-snap-align: start; min-width: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed var(--dd-line-strong); border-radius: var(--dd-r); background: transparent;
  color: var(--dd-ink-2); cursor: pointer; padding: 18px;
  transition: border-color var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease);
}
.qb-pkg-add:hover { border-color: var(--dealer-accent-3); color: var(--dd-ink-0); background: color-mix(in srgb, var(--dealer-accent) 8%, transparent); }
.qb-pkg-add-plus {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--dealer-accent) 16%, transparent); color: var(--dealer-accent-3);
  font: 700 22px/1 var(--dd-font-display);
}
.qb-pkg-add span:last-child { font: 600 12.5px var(--dd-font-body); }

/* ── Footer: total directly beside the Create button ─────────────────────── */
.qb-total-cta { display: inline-flex; align-items: center; gap: 14px; }
.qb-total-cta .qb-total-value { margin: 0; font: 800 30px/1 var(--dd-font-display); color: var(--dealer-accent-3); }
.qb-total-bar { flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) {
  .qb-total-cta { width: 100%; justify-content: space-between; }
  .qb-total-cta .qb-btn { flex: 1 1 auto; }
}

/* =============================================================================
   QUOTE BUILDER v3.1 — dealer add-ons scroll separately below packages,
   richer add-on cards with photos. Appended last (wins cascade).
============================================================================= */

/* The add-ons section gets its own scroll area so it is visually separated
   from the package carousel on top. Packages = horizontal swipe; add-ons =
   their own vertical scroll panel below. */
.qb-build .qb-section + .qb-section { border-top: 1px solid var(--dd-line); padding-top: 16px; }

.qb-addon-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  max-height: 240px; overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--dealer-accent) 55%, transparent) transparent;
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent);
}
.qb-addon-grid::-webkit-scrollbar { width: 7px; }
.qb-addon-grid::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 999px; }
.qb-addon-grid::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--dealer-accent) 55%, transparent); border-radius: 999px; }
@media (max-width: 620px) { .qb-addon-grid { grid-template-columns: 1fr; max-height: 280px; } }

/* a small hint that the add-ons panel scrolls */
.qb-addon-grid-wrap { position: relative; }

/* Bigger, more premium add-on photo */
.qb-addon { transition: border-color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease); }
.qb-addon:hover { transform: translateY(-1px); }
.qb-addon-thumb {
  width: 50px; height: 50px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  position: relative; overflow: hidden;
}
.qb-addon.is-on .qb-addon-thumb { box-shadow: inset 0 0 0 1.5px var(--dealer-accent); }
.qb-addon-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.4));
  opacity: .8;
}
.qb-addon-thumb-mono::after { display: none; }

/* ============================================================
   Dealer dashboard refinements:
   - Active Quotes & Bookings: horizontal scroll + service/body
     icons + created date
   - Chat list: service-icon avatars, compact website-visitor rows
   ============================================================ */
/* Horizontal scroller for the activity timeline when there are many */
.dd-qb-timeline-list {
  display: flex;
  grid-template-columns: none;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.dd-qb-timeline-list > .dd-qb-item {
  flex: 0 0 clamp(248px, 30%, 300px);
  scroll-snap-align: start;
}
.dd-qb-timeline-list > .dd-qb-empty { flex: 1 1 100%; }
.dd-qb-timeline-list::-webkit-scrollbar { height: 8px; }
.dd-qb-timeline-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; }
.dd-qb-timeline-list::-webkit-scrollbar-track { background: transparent; }

/* Service-icon avatar (replaces the initial letter) */
.dd-qb-avatar-svc svg { width: 20px; height: 20px; }
.dd-qb-avatar-svc {
  background: rgba(255,255,255,.07);
  color: var(--dd-ink-1);
  box-shadow: inset 0 0 0 1px var(--dd-line-2);
}
/* Vehicle body icon next to the vehicle line */
.dd-qb-bodyicon {
  display: inline-flex;
  vertical-align: -3px;
  margin-right: 5px;
  color: var(--dd-ink-2);
}
.dd-qb-bodyicon svg { width: 18px; height: 14px; max-width: 100%; max-height: 100%; display: block; }
/* Created date under the relative time */
.dd-qb-created {
  color: var(--dd-ink-3);
  font: 650 9px var(--dd-font-body) !important;
  letter-spacing: .02em;
  opacity: .85;
}

/* Chat list: service-icon avatar for named customers (legacy variant) */
.dealer-chat-avatar-svc {
  display: grid;
  place-items: center;
  background: rgba(var(--dealer-accent-rgb), .14);
  color: var(--dealer-accent);
  box-shadow: inset 0 0 0 1px rgba(var(--dealer-accent-rgb), .28);
}
.dealer-chat-avatar-svc svg { width: 18px; height: 18px; }

/* Chat list: colored initial avatar for known customers. Per-customer color
   stamped inline via style="" matches the same hash the active-clients
   cards / manage popup use so each customer keeps a single visual identity
   across the whole dashboard. */
.dealer-chat-avatar-initial {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
  font: 800 13px var(--dd-font-body);
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Chat list: generic person glyph for anonymous "Website visitor" rows */
.dealer-chat-avatar-person {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.55);
}
.dealer-chat-avatar-person svg { width: 18px; height: 18px; }
/* Visitor rows now keep the avatar column instead of going single-column */
.dealer-chat-row.is-visitor {
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
}

/* Compact website-visitor row: no avatar, minimal vertical space */
.dealer-chat-row.is-visitor {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-top: 7px;
  padding-bottom: 7px;
  gap: 8px;
  align-items: center;
}
.dealer-chat-row.is-visitor .dealer-chat-row-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dealer-chat-row.is-visitor strong { font-size: 11.5px; opacity: .8; flex: 0 0 auto; }
.dealer-chat-row.is-visitor p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   5-step quote->job cycle, New badge, create-quote/booking modal
   ============================================================ */
.dd-qb-steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Slightly wider activity cards so 5 step labels fit comfortably */
.dd-qb-timeline-list > .dd-qb-item { flex-basis: clamp(300px, 34%, 360px); }
.dd-qb-steps-5 b { font-size: 8.5px; }

.dd-qb-meta b.is-accepted { background: rgba(var(--dealer-accent-rgb), .14); color: var(--dealer-accent); }
.dd-qb-meta b.is-finished { background: rgba(var(--dd-ok-rgb), .16); color: var(--dd-ok); }

/* "New" badge next to a fresh customer */
.dd-qb-new {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--dd-sys-grad);
  color: #fff;
  font: 800 8.5px var(--dd-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* ---- Create Quote / Booking modal ---- */
.dd-create-modal-backdrop {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(4,6,10,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* A class with display:flex overrides the UA [hidden] rule, which left the
   blurred backdrop on screen after the dialog closed. Force it hidden. */
.dd-create-modal-backdrop[hidden] { display: none !important; }
.dd-create-modal-backdrop.is-open { animation: dd-create-fade .18s ease-out; }
@keyframes dd-create-fade { from { opacity: 0; } to { opacity: 1; } }
.dd-create-modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dd-line);
  border-radius: 18px;
  background: var(--dd-bg-2, #14171e);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.7);
  overflow: hidden;
  animation: dd-create-rise .24s cubic-bezier(.16,1,.3,1);
}
.dd-create-modal-backdrop.is-booking .dd-create-modal { width: min(720px, 100%); }
/* Form fills remaining vertical space; the field grid scrolls internally so
   the Cancel/Create footer is always visible no matter how tall the booking
   calendar picker grows. */
.dd-create-modal .dd-create-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0; }
.dd-create-modal .dd-create-grid { padding: 18px 20px 4px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.dd-create-modal .dd-create-foot {
  flex: none;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--dd-line);
  background: var(--dd-bg-2, #14171e);
  display: flex; gap: 8px; justify-content: flex-end;
}
@keyframes dd-create-rise { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.dd-create-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--dd-line);
}
.dd-create-modal-head h2 { margin: 0; font: 800 17px var(--dd-font-display); color: var(--dd-ink-0); }
.dd-create-modal-head-text { min-width: 0; }
.dd-create-modal-sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--dd-ink-2); max-width: 46ch; }
.dd-create-modal-close {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--dd-line); border-radius: 999px;
  background: rgba(255,255,255,.04); color: var(--dd-ink-2); cursor: pointer;
}
.dd-create-modal-close:hover { color: var(--dd-ink-0); border-color: rgba(var(--dealer-accent-rgb), .5); }
.dd-create-form { padding: 18px 20px 20px; }
.dd-create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dd-field { display: grid; gap: 5px; min-width: 0; }
.dd-field > span { font: 700 10.5px var(--dd-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--dd-ink-2); }
.dd-field input, .dd-field select, .dd-field textarea {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--dd-line); border-radius: 10px;
  background: rgba(255,255,255,.04); color: var(--dd-ink-0);
  font: 600 13px var(--dd-font-body); outline: none;
}
.dd-field textarea { resize: vertical; }
.dd-field input:focus, .dd-field select:focus, .dd-field textarea:focus {
  border-color: var(--dealer-accent);
  box-shadow: 0 0 0 3px rgba(var(--dealer-accent-rgb), .16);
}
.dd-field-full { grid-column: 1 / -1; }
.dd-field-when { grid-column: 1 / -1; }
.dd-veh-body-picker {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px;
}
.dd-veh-body-picker.is-compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dd-veh-body-option {
  min-width: 0; display: grid; justify-items: center; gap: 4px;
  padding: 8px 6px; border-radius: 10px;
  border: 1px solid var(--dd-line); background: rgba(255,255,255,.035);
  color: var(--dd-ink-2); cursor: pointer;
  font: 750 10.5px var(--dd-font-body);
  transition: border-color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease);
}
.dd-veh-body-option:hover { color: var(--dd-ink-0); border-color: rgba(var(--dealer-accent-rgb), .45); }
.dd-veh-body-option.is-on {
  color: #fff; border-color: rgba(var(--dealer-accent-rgb), .75);
  background: linear-gradient(135deg, rgba(var(--dealer-accent-rgb), .24), rgba(var(--dealer-accent-rgb), .1));
}
.dd-veh-body-option:active { transform: scale(.98); }
.dd-veh-body-ico { width: 34px; height: 22px; display: grid; place-items: center; color: currentColor; }
.dd-veh-body-ico svg { width: 34px; height: 22px; display: block; }
.dd-create-booking-grid {
  display: grid; grid-template-columns: minmax(290px, 1.2fr) minmax(220px, .8fr); gap: 16px;
}
[data-create-booking-picker] .dd-sched-picked { display: block; margin-top: 10px; }
.dd-create-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
@media (max-width: 760px) {
  .dd-create-booking-grid { grid-template-columns: 1fr; }
  .dd-veh-body-picker,
  .dd-veh-body-picker.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .dd-create-grid { grid-template-columns: 1fr; }
  .dd-veh-body-picker,
  .dd-veh-body-picker.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Hours & Days polish + themed native dropdown option lists
   ============================================================ */
/* Theme the native <option> popup so opened dropdowns aren't white. */
.dd-select option,
select.av-time option,
.dd-input option {
  background-color: #15181f;
  color: #e8eaf0;
}
/* Bigger, clearer controls inside the availability editor */
.dd-availability-card .dd-select,
.dd-availability-card select.av-time {
  height: 34px;
  font-size: 12.5px;
  padding: 0 26px 0 11px;
  border-radius: 9px;
  background-color: rgba(255,255,255,.04);
}
.dd-availability-card .av-time { min-width: 104px; }
.av-day {
  grid-template-columns: 46px 96px 1fr auto;
  padding: 11px 14px;
  border-radius: 12px;
}
.av-day-times { gap: 10px; }
.av-dash { opacity: .6; }
.av-rules { gap: 14px 16px; margin-top: 4px; }
.av-rule span { margin-bottom: 2px; }
.av-block { margin-bottom: 22px; }
.av-block + .av-block { border-top: 1px solid var(--dd-line); padding-top: 18px; }
.av-editor { padding-right: 20px; }
@media (max-width: 880px) { .av-editor { padding-right: 0; } }
/* Closed-dates date input matches the dark theme */
.av-blackout-add { display: flex; gap: 10px; align-items: center; }
.av-date.dd-input, input.av-date {
  height: 34px; padding: 0 11px; border-radius: 9px;
  border: 1px solid var(--dd-line-2);
  background: rgba(255,255,255,.04); color: var(--dd-ink-0);
  font: 600 12.5px var(--dd-font-body);
  color-scheme: dark;
}
.av-date::-webkit-calendar-picker-indicator { filter: invert(.85); cursor: pointer; }
/* Preview slot chips a touch tidier */
.av-slot-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============================================================
   Quote / Booking management popup
   ============================================================ */
.dd-manage-modal { width: min(560px, 100%); }
.dd-manage-modal .dd-create-modal-head { align-items: flex-start; }
.dd-mng-head-main { display: flex; gap: 12px; align-items: center; min-width: 0; }
.dd-mng-head-main .dd-qb-avatar-svc { width: 38px; height: 38px; flex: 0 0 38px; }
.dd-mng-head-main h2 { margin: 0; font: 800 17px var(--dd-font-display); color: var(--dd-ink-0); }
.dd-mng-sub { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font: 600 12px var(--dd-font-body); color: var(--dd-ink-2); }
.dd-mng-sub .dd-qb-bodyicon { width: 15px; height: 15px; }
.dd-manage-scroll { padding: 16px 20px 20px; max-height: min(70vh, 620px); overflow-y: auto; }
.dd-mng-statusline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dd-mng-badge { padding: 3px 11px; border-radius: 999px; font: 800 11px var(--dd-font-body); letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.07); color: var(--dd-ink-1); }
.dd-mng-badge.is-finished { background: rgba(var(--dd-ok-rgb), .16); color: var(--dd-ok); }
.dd-mng-badge.is-accepted { background: rgba(var(--dealer-accent-rgb), .16); color: var(--dealer-accent); }
.dd-mng-badge.is-cancelled { background: rgba(var(--dd-danger-rgb, 235,87,87), .16); color: #ff8a8a; }
.dd-mng-amount { font: 800 18px var(--dd-font-display); color: var(--dd-ink-0); font-variant-numeric: tabular-nums; }
.dd-manage-scroll .dd-qb-steps-5 { margin: 4px 0 18px; }
.dd-qb-steps-5.is-cancelled::after { background: rgba(255,255,255,.12); }
.dd-mng-info { display: grid; gap: 1px; background: var(--dd-line); border: 1px solid var(--dd-line); border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
.dd-mng-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 14px; background: var(--dd-bg-2, #14171e); }
.dd-mng-row > span { font: 700 10.5px var(--dd-font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--dd-ink-2); align-self: center; }
.dd-mng-row > b { font: 600 13px var(--dd-font-body); color: var(--dd-ink-0); word-break: break-word; }
.dd-mng-row-list > b { line-height: 1.5; }
.dd-mng-section { margin-bottom: 16px; }
.dd-mng-section h4 { margin: 0 0 8px; font: 700 11px var(--dd-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--dd-ink-2); }
.dd-mng-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-mng-close-row { display: flex; gap: 10px; }
.dd-btn-ok { border-color: rgba(var(--dd-ok-rgb), .5); color: var(--dd-ok); }
.dd-btn-ok:hover { background: rgba(var(--dd-ok-rgb), .12); }
.dd-btn-danger { border-color: rgba(255,138,138,.45); color: #ff8a8a; }
.dd-btn-danger:hover { background: rgba(255,138,138,.12); }
.dd-mng-terminal { font: 600 13px var(--dd-font-body); color: var(--dd-ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dd-mng-terminal-txt { flex: 1; min-width: 0; }

/* ---- Rebuilt customer / quote management popup ----------------------- */
/* Larger, friendlier modal: vehicle silhouette in the header, clickable
   contact rows, action buttons with leading icons and explicit close button.
   The body type icon comes from BODY_ICON_PATHS (same set the tint
   simulator uses), so the silhouette matches whichever body the customer
   picked when they built their quote. */
.dd-manage-modal { width: min(680px, 100%); }
.dd-mng-head { padding: 18px 22px; gap: 12px; align-items: center; }
.dd-mng-head-main { gap: 14px; flex: 1; min-width: 0; }
.dd-mng-head-text { min-width: 0; flex: 1; }
.dd-mng-head-veh {
  width: 76px; height: 76px; flex: 0 0 76px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(155deg, rgba(var(--dealer-accent-rgb), .22), rgba(var(--dealer-accent-rgb), .08));
  border: 1px solid rgba(var(--dealer-accent-rgb), .35);
  color: var(--dealer-accent);
  overflow: hidden;
}
/* Simulator silhouettes have huge intrinsic viewBoxes; constrain to the tile. */
.dd-mng-head-veh svg { width: 56px; height: 56px; max-width: 100%; max-height: 100%; }

/* Vehicle hero card — sits at the top of the Customer section. Frames the
   simulator silhouette as the centerpiece so the dealer immediately sees
   what kind of vehicle the customer is bringing in. */
.dd-mng-veh-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  padding: 14px;
  margin-bottom: 10px;
  border-radius: 14px;
  background:
    linear-gradient(155deg, rgba(var(--dealer-accent-rgb), .10), rgba(255,255,255,.02) 60%),
    var(--dd-bg-2, #14171e);
  border: 1px solid var(--dd-line);
  align-items: center;
}
.dd-mng-veh-card-ico {
  width: 80px; height: 64px;
  display: grid; place-items: center;
  color: var(--dealer-accent);
}
.dd-mng-veh-card-ico svg {
  width: 76px; height: 60px;
  max-width: 100%; max-height: 100%;
}
.dd-mng-veh-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dd-mng-veh-card-body strong {
  font: 700 16px var(--dd-font-body);
  color: var(--dd-ink-0);
  letter-spacing: -.005em;
  word-break: break-word;
}
.dd-mng-veh-card-sub {
  font: 600 12px var(--dd-font-body);
  color: var(--dd-ink-2);
}
.dd-mng-head-text h2 {
  margin: 0; font: 800 18px var(--dd-font-display);
  color: var(--dd-ink-0); letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd-mng-sub { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dd-mng-svc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 6px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--dd-line);
  font: 700 11px var(--dd-font-body); color: var(--dd-ink-1);
  letter-spacing: .02em;
}
.dd-mng-svc-chip-ico { width: 14px; height: 14px; display: grid; place-items: center; color: var(--dealer-accent); }
.dd-mng-svc-chip-ico svg { width: 14px; height: 14px; }
.dd-mng-sub-veh { font: 600 12px var(--dd-font-body); color: var(--dd-ink-2); }

/* Close button — make sure the click target is the button itself, not the
   inner svg / path. Without pointer-events:none on children, event.target
   ends up as <path> and stays inside the button, which is fine for
   closest() — but locking it to the button removes any ambiguity and also
   makes the hit area feel solid. */
.dd-mng-close {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--dd-line);
  color: var(--dd-ink-1);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.dd-mng-close:hover { background: rgba(255,255,255,.1); color: var(--dd-ink-0); border-color: rgba(var(--dealer-accent-rgb), .55); }
.dd-mng-close:active { transform: scale(.94); }
.dd-mng-close svg { width: 18px; height: 18px; pointer-events: none; }
.dd-mng-close svg * { pointer-events: none; }

/* Customer info — icon + label + value rows */
.dd-mng-section-customer { margin-bottom: 18px; }
.dd-mng-irows {
  display: grid; gap: 1px;
  background: var(--dd-line);
  border: 1px solid var(--dd-line); border-radius: 14px; overflow: hidden;
}
.dd-mng-irow {
  display: grid; grid-template-columns: 36px 1fr;
  gap: 12px; padding: 12px 14px;
  background: var(--dd-bg-2, #14171e);
  align-items: center;
}
.dd-mng-irow-stack { align-items: flex-start; }
.dd-mng-irow-ico {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--dd-line);
  color: var(--dd-ink-1);
}
.dd-mng-irow-ico svg { width: 16px; height: 16px; }
.dd-mng-irow-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dd-mng-irow-label {
  font: 700 10px var(--dd-font-body);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--dd-ink-2);
}
.dd-mng-irow-val,
.dd-mng-irow-link {
  font: 600 13.5px var(--dd-font-body);
  color: var(--dd-ink-0);
  word-break: break-word;
}
.dd-mng-irow-link {
  color: var(--dealer-accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(var(--dealer-accent-rgb), .35);
  display: inline-block; align-self: start;
  transition: color .15s ease, border-color .15s ease;
}
.dd-mng-irow-link:hover { color: var(--dd-ink-0); border-bottom-color: rgba(var(--dealer-accent-rgb), .75); }

.dd-mng-addons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.dd-mng-addon {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid var(--dd-line);
  font: 600 11.5px var(--dd-font-body); color: var(--dd-ink-1);
}
.dd-mng-addon-price { font-weight: 800; color: var(--dd-ink-0); font-variant-numeric: tabular-nums; }

/* New action buttons — bigger, premium icon-chip + label tiles on a 2-col grid */
.dd-mng-actions {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dd-mng-act {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--dd-line);
  border-radius: 14px;
  background: var(--dd-surface);
  color: var(--dd-ink-0);
  font: 700 13.5px var(--dd-font-body);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
  text-align: left; min-width: 0; min-height: 56px;
}
.dd-mng-act:hover {
  background: var(--dd-surface-strong);
  color: var(--dd-ink-0);
  border-color: rgba(var(--dealer-accent-rgb), .5);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -14px rgba(0,0,0,.7);
}
.dd-mng-act:active { transform: translateY(0); }
.dd-mng-act[disabled] { opacity: .4; cursor: not-allowed; }
.dd-mng-act[disabled]:hover { background: var(--dd-surface); color: var(--dd-ink-0); border-color: var(--dd-line); transform: none; box-shadow: none; }
.dd-mng-act-ico {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  color: var(--dealer-accent);
  background: var(--dealer-accent-soft, rgba(var(--dealer-accent-rgb), .12));
}
.dd-mng-act-ico svg { width: 20px; height: 20px; }
.dd-mng-act-lbl { white-space: normal; line-height: 1.25; }

.dd-mng-act.is-primary {
  background: linear-gradient(135deg, var(--dealer-accent), var(--dealer-accent-deep));
  color: #fff;
  border-color: transparent;
  grid-column: 1 / -1;
  justify-content: center;
  min-height: 60px;
  font-size: 14.5px;
  box-shadow: 0 10px 30px -12px rgba(var(--dealer-accent-rgb), .7);
}
.dd-mng-act.is-primary .dd-mng-act-ico { background: rgba(255,255,255,.16); color: #fff; }
.dd-mng-act.is-primary:hover { filter: brightness(1.08); color: #fff; }

.dd-mng-act.is-ok {
  background: rgba(var(--dd-ok-rgb), .1);
  border-color: rgba(var(--dd-ok-rgb), .45);
  color: var(--dd-ok);
}
.dd-mng-act.is-ok .dd-mng-act-ico { color: var(--dd-ok); background: rgba(var(--dd-ok-rgb), .16); }
.dd-mng-act.is-ok:hover { background: rgba(var(--dd-ok-rgb), .16); color: var(--dd-ok); border-color: rgba(var(--dd-ok-rgb), .75); }

.dd-mng-act.is-danger {
  background: rgba(255,138,138,.07);
  border-color: rgba(255,138,138,.4);
  color: #ff8a8a;
}
.dd-mng-act.is-danger .dd-mng-act-ico { color: #ff8a8a; background: rgba(255,138,138,.14); }
.dd-mng-act.is-danger:hover { background: rgba(255,138,138,.14); color: #ff8a8a; border-color: rgba(255,138,138,.7); }

.dd-mng-close-row {
  display: grid; gap: 10px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 560px) {
  .dd-mng-head { padding: 16px 18px; }
  .dd-mng-head-veh { width: 64px; height: 64px; flex-basis: 64px; border-radius: 14px; }
  .dd-mng-head-veh svg { width: 46px; height: 46px; }
  .dd-mng-head-text h2 { font-size: 16px; }
  .dd-mng-veh-card { grid-template-columns: 72px 1fr; gap: 12px; padding: 12px; }
  .dd-mng-veh-card-ico { width: 64px; height: 52px; }
  .dd-mng-veh-card-ico svg { width: 60px; height: 50px; }
  .dd-mng-actions { grid-template-columns: 1fr; }
  .dd-mng-close-row { grid-template-columns: 1fr; }
}

/* cost chip in the Quote & Booking activity rows */
.dd-qb-amount {
  font: 700 10px var(--dd-font-body);
  color: var(--dd-ink-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ============================================================
   Estimate builder ("Build the estimate") visual refresh
   Brings the quote builder modal in line with the newer
   create/manage popups: softer radius, cleaner header + steps,
   modern primary button. Visual only — markup/logic unchanged.
   ============================================================ */
.invoice-dialog {
  width: min(760px, calc(100vw - 28px));
  border-radius: 18px;
  border: 1px solid var(--dd-line);
  background: var(--dd-bg-2, #14171e);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.7);
  padding: 0;
}
.invoice-dialog > header {
  position: sticky; top: 0; z-index: 3;
  margin: 0; padding: 16px 20px;
  border-bottom: 1px solid var(--dd-line);
  background: var(--dd-bg-2, #14171e);
}
.invoice-dialog h2 { font-weight: 800; font-size: 18px; }
.invoice-dialog header span { color: var(--dealer-accent); }
.invoice-dialog > header button {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--dd-line); border-radius: 999px;
  background: rgba(255,255,255,.04); color: var(--dd-ink-2);
  font-size: 16px;
}
.invoice-dialog > header button:hover { color: var(--dd-ink-0); border-color: rgba(var(--dealer-accent-rgb), .5); }
/* Step pills */
.invoice-steps {
  margin: 14px 20px 0; padding: 8px 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--dd-line);
  border-radius: 12px; gap: 8px;
}
.invoice-steps span {
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.04);
}
.invoice-steps span.is-active {
  background: var(--dd-sys-grad, rgba(var(--dealer-accent-rgb), .18));
  color: #fff;
}
/* Body + footer padding now that the dialog padding is zero */
.invoice-step-panel { padding: 16px 20px; }
.invoice-modal-actions {
  position: sticky; bottom: 0;
  margin: 0; padding: 14px 20px;
  border-top: 1px solid var(--dd-line);
  background: var(--dd-bg-2, #14171e);
}
.invoice-modal-actions .is-primary,
.invoice-modal-actions .dd-btn-primary {
  border-radius: 10px;
}
/* The qb builder columns sit edge-to-edge inside the padded panel now */
.qb-context { border-radius: 14px; }

/* ============================================================
   Quote builder add-ons: two toggles (Included / Suggest)
   ============================================================ */
.qb-addon { display: flex; flex-direction: column; gap: 10px; }
.qb-addon-info { display: flex; align-items: center; gap: 10px; }
.qb-addon-info .qb-addon-body { flex: 1 1 auto; min-width: 0; }
.qb-addon-info .qb-addon-price { flex: 0 0 auto; }
.qb-addon.is-suggested { border-color: color-mix(in srgb, var(--dealer-accent) 45%, var(--dd-line)); }
.qb-addon.is-suggested::after {
  content: 'Suggested'; position: absolute; top: 8px; right: 10px;
  font: 800 8.5px var(--dd-font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--dealer-accent);
}
.qb-addon { position: relative; }
.qb-addon-toggles { display: flex; gap: 14px; padding-top: 2px; border-top: 1px dashed var(--dd-line); padding-top: 10px; }
.qb-mini-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.qb-mini-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.qb-mini-track {
  position: relative; width: 30px; height: 17px; border-radius: 999px;
  background: rgba(255,255,255,.12); transition: background .16s ease; flex: 0 0 auto;
}
.qb-mini-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: #fff; transition: transform .16s ease;
}
.qb-mini-toggle input:checked + .qb-mini-track { background: var(--dealer-accent); }
.qb-mini-toggle-sug input:checked + .qb-mini-track { background: color-mix(in srgb, var(--dealer-accent) 70%, #888); }
.qb-mini-toggle input:checked + .qb-mini-track::after { transform: translateX(13px); }
.qb-mini-label { font: 700 11px var(--dd-font-body); color: var(--dd-ink-1); }
.qb-mini-toggle input:focus-visible + .qb-mini-track { box-shadow: 0 0 0 3px rgba(var(--dealer-accent-rgb), .3); }

/* ---- Scheduling section (quote builder) -----------------------------------
   Lets the dealer choose who sets the install date: the customer (default),
   the dealer (lock a slot now), or "later". All accent surfaces read from
   --dealer-accent so the section follows each shop's brand color. */
.qb-sched-section { }
.qb-sched-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
@media (max-width: 620px) { .qb-sched-tabs { grid-template-columns: 1fr; } }
.qb-sched-tab {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--dd-line); background: var(--dd-surface-2, rgba(255,255,255,.02));
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.qb-sched-tab:hover { border-color: var(--dealer-accent-line); }
.qb-sched-tab.is-on {
  border-color: var(--dealer-accent);
  background: rgba(var(--dealer-accent-rgb), .10);
  box-shadow: inset 0 0 0 1px var(--dealer-accent);
}
.qb-sched-tab-title { font: 700 13px var(--dd-font-display); color: var(--dd-ink-0); }
.qb-sched-tab.is-on .qb-sched-tab-title { color: var(--dealer-accent-2, var(--dealer-accent)); }
.qb-sched-tab-sub { font: 500 11px var(--dd-font-body); color: var(--dd-ink-2); }
.qb-sched-note, .qb-sched-empty {
  font: 500 12.5px var(--dd-font-body); color: var(--dd-ink-2); line-height: 1.5;
  padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--dd-line);
  background: rgba(var(--dealer-accent-rgb), .04);
}
.qb-sched-note b, .qb-sched-empty b { color: var(--dd-ink-1); }
.qb-sched-picker { display: flex; flex-direction: column; gap: 12px; }
.qb-sched-days, .qb-sched-times { display: flex; flex-wrap: wrap; gap: 7px; }
.qb-sched-day, .qb-sched-time {
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  font: 600 12px var(--dd-font-body); color: var(--dd-ink-1);
  border: 1px solid var(--dd-line); background: transparent;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.qb-sched-day:hover, .qb-sched-time:hover { border-color: var(--dealer-accent-line); color: var(--dd-ink-0); }
.qb-sched-day.is-on, .qb-sched-time.is-on {
  background: var(--dealer-accent); border-color: transparent; color: #fff;
  box-shadow: 0 4px 10px -4px rgba(var(--dealer-accent-rgb), .6);
}
.qb-sched-none { font: 500 12px var(--dd-font-body); color: var(--dd-ink-3, var(--dd-ink-2)); }
.qb-sched-chosen {
  display: flex; align-items: center; gap: 7px; margin-top: 2px;
  font: 600 12.5px var(--dd-font-body); color: var(--dd-ink-1);
}
.qb-sched-chosen svg { width: 15px; height: 15px; color: var(--dealer-accent); flex: 0 0 auto; }
.qb-sched-chosen b { color: var(--dealer-accent-2, var(--dealer-accent)); }

/* =============================================================================
   UI AUDIT POLISH — patch 12
   ----------------------------------------------------------------------------
   This block fixes a small set of high-impact design inconsistencies found
   during a full UI audit of the dealer dashboard. It sits at the bottom of
   the stylesheet so it overrides earlier hand-tweaked values without having
   to hunt them down. Anything that should become the long-term default goes
   in here; the underlying rules can be cleaned up in a later refactor pass.
============================================================================= */

/* ---- Typography: collapse near-duplicate font sizes -----------------------
   Original CSS used 19 distinct font sizes (8.5, 9, 9.5, 10, 10.5, 11, 11.5,
   12, 12.5, 13...). The visual difference between e.g. 9.5px and 10px is
   invisible at this scale — it just makes the design feel imprecise. Round
   everything below 16px to the nearest "step" on a tightened 6-step scale:
   10 / 11 / 12 / 13 / 14 / 16. */
.dd-eyebrow,
.dd-topbar-eyebrow,
.dd-nav-group,
.dd-kpi-label,
.dd-pipeline-column-title,
.dd-status-label,
.dd-status-sync,
.dd-status-sep,
.dd-card-sub {
  font-size: 11px; /* was 8.5–10.5 in various places */
  letter-spacing: .12em;
}
.dd-card-sub { letter-spacing: -.005em; font-size: 12px; }

/* Contrast bump: --dd-ink-3 at 40% white-on-black is below WCAG AA for body
   text. Reserve it for hairlines / dividers / decoration only. Use ink-2 for
   any text the dealer needs to read. */
:root {
  --dd-ink-2: rgba(255,255,255,.66);   /* was .58 */
  --dd-ink-3: rgba(255,255,255,.46);   /* was .40 */
}
.dd-card-sub,
.dd-eyebrow,
.dd-status-sync,
.dd-status-sep,
.dd-topbar-eyebrow,
.dd-nav-group {
  color: var(--dd-ink-2);
}

/* ---- Status dot: stop the constant pulse when nothing's wrong ---------
   The realtime status dot was pulsing every 2.2s forever, which read as
   "something needs attention". A solid dot says "everything's fine"; the
   pulse should only fire during connecting / reconnecting. */
.dd-status-dot { animation: none !important; }
.dd-status[data-realtime-state="connecting"] .dd-status-dot,
.dd-status[data-realtime-state="reconnecting"] .dd-status-dot {
  animation: dd-pulse 2.2s var(--dd-ease, ease) infinite !important;
}

/* ---- KPI icons: kill the per-icon shimmer ------------------------------
   Five infinite shimmer keyframes running at once (one per KPI) was the
   main FPS sink on dashboard load. The cards already feel premium without
   the wandering highlight. */
.dd-kpi-ico::after { animation: none !important; opacity: 0 !important; }

/* ---- KPI grid breakpoints ---------------------------------------------
   The 5-column grid was cramping at ~1100–1280px (Visits + Revenue cards
   started clipping their numbers). Add an intermediate 3-up step. */
@media (max-width: 1380px) {
  .dd-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dd-kpi:nth-child(4),
  .dd-kpi:nth-child(5) { grid-column: span 1; }
  .dd-kpi:nth-child(5) { grid-column: 1 / -1; max-width: 100%; }
}
@media (max-width: 1100px) {
  .dd-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Cards: standardize radius across the dashboard --------------------
   .dd-card was 16, .dd-kpi was 14, modals 18, lead rows 12, etc. — drift
   the eye picks up as visual sloppiness. Anchor everything that isn't a
   pill or a circle on three values from the token set: 8 (chip), 12
   (control), 16 (card). */
.dd-card, .dealer-card { border-radius: 16px; }
.dd-kpi { border-radius: 16px; }
.dd-pcard, .dd-lead-row, .dd-qb-card, .dd-activity-item { border-radius: 12px; }

/* ---- Buttons: visible focus ring (a11y) ---------------------------------
   Most buttons relied on default UA focus styling which Chrome hides for
   mouse users — keyboard users had nothing. Add an accent-tinted ring on
   :focus-visible everywhere. */
.dd-btn:focus-visible,
.dd-icon-btn:focus-visible,
.dd-nav-link:focus-visible,
.dd-nav-item:focus-visible,
.dd-sidebar-toggle:focus-visible,
[data-action]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--dd-bg-0), 0 0 0 4px rgba(var(--dealer-accent-rgb), .58);
}

/* ---- Calendar / chat: tighten section header spacing -------------------
   The big `margin-bottom: var(--dd-s-3)` on .dd-card-head over-airs short
   cards (mini calendar week, chat inbox). Tighten when the card is dense. */
.dd-mini-cal .dd-card-head,
.dd-chat-card .dd-card-head { margin-bottom: 10px; }

/* ---- Sticky topbar: better elevation cue when scrolled -----------------
   On scroll the topbar lost separation from content. Soft shadow keeps the
   sticky region visually pinned. */
.dd-topbar {
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 12px 22px -22px rgba(0,0,0,.7);
}

/* ---- Global reduced motion --------------------------------------------
   The marketing/wizard side already respects prefers-reduced-motion; the
   dealer dashboard didn't. Cut every infinite + boot-fade animation here
   so users who set the OS preference get a calm, static UI. */
@media (prefers-reduced-motion: reduce) {
  .dd-kpi, .dd-card, .dealer-card,
  .dd-pcard, .dd-activity-item, .dd-lead-row,
  .dd-row-main .dd-card, .dd-row-bottom .dd-card,
  .dd-app[data-view-entering] .dd-content > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .dd-status-dot,
  .dd-unread-pill.is-live,
  .dd-kpi-ico::after,
  .dd-icon-btn-badge,
  [class*="-pulse"],
  [class*="-shimmer"],
  [class*="-breathe"] {
    animation: none !important;
  }
}

/* ---- Mobile: tighter KPI numbers + spark headroom ----------------------
   On phones the KPI value (e.g. "$6.3K") sometimes ran right up against
   the % change pill. Add breathing room. */
@media (max-width: 600px) {
  .dd-kpi { gap: 8px; min-height: 88px; padding: 12px 14px; }
  .dd-kpi-value { line-height: 1.05; }
  .dd-kpi-delta { white-space: nowrap; }
  .dd-kpi-spark { margin-top: 4px; }
  /* Make sure single-line section titles never get truncated awkwardly */
  .dd-card-head h2 { font-size: 15px; }
  .dd-eyebrow { font-size: 10.5px; letter-spacing: .1em; }
}

/* ---- Empty states: clearer iconography ---------------------------------
   The "no activity yet" placeholder text was muted-on-muted with no icon,
   so it read as "this card is broken". Bump contrast and center the line. */
.dd-pipeline-empty,
.dd-activity-empty,
.dd-qb-empty {
  color: var(--dd-ink-2);
  font-size: 12.5px;
  padding: 18px 10px;
  text-align: center;
}

/* =============================================================================
   HELP CENTER — patch 13
   Searchable FAQ + "Ask support" drawer with a chat thread that posts back
   to SupportStore (read by the admin inbox at dashboard.html).
============================================================================= */

.dd-help-card { padding: 18px 20px; }

.dd-help-search-wrap {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin: 6px 0 18px;
  border: 1px solid var(--dd-line);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  transition: border-color var(--dd-t-1) var(--dd-ease), background var(--dd-t-1) var(--dd-ease);
}
.dd-help-search-wrap:focus-within {
  border-color: rgba(var(--dealer-accent-rgb), .5);
  background: rgba(var(--dealer-accent-rgb), .04);
}
.dd-help-search-wrap svg { width: 16px; height: 16px; color: var(--dd-ink-2); flex: 0 0 auto; }
.dd-help-search {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--dd-ink-0); font: 500 14px var(--dd-font-body);
}
.dd-help-search::placeholder { color: var(--dd-ink-3); }
.dd-help-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* FAQ groups */
.dd-help-group {
  background: var(--dd-bg-2);
  border: 1px solid var(--dd-line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.dd-help-group-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.dd-help-group-ic {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 9px;
  background: rgba(var(--dealer-accent-rgb), .14);
  border: 1px solid rgba(var(--dealer-accent-rgb), .28);
  color: var(--dealer-accent);
  display: grid; place-items: center;
}
.dd-help-group-ic svg { width: 16px; height: 16px; }
.dd-help-group-head h3 {
  margin: 0; flex: 1; min-width: 0;
  font-family: var(--dd-font-display);
  font-size: 14.5px; font-weight: 600; color: var(--dd-ink-0); letter-spacing: -.01em;
}
.dd-help-group-count {
  font: 700 11px var(--dd-font-body);
  color: var(--dd-ink-2);
  background: rgba(255,255,255,.05);
  padding: 2px 8px; border-radius: 999px;
}

.dd-help-group-items {
  display: flex; flex-direction: column; gap: 4px;
}
.dd-help-item {
  border-radius: 10px;
  background: rgba(255,255,255,.018);
  overflow: hidden;
  transition: background var(--dd-t-1) var(--dd-ease);
}
.dd-help-item[open] { background: rgba(var(--dealer-accent-rgb), .05); }
.dd-help-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  font-size: 13px; font-weight: 600; color: var(--dd-ink-1);
  cursor: pointer;
  list-style: none;
}
.dd-help-item summary::-webkit-details-marker { display: none; }
.dd-help-item summary:hover { color: var(--dd-ink-0); }
.dd-help-chev {
  flex: 0 0 14px; color: var(--dd-ink-3);
  transition: transform var(--dd-t-1) var(--dd-ease), color var(--dd-t-1) var(--dd-ease);
}
.dd-help-item[open] .dd-help-chev { transform: rotate(180deg); color: var(--dealer-accent); }
.dd-help-answer {
  padding: 0 14px 12px 14px;
  font-size: 13px; line-height: 1.55; color: var(--dd-ink-2);
}

.dd-help-empty {
  text-align: center; padding: 36px 18px;
  color: var(--dd-ink-2);
}
.dd-help-empty svg { color: var(--dd-ink-3); margin-bottom: 8px; }
.dd-help-empty p { margin: 4px 0; font-size: 13.5px; }
.dd-help-empty-sub { color: var(--dd-ink-3); font-size: 12.5px; }

/* Existing threads */
.dd-help-threads {
  background: var(--dd-bg-2);
  border: 1px solid var(--dd-line);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
}
.dd-help-threads-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.dd-help-threads-head h3 {
  margin: 0; font-family: var(--dd-font-display);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
}
.dd-help-threads-head p {
  margin: 0; font: 600 11px var(--dd-font-body);
  color: var(--dd-ink-2); letter-spacing: .08em; text-transform: uppercase;
}
.dd-help-threads-list { display: flex; flex-direction: column; gap: 6px; }
.dd-help-thread {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.018);
  border: 1px solid transparent;
  text-align: left; color: inherit; cursor: pointer;
  transition: background var(--dd-t-1) var(--dd-ease), border-color var(--dd-t-1) var(--dd-ease);
}
.dd-help-thread:hover {
  background: rgba(var(--dealer-accent-rgb), .07);
  border-color: rgba(var(--dealer-accent-rgb), .25);
}
.dd-help-thread-icon {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(var(--dealer-accent-rgb), .14);
  color: var(--dealer-accent);
  display: grid; place-items: center;
}
.dd-help-thread-icon svg { width: 16px; height: 16px; }
.dd-help-thread-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dd-help-thread-body strong {
  font-size: 13px; font-weight: 600; color: var(--dd-ink-0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd-help-thread-body small {
  font-size: 11.5px; color: var(--dd-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd-help-thread-meta {
  font-size: 11px; color: var(--dd-ink-3);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  white-space: nowrap;
}
.dd-help-thread-unread {
  background: var(--dealer-accent); color: #fff;
  font: 800 9.5px var(--dd-font-body);
  letter-spacing: .06em; padding: 2px 7px; border-radius: 999px;
}

/* ============================================================================
   Help desk — two-pane layout: FAQ + threads (left), big live chat (right)
   ============================================================================ */
.dd-help-desk { padding: 0; overflow: hidden; }
.dd-help-desk-grid {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  min-height: 560px;
  height: calc(100vh - 220px);
  max-height: 760px;
}
/* Two distinct pages: FAQ-only and Support-chat-only collapse to a single
   full-width pane and hide the other. "both" keeps the combined desk view. */
.dd-help-desk-grid[data-help-mode="faq"] { grid-template-columns: minmax(0, 1fr); }
.dd-help-desk-grid[data-help-mode="faq"] .dd-help-pane-chat { display: none; }
.dd-help-desk-grid[data-help-mode="faq"] .dd-help-pane-left { border-right: 0; }
.dd-help-desk-grid[data-help-mode="support"] { grid-template-columns: minmax(0, 1fr); }
.dd-help-desk-grid[data-help-mode="support"] .dd-help-pane-left { display: none; }
@media (max-width: 900px) {
  .dd-help-desk-grid { grid-template-columns: 1fr; height: auto; max-height: none; }
}
.dd-help-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.dd-help-pane-left {
  border-right: 1px solid var(--dd-line);
  padding: 20px;
  overflow-y: auto;
}
@media (max-width: 900px) { .dd-help-pane-left { border-right: none; border-bottom: 1px solid var(--dd-line); max-height: 420px; } }
.dd-help-pane-head { margin-bottom: 14px; }
.dd-help-pane-head h2 { margin: 2px 0 0; font: 800 19px var(--dd-font-display); letter-spacing: -.01em; color: var(--dd-ink-0); }

/* Right chat pane */
.dd-help-pane-chat { background: linear-gradient(180deg, var(--dd-bg-1), var(--dd-bg-0)); }
.dd-help-chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--dd-line);
  flex: none;
}
.dd-help-chat-avatar {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--dealer-accent-deep), var(--dealer-accent));
}
.dd-help-chat-avatar svg { width: 20px; height: 20px; }
.dd-help-chat-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.dd-help-chat-id strong { font: 700 14px var(--dd-font-body); color: var(--dd-ink-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-help-chat-id span { font: 500 12px var(--dd-font-body); color: var(--dd-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-help-chat-new {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--dd-line-2); background: var(--dd-bg-2); color: var(--dd-ink-1);
  font: 600 12.5px var(--dd-font-body); cursor: pointer;
  transition: background var(--dd-t-2) var(--dd-ease), border-color var(--dd-t-2) var(--dd-ease), color var(--dd-t-2) var(--dd-ease);
}
.dd-help-chat-new svg { width: 15px; height: 15px; }
.dd-help-chat-new:hover { background: var(--dealer-accent-soft); border-color: var(--dealer-accent-line); color: var(--dd-ink-0); }

.dd-help-chat-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 22px 22px 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.dd-help-chat-day {
  align-self: center; margin: 6px 0;
  font: 700 10px var(--dd-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--dd-ink-3);
}
.dd-help-chat-msg { display: flex; flex-direction: column; gap: 4px; max-width: 76%; }
.dd-help-chat-msg.is-dealer { align-self: flex-end; align-items: flex-end; }
.dd-help-chat-msg.is-admin { align-self: flex-start; align-items: flex-start; }
.dd-help-chat-bubble {
  padding: 11px 15px; border-radius: 16px;
  font: 500 13.5px/1.5 var(--dd-font-body); word-break: break-word; white-space: pre-wrap;
}
.dd-help-chat-msg.is-dealer .dd-help-chat-bubble {
  background: linear-gradient(135deg, var(--dealer-accent), var(--dealer-accent-deep));
  color: #fff; border-bottom-right-radius: 5px;
}
.dd-help-chat-msg.is-admin .dd-help-chat-bubble {
  background: var(--dd-bg-3); color: var(--dd-ink-0);
  border: 1px solid var(--dd-line); border-bottom-left-radius: 5px;
}
.dd-help-chat-meta { font: 500 10.5px var(--dd-font-body); color: var(--dd-ink-3); padding: 0 4px; }

.dd-help-chat-empty {
  margin: auto; text-align: center; max-width: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px;
}
.dd-help-chat-empty-ic {
  width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 6px;
  color: var(--dealer-accent); background: var(--dealer-accent-soft);
}
.dd-help-chat-empty-title { margin: 0; font: 700 16px var(--dd-font-display); color: var(--dd-ink-0); }
.dd-help-chat-empty-sub { margin: 0; font: 500 13px/1.55 var(--dd-font-body); color: var(--dd-ink-2); }

.dd-help-chat-composer {
  flex: none; display: flex; align-items: flex-end; gap: 10px;
  padding: 14px 16px; border-top: 1px solid var(--dd-line); background: var(--dd-bg-1);
}
.dd-help-chat-input {
  flex: 1; resize: none; min-height: 44px; max-height: 140px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--dd-bg-2); border: 1px solid var(--dd-line-2); color: var(--dd-ink-0);
  font: 500 13.5px/1.45 var(--dd-font-body);
  transition: border-color var(--dd-t-1) var(--dd-ease);
}
.dd-help-chat-input::placeholder { color: var(--dd-ink-3); }
.dd-help-chat-input:focus { outline: none; border-color: var(--dealer-accent-line); }
.dd-help-chat-send {
  flex: none; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; color: #fff; border: 0;
  background: linear-gradient(135deg, var(--dealer-accent), var(--dealer-accent-deep));
  transition: filter var(--dd-t-2) var(--dd-ease), transform var(--dd-t-1) var(--dd-ease);
}
.dd-help-chat-send svg { width: 19px; height: 19px; }
.dd-help-chat-send:hover { filter: brightness(1.08); }
.dd-help-chat-send:active { transform: scale(.94); }
.dd-help-thread.is-active { border-color: var(--dealer-accent-line); background: var(--dealer-accent-soft); }

/* Drawer (mobile-friendly modal) */
.dd-help-drawer-modal {
  position: fixed; inset: 0; z-index: 12000;
  display: grid; place-items: center; padding: 24px;
}
.dd-help-drawer-backdrop {
  position: absolute; inset: 0; background: rgba(4,5,8,.62); backdrop-filter: blur(6px);
  animation: dd-help-fade .22s ease both;
}
.dd-help-drawer {
  position: relative; z-index: 1;
  width: min(560px, 100%); max-height: min(720px, 92dvh);
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 80% at 85% -10%, rgba(var(--dealer-accent-rgb), .14), transparent 60%),
    var(--dd-bg-1);
  border: 1px solid var(--dd-line-strong, rgba(255,255,255,.16));
  border-radius: 18px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.65);
  animation: dd-help-in .28s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes dd-help-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dd-help-in { from { opacity: 0; transform: translate3d(0,14px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }

.dd-help-drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--dd-line);
}
.dd-help-drawer-head h2 {
  margin: 4px 0 0;
  font-family: var(--dd-font-display);
  font-size: 18px; font-weight: 700; letter-spacing: -.01em;
}
.dd-help-drawer-close {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.05); border: 1px solid var(--dd-line);
  color: var(--dd-ink-2); display: grid; place-items: center; cursor: pointer;
}
.dd-help-drawer-close:hover { background: rgba(255,255,255,.1); color: var(--dd-ink-0); }

.dd-help-drawer-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 14px 20px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 200px;
}
.dd-help-drawer-empty {
  text-align: center; padding: 40px 24px; color: var(--dd-ink-2);
}
.dd-help-drawer-empty svg { color: var(--dealer-accent); margin-bottom: 10px; }
.dd-help-drawer-empty p { margin: 4px 0; font-size: 13.5px; line-height: 1.5; }

/* Chat-style message bubbles */
.dd-help-msg {
  display: flex; flex-direction: column; gap: 4px;
  max-width: 86%;
}
.dd-help-msg.is-dealer { align-self: flex-end; align-items: flex-end; }
.dd-help-msg.is-admin  { align-self: flex-start; align-items: flex-start; }
.dd-help-msg-who {
  font: 600 10.5px var(--dd-font-body);
  color: var(--dd-ink-3); letter-spacing: .04em;
}
.dd-help-msg p {
  margin: 0;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13.5px; line-height: 1.45;
  white-space: pre-wrap; word-wrap: break-word;
}
.dd-help-msg.is-dealer p {
  background: var(--dealer-accent); color: #fff;
  border-bottom-right-radius: 4px;
}
.dd-help-msg.is-admin p {
  background: rgba(255,255,255,.05); color: var(--dd-ink-0);
  border: 1px solid var(--dd-line);
  border-bottom-left-radius: 4px;
}

.dd-help-drawer-foot {
  border-top: 1px solid var(--dd-line);
  padding: 12px 20px 16px;
  display: flex; gap: 10px; align-items: flex-end;
}
.dd-help-drawer-input {
  flex: 1; min-height: 56px; max-height: 140px;
  padding: 10px 12px;
  border: 1px solid var(--dd-line);
  border-radius: 11px;
  background: rgba(255,255,255,.02);
  color: var(--dd-ink-0);
  font: 500 14px var(--dd-font-body);
  resize: vertical;
}
.dd-help-drawer-input:focus {
  outline: 0;
  border-color: rgba(var(--dealer-accent-rgb), .5);
  background: rgba(var(--dealer-accent-rgb), .04);
}
.dd-help-drawer-send {
  flex: 0 0 auto;
  padding: 10px 18px;
  height: 56px;
}

/* Mobile */
@media (max-width: 600px) {
  .dd-help-drawer-modal { padding: 0; place-items: stretch; }
  .dd-help-drawer {
    width: 100%; max-height: 100dvh; height: 100dvh;
    border-radius: 0;
  }
  .dd-help-drawer-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .dd-help-thread { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; }
  .dd-help-group { padding: 12px 14px; }
  .dd-help-card { padding: 14px; }
}

/* =============================================================================
   Customers — redesigned grid (2026-05-27, Anton mockup)
   Full-width card rows with 6 columns: Customer / Vehicle & Package /
   Contact / Last Activity / Status stepper / Actions.
============================================================================= */
.dd-cust-grid {
  display: flex; flex-direction: column; gap: 10px;
}

/* 2026-05-27 — Anton: "поправь верстку сейчас уходит за край экрана".
   Reduced column minimums + tightened gap so the 6-col grid fits ~1280px
   content widths instead of needing 1380+. Also bumped the responsive
   collapse breakpoint to 1320px below so anything narrower stacks early.
   Grid is wrapped in min-width:0 to clip overflow inside the row. */
.dd-cust-grid { min-width: 0; }

/* Sticky-ish column-header strip (visual only — actual columns repeat per row). */
.dd-cust-headerrow {
  display: grid;
  grid-template-columns:
    minmax(150px, 1fr)   /* customer */
    minmax(220px, 1.3fr) /* vehicle */
    minmax(160px, 1fr)   /* contact */
    minmax(130px, .9fr)  /* activity */
    minmax(200px, 1.2fr) /* status stepper */
    minmax(118px, .6fr); /* actions */
  gap: 12px;
  padding: 6px 14px 4px;
  font: 700 10.5px/1 'Inter', sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.42);
  min-width: 0;
}
.dd-cust-headcol:last-child { text-align: right; }

.dd-cust-rows { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.dd-cust-row {
  display: grid;
  grid-template-columns:
    minmax(150px, 1fr)
    minmax(220px, 1.3fr)
    minmax(160px, 1fr)
    minmax(130px, .9fr)
    minmax(200px, 1.2fr)
    minmax(118px, .6fr);
  gap: 12px; align-items: center;
  padding: 14px 14px;
  background: rgba(255,255,255,.018);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  transition: border-color .15s ease, background .15s ease;
  min-width: 0;
}
.dd-cust-row:hover { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.03); }

/* --- Customer cell --- */
.dd-cust-cell-customer { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dd-cust-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  font: 700 13.5px 'Inter', sans-serif; letter-spacing: -.01em;
  color: #fff;
  background: linear-gradient(135deg, var(--cust, #4f7cff), color-mix(in srgb, var(--cust, #4f7cff) 55%, #161821));
  box-shadow: 0 2px 8px var(--cust-soft, rgba(0,0,0,.2));
}
.dd-cust-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dd-cust-name {
  font: 700 14px 'Inter', sans-serif; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd-cust-badge {
  display: inline-block; width: max-content;
  padding: 2px 8px; border-radius: 5px;
  font: 700 9.5px 'Inter', sans-serif; letter-spacing: .08em;
  text-transform: uppercase;
}
.dd-cust-badge-new      { background: rgba(46,207,115,.16); color: #4eda94; }
.dd-cust-badge-contact  { background: rgba(80,140,255,.16); color: #8eb1ff; }
.dd-cust-badge-sched    { background: rgba(217,167,42,.18); color: #f0c45e; }
.dd-cust-badge-done     { background: rgba(255,255,255,.08); color: rgba(255,255,255,.65); }

/* --- Vehicle & Package cell --- */
.dd-cust-cell-vehicle { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* 2026-05-27 — Anton: "иконку машины больше". Bumped from 84×52 → 116×72
   so the car silhouette reads at a glance, matching the visual weight of
   the customer avatar on the left. */
.dd-cust-veh-thumb {
  flex: none; width: 116px; height: 72px;
  display: grid; place-items: center;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.45));
}
.dd-cust-veh-img {
  width: 116px; height: 72px; display: block;
  object-fit: contain; object-position: center bottom;
  image-rendering: auto;
}
.dd-cust-veh-svg { width: 116px; height: 72px; display: grid; place-items: center; color: var(--cust, #4f7cff); }
.dd-cust-veh-svg svg { width: 100%; height: 100%; }
.dd-cust-veh-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dd-cust-veh-name {
  font: 700 14px 'Inter', sans-serif; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd-cust-veh-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.dd-cust-chip {
  padding: 2px 8px; border-radius: 999px;
  font: 600 10.5px 'Inter', sans-serif;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.06);
  white-space: nowrap;
}

/* --- Contact cell --- */
.dd-cust-cell-contact { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dd-cust-contact-row {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12.5px 'Inter', sans-serif; color: rgba(255,255,255,.78);
  min-width: 0;
}
.dd-cust-contact-row svg { width: 14px; height: 14px; flex: none; color: rgba(255,255,255,.42); }
.dd-cust-contact-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dd-cust-contact-row.is-empty { color: rgba(255,255,255,.38); }

/* --- Last Activity cell --- */
.dd-cust-cell-activity { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dd-cust-activity-when {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 12.5px 'Inter', sans-serif; color: #fff;
}
.dd-cust-activity-when svg { width: 14px; height: 14px; flex: none; color: rgba(255,255,255,.42); }
.dd-cust-activity-note {
  font: 500 11.5px 'Inter', sans-serif; color: rgba(255,255,255,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Status stepper cell --- */
.dd-cust-stepper {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 0; align-items: start;
}
.dd-cust-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative; min-width: 0;
}
/* Connecting line between dots (drawn from the RIGHT of each step except the last). */
.dd-cust-step:not(:last-child)::before {
  content: ''; position: absolute;
  top: 11px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 2px;
  background: rgba(255,255,255,.10);
  z-index: 0;
}
.dd-cust-step.is-done:not(:last-child)::before { background: var(--dealer-accent, #4f7cff); opacity: .55; }
.dd-cust-step-dot {
  position: relative; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 10px 'Inter', sans-serif; letter-spacing: 0;
  border: 2px solid rgba(255,255,255,.16);
  background: #0c0d11;
  color: rgba(255,255,255,.42);
}
.dd-cust-step.is-done .dd-cust-step-dot {
  border-color: var(--dealer-accent, #4f7cff);
  background: var(--dealer-accent, #4f7cff);
  color: #fff;
}
.dd-cust-step.is-done .dd-cust-step-dot svg { width: 12px; height: 12px; }
.dd-cust-step.is-current .dd-cust-step-dot {
  border-color: var(--dealer-accent, #4f7cff);
  background: #0c0d11;
  color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dealer-accent, #4f7cff) 22%, transparent);
}
.dd-cust-step-label {
  font: 600 10px 'Inter', sans-serif;
  color: rgba(255,255,255,.40);
  text-align: center; line-height: 1;
  white-space: nowrap;
}
.dd-cust-step.is-done .dd-cust-step-label,
.dd-cust-step.is-current .dd-cust-step-label { color: #fff; font-weight: 700; }

/* --- Actions cell --- */
.dd-cust-cell-actions {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end;
}
.dd-cust-pill {
  height: 30px; padding: 0 14px; border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
  font: 600 12px 'Inter', sans-serif;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dd-cust-pill:hover { background: rgba(255,255,255,.10); color: #fff; }
.dd-cust-pill-new     { background: rgba(46,207,115,.12); color: #4eda94; border-color: rgba(46,207,115,.28); }
.dd-cust-pill-new:hover { background: rgba(46,207,115,.20); color: #4eda94; }
.dd-cust-pill-contact { background: rgba(80,140,255,.10); color: #8eb1ff; border-color: rgba(80,140,255,.24); }
.dd-cust-pill-contact:hover { background: rgba(80,140,255,.18); color: #c0d2ff; }
.dd-cust-pill-sched   { background: rgba(217,167,42,.12); color: #f0c45e; border-color: rgba(217,167,42,.30); }
.dd-cust-pill-sched:hover { background: rgba(217,167,42,.20); color: #ffe199; }
.dd-cust-pill-done    { background: rgba(255,255,255,.06); color: rgba(255,255,255,.78); border-color: rgba(255,255,255,.10); }
.dd-cust-chev {
  width: 30px; height: 30px; border-radius: 8px;
  border: 0; background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.55); cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s ease, color .15s ease;
}
.dd-cust-chev:hover { background: rgba(255,255,255,.10); color: #fff; }
.dd-cust-chev svg { width: 16px; height: 16px; }

/* --- Pagination --- */
.dd-cust-pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px 4px; gap: 12px; flex-wrap: wrap;
}
.dd-cust-pagination-info {
  font: 500 12px 'Inter', sans-serif; color: rgba(255,255,255,.55);
}
.dd-cust-pagination-nav { display: flex; align-items: center; gap: 4px; }
.dd-cust-page-btn {
  min-width: 32px; height: 32px; padding: 0 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: rgba(255,255,255,.68);
  font: 600 12px 'Inter', sans-serif;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dd-cust-page-btn:hover:not(:disabled) { background: rgba(255,255,255,.06); color: #fff; }
.dd-cust-page-btn.is-active {
  background: var(--dealer-accent, #4f7cff);
  border-color: var(--dealer-accent, #4f7cff);
  color: #fff;
}
.dd-cust-page-btn:disabled { opacity: .35; cursor: not-allowed; }
.dd-cust-page-arrow svg { width: 14px; height: 14px; }

/* Responsive: stack each row into a 2-line card on narrow viewports.
   Bumped from 1180px → 1320px so 14"/15" laptops (typically 1440-1536px
   browser content area after sidebar) get the more readable 2-line
   layout instead of squeezing 6 columns. */
@media (max-width: 1320px) {
  .dd-cust-headerrow { display: none; }
  .dd-cust-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'cust   actions'
      'veh    veh'
      'contact activity'
      'status status';
    gap: 14px;
  }
  .dd-cust-cell-customer { grid-area: cust; }
  .dd-cust-cell-vehicle  { grid-area: veh; }
  .dd-cust-cell-contact  { grid-area: contact; }
  .dd-cust-cell-activity { grid-area: activity; }
  .dd-cust-cell-status   { grid-area: status; }
  .dd-cust-cell-actions  { grid-area: actions; }
}
@media (max-width: 640px) {
  .dd-cust-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      'cust'
      'veh'
      'contact'
      'activity'
      'status'
      'actions';
  }
  .dd-cust-cell-actions { justify-content: flex-start; }
  .dd-cust-step-label { font-size: 9px; }
}