/* =============================================================================
   dealer-dashboard-redesign.css
   ---------------------------------------------------------------------------
   NEW DESIGN OVERLAY for the live dealer dashboard.

   This file restyles the EXISTING data-driven markup (rendered by
   dealer-dashboard.js from the real site-scoped stores) into the approved
   premium-dark "overview-redesign" visual language.

   It changes NOTHING about data, JS, markup, or the localStorage contract.
   All it does is re-skin the real classes the render functions already emit:
     .dd-kpi / .dd-kpi-hero  ← KPI strip + revenue hero
     .dd-next                ← Next recommended action
     .dd-qb-item / .dd-qb-steps ← Active quotes & bookings (client pipeline)
     .dd-calendar            ← schedule / mini calendar
     .dd-feed                ← recent activity
     .dd-tasks               ← today's tasks
     .dd-perf                ← website performance

   It reuses the dashboard's own design tokens (--dd-* / --dealer-accent),
   so it auto-themes to each dealer site's accent (no hardcoded color).

   LOAD ORDER: include AFTER dealer-dashboard.css so these rules win.
       <link rel="stylesheet" href="./src/dealer-dashboard/dealer-dashboard.css?v=...">
       <link rel="stylesheet" href="./src/dealer-dashboard/dealer-dashboard-redesign.css?v=...">
============================================================================= */

/* ---------------------------------------------------------------------------
   1. CONTENT RHYTHM — tighter, premium spacing; revenue-first ordering
--------------------------------------------------------------------------- */
.dd-content{
  gap: 12px !important;
  padding: 16px 20px 22px !important;
}
.dd-row{ margin: 0 !important; }

/* Revenue hero strip: let the hero breathe, supporting KPIs stay compact */
.dd-row-kpi .dd-kpi-grid{
  display: grid !important;
  grid-template-columns: 1.5fr repeat(4, minmax(0,1fr));
  gap: 12px;
  align-items: stretch;
}

/* ---------------------------------------------------------------------------
   2. CARDS — unified premium surface
--------------------------------------------------------------------------- */
.dd-card{
  border-radius: 16px !important;
  border: 1px solid var(--dd-line, rgba(255,255,255,.06)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.004)),
    var(--dd-bg-1, #0b0d12) !important;
  padding: 16px 18px !important;
}
.dd-card-head h2{
  font-family: var(--dd-font-display, 'Bricolage Grotesque', sans-serif);
  font-weight: 600;
  letter-spacing: -.015em;
}
.dd-eyebrow{
  letter-spacing: .14em !important;
  text-transform: uppercase;
  font-size: 9.5px !important;
  color: var(--dd-ink-3, rgba(255,255,255,.40)) !important;
}

/* ---------------------------------------------------------------------------
   3. KPI STRIP + REVENUE HERO
--------------------------------------------------------------------------- */
.dd-kpi{
  border-radius: 14px !important;
  border: 1px solid var(--dd-line, rgba(255,255,255,.06)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.005)),
    var(--dd-bg-1, #0b0d12) !important;
  padding: 14px 16px !important;
  transition: border-color 200ms ease, transform 200ms ease;
}
.dd-kpi:hover{ transform: translateY(-1px); border-color: var(--dd-line-2, rgba(255,255,255,.10)) !important; }

/* Hero = revenue. Big tabular number, premium gradient wash, full-height. */
.dd-kpi-hero{
  position: relative;
  overflow: hidden;
  padding: 18px 20px !important;
  border-color: rgba(var(--dealer-accent-rgb), .26) !important;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(var(--dealer-accent-rgb), .14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.006)),
    var(--dd-bg-1, #0b0d12) !important;
}
.dd-kpi-hero .dd-kpi-value{
  font-family: var(--dd-font-display, 'Bricolage Grotesque', sans-serif);
  font-size: clamp(34px, 4vw, 52px) !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  line-height: .96 !important;
  font-variant-numeric: tabular-nums;
}
.dd-kpi-hero .dd-kpi-label span{
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dd-ink-3, rgba(255,255,255,.40));
}
.dd-kpi-hero .dd-kpi-spark{ opacity: .9; }
.dd-kpi-hero .dd-kpi-spark svg, .dd-kpi-hero .dd-kpi-spark path, .dd-kpi-hero .dd-kpi-spark polyline{
  stroke: var(--dealer-accent) !important;
}

/* supporting KPI numbers */
.dd-kpi:not(.dd-kpi-hero) .dd-kpi-value{
  font-family: var(--dd-font-display, 'Bricolage Grotesque', sans-serif);
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums;
}

/* trend pill */
.dd-kpi-trend{
  display: inline-flex; align-items: center; gap: 3px;
  height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.dd-kpi-trend.is-up{ background: rgba(var(--dd-ok-rgb,46,207,115), .14); color: var(--dd-ok, #2ecf73); }
.dd-kpi-trend.is-down{ background: rgba(var(--dd-danger-rgb,224,86,110), .14); color: var(--dd-danger, #e0566e); }

/* ---------------------------------------------------------------------------
   4. NEXT RECOMMENDED ACTION
--------------------------------------------------------------------------- */
.dd-next{
  border-radius: 14px !important;
  border: 1px solid rgba(var(--dealer-accent-rgb), .26) !important;
  background:
    linear-gradient(90deg, rgba(var(--dealer-accent-rgb), .15), rgba(var(--dealer-accent-rgb), .035) 42%, transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.008)),
    var(--dd-bg-1, #0b0d12) !important;
  padding: 14px 16px !important;
}
.dd-next-ico{
  border-radius: 12px !important;
  background: var(--dd-sys-grad) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -8px rgba(var(--dealer-accent-rgb), .6);
}
.dd-next-label{
  font-family: var(--dd-font-display, 'Bricolage Grotesque', sans-serif);
  font-weight: 600;
  letter-spacing: -.02em;
}
.dd-next-kicker{
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dealer-accent-3, #a7bcff);
}

/* ---------------------------------------------------------------------------
   5. ACTIVE QUOTES & BOOKINGS  (the live "Active Clients" pipeline)
   Compact cards by default; the 5-step stepper reveals/expands on hover.
--------------------------------------------------------------------------- */
.dd-qb-item{
  border-radius: 14px !important;
  border: 1px solid var(--dd-line, rgba(255,255,255,.06)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.005)),
    var(--dd-bg-1, #0b0d12) !important;
  padding: 13px 15px !important;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.dd-qb-item:hover{
  border-color: var(--dd-line-strong, rgba(255,255,255,.18)) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -16px rgba(0,0,0,.6);
}
.dd-qb-avatar{ border-radius: 50% !important; }
.dd-qb-main strong{
  font-weight: 600; letter-spacing: -.01em;
}
.dd-qb-amount{
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

/* Horizontal stepper, premium dots + connectors. Compact until hover. */
.dd-qb-steps{
  margin-top: 11px !important;
  border-top: 1px solid var(--dd-line, rgba(255,255,255,.06));
  padding-top: 12px !important;
  /* collapse the verbose labels by default for a cleaner resting state */
}
.dd-qb-steps > span > b{
  font-size: 9.5px !important;
  letter-spacing: -.01em;
  color: var(--dd-ink-3, rgba(255,255,255,.40));
  transition: color 200ms ease;
}
.dd-qb-steps > span.is-done > b{ color: var(--dd-ink-1, rgba(255,255,255,.84)); }
.dd-qb-steps > span > i{
  border-color: var(--dd-line-strong, rgba(255,255,255,.18));
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.dd-qb-steps > span.is-done > i{
  background: var(--dealer-accent) !important;
  border-color: var(--dealer-accent) !important;
}
/* current step = first not-done; give it a focus ring */
.dd-qb-steps > span.is-done + span:not(.is-done) > i{
  box-shadow: 0 0 0 4px rgba(var(--dealer-accent-rgb), .18);
  border-color: var(--dealer-accent) !important;
}

/* ---------------------------------------------------------------------------
   6. SCHEDULE / CALENDAR  — day-nav pills, premium chrome
--------------------------------------------------------------------------- */
.dd-calendar-card .dd-pill-btn{
  border-radius: 999px !important;
  font-weight: 600;
}
.dd-calendar-card .dd-pill-btn.is-active{
  color: var(--dealer-accent-3, #a7bcff) !important;
  border-color: rgba(var(--dealer-accent-rgb), .34) !important;
  background: rgba(var(--dealer-accent-rgb), .10) !important;
}
.dd-nudge{
  border-radius: 8px !important;
  border: 1px solid var(--dd-line-2, rgba(255,255,255,.10)) !important;
  background: rgba(255,255,255,.025) !important;
  transition: border-color 200ms ease, color 200ms ease;
}
.dd-nudge:hover{ color: #fff; border-color: var(--dd-line-strong, rgba(255,255,255,.18)) !important; }

/* today highlight in mini calendar */
.dd-calendar [data-calendar-date].is-today,
.dd-calendar .is-today{
  border-color: rgba(var(--dealer-accent-rgb), .5) !important;
  background: rgba(var(--dealer-accent-rgb), .10) !important;
}

/* ---------------------------------------------------------------------------
   7. RECENT ACTIVITY  — quiet rows, accent only on unread
--------------------------------------------------------------------------- */
.dd-feed-title{ font-weight: 600; letter-spacing: -.01em; }
.dd-feed [data-activity-key].is-unread{
  background: rgba(var(--dealer-accent-rgb), .05);
}
.dd-row-unread{
  background: rgba(var(--dealer-accent-rgb), .16) !important;
  color: var(--dealer-accent-3, #a7bcff) !important;
}

/* ---------------------------------------------------------------------------
   8. TODAY'S TASKS — satisfying checkboxes
--------------------------------------------------------------------------- */
.dd-tasks > *{
  border-radius: 11px !important;
  border: 1px solid var(--dd-line, rgba(255,255,255,.06)) !important;
  background: rgba(255,255,255,.012) !important;
  transition: background 200ms ease, border-color 200ms ease, opacity 200ms ease;
}
.dd-tasks > *:hover{
  background: rgba(255,255,255,.03) !important;
  border-color: var(--dd-line-2, rgba(255,255,255,.10)) !important;
}

/* ---------------------------------------------------------------------------
   9. WEBSITE PERFORMANCE
--------------------------------------------------------------------------- */
.dd-perf-card .dd-pill-btn.is-active{
  color: #fff !important;
  background: rgba(255,255,255,.07) !important;
}

/* ---------------------------------------------------------------------------
   10. BUTTONS — match the redesign’s premium primary
--------------------------------------------------------------------------- */
.dd-btn-primary{
  background: var(--dd-sys-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 22px -8px rgba(var(--dealer-accent-rgb), .55);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.dd-btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(var(--dealer-accent-rgb), .7);
}

/* ---------------------------------------------------------------------------
   11. MOTION SAFETY
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .dd-kpi, .dd-qb-item, .dd-tasks > *, .dd-btn-primary, .dd-nudge{
    transition: none !important;
  }
}

/* =============================================================================
   MACRO LAYOUT (ddm-*) — exact overview-redesign structure on live data
============================================================================= */
.ddm-row{ margin:0 !important; }

/* ---- Revenue hero ---- */
.ddm-hero{ padding:18px 22px 10px !important; overflow:hidden; }
.ddm-hero-grid{ display:grid; grid-template-columns:minmax(220px,auto) minmax(0,1fr); gap:24px; align-items:center; }
/* Kicker row holds the "TOTAL REVENUE" label and the 7d/30d segmented
   toggle on the same baseline so they read as one header strip. */
.ddm-hero-kicker-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ddm-hero-kicker{ font:600 9.5px var(--dd-font-body,sans-serif); color:var(--dd-ink-3,rgba(255,255,255,.4)); letter-spacing:.14em; text-transform:uppercase; }
.ddm-hero-range{ display:inline-flex; padding:2px; border-radius:999px; border:1px solid var(--dd-line,rgba(255,255,255,.08)); background:rgba(255,255,255,.025); gap:1px; }
.ddm-hero-range-btn{ height:22px; min-width:32px; padding:0 8px; border:0; border-radius:999px; background:transparent; color:var(--dd-ink-2,rgba(255,255,255,.58)); font:700 10.5px var(--dd-font-body,sans-serif); letter-spacing:.02em; cursor:pointer; transition:color .15s, background .15s; }
.ddm-hero-range-btn:hover{ color:var(--dd-ink-0,#fff); }
.ddm-hero-range-btn.is-active{ background:var(--dealer-accent); color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.18) inset; }
.ddm-hero-value{ font-family:var(--dd-font-display,'Bricolage Grotesque',sans-serif); font-weight:700; font-size:clamp(40px,5vw,58px); line-height:.95; letter-spacing:-.03em; margin:10px 0 12px; font-variant-numeric:tabular-nums; color:var(--dd-ink-0,#fff); }
.ddm-hero-meta{ display:flex; align-items:center; gap:10px; }
.ddm-trend{ display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px; border-radius:999px; font-size:11.5px; font-weight:700; }
.ddm-trend.is-up{ background:rgba(var(--dd-ok-rgb,46,207,115),.14); color:var(--dd-ok,#2ecf73); }
.ddm-trend.is-down{ background:rgba(var(--dd-danger-rgb,224,86,110),.14); color:var(--dd-danger,#e0566e); }
.ddm-trend.is-flat{ background:rgba(255,255,255,.06); color:var(--dd-ink-2,rgba(255,255,255,.58)); }
.ddm-hero-period{ font-size:11.5px; color:var(--dd-ink-3,rgba(255,255,255,.4)); }
.ddm-hero-chart{ position:relative; height:120px; }
.ddm-hero-chart svg{ width:100%; height:100%; display:block; overflow:visible; }
.ddm-chart-line{ fill:none; stroke:var(--dealer-accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.ddm-chart-dot{ fill:var(--dealer-accent); filter:drop-shadow(0 0 6px rgba(var(--dealer-accent-rgb),.8)); }

/* ---- Active Clients ----
   2026-05-27 — Anton: "Active Clients 14 active - чуть ниже подвинь чтобы
   было по центру между next recomend action и карточками". Bumped the top
   margin (was 0) and the bottom (was 11px) so the header strip sits
   visually centered in the gap between the Next-Recommended-Action card
   above and the client cards below. */
.ddm-clients-head{ display:flex; align-items:center; justify-content:space-between; margin:18px 2px 14px; }
.ddm-clients-head .t{ display:flex; align-items:center; gap:10px; }
.ddm-clients-head .t h2{ font-family:var(--dd-font-display,sans-serif); font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--dd-ink-2,rgba(255,255,255,.58)); margin:0; }
.ddm-clients-head .t span{ font-size:11.5px; color:var(--dd-ink-3,rgba(255,255,255,.4)); }
/* Active Clients: ONE horizontal row, scrollable - all active clients fit via
   scroll, never wraps to a second row. The lifecycle stepper renders
   statically inside every card (no hover-reveal) so there's no layout-thrash
   animation when the dealer mouses across the strip. */
.ddm-clients{
  display:flex; flex-wrap:nowrap; gap:16px; align-items:flex-start;
  overflow-x:auto; overflow-y:hidden; padding:2px 2px 12px; scroll-snap-type:x proximity;
  scrollbar-width:thin; scrollbar-color:var(--dd-line-strong,rgba(255,255,255,.18)) transparent;
  overscroll-behavior-x:contain;
}
.ddm-clients::-webkit-scrollbar{ height:8px; }
.ddm-clients::-webkit-scrollbar-thumb{ background:var(--dd-line-strong,rgba(255,255,255,.18)); border-radius:8px; }
.ddm-clients::-webkit-scrollbar-track{ background:transparent; }
.ddm-client{
  position:relative; flex:0 0 340px; width:340px; min-height:140px; scroll-snap-align:start;
  align-self:flex-start;            /* don't stretch to the tallest hovered card */
  display:grid; grid-template-columns:160px minmax(0,1fr); grid-template-areas:"top top" "car foot" "steps steps"; column-gap:10px;
  border:1px solid var(--dd-line,rgba(255,255,255,.06)); border-radius:14px;
  /* Simplified background — dropped the radial-gradient layer that painted a
     glow under each card on every hover/scroll frame. Flat tinted surface
     reads the same and removes the per-frame paint cost across ~30 cards. */
  background: var(--dd-bg-1,#0b0d12);
  padding:14px 16px 12px 16px; cursor:pointer; overflow:hidden;
  /* Only border-color transitions on hover now — transform/shadow caused a
     layer recomposite for every card in the horizontal scroller. */
  transition:border-color .15s ease;
  /* Pre-promote into its own paint layer so hover changes are isolated. */
  contain:layout paint;
}
@media (max-width:560px){
  .ddm-client{ flex-basis:316px; width:316px; grid-template-columns:148px minmax(0,1fr); }
}
/* Hover: border-color only. Dropped transform:translateY + box-shadow —
   both forced layer recomposites + repaints across the whole horizontal
   scroll strip. Border-color is a cheap paint-only change. */
.ddm-client:hover,.ddm-client:focus-visible{ border-color:var(--dd-line-strong,rgba(255,255,255,.22)); outline:none; }
.ddm-client-top{ grid-area:top; display:flex; align-items:flex-start; gap:10px; position:relative; z-index:2; }
.ddm-client-avatar{ width:32px; height:32px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--dd-sys-grad); }
.ddm-client-avatar svg{ width:18px; height:18px; }
.ddm-client-id{ flex:1; min-width:0; }
.ddm-client-name{ display:block; font-size:12.5px; line-height:1.08; font-weight:800; letter-spacing:0; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:break-word; }
.ddm-client-veh{ display:block; font-size:10.5px; color:var(--dd-ink-3,rgba(255,255,255,.46)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; max-width:136px; }
/* Vehicle visual sits in the LEFT column of the bottom row (next to price &
   stage in the RIGHT column). Per the reference mockup:
   - Column is 160px wide, ~72px tall — compact, not full-bleed.
   - PNGs (per-model Audi etc.) are square 1024×1024 with the car centered in
     mostly empty alpha; object-fit:cover scales them to fill 160×72 and crops
     the empty top/bottom so the car body is visible at a real size.
   - SVG body silhouettes are 3:1 wide; width:100% + height:auto lets them
     fill the column width and sit at their natural ~53px height, themed via
     the card's --cust accent. */
.ddm-client-car{ grid-area:car; position:relative; z-index:1; width:160px; height:72px; margin:6px 0 0 -4px; display:flex; align-items:center; justify-content:flex-start; pointer-events:none; overflow:hidden; }
/* image-rendering:auto explicitly opts-in to the browser's bilinear / smooth
   downscale filter — without it, an inherited `crisp-edges` / `pixelated` rule
   (or Chrome's low-quality fast-path on big-ratio downscales) leaves visible
   "stairs" on car body edges. Sources are pre-rendered at 384×384 so the
   browser only has to do a ~1.6× downscale to the 160px card slot, which is
   well inside the quality threshold. */
.ddm-client-car-img{ width:160px; height:72px; max-width:none; max-height:none; display:block; object-fit:cover; object-position:center 60%; filter:drop-shadow(0 6px 12px rgba(0,0,0,.45)); image-rendering:auto; }
.ddm-client-car-img.is-model-photo{ object-fit:cover; object-position:center 62%; }
.ddm-client-car-img.is-generic-photo{ object-fit:cover; object-position:center 60%; }
.ddm-client-car-svg{ width:160px; height:72px; max-width:none; display:flex; align-items:center; justify-content:flex-start; color:var(--cust,var(--dealer-accent)); opacity:.98; filter:drop-shadow(0 6px 12px rgba(0,0,0,.45)); }
.ddm-client-car-svg svg{ width:86%; max-width:140px; height:auto; max-height:62px; display:block; }
.ddm-client-foot{ grid-area:foot; position:relative; z-index:2; min-height:42px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; margin-top:8px; }
.ddm-client-price{ font-size:15px; line-height:1; font-weight:800; font-variant-numeric:tabular-nums; color:#fff; white-space:nowrap; }
.ddm-client-price .dd-est-tilde{ color:var(--dealer-accent); }
.ddm-client-price .dd-est-word{ font-size:12px; letter-spacing:.01em; color:var(--dd-ink-1,rgba(255,255,255,.82)); }
.ddm-stage{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:10.5px; font-weight:600; border:1px solid var(--dd-line-2,rgba(255,255,255,.10)); background:rgba(255,255,255,.03); color:var(--dd-ink-1,rgba(255,255,255,.84)); }
.ddm-stage b{ width:5px; height:5px; border-radius:50%; background:currentColor; }
.ddm-stage.is-quote{ color:var(--dealer-accent-3,#a7bcff); border-color:rgba(var(--dealer-accent-rgb),.34); background:rgba(var(--dealer-accent-rgb),.10); }
.ddm-stage.is-install,.ddm-stage.is-review{ color:var(--dd-ok,#2ecf73); border-color:rgba(var(--dd-ok-rgb,46,207,115),.34); background:rgba(var(--dd-ok-rgb,46,207,115),.10); }
.ddm-stage.is-book{ color:var(--dd-warn,#d9a72a); border-color:rgba(var(--dd-warn-rgb,217,167,42),.34); background:rgba(var(--dd-warn-rgb,217,167,42),.10); }
.ddm-stage.is-lead{ color:var(--dd-info,#4f9cff); border-color:rgba(var(--dd-info-rgb,79,156,255),.34); background:rgba(var(--dd-info-rgb,79,156,255),.10); }
/* Always-on horizontal stepper (2026-05-27).
   Previous build hid the stepper and animated `grid-template-rows: 0fr → 1fr`
   on hover. Animating grid-template-rows forces a layout pass + style recalc
   on every frame of the transition — and Chrome can't promote it to the
   compositor, so `will-change` doesn't actually help. With ~30 cards in the
   horizontal scroller, the first hover after a scroll triggers a layout
   storm and a visible stutter. Solution: render the stepper statically on
   every card. Zero transitions, zero layer promotion, zero per-hover layout
   thrash — just paint once on render. Card height becomes uniform too,
   killing the "card jumps up when neighbour expands" jank. */
.ddm-client-steps{ grid-area:steps; margin-top:12px; }
.ddm-stepper{ border-top:1px solid var(--dd-line,rgba(255,255,255,.06)); padding-top:13px; display:flex; align-items:flex-start; }
.ddm-step{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px; position:relative; }
.ddm-step i{ width:14px; height:14px; border-radius:50%; border:2px solid var(--dd-line-strong,rgba(255,255,255,.18)); background:var(--dd-bg-1,#0b0d12); position:relative; z-index:1; }
.ddm-step:not(:last-child)::before{ content:""; position:absolute; top:6px; left:calc(50% + 10px); right:calc(-50% + 10px); height:2px; background:var(--dd-line-2,rgba(255,255,255,.10)); z-index:0; }
.ddm-step.is-done i{ border-color:var(--dealer-accent); background:var(--dealer-accent); }
.ddm-step.is-done::before{ background:var(--dealer-accent); }
.ddm-step.is-current i{ border-color:var(--dealer-accent); background:var(--dd-bg-1,#0b0d12); box-shadow:0 0 0 4px rgba(var(--dealer-accent-rgb),.18); }
.ddm-step b{ font-size:9.5px; font-weight:500; color:var(--dd-ink-3,rgba(255,255,255,.4)); text-align:center; line-height:1; }
.ddm-step.is-done b,.ddm-step.is-current b{ color:var(--dd-ink-1,rgba(255,255,255,.84)); }
.ddm-step.is-current b{ font-weight:700; color:#fff; }

/* ---- bottom: schedule + tasks ---- */
.ddm-bottom{ display:grid; grid-template-columns:1.1fr .9fr; gap:12px; align-items:start; }
@media (max-width:1100px){ .ddm-bottom{ grid-template-columns:1fr; } }
.ddm-sched .dd-tabs{ display:inline-flex; gap:2px; padding:3px; border-radius:999px; border:1px solid var(--dd-line-2,rgba(255,255,255,.1)); background:rgba(255,255,255,.025); }
.ddm-sched .dd-tabs button{ height:25px; padding:0 13px; border:0; border-radius:999px; background:transparent; color:var(--dd-ink-2,rgba(255,255,255,.58)); font-size:11px; font-weight:600; cursor:pointer; transition:color .2s,background .2s; }
.ddm-sched .dd-tabs button.is-active{ color:#fff; background:rgba(255,255,255,.07); }
.ddm-sched-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.ddm-sched-date{ font-size:11.5px; color:var(--dd-ink-2,rgba(255,255,255,.58)); font-weight:500; }
.ddm-day-nav{ display:inline-flex; align-items:center; gap:4px; }
.ddm-day-nav button{ height:26px; border:1px solid var(--dd-line-2,rgba(255,255,255,.1)); border-radius:8px; background:rgba(255,255,255,.025); color:var(--dd-ink-2,rgba(255,255,255,.58)); display:grid; place-items:center; cursor:pointer; transition:border-color .2s,color .2s; }
.ddm-day-nav button[aria-label]{ width:26px; }
.ddm-day-nav button svg{ width:13px; height:13px; }
.ddm-day-nav button:hover{ color:#fff; border-color:var(--dd-line-strong,rgba(255,255,255,.18)); }
.ddm-day-nav .ddm-day-today{ width:auto; padding:0 8px; border:0; background:transparent; color:var(--dd-ink-2,rgba(255,255,255,.58)); font:600 11px var(--dd-font-body,sans-serif); }
.ddm-day-nav .ddm-day-today:hover{ color:#fff; background:transparent; }
.ddm-day-nav .ddm-day-today.is-today{ color:var(--dealer-accent-3,#a7bcff); }
.ddm-timeline{ display:flex; flex-direction:column; }
.ddm-tl{ display:grid; grid-template-columns:72px 14px 1fr; gap:11px; align-items:start; padding:9px 0; }
.ddm-tl + .ddm-tl{ border-top:1px solid var(--dd-line,rgba(255,255,255,.06)); }
.ddm-tl-time{ font-size:11px; font-weight:600; color:var(--dd-ink-2,rgba(255,255,255,.58)); font-variant-numeric:tabular-nums; padding-top:1px; }
.ddm-tl-rail{ position:relative; display:grid; place-items:start center; padding-top:4px; }
.ddm-tl-dot{ width:9px; height:9px; border-radius:50%; background:var(--dd-ink-4,rgba(255,255,255,.22)); }
.ddm-tl.is-live .ddm-tl-dot{ background:var(--dealer-accent); box-shadow:0 0 0 4px rgba(var(--dealer-accent-rgb),.16); }
.ddm-tl-title{ display:block; font-size:12.5px; font-weight:600; letter-spacing:-.01em; }
.ddm-tl-sub{ display:block; font-size:11px; color:var(--dd-ink-3,rgba(255,255,255,.4)); margin-top:2px; }
.ddm-tl.is-empty .ddm-tl-title{ color:var(--dd-ink-2,rgba(255,255,255,.58)); font-weight:500; }
.ddm-sched-foot{ display:flex; justify-content:flex-end; margin-top:12px; }
/* Same footer treatment under the mini month calendar so the Add Booking
   button has the same affordance whether the dealer is on the day-timeline
   tab or the month-grid tab. Slightly tighter top margin since the
   calendar grid already has its own bottom padding. */
.ddm-sched-foot-cal{ display:flex; justify-content:flex-end; margin-top:8px; padding:6px 4px 0; border-top:1px solid var(--dd-line,rgba(255,255,255,.06)); }
.ddm-tasks-prog{ font-size:11px; color:var(--dd-ink-3,rgba(255,255,255,.4)); }
.ddm-tasks-foot{ display:flex; align-items:center; justify-content:flex-end; margin-top:11px; }
.ddm-tasks-foot .dd-tasks-view-all{
  pointer-events:auto; cursor:pointer; min-height:28px; padding:0 2px 0 8px; border-radius:8px;
  color:var(--dealer-accent); transition:background .18s ease,transform .18s ease;
}
.ddm-tasks-foot .dd-tasks-view-all:hover{ background:rgba(var(--dealer-accent-rgb),.08); transform:translateX(1px); }
.ddm-tasks-foot .dd-tasks-view-all:hover .dd-next-arrow-shaft{ stroke-dashoffset:0; }
.ddm-tasks-foot .dd-tasks-view-all:hover .dd-next-arrow path:last-child{ transform:translateX(3px); }

/* advanced legacy row spacing */
.ddm-advrow{ display:grid; grid-template-columns:1.1fr .9fr; gap:12px; align-items:start; }
@media (max-width:1100px){ .ddm-advrow{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion:reduce){
  /* Only the card's border-color transition remains; stepper is now static. */
  .ddm-client{ transition:none !important; }
}

/* ---- Simple / Advanced segment toggle (topbar) ---- */
.ddm-seg{ display:inline-flex; padding:3px; border-radius:999px; border:1px solid var(--dd-line-2,rgba(255,255,255,.10)); background:rgba(255,255,255,.025); gap:2px; }
.ddm-seg button{ height:28px; padding:0 16px; border:0; border-radius:999px; background:transparent; color:var(--dd-ink-2,rgba(255,255,255,.58)); font:600 12px var(--dd-font-body,sans-serif); letter-spacing:-.01em; cursor:pointer; transition:color .2s,background .2s; }
.ddm-seg button[aria-pressed="true"]{ color:#fff; background:rgba(var(--dealer-accent-rgb),.18); }
.ddm-seg button[data-mode-btn="advanced"][aria-pressed="true"]{ color:var(--dealer-accent-3,#ff8c92); }

/* Hide the old per-card help "?" chips and selects that aren't in the macro */
.ddm-sched .dd-help, .ddm-clients-head .dd-help{ display:none !important; }

/* ---- tweaks: one-line View all, subtler segment, no admin avatar ---- */
.ddm-clients-head .dd-link-btn{ white-space:nowrap; flex:none; }
.ddm-clients-head{ flex-wrap:nowrap; }

/* subtler Simple/Advanced toggle */
.ddm-seg{ border-color:rgba(255,255,255,.06); background:rgba(255,255,255,.015); padding:2px; }
.ddm-seg button{ height:26px; padding:0 12px; font-size:11px; font-weight:500; color:var(--dd-ink-3,rgba(255,255,255,.40)); }
.ddm-seg button[aria-pressed="true"]{ color:var(--dd-ink-1,rgba(255,255,255,.84)); background:rgba(255,255,255,.05); }
.ddm-seg button[data-mode-btn="advanced"][aria-pressed="true"]{ color:var(--dd-ink-1,rgba(255,255,255,.84)); }

/* admin button without avatar — align label left */
.ddm-admin-noavatar{ grid-template-columns:1fr auto !important; }
.ddm-admin-noavatar .dd-admin-label{ text-align:left; }

/* =============================================================================
   POPUPS / MODALS — unified to the new-dash premium-dark language
   Covers: create, manage, invoice, confirm, qb (quote/booking), booking detail
   (bkd), reschedule/reminder (bkr), qb-customer (qbc), new-quote (nqa),
   command palette (cmd), help drawer, notification & create panels.
============================================================================= */

/* ---- Unified backdrop: deep scrim + accent-tinted blur ---- */
.dd-create-modal-backdrop,
.dealer-confirm-backdrop,
.invoice-backdrop,
.qb-backdrop,
.qbc-backdrop,
.bkd-backdrop,
.bkr-backdrop,
.dd-nqa-backdrop,
.dd-created-invoice-backdrop,
.dd-help-drawer-backdrop,
.dd-cmd-backdrop {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--dealer-accent-rgb), .10), transparent 60%),
    rgba(5, 7, 11, .66) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
}

/* ---- Unified dialog surface ---- */
.dd-create-modal,
.dealer-confirm-dialog,
.invoice-dialog,
.qb-dialog,
.qbc-dialog,
.bkd-dialog,
.bkr-dialog,
.dd-nqa-dialog,
.dd-created-invoice-dialog {
  border: 1px solid var(--dd-line-2, rgba(255,255,255,.10)) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(var(--dealer-accent-rgb), .06), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.005)),
    var(--dd-bg-2, #14171e) !important;
  box-shadow:
    0 40px 120px -30px rgba(0,0,0,.78),
    0 0 0 1px rgba(255,255,255,.02) inset !important;
  overflow: hidden;
  animation: ddm-pop-rise .26s cubic-bezier(.16,1,.3,1);
}
@keyframes ddm-pop-rise { from { transform: translateY(16px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }
/* qb-dialog is centered via translate; preserve that while animating */
.qb-dialog { animation: ddm-pop-rise-c .26s cubic-bezier(.16,1,.3,1); }
@keyframes ddm-pop-rise-c {
  from { transform: translate(-50%, calc(-50% + 16px)); opacity: 0; }
  to   { transform: translate(-50%, -50%); opacity: 1; }
}

/* ---- Headers ---- */
.dd-create-modal-head,
.qb-head, .qbc-head, .bkd-head, .bkr-head, .dd-nqa-head,
.invoice-dialog > header, .dealer-confirm-dialog > header {
  border-bottom: 1px solid var(--dd-line, rgba(255,255,255,.06)) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent) !important;
}
.dd-create-modal-head h2,
.qb-head h2, .qbc-head h2, .bkd-head h2, .bkr-head h2, .dd-nqa-head h2 {
  font-family: var(--dd-font-display, 'Bricolage Grotesque', sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
}

/* ---- Close buttons ---- */
.dd-create-modal-close,
.qb-close, .qbc-close, .bkd-close, .bkr-close, .dd-nqa-close,
[data-action$="-close"].dd-icon-btn {
  border-radius: 10px !important;
  border: 1px solid var(--dd-line-2, rgba(255,255,255,.10)) !important;
  background: rgba(255,255,255,.025) !important;
  color: var(--dd-ink-2, rgba(255,255,255,.58)) !important;
  transition: color .15s ease, border-color .15s ease, background .15s ease !important;
}
.dd-create-modal-close:hover,
.qb-close:hover, .qbc-close:hover, .bkd-close:hover, .bkr-close:hover, .dd-nqa-close:hover {
  color: #fff !important;
  border-color: var(--dd-line-strong, rgba(255,255,255,.18)) !important;
  background: rgba(255,255,255,.06) !important;
}

/* ---- Primary buttons inside popups inherit the dash gradient ---- */
.dd-create-modal .dd-btn-primary,
.qb-dialog .dd-btn-primary,
.invoice-dialog .dd-btn-primary,
.dealer-confirm-dialog .dd-btn-primary,
.bkd-dialog .dd-btn-primary,
.bkr-dialog .dd-btn-primary,
.dd-nqa-dialog .dd-btn-primary {
  background: var(--dd-sys-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 22px -8px rgba(var(--dealer-accent-rgb), .55) !important;
}

/* ---- Create / Notification dropdown panels (topbar) ---- */
.dd-create-panel,
.dd-notification-panel {
  border: 1px solid var(--dd-line-2, rgba(255,255,255,.10)) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.006)),
    var(--dd-bg-2, #14171e) !important;
  box-shadow: 0 28px 60px -22px rgba(0,0,0,.7) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: ddm-pop-rise .2s cubic-bezier(.16,1,.3,1);
}
.dd-create-option { border-radius: 10px !important; transition: background .15s ease !important; }
.dd-create-option:hover { background: rgba(var(--dealer-accent-rgb), .10) !important; }
.dd-create-icon {
  border-radius: 9px !important;
  background: var(--dd-sys-grad) !important;
  color: #fff !important;
}

/* ---- Command palette ---- */
.dd-cmd-dialog {
  border: 1px solid var(--dd-line-2, rgba(255,255,255,.10)) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.006)),
    var(--dd-bg-2, #14171e) !important;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.78) !important;
}

/* ---- Help drawer (slide-over) ---- */
.dd-help-drawer-modal, .dd-help-drawer {
  border-left: 1px solid var(--dd-line-2, rgba(255,255,255,.10)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%),
    var(--dd-bg-1, #0b0d12) !important;
  box-shadow: 0 28px 60px -22px rgba(0,0,0,.7) !important;
}

@media (prefers-reduced-motion: reduce){
  .dd-create-modal, .qb-dialog, .dealer-confirm-dialog, .invoice-dialog,
  .qbc-dialog, .bkd-dialog, .bkr-dialog, .dd-nqa-dialog,
  .dd-create-panel, .dd-notification-panel { animation: none !important; }
}

/* Keep the "Local mode · Last sync" status removed (a display rule overrides [hidden]) */
.dd-status[hidden]{ display:none !important; }

/* =============================================================================
   QUOTE BUILDER (price popup) — polish to the new-dash language
============================================================================= */
/* Section headers in display font */
.qb-section-head h3{ font-family:var(--dd-font-display,sans-serif) !important; letter-spacing:-.015em !important; }
.qb-eyebrow{ letter-spacing:.14em !important; text-transform:uppercase; color:var(--dd-ink-3,rgba(255,255,255,.40)) !important; }

/* Price / money / percent input fields — premium, with accent focus ring */
.qb-money-field,
.qb-pct-field,
.qb-addon-search-field{
  background: var(--dd-bg-1, #0b0d12) !important;
  border: 1px solid var(--dd-line-2, rgba(255,255,255,.10)) !important;
  border-radius: 10px !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.qb-money-field:focus-within,
.qb-pct-field:focus-within,
.qb-addon-search-field:focus-within{
  border-color: var(--dealer-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--dealer-accent-rgb), .18) !important;
  background: rgba(var(--dealer-accent-rgb), .04) !important;
}
.qb-money-field input,
.qb-pct-field input,
.qb-adjust-field input,
.qb-note-field{
  font-variant-numeric: tabular-nums;
  color: var(--dd-ink-0, #fff) !important;
}
/* the little $ / % prefix glyph */
.qb-money-field > span:first-child,
.qb-pct-field > span:last-child{
  color: var(--dd-ink-3, rgba(255,255,255,.40)) !important;
  font-weight: 600;
}

/* Note textarea */
.qb-note-field{
  background: var(--dd-bg-1, #0b0d12) !important;
  border: 1px solid var(--dd-line-2, rgba(255,255,255,.10)) !important;
  border-radius: 12px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.qb-note-field:focus{
  border-color: var(--dealer-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--dealer-accent-rgb), .18) !important;
  outline: none !important;
}

/* Package cards = dash card surface; recommended gets the accent ring */
.qb-pkg-carousel > *{
  border: 1px solid var(--dd-line, rgba(255,255,255,.06)) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.005)),
    var(--dd-bg-1, #0b0d12) !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
.qb-pkg-carousel > *:hover{ transform: translateY(-2px); border-color: var(--dd-line-2, rgba(255,255,255,.10)) !important; }
.qb-pkg-carousel > .is-recommended,
.qb-pkg-carousel > [data-recommended="true"]{
  border-color: rgba(var(--dealer-accent-rgb), .5) !important;
  box-shadow: 0 0 0 1px rgba(var(--dealer-accent-rgb), .3), 0 14px 30px -18px rgba(var(--dealer-accent-rgb), .5) !important;
}

/* Add-on cards = dash card surface */
.qb-addon-grid > *{
  border: 1px solid var(--dd-line, rgba(255,255,255,.06)) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.004)),
    var(--dd-bg-1, #0b0d12) !important;
  transition: border-color .2s ease !important;
}
.qb-addon-grid > *:hover{ border-color: var(--dd-line-2, rgba(255,255,255,.10)) !important; }

/* Sticky total bar — premium, accent total */
.qb-total,
.qb-dialog .qb-total-bar,
.qb-dialog > .qb-totalbar{
  border-top: 1px solid var(--dd-line, rgba(255,255,255,.06)) !important;
  background:
    linear-gradient(180deg, transparent, rgba(var(--dealer-accent-rgb), .05)) ,
    var(--dd-bg-2, #14171e) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* Primary "Create quote" button uses the dash gradient */
.qb-btn-primary{
  background: var(--dd-sys-grad) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px -8px rgba(var(--dealer-accent-rgb), .55) !important;
  transition: transform .14s ease, box-shadow .14s ease !important;
}
.qb-btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(var(--dealer-accent-rgb), .7) !important; }
.qb-btn-ghost{ border-color: var(--dd-line-2, rgba(255,255,255,.10)) !important; }
.qb-btn-ghost:hover{ color:#fff !important; border-color: var(--dd-line-strong, rgba(255,255,255,.18)) !important; }

/* Carousel nav buttons match dash nudge style */
.qb-carousel-btn{
  border: 1px solid var(--dd-line-2, rgba(255,255,255,.10)) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.025) !important;
  transition: border-color .15s ease, color .15s ease !important;
}
.qb-carousel-btn:hover{ color:#fff !important; border-color: var(--dd-line-strong, rgba(255,255,255,.18)) !important; }

/* =============================================================================
   QUOTE BUILDER — Body Type card (simulator icon) + friendlier layout
============================================================================= */
.qb-bodytype{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px;
  margin:12px 0 2px; padding:13px 14px;
  border:1px solid var(--dd-line-2, rgba(255,255,255,.10)); border-radius:14px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(var(--dealer-accent-rgb), .08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.006)),
    var(--dd-bg-1, #0b0d12);
  cursor:pointer; transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.qb-bodytype:hover, .qb-bodytype:focus-visible{
  border-color:rgba(var(--dealer-accent-rgb), .5); transform:translateY(-1px);
  box-shadow:0 12px 28px -18px rgba(var(--dealer-accent-rgb), .5); outline:none;
}
.qb-bodytype-ico{
  width:54px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:10px; color:#fff;
  background:linear-gradient(135deg, rgba(var(--dealer-accent-rgb),.9), rgba(var(--dealer-accent-rgb),.55));
}
.qb-bodytype-ico svg{ width:auto; height:auto; max-width:46px; max-height:30px; }
.qb-bodytype-main{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.qb-bodytype-main em{ font-style:normal; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dd-ink-3, rgba(255,255,255,.40)); }
.qb-bodytype-main strong{ font-family:var(--dd-font-display, sans-serif); font-size:15px; font-weight:600; letter-spacing:-.015em; color:var(--dd-ink-0,#fff); }
.qb-bodytype-main small{ font-size:11px; color:var(--dd-ink-3, rgba(255,255,255,.40)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qb-bodytype-edit{ width:16px; height:16px; color:var(--dd-ink-3, rgba(255,255,255,.40)); transition:color .15s ease; }
.qb-bodytype:hover .qb-bodytype-edit{ color:var(--dealer-accent-3, #ff8c92); }

/* Friendlier left panel rhythm */
.qb-context{ gap:2px; }
.qb-facts{ margin-top:12px; }
.qb-fact{ padding:7px 0; border-top:1px solid var(--dd-line, rgba(255,255,255,.06)); display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.qb-fact dt{ font-size:11px; color:var(--dd-ink-3, rgba(255,255,255,.40)); }
.qb-fact dd{ margin:0; font-size:12px; font-weight:600; text-align:right; }

/* Section headers: clearer hierarchy */
.qb-section-head h3{ font-size:14.5px !important; }
.qb-section-head p{ color:var(--dd-ink-3, rgba(255,255,255,.40)); font-size:11.5px; margin-top:2px; }
.qb-section + .qb-section{ margin-top:4px; }

/* =============================================================================
   QUOTE BUILDER — package cards, friendlier selection
============================================================================= */
.qb-pkg{
  position:relative; display:flex; flex-direction:column; gap:11px;
  padding:16px 15px 14px !important;
  border:1px solid var(--dd-line, rgba(255,255,255,.06)) !important;
  border-radius:16px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.005)),
    var(--dd-bg-1, #0b0d12) !important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease !important;
}
.qb-pkg:hover{ transform:translateY(-2px); border-color:var(--dd-line-2, rgba(255,255,255,.10)) !important; }
/* Hidden-from-customer packages dim slightly so the offered set reads clearly */
.qb-pkg.is-hidden{ opacity:.55; }
.qb-pkg.is-hidden:hover{ opacity:.8; }
/* Recommended card: accent ring + glow (no top ribbon) */
.qb-pkg-ribbon{ display:none !important; }
.qb-pkg.is-reco{
  border-color:rgba(var(--dealer-accent-rgb), .55) !important;
  box-shadow:0 0 0 1px rgba(var(--dealer-accent-rgb), .35), 0 16px 36px -20px rgba(var(--dealer-accent-rgb), .6) !important;
}

/* Header: name + heat + remove */
.qb-pkg-head{ display:flex; align-items:center; gap:8px; }
.qb-pkg-name{
  flex:1; min-width:0; background:transparent !important; border:0 !important;
  font-family:var(--dd-font-display, sans-serif) !important; font-size:16px !important; font-weight:700 !important;
  letter-spacing:-.015em !important; color:var(--dd-ink-0, #fff) !important; padding:2px 0 !important;
  border-bottom:1px solid transparent !important; border-radius:0 !important; transition:border-color .15s ease !important;
}
.qb-pkg-name:focus{ outline:none !important; border-bottom-color:var(--dealer-accent) !important; }
.qb-heat{
  flex:none; display:inline-flex; align-items:baseline; gap:3px;
  padding:3px 8px; border-radius:999px; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--dd-ok, #2ecf73); background:rgba(var(--dd-ok-rgb,46,207,115), .12);
}
.qb-heat i{ font-style:normal; font-size:9px; font-weight:600; opacity:.8; text-transform:uppercase; letter-spacing:.04em; }
.qb-pkg-del{
  flex:none; width:26px; height:26px; display:grid; place-items:center;
  border:1px solid transparent; border-radius:8px; background:transparent; color:var(--dd-ink-4, rgba(255,255,255,.22));
  transition:color .15s ease, background .15s ease; cursor:pointer;
}
.qb-pkg-del:hover{ color:var(--dd-danger, #e0566e); background:rgba(var(--dd-danger-rgb,224,86,110), .14); }
.qb-pkg-del svg{ width:13px; height:13px; }

/* Benefits */
.qb-pkg-benefits{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.qb-pkg-benefits li{
  position:relative; padding-left:20px; font-size:12px; color:var(--dd-ink-2, rgba(255,255,255,.58)); line-height:1.35;
}
.qb-pkg-benefits li::before{
  content:""; position:absolute; left:2px; top:5px; width:11px; height:11px;
  background:var(--dealer-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.qb-pkg-benefits-empty li{ color:var(--dd-ink-4, rgba(255,255,255,.22)); }
.qb-pkg-benefits-empty li::before{ background:var(--dd-ink-4, rgba(255,255,255,.22)); }

/* Price — big and clear */
.qb-pkg-price-row{ margin-top:auto; }
.qb-pkg-price{
  width:100%; justify-content:flex-start; gap:6px !important;
  padding:10px 12px !important; border-radius:11px !important;
}
.qb-pkg-price span{ font-size:15px; color:var(--dd-ink-3, rgba(255,255,255,.40)); font-weight:600; }
.qb-pkg-price input{
  flex:1; font-family:var(--dd-font-display, sans-serif) !important; font-size:20px !important; font-weight:700 !important;
  letter-spacing:-.02em; color:var(--dd-ink-0, #fff) !important;
}

/* Footer: show toggle + make-recommended */
.qb-pkg-foot{ display:flex; flex-direction:column; gap:9px; padding-top:11px; border-top:1px solid var(--dd-line, rgba(255,255,255,.06)); }
.qb-pkg-show{ display:flex; align-items:center; gap:9px; cursor:pointer; }
.qb-pkg-show input{ position:absolute; opacity:0; width:0; height:0; }
.qb-switch-track{
  position:relative; flex:none; width:36px; height:20px; border-radius:999px;
  background:rgba(255,255,255,.10); border:1px solid var(--dd-line-2, rgba(255,255,255,.10)); transition:background .18s ease;
}
.qb-switch-track::after{
  content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%;
  background:#fff; transition:transform .18s cubic-bezier(.16,1,.3,1);
}
.qb-pkg-show input:checked + .qb-switch-track{ background:var(--dealer-accent); border-color:transparent; }
.qb-pkg-show input:checked + .qb-switch-track::after{ transform:translateX(16px); }
.qb-pkg-show-label{ font-size:11.5px; font-weight:600; color:var(--dd-ink-2, rgba(255,255,255,.58)); }
.qb-pkg-show input:checked ~ .qb-pkg-show-label{ color:var(--dd-ink-1, rgba(255,255,255,.84)); }

.qb-reco-pick{
  display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  height:34px; border-radius:10px; border:1px solid var(--dd-line-2, rgba(255,255,255,.10));
  background:rgba(255,255,255,.02); transition:border-color .15s ease, background .15s ease, color .15s ease;
  font-size:12px; font-weight:600; color:var(--dd-ink-2, rgba(255,255,255,.58));
}
.qb-reco-pick input{ position:absolute; opacity:0; width:0; height:0; }
.qb-reco-pick:hover{ color:#fff; border-color:var(--dd-line-strong, rgba(255,255,255,.18)); }
.qb-reco-star{ width:14px; height:14px; color:var(--dd-ink-4, rgba(255,255,255,.22)); transition:color .15s ease; }
.qb-reco-pick.is-on{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg, rgba(var(--dealer-accent-rgb),.9), rgba(var(--dealer-accent-rgb),.6));
}
.qb-reco-pick.is-on .qb-reco-star{ color:#fff; }

/* Add-package tile */
.qb-pkg-add{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border:1.5px dashed var(--dd-line-2, rgba(255,255,255,.10)) !important; border-radius:16px !important;
  background:transparent !important; color:var(--dd-ink-3, rgba(255,255,255,.40)) !important;
  min-height:140px; cursor:pointer; transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.qb-pkg-add:hover{ border-color:rgba(var(--dealer-accent-rgb), .5) !important; color:var(--dealer-accent-3, #ff8c92) !important; background:rgba(var(--dealer-accent-rgb), .04) !important; }
.qb-pkg-add-plus{ width:34px; height:34px; display:grid; place-items:center; border-radius:50%; border:1.5px solid currentColor; font-size:20px; font-weight:300; }

/* Package count badge in the section header */
.qb-pkg-count{
  display:inline-flex; align-items:center; margin-left:8px; padding:2px 9px;
  border-radius:999px; font:600 10.5px var(--dd-font-body, sans-serif); letter-spacing:0; vertical-align:middle;
  color:var(--dd-ink-2, rgba(255,255,255,.58)); background:rgba(255,255,255,.05); border:1px solid var(--dd-line-2, rgba(255,255,255,.10));
}
/* Carousel edge fade so it's obvious more packages exist to the right */
.qb-section{ position:relative; }
.qb-pkg-carousel{ scroll-behavior:smooth; }
.qb-pkg-carousel::-webkit-scrollbar{ height:6px; }
.qb-pkg-carousel::-webkit-scrollbar-thumb{ background:var(--dd-line-2, rgba(255,255,255,.10)); border-radius:999px; }
.qb-pkg-carousel::-webkit-scrollbar-track{ background:transparent; }

/* =============================================================================
   PACKAGE CARDS v2 — compact, price↔customer-total link, carousel peek
   (dealer usually shows 2–3 packages, so show ~2.3 and let the next peek in)
============================================================================= */
/* Carousel: fixed-width columns so extra packages clearly peek in / scroll */
.qb-pkg-carousel{ grid-auto-columns:minmax(244px, 0.46fr) !important; scroll-snap-type:x mandatory; }
@media (min-width:1080px){ .qb-pkg-carousel{ grid-auto-columns:minmax(252px, 0.46fr) !important; } }
.qb-pkg-carousel > *{ scroll-snap-align:start; }

/* Compact card: tighter paddings + gaps */
.qb-pkg{ gap:9px !important; padding:13px 13px 11px !important; border-radius:14px !important; }
.qb-pkg-head{ gap:7px; }
.qb-pkg-name{ font-size:15px !important; }
.qb-heat{ padding:2px 7px; font-size:10.5px; }
.qb-heat i{ font-size:8.5px; }

/* Benefits: a touch tighter */
.qb-pkg-benefits{ gap:5px; }
.qb-pkg-benefits li{ font-size:11.5px; padding-left:18px; }
.qb-pkg-benefits li::before{ top:4px; width:10px; height:10px; }

/* Price row: price field + live "customer pays" side by side */
.qb-pkg-price-row{ display:flex; align-items:center; gap:10px; }
.qb-pkg-price{ flex:1; padding:8px 11px !important; border-radius:10px !important; }
.qb-pkg-price span{ font-size:13px; }
.qb-pkg-price input{ font-size:17px !important; }
.qb-pkg-pays{ flex:none; text-align:right; display:flex; flex-direction:column; gap:1px; line-height:1.05; }
.qb-pkg-pays em{ font-style:normal; font-size:8.5px; letter-spacing:.10em; text-transform:uppercase; color:var(--dd-ink-3, rgba(255,255,255,.40)); white-space:nowrap; }
.qb-pkg-pays b{ font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; color:#fff; }

/* Footer: toggle + recommend on ONE compact row */
.qb-pkg-foot{ flex-direction:row !important; align-items:center; justify-content:space-between; gap:8px; padding-top:9px !important; }
.qb-pkg-show{ gap:7px; }
.qb-switch-track{ width:32px; height:18px; }
.qb-switch-track::after{ width:12px; height:12px; }
.qb-pkg-show input:checked + .qb-switch-track::after{ transform:translateX(14px); }
.qb-pkg-show-label{ font-size:11px; }
.qb-reco-pick{ height:30px; padding:0 11px; gap:6px; font-size:11.5px; border-radius:8px; flex:none; }
.qb-reco-star{ width:13px; height:13px; }

/* Add-package tile: match compact height */
.qb-pkg-add{ min-height:120px; }

/* =============================================================================
   PACKAGE CARDS — color cleanup
   Palette: RED = recommendation/selection only. GREEN = "what you get"
   (benefits + heat). WHITE = prices & names. Muted = secondary text.
============================================================================= */
/* Recommend button: white text/icon on the red fill (was dark-red, low contrast) */
.qb-reco-pick.is-on{
  color:#fff !important;
  border-color:transparent !important;
  background:var(--dd-sys-grad) !important;
  box-shadow:0 6px 16px -8px rgba(var(--dealer-accent-rgb), .7);
}
.qb-reco-pick.is-on span{ color:#fff !important; }
.qb-reco-pick.is-on .qb-reco-star{ color:#fff !important; }

/* Benefit checkmarks: green = "what the customer gets" (consistent with heat),
   so red stays reserved for selection/recommendation only. */
.qb-pkg-benefits li::before{ background:var(--dd-ok, #2ecf73) !important; }
.qb-pkg-benefits-empty li::before{ background:var(--dd-ink-4, rgba(255,255,255,.22)) !important; }

/* Heat badge: keep the calm green pill */
.qb-heat{ color:var(--dd-ok, #2ecf73) !important; background:rgba(var(--dd-ok-rgb,46,207,115), .12) !important; }

/* Prices: $ prefix muted, number white (no accent tint anywhere on figures) */
.qb-pkg-price span{ color:var(--dd-ink-3, rgba(255,255,255,.40)) !important; }
.qb-pkg-price input{ color:#fff !important; }
.qb-pkg-pays em{ color:var(--dd-ink-3, rgba(255,255,255,.40)) !important; }
.qb-pkg-pays b{ color:#fff !important; }

/* "Shown" toggle stays red when on (selection family); label white when shown */
.qb-pkg-show input:checked ~ .qb-pkg-show-label{ color:#fff !important; }

/* Totals are WHITE (price figures never tinted) */
.qb-total-value, .qb-dialog .qb-total-value{ color:#fff !important; }
.qb-bd-total b, .qb-dialog .qb-bd-total b{ color:#fff !important; }

/* Breakdown: editable Tax % line (moved from the right panel into the left breakdown) */
.qb-bd-pct{ position:relative; }
.qb-bd-pct input{ width:54px; text-align:right; }
.qb-bd-pct i{ font-style:normal; color:var(--dd-ink-3, rgba(255,255,255,.40)); margin-left:2px; }
.qb-bd-line.is-tax .qb-bd-line-name{ display:inline-flex; align-items:baseline; gap:6px; }
.qb-bd-tax-amt{ font-style:normal; font-size:10.5px; font-weight:600; color:var(--dd-ink-3, rgba(255,255,255,.40)); font-variant-numeric:tabular-nums; }

/* Step circles (1 Build / 2 Send): perfectly center the digit */
.qb-step i{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  line-height:1 !important; font-size:10.5px !important; font-weight:700 !important;
  text-align:center; padding:0 !important;
}

/* Notes block moved into the left panel */
.qb-notes-block{ display:flex; flex-direction:column; gap:9px; margin-top:12px; }
.qb-notes-block .qb-note-field{ display:flex; flex-direction:column; gap:5px; }
.qb-notes-block .qb-note-field em{ font-style:normal; font-size:9.5px; letter-spacing:.10em; text-transform:uppercase; color:var(--dd-ink-3, rgba(255,255,255,.40)); }
.qb-notes-block textarea{
  min-height:54px; resize:vertical; border-radius:11px; padding:9px 11px;
  background:var(--dd-bg-1, #0b0d12); border:1px solid var(--dd-line-2, rgba(255,255,255,.10));
  color:var(--dd-ink-1, rgba(255,255,255,.84)); font:inherit; font-size:12px; transition:border-color .15s ease, box-shadow .15s ease;
}
.qb-notes-block textarea:focus{ outline:none; border-color:var(--dealer-accent); box-shadow:0 0 0 3px rgba(var(--dealer-accent-rgb), .18); }

/* =============================================================================
   TOPBAR — only Create (hover menu) + Notifications (far corner)
============================================================================= */
.dd-topbar-center[hidden]{ display:none !important; }
.dd-topbar-right{ display:flex; align-items:center; gap:10px; margin-left:auto; }

/* 2026-05-27 — View Website + Edit Website quick-actions. Visually distinct
   from the primary "Create" button (ghost border instead of solid fill), but
   the same height + radius so they read as a coherent action cluster. The
   accent-tinted hover state and globe icons make their site-related intent
   obvious at a glance. Hidden on mobile (matches the existing rule that
   collapses other top-bar buttons under 720px). */
.dd-topbar-website-actions{ display:flex; align-items:center; gap:8px; }
.dd-topbar-website-actions .dd-btn-website{
  display:inline-flex; align-items:center; gap:7px;
  height:32px; padding:0 12px;
  border:1px solid var(--dd-line,rgba(255,255,255,.10));
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:var(--dd-ink-1,rgba(255,255,255,.84));
  font:600 12px var(--dd-font-body,sans-serif); letter-spacing:-.005em;
  cursor:pointer; white-space:nowrap;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.dd-topbar-website-actions .dd-btn-website:hover{
  border-color:color-mix(in srgb, var(--dealer-accent) 55%, var(--dd-line,rgba(255,255,255,.16)));
  background:color-mix(in srgb, var(--dealer-accent) 10%, rgba(255,255,255,.04));
  color:#fff;
}
.dd-topbar-website-actions .dd-btn-website:focus-visible{
  outline:2px solid color-mix(in srgb, var(--dealer-accent) 60%, transparent);
  outline-offset:2px;
}
.dd-topbar-website-actions .dd-btn-website svg{ width:15px; height:15px; flex:none; color:var(--dealer-accent); }
.dd-topbar-website-actions .dd-btn-website .dd-btn-ext{ width:11px; height:11px; opacity:.7; color:var(--dd-ink-2,rgba(255,255,255,.58)); margin-left:-2px; }
@media (max-width:880px){
  /* Tight screens: hide labels, keep just the globe icon so the cluster
     stays usable without dominating the topbar. */
  .dd-topbar-website-actions .dd-btn-website span{ display:none; }
  .dd-topbar-website-actions .dd-btn-website .dd-btn-ext{ display:none; }
  .dd-topbar-website-actions .dd-btn-website{ width:32px; padding:0; justify-content:center; }
}
@media (max-width:560px){
  /* Phone: drop the buttons entirely; the dealer can use the sidebar's
     Website link to reach the editor. */
  .dd-topbar-website-actions{ display:none; }
}

/* Create button + hover dropdown */
.dd-create-wrap{ position:relative; }
.dd-create-wrap .dd-create-panel{
  position:absolute; top:calc(100% + 8px); right:0; z-index:140; min-width:300px;
  flex-direction:column; gap:2px; padding:7px;
}
/* Click-toggle only: visible when JS removes [hidden]; otherwise hidden.
   (No :hover / :focus-within open — that kept it stuck open on outside click.) */
.dd-create-wrap .dd-create-panel[hidden]{ display:none !important; }
.dd-create-wrap .dd-create-panel:not([hidden]){ display:flex !important; }

/* Notifications sits in the far corner (rightmost) */
.dd-notif-wrap{ position:relative; }
.dd-notif-wrap .dd-notification-panel{ position:absolute; top:calc(100% + 8px); right:0; z-index:140; }

/* =============================================================================
   PACKAGE CARD — editable specs (TSER / IRR / Heat) + editable benefits
============================================================================= */
.qb-pkg-specs{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.qb-pkg-spec{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.qb-pkg-spec > span{ font-size:8.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--dd-ink-3, rgba(255,255,255,.40)); }
.qb-spec-field{
  display:flex; align-items:center; gap:2px; padding:5px 7px;
  border:1px solid var(--dd-line-2, rgba(255,255,255,.10)); border-radius:8px;
  background:var(--dd-bg-1, #0b0d12); transition:border-color .15s ease, box-shadow .15s ease;
}
.qb-spec-field:focus-within{ border-color:var(--dealer-accent); box-shadow:0 0 0 2px rgba(var(--dealer-accent-rgb), .18); }
.qb-spec-field input{
  width:100%; min-width:0; border:0; background:transparent; color:#fff;
  font:700 13px var(--dd-font-display, sans-serif); font-variant-numeric:tabular-nums; text-align:right;
}
.qb-spec-field input:focus{ outline:none; }
.qb-spec-field i{ font-style:normal; font-size:11px; color:var(--dd-ink-3, rgba(255,255,255,.40)); }
/* green = "what the customer gets" — the spec values read as performance */
.qb-spec-field input{ color:var(--dd-ok, #2ecf73); }

/* Editable benefits */
.qb-pkg-benefits-edit{ display:flex; flex-direction:column; gap:4px; }
.qb-pkg-benefits-edit > span{ font-size:8.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--dd-ink-3, rgba(255,255,255,.40)); }
.qb-pkg-benefits-edit textarea{
  resize:vertical; min-height:58px; padding:8px 10px; border-radius:10px;
  border:1px solid var(--dd-line-2, rgba(255,255,255,.10)); background:var(--dd-bg-1, #0b0d12);
  color:var(--dd-ink-1, rgba(255,255,255,.84)); font:inherit; font-size:11.5px; line-height:1.4;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.qb-pkg-benefits-edit textarea:focus{ outline:none; border-color:var(--dealer-accent); box-shadow:0 0 0 2px rgba(var(--dealer-accent-rgb), .18); }

/* =============================================================================
   FIX: stray blurred backdrop after a popup closes (was requiring a reload)
   Any backdrop that is [hidden] must be fully gone — no display, no blur.
============================================================================= */
.dd-create-modal-backdrop[hidden],
.dealer-confirm-backdrop[hidden], .dealer-confirm-modal[hidden],
.invoice-backdrop[hidden], .invoice-modal[hidden],
.qb-backdrop[hidden], [data-invoice-modal][hidden],
.qbc-backdrop[hidden],
.bkd-backdrop[hidden], [data-booking-detail-modal][hidden],
.bkr-backdrop[hidden],
.dd-nqa-backdrop[hidden],
.dd-created-invoice-backdrop[hidden], [data-created-invoice-modal][hidden],
.dd-help-drawer-backdrop[hidden],
.dd-cmd-backdrop[hidden], [data-command-palette][hidden],
.dd-manage-backdrop[hidden],
[data-manage-modal][hidden]{
  display:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  opacity:0 !important; pointer-events:none !important;
}
/* Belt-and-suspenders: a hidden ancestor must never paint a blur on its kids */
[hidden]{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }

/* =============================================================================
   MANAGE POPUP — compact one-screen layout, dashboard-style stepper, smart hint
============================================================================= */
.dd-manage-modal{ width:min(640px, 100%) !important; max-height:92vh; display:flex; flex-direction:column; }
.dd-manage-scroll{ padding:16px 18px 18px; overflow:auto; display:flex; flex-direction:column; gap:14px; }
.dd-mng-head{ display:flex; align-items:center; gap:13px; padding:15px 18px; }
.dd-mng-head-main{ display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.dd-mng-head-veh{ width:48px; height:40px; flex:none; display:grid; place-items:center; border-radius:11px; color:#fff; background:linear-gradient(135deg, rgba(var(--dealer-accent-rgb),.9), rgba(var(--dealer-accent-rgb),.55)); }
.dd-mng-head-veh svg{ width:auto; height:auto; max-width:40px; max-height:26px; }
.dd-mng-head-text h2{ margin:0; font-family:var(--dd-font-display, sans-serif); font-size:19px; font-weight:600; letter-spacing:-.015em; }
.dd-mng-amount-top{ flex:none; font-family:var(--dd-font-display, sans-serif); font-size:20px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; margin-right:6px; }

/* Stepper — matches the dashboard/quote-builder look */
.dd-mng-stepper{ display:flex; align-items:center; gap:4px; }
.dd-mng-step{ display:inline-flex; align-items:center; gap:7px; }
.dd-mng-step-dot{
  width:22px; height:22px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1.5px solid var(--dd-line-strong, rgba(255,255,255,.18)); background:var(--dd-bg-3, #1a1d25);
  color:var(--dd-ink-3, rgba(255,255,255,.40)); font:700 10.5px var(--dd-font-body, sans-serif); line-height:1;
}
.dd-mng-step-dot svg{ width:12px; height:12px; }
.dd-mng-step b{ font:600 11px var(--dd-font-body, sans-serif); color:var(--dd-ink-3, rgba(255,255,255,.40)); white-space:nowrap; }
.dd-mng-step.is-done .dd-mng-step-dot{ background:var(--dealer-accent); border-color:transparent; color:#fff; }
.dd-mng-step.is-done b{ color:var(--dd-ink-1, rgba(255,255,255,.84)); }
.dd-mng-step.is-current .dd-mng-step-dot{ border-color:var(--dealer-accent); color:#fff; box-shadow:0 0 0 3px rgba(var(--dealer-accent-rgb), .2); }
.dd-mng-step.is-current b{ color:#fff; }
.dd-mng-step-bar{ flex:1; min-width:14px; height:2px; border-radius:2px; background:var(--dd-line-2, rgba(255,255,255,.10)); }
.dd-mng-step-bar.is-done{ background:var(--dealer-accent); }
.dd-mng-stepper.is-cancelled{ opacity:.5; }

/* Smart status hint */
.dd-mng-hint{
  display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:12px;
  border:1px solid var(--dd-line-2, rgba(255,255,255,.10)); background:rgba(255,255,255,.02);
}
.dd-mng-hint-badge{
  flex:none; padding:3px 10px; border-radius:999px; font:700 10px var(--dd-font-body, sans-serif);
  letter-spacing:.06em; text-transform:uppercase; color:#fff;
}
.dd-mng-hint-text{ font-size:12.5px; color:var(--dd-ink-1, rgba(255,255,255,.84)); line-height:1.35; }
.dd-mng-hint.is-info{ border-color:rgba(var(--dd-info-rgb,90,150,255),.35); background:rgba(var(--dd-info-rgb,90,150,255),.07); }
.dd-mng-hint.is-info .dd-mng-hint-badge{ background:var(--dd-info,#5a96ff); }
.dd-mng-hint.is-ok{ border-color:rgba(var(--dd-ok-rgb,46,207,115),.35); background:rgba(var(--dd-ok-rgb,46,207,115),.07); }
.dd-mng-hint.is-ok .dd-mng-hint-badge{ background:var(--dd-ok,#2ecf73); }
.dd-mng-hint.is-warn{ border-color:rgba(var(--dd-warn-rgb,240,170,60),.4); background:rgba(var(--dd-warn-rgb,240,170,60),.08); }
.dd-mng-hint.is-warn .dd-mng-hint-badge{ background:var(--dd-warn,#f0aa3c); color:#1a1205; }
.dd-mng-hint.is-danger{ border-color:rgba(var(--dd-danger-rgb,224,86,110),.4); background:rgba(var(--dd-danger-rgb,224,86,110),.08); }
.dd-mng-hint.is-danger .dd-mng-hint-badge{ background:var(--dd-danger,#e0566e); }
.dd-mng-hint.is-wait{ border-color:var(--dd-line-2, rgba(255,255,255,.10)); }
.dd-mng-hint.is-wait .dd-mng-hint-badge{ background:var(--dd-ink-3, rgba(255,255,255,.40)); }

/* Compact info grid: vehicle card + facts */
.dd-mng-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; align-items:start; }
.dd-mng-veh-card{ display:flex; gap:11px; align-items:center; padding:12px; border-radius:12px; border:1px solid var(--dd-line, rgba(255,255,255,.06)); background:var(--dd-bg-1, #0b0d12); }
.dd-mng-irows{ display:flex; flex-direction:column; gap:0; border:1px solid var(--dd-line, rgba(255,255,255,.06)); border-radius:12px; overflow:hidden; background:var(--dd-bg-1, #0b0d12); }
.dd-mng-irow{ padding:8px 12px !important; }
.dd-mng-irow + .dd-mng-irow{ border-top:1px solid var(--dd-line, rgba(255,255,255,.06)); }

/* Action bar */
.dd-mng-actionbar{ display:flex; flex-direction:column; gap:9px; }
.dd-mng-actions{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.dd-mng-act{ justify-content:center; }
.dd-mng-act.is-primary{ grid-column:1 / -1; }
.dd-mng-closeout{ display:flex; gap:8px; }

@media (max-width:560px){
  .dd-mng-grid{ grid-template-columns:1fr; }
  .dd-mng-actions{ grid-template-columns:repeat(2, 1fr); }
  .dd-mng-stepper{ gap:2px; }
  .dd-mng-step b{ display:none; }
  .dd-mng-step-bar{ min-width:8px; }
}

/* =============================================================================
   MANAGE POPUP v2 — dashboard-style buttons, tighter, fuller info
============================================================================= */
.dd-manage-modal{ width:min(600px, 100%) !important; }
.dd-manage-scroll{ padding:14px 16px 16px; gap:12px; }

/* Buttons in the dashboard's button language */
.dd-mng-act{
  display:flex !important; align-items:center !important; justify-content:flex-start; gap:9px !important;
  padding:10px 12px !important; border-radius:11px !important;
  border:1px solid var(--dd-line-2, rgba(255,255,255,.10)) !important;
  background:rgba(255,255,255,.025) !important; color:var(--dd-ink-1, rgba(255,255,255,.84)) !important;
  font:600 12.5px var(--dd-font-body, sans-serif) !important; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease !important;
}
.dd-mng-act:hover{ border-color:var(--dd-line-strong, rgba(255,255,255,.18)) !important; background:rgba(255,255,255,.05) !important; color:#fff !important; transform:translateY(-1px); }
.dd-mng-act[disabled]{ opacity:.4; cursor:not-allowed; transform:none; }
.dd-mng-act-ico{ width:16px; height:16px; flex:none; display:grid; place-items:center; color:var(--dealer-accent-3, #ff8c92); }
.dd-mng-act-ico svg{ width:16px; height:16px; }
.dd-mng-act-lbl{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Primary = accent gradient, full width, the smart next step */
.dd-mng-act.is-primary{
  grid-column:1 / -1; justify-content:center;
  background:var(--dd-sys-grad) !important; border-color:transparent !important; color:#fff !important;
  font-weight:700 !important; font-size:14px !important; padding:13px !important;
  box-shadow:0 8px 22px -8px rgba(var(--dealer-accent-rgb), .55) !important;
}
.dd-mng-act.is-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 28px -8px rgba(var(--dealer-accent-rgb), .7) !important; }
.dd-mng-act.is-primary .dd-mng-act-ico{ color:#fff; }
.dd-mng-act.is-ok{ color:var(--dd-ok, #2ecf73) !important; } .dd-mng-act.is-ok .dd-mng-act-ico{ color:var(--dd-ok, #2ecf73); }
.dd-mng-act.is-ok:hover{ border-color:rgba(var(--dd-ok-rgb,46,207,115),.4) !important; background:rgba(var(--dd-ok-rgb,46,207,115),.10) !important; color:var(--dd-ok,#2ecf73) !important; }
.dd-mng-act.is-danger{ color:var(--dd-danger, #e0566e) !important; } .dd-mng-act.is-danger .dd-mng-act-ico{ color:var(--dd-danger, #e0566e); }
.dd-mng-act.is-danger:hover{ border-color:rgba(var(--dd-danger-rgb,224,86,110),.4) !important; background:rgba(var(--dd-danger-rgb,224,86,110),.10) !important; color:var(--dd-danger,#e0566e) !important; }

/* Tighter info rows + 2-up grid that wraps nicely */
.dd-mng-grid{ gap:10px; }
.dd-mng-irow{ padding:7px 11px !important; gap:9px; }
.dd-mng-irow-label{ font-size:9px !important; letter-spacing:.10em; }
.dd-mng-irow-val, .dd-mng-irow-link{ font-size:12.5px !important; }
.dd-mng-irow-ico{ width:26px !important; height:26px !important; }
.dd-mng-irow-ico svg{ width:14px; height:14px; }
.dd-mng-veh-card{ padding:11px !important; }
.dd-mng-veh-card-ico{ width:46px; height:34px; display:grid; place-items:center; color:var(--dealer-accent-3,#ff8c92); }
.dd-mng-veh-card-ico svg{ width:auto; height:auto; max-width:42px; max-height:26px; }

/* Add-ons row spans full width under the grid */
.dd-mng-irow-stack{ border-top:1px solid var(--dd-line, rgba(255,255,255,.06)); }
.dd-mng-addon{ font-size:11.5px; }

.dd-mng-closeout .dd-mng-close-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(138px, 1fr)); gap:8px; }
.dd-mng-terminal{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:11px; border:1px solid var(--dd-line-2, rgba(255,255,255,.10)); background:rgba(255,255,255,.02); }
.dd-mng-terminal-txt{ font-size:12px; color:var(--dd-ink-2, rgba(255,255,255,.58)); }

/* =============================================================================
   MANAGE POPUP v3 — Schedule at bottom, tight button grid, centered stepper,
   full-accent car icon, + Schedule-booking date-picker popup
============================================================================= */
/* Stepper: perfectly center the digit/checkmark */
.dd-mng-step-dot{
  line-height:1 !important; font-size:11px !important; font-weight:700 !important;
  text-align:center; padding:0 !important; box-sizing:border-box;
}
.dd-mng-step-dot > svg{ display:block; }

/* Car icon in the header: keep it FULL accent gradient (don't recolor on states) */
.dd-mng-head-veh{ color:#fff !important; background:linear-gradient(135deg, rgba(var(--dealer-accent-rgb),1), rgba(var(--dealer-accent-rgb),.7)) !important; }
.dd-mng-head-veh svg, .dd-mng-head-veh svg *{ fill:#fff !important; stroke:#fff !important; color:#fff !important; }
.dd-mng-veh-card-ico{ color:var(--dealer-accent) !important; }
.dd-mng-veh-card-ico svg, .dd-mng-veh-card-ico svg *{ fill:var(--dealer-accent) !important; stroke:var(--dealer-accent) !important; }

/* Secondary actions: auto-fill grid that fills the width, no empty space */
.dd-mng-actions{ display:grid !important; grid-template-columns:repeat(auto-fit, minmax(138px, 1fr)) !important; gap:8px !important; }
.dd-mng-act{ width:100%; }

/* Footer: close-out row (complete/cancel) + the primary CTA at the very bottom */
.dd-mng-footer{ display:flex; flex-direction:column; gap:9px; margin-top:2px; }
.dd-mng-closeout .dd-mng-close-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(138px, 1fr)); gap:8px; }
.dd-mng-footer .dd-mng-act.is-primary{ width:100%; }

/* ---- Schedule-booking date-picker popup ---- */
.dd-sched-backdrop[hidden], #dd-schedule-modal[hidden]{ display:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; opacity:0 !important; pointer-events:none !important; }
.dd-sched-modal{ width:min(440px, 100%) !important; display:flex; flex-direction:column; }
.dd-sched-eyebrow{ font:700 9.5px var(--dd-font-body, sans-serif); letter-spacing:.12em; text-transform:uppercase; color:var(--dealer-accent-3, #ff8c92); }
.dd-sched-modal h2{ margin:2px 0 0; font-family:var(--dd-font-display, sans-serif); font-size:16px; font-weight:600; }
.dd-sched-body{ padding:16px 18px; display:flex; flex-direction:column; gap:14px; }
.dd-sched-field{ display:flex; flex-direction:column; gap:6px; }
.dd-sched-field > span{ font:700 9.5px var(--dd-font-body, sans-serif); letter-spacing:.10em; text-transform:uppercase; color:var(--dd-ink-3, rgba(255,255,255,.40)); }
.dd-sched-field input[type=date]{
  padding:10px 12px; border-radius:10px; border:1px solid var(--dd-line-2, rgba(255,255,255,.10));
  background:var(--dd-bg-1, #0b0d12); color:#fff; font:inherit; font-size:14px; color-scheme:dark;
}
.dd-sched-field input[type=date]:focus{ outline:none; border-color:var(--dealer-accent); box-shadow:0 0 0 3px rgba(var(--dealer-accent-rgb),.18); }
.dd-sched-times{ display:grid; grid-template-columns:repeat(3, 1fr); gap:7px; }
.dd-sched-time{
  padding:8px 6px; border-radius:9px; border:1px solid var(--dd-line-2, rgba(255,255,255,.10));
  background:rgba(255,255,255,.02); color:var(--dd-ink-1, rgba(255,255,255,.84)); font:600 12px var(--dd-font-body, sans-serif);
  cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.dd-sched-time:hover{ border-color:var(--dd-line-strong, rgba(255,255,255,.18)); color:#fff; }
.dd-sched-time.is-on{ background:var(--dd-sys-grad); border-color:transparent; color:#fff; }
.dd-sched-notify{ display:flex; align-items:center; gap:9px; cursor:pointer; font-size:12.5px; color:var(--dd-ink-1, rgba(255,255,255,.84)); }
.dd-sched-notify input{ width:16px; height:16px; accent-color:var(--dealer-accent); }
.dd-sched-foot{ display:grid; grid-template-columns:1fr 1.6fr; gap:9px; padding:0 18px 18px; }
.dd-sched-foot .dd-mng-act{ justify-content:center; }

/* =============================================================================
   MANAGE POPUP v4 — exact mockup layout: avatar initials, tint selection,
   actions section, full-width delete, inline schedule in status
============================================================================= */
/* Avatar with the customer's initials + their color */
.dd-mng-head-avatar{
  width:50px; height:50px; flex:none; display:grid; place-items:center; border-radius:13px;
  font:700 18px var(--dd-font-display, sans-serif); color:#fff; letter-spacing:.01em;
  background:linear-gradient(135deg, var(--cust, var(--dealer-accent)), color-mix(in srgb, var(--cust, var(--dealer-accent)) 65%, #000));
  box-shadow:0 6px 18px -8px var(--cust-soft, rgba(255,255,255,.2));
}

/* Status hint: inline action button on the right (Schedule booking) */
.dd-mng-hint{ flex-wrap:wrap; }
.dd-mng-hint-text{ flex:1; min-width:120px; }
.dd-mng-hint-btn{
  flex:none; display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:9px;
  border:1px solid rgba(var(--dd-ok-rgb,46,207,115),.5); background:transparent;
  color:var(--dd-ok, #2ecf73); font:700 12px var(--dd-font-body, sans-serif); cursor:pointer;
  transition:background .15s ease, transform .12s ease;
}
.dd-mng-hint-btn:hover{ background:rgba(var(--dd-ok-rgb,46,207,115),.12); transform:translateY(-1px); }
.dd-mng-hint-btn svg{ width:15px; height:15px; }

/* Vehicle card: label on top, icon + name in a row (matches mockup) */
.dd-mng-veh-card{ display:flex; flex-direction:column; gap:6px; justify-content:center; }
.dd-mng-veh-card-row{ display:flex; align-items:center; gap:11px; }
.dd-mng-veh-card-row strong{ font-family:var(--dd-font-display, sans-serif); font-size:19px; font-weight:700; letter-spacing:-.01em; }
.dd-mng-veh-card-ico{ width:44px; height:30px; flex:none; }
.dd-mng-veh-card-ico svg, .dd-mng-veh-card-ico svg *{ fill:var(--dealer-accent) !important; stroke:var(--dealer-accent) !important; }

/* Tint selection block */
.dd-mng-tint{
  display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:14px;
  padding:14px 16px; border-radius:14px; border:1px solid var(--dd-line, rgba(255,255,255,.06));
  background:var(--dd-bg-1, #0b0d12);
}
.dd-mng-tint-ico{ width:42px; height:30px; flex:none; color:var(--dd-ink-1, rgba(255,255,255,.84)); }
.dd-mng-tint-ico svg{ width:100%; height:100%; }
.dd-mng-tint-main{ display:flex; flex-direction:column; gap:1px; }
.dd-mng-tint-main strong{ font-family:var(--dd-font-display, sans-serif); font-size:16px; font-weight:700; }
.dd-mng-tint-vlt{ font-size:11.5px; color:var(--dd-ink-2, rgba(255,255,255,.58)); }
.dd-mng-tint-detail{ margin:0; font-size:12.5px; line-height:1.4; color:var(--dd-ink-2, rgba(255,255,255,.58)); border-left:1px solid var(--dd-line-2, rgba(255,255,255,.10)); padding-left:14px; }

/* Actions section (bordered card like the mockup) */
.dd-mng-actions-wrap{
  border:1px solid var(--dd-line, rgba(255,255,255,.06)); border-radius:14px; padding:13px;
  display:flex; flex-direction:column; gap:9px; background:rgba(255,255,255,.012);
}
.dd-mng-section-eyebrow{ font:700 9.5px var(--dd-font-body, sans-serif); letter-spacing:.12em; text-transform:uppercase; color:var(--dd-ink-3, rgba(255,255,255,.40)); }
.dd-mng-actions{ display:grid !important; grid-template-columns:repeat(3, 1fr) !important; gap:8px !important; }
.dd-mng-act.is-full{ grid-column:1 / -1; width:100%; justify-content:flex-start; }
@media (max-width:560px){ .dd-mng-actions{ grid-template-columns:repeat(2,1fr) !important; } }

/* Client card avatar = initials in the customer's color */
.ddm-client-avatar-initials{
  display:grid !important; place-items:center; font:700 14px var(--dd-font-display, sans-serif); color:#fff !important;
  background:linear-gradient(135deg, var(--cust, var(--dealer-accent)), color-mix(in srgb, var(--cust, var(--dealer-accent)) 60%, #000)) !important;
  border:0 !important; box-shadow:0 4px 12px -6px var(--cust-soft, rgba(255,255,255,.2));
}
.ddm-client-avatar-initials svg{ display:none; }
/* A subtle left color tab on the card so the customer color reads at a glance */
.ddm-client{ position:relative; }
.ddm-client::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--cust, transparent); opacity:.85; }

/* Calendar events tinted by customer color */
.dealer-event[style*="--cust"]{
  border-left:3px solid var(--cust, var(--dealer-accent)) !important;
  background:linear-gradient(90deg, var(--cust-soft, rgba(255,255,255,.1)), rgba(255,255,255,.02)) !important;
}

/* Customer lead rows: colored avatar + left color tab */
.dd-detail-avatar-cust{
  background:linear-gradient(135deg, var(--cust, var(--dealer-accent)), color-mix(in srgb, var(--cust, var(--dealer-accent)) 60%, #000)) !important;
  color:#fff !important;
}
.dd-lead-row[style*="--cust"]{ position:relative; }
.dd-lead-row[style*="--cust"]::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:var(--cust); opacity:.8; }

/* Shared customer asset icon: vehicle today, architectural/marine/aviation later. */
.dd-asset-icon,
.dd-lead-asset-icon,
.dd-q-asset,
.ddm-client-asset,
.dd-mng-profile-asset,
.dd-bk-customer-asset{
  display:inline-grid;
  place-items:center;
  flex:none;
  color:var(--dealer-accent);
}
.dd-lead-summary{
  grid-template-columns:34px minmax(0,1fr) !important;
  align-items:center;
  column-gap:10px;
}
.dd-lead-copy{ min-width:0; display:grid; gap:4px; }
.dd-lead-asset-icon{
  width:34px; height:28px; border-radius:9px;
  background:rgba(var(--dealer-accent-rgb),.08);
  border:1px solid rgba(var(--dealer-accent-rgb),.18);
}
.dd-lead-asset-icon svg{ width:auto; height:auto; max-width:28px; max-height:18px; }
.dd-q-asset svg{ width:auto; height:auto; max-width:28px; max-height:21px; }
.ddm-client-asset{
  width:30px; height:24px; margin-left:-5px; border-radius:8px;
  background:rgba(var(--dealer-accent-rgb),.08);
  border:1px solid rgba(var(--dealer-accent-rgb),.16);
}
.ddm-client-asset svg{ width:auto; height:auto; max-width:25px; max-height:16px; }
.dd-mng-profile-asset{
  width:46px; height:38px; margin-left:-5px; border-radius:12px;
  background:rgba(var(--dealer-accent-rgb),.08);
  border:1px solid rgba(var(--dealer-accent-rgb),.18);
}
.dd-mng-profile-asset svg{ width:auto; height:auto; max-width:36px; max-height:24px; }
.dd-mo-asset-ico{ color:var(--dealer-accent) !important; background:rgba(var(--dealer-accent-rgb),.08) !important; }
.dd-mo-asset-ico svg{ width:auto !important; height:auto !important; max-width:22px; max-height:15px; }
.dd-bk-customer-asset{
  width:34px; height:28px; border-radius:9px;
  background:rgba(var(--dealer-accent-rgb),.08);
  border:1px solid rgba(var(--dealer-accent-rgb),.16);
}
.dd-bk-customer-asset svg{ width:auto; height:auto; max-width:27px; max-height:18px; }
.dd-detail-head-asset{ display:flex; align-items:center; gap:10px; min-width:0; }
.dd-detail-head-asset > span:last-child{ display:block; min-width:0; }
.dd-detail-head-asset .dd-bk-customer-asset{ display:inline-grid; margin:0; color:var(--dealer-accent); }

/* =============================================================================
   MANAGE POPUP v5 — two-column layout (left = order, right = customer + actions)
============================================================================= */
/* 2026-05-27 — Anton: "это окно тоже огромное уменьши до 65%". Scaled
   manage-record modal from 1040×92vh down to 720×85vh (~65% smaller area)
   so it doesn't dominate the viewport. Sidebar shrinks proportionally
   (380→280px max) and internal paddings shave 30-40% off too. */
.dd-manage-modal{ width:min(720px, 92vw) !important; max-height:85vh !important; padding:0 !important; position:relative; }
.dd-mng-close-float{ position:absolute; top:16px; right:16px; z-index:5; }
/* Floating header actions on the manage popup — keeps the Delete record
   button reachable without scrolling the right column. */
.dd-mng-float-actions{ position:absolute; top:12px; right:12px; z-index:6; display:inline-flex; align-items:center; gap:8px; }
.dd-mng-float-actions .dd-mng-close-float{ position:static; top:auto; right:auto; }
.dd-mng-float-btn{
  width:32px; height:32px; display:grid; place-items:center;
  border:1px solid var(--dd-line, rgba(255,255,255,.08));
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--dd-ink-2, rgba(255,255,255,.65));
  cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dd-mng-float-btn svg{ width:16px; height:16px; }
.dd-mng-float-btn:hover{ background:rgba(255,255,255,.08); color:var(--dd-ink-0, #fff); }
.dd-mng-float-delete:hover{
  background:rgba(var(--dd-danger-rgb, 248,113,113), .15);
  border-color:rgba(var(--dd-danger-rgb, 248,113,113), .55);
  color:var(--dd-danger, #f87171);
}
.dd-mng-two{ display:grid; grid-template-columns:minmax(220px, 280px) 1fr; min-height:0; max-height:85vh; }

/* ---- LEFT: order panel ---- */
.dd-mng-left{ background:var(--dd-bg-1, #0b0d12); border-right:1px solid var(--dd-line, rgba(255,255,255,.06)); padding:14px 14px 16px; overflow:auto; display:flex; flex-direction:column; gap:12px; }
.dd-mng-left-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.dd-mng-order-no{ font-family:var(--dd-font-display, sans-serif); font-size:19px; font-weight:700; letter-spacing:-.01em; }
.dd-mng-order-sub{ font-size:12px; color:var(--dd-ink-2, rgba(255,255,255,.58)); margin-top:3px; line-height:1.4; }
.dd-mng-order-status{ flex:none; padding:4px 11px; border-radius:999px; font:700 10px var(--dd-font-body, sans-serif); letter-spacing:.06em; text-transform:uppercase; color:#fff; }
.dd-mng-order-status.is-ok{ background:var(--dd-ok, #2ecf73); }
.dd-mng-order-status.is-info{ background:var(--dd-info, #5a96ff); }
.dd-mng-order-status.is-warn{ background:var(--dd-warn, #f0aa3c); color:#1a1205; }
.dd-mng-order-status.is-danger{ background:var(--dd-danger, #e0566e); }

.dd-mng-order-list{ display:flex; flex-direction:column; border:1px solid var(--dd-line, rgba(255,255,255,.06)); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.012); }
.dd-mo-row{ display:flex; gap:12px; padding:13px 14px; align-items:flex-start; }
.dd-mo-row + .dd-mo-row{ border-top:1px solid var(--dd-line, rgba(255,255,255,.06)); }
.dd-mo-ico{ width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.05); color:var(--dd-ink-2, rgba(255,255,255,.58)); }
.dd-mo-ico svg{ width:16px; height:16px; }
.dd-mo-body{ min-width:0; display:flex; flex-direction:column; gap:2px; flex:1; }
.dd-mo-label{ font:700 9.5px var(--dd-font-body, sans-serif); letter-spacing:.12em; text-transform:uppercase; color:var(--dd-ink-3, rgba(255,255,255,.40)); }
.dd-mo-body strong{ font-size:14px; font-weight:700; color:var(--dd-ink-0, #fff); line-height:1.3; }
.dd-mo-sub{ font-size:11.5px; color:var(--dd-ink-2, rgba(255,255,255,.58)); line-height:1.35; }
.dd-mo-veh{ display:flex; align-items:center; gap:9px; }
.dd-mo-veh-ico{ width:34px; height:24px; flex:none; }
.dd-mo-veh-ico svg, .dd-mo-veh-ico svg *{ fill:var(--dealer-accent) !important; stroke:var(--dealer-accent) !important; }
.dd-mo-addons{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.dd-mo-row.is-total{ background:rgba(255,255,255,.025); }
.dd-mo-total{ font-family:var(--dd-font-display, sans-serif) !important; font-size:20px !important; color:#fff !important; }

/* ---- RIGHT: customer + actions ---- */
.dd-mng-right{ padding:14px 16px 16px; overflow:auto; display:flex; flex-direction:column; gap:12px; }
.dd-mng-right .dd-mng-stepper{ margin-top:4px; padding-right:42px; }
.dd-mng-profile{ display:flex; align-items:center; gap:14px; }
.dd-mng-profile .dd-mng-head-avatar{ width:54px; height:54px; font-size:20px; border-radius:14px; }
/* 2026-05-27 (round 3) — Anton scaled the entire manage modal down to
   ~65%. Vehicle thumb shrinks proportionally from 240×140 → 168×100 so
   it still dominates the customer-profile row in the smaller layout. */
.dd-mng-profile-vehicle{
  width:168px; height:100px; flex:none; display:grid; place-items:center;
  margin-right:2px; overflow:visible; color:var(--dealer-accent);
}
.dd-mng-profile-vehicle-img{
  width:168px; height:100px; display:block; object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.55));
}
.dd-mng-profile-vehicle-svg{
  width:156px; height:92px; display:grid; place-items:center;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.55));
}
.dd-mng-profile-vehicle-svg svg{ width:156px; height:92px; display:block; }
.dd-mng-profile-text h2{ margin:0; font-family:var(--dd-font-display, sans-serif); font-size:24px; font-weight:700; letter-spacing:-.015em; }
.dd-mng-profile-text .dd-mng-sub{ margin-top:6px; }

.dd-mng-contact{ display:grid; grid-template-columns:1fr 1fr; gap:14px; border:1px solid var(--dd-line, rgba(255,255,255,.06)); border-radius:14px; padding:14px; background:rgba(255,255,255,.012); }
.dd-mng-contact-col{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.dd-mng-contact .dd-mo-row{ padding:0; border:0; }
.dd-mng-contact .dd-mo-row + .dd-mo-row{ border:0; }
.dd-mo-note{ font-size:13px; color:var(--dd-ink-1, rgba(255,255,255,.84)); line-height:1.45; }

.dd-mng-right .dd-mng-actions{ display:grid !important; grid-template-columns:repeat(3, 1fr) !important; gap:10px !important; }
.dd-mng-right .dd-mng-act{ padding:16px 14px !important; }
.dd-mng-footer .dd-mng-act.is-primary{ padding:16px !important; font-size:15px !important; }

@media (max-width:820px){
  .dd-mng-two{ grid-template-columns:1fr; max-height:none; }
  .dd-mng-left{ border-right:0; border-bottom:1px solid var(--dd-line, rgba(255,255,255,.06)); }
  .dd-mng-right .dd-mng-actions{ grid-template-columns:repeat(2,1fr) !important; }
  .dd-mng-contact{ grid-template-columns:1fr; }
  /* Mobile bump kept proportional to the desktop enlargement above. */
  .dd-mng-profile-vehicle{ width:184px; height:112px; }
  .dd-mng-profile-vehicle-img{ width:184px; height:112px; }
  .dd-mng-profile-vehicle-svg{ width:172px; height:100px; }
  .dd-mng-profile-vehicle-svg svg{ width:172px; height:100px; }
}

/* =============================================================================
   v6 — status pill (green, squarer), Active Clients flags, next-step, countdown
============================================================================= */
/* Order status pill: less rounded; approved/ok = green */
.dd-mng-order-status{ border-radius:7px !important; }
.dd-mng-order-status.is-ok{ background:var(--dd-ok, #2ecf73) !important; color:#06140b !important; }

/* "Next step" framing around the primary CTA */
.dd-mng-nextstep{ display:flex; flex-direction:column; gap:6px; }
.dd-mng-nextstep-lab{ font:700 9.5px var(--dd-font-body, sans-serif); letter-spacing:.14em; text-transform:uppercase; color:var(--dd-ink-3, rgba(255,255,255,.40)); }

/* Booking countdown in the order list */
.dd-mo-countdown{ color:var(--dd-ok, #2ecf73) !important; font-variant-numeric:tabular-nums; }
.dd-mo-row.is-countdown .dd-mo-ico{ color:var(--dd-ok, #2ecf73); }

/* Active Clients: Action Needed flag + booking countdown chip */
.ddm-client-top{ position:relative; }
.ddm-client-flag{ margin-left:auto; }
.ddm-flag{ display:inline-flex; align-items:center; gap:5px; min-height:20px; padding:3px 9px; border-radius:999px; font:800 9.5px var(--dd-font-body, sans-serif); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.ddm-flag b{ width:5px; height:5px; border-radius:50%; background:currentColor; }
.ddm-flag svg{ width:12px; height:12px; }
.ddm-flag.is-warn{ background:rgba(var(--dd-warn-rgb,240,170,60),.16); color:var(--dd-warn,#f0aa3c); }
.ddm-flag.is-info{ background:rgba(var(--dd-info-rgb,90,150,255),.16); color:var(--dd-info,#5a96ff); }
.ddm-flag.is-booked{ background:rgba(var(--dd-ok-rgb,46,207,115),.14); color:var(--dd-ok,#2ecf73); }
/* Cards needing action get a subtle accent ring so they pop to the top */
.ddm-client.is-needs{ border-color:rgba(var(--dd-warn-rgb,240,170,60),.32); }
.ddm-client.is-needs::before{ background:var(--dd-warn,#f0aa3c); }

/* The "~" estimate marker on prices = dealer accent color, everywhere */
.dd-est-tilde{ color:var(--dealer-accent); font-weight:700; }

/* =============================================================================
   Center notices — semantic colors: approved = green, scheduled = blue
============================================================================= */
.dd-live-center-chat.is-approved{ border-color:rgba(var(--dd-ok-rgb,46,207,115),.5) !important; }
.dd-live-center-chat.is-approved .dd-lcn-ico{ background:rgba(var(--dd-ok-rgb,46,207,115),.16) !important; color:var(--dd-ok,#2ecf73) !important; }
.dd-live-center-chat.is-approved .dd-lcn-kicker small{ color:var(--dd-ok,#2ecf73) !important; }
.dd-live-center-chat.is-approved .dd-lcn-cta{ background:var(--dd-ok,#2ecf73) !important; color:#06140b !important; }

.dd-live-center-chat.is-scheduled{ border-color:rgba(var(--dd-info-rgb,90,150,255),.5) !important; }
.dd-live-center-chat.is-scheduled .dd-lcn-ico{ background:rgba(var(--dd-info-rgb,90,150,255),.16) !important; color:var(--dd-info,#5a96ff) !important; }
.dd-live-center-chat.is-scheduled .dd-lcn-kicker small{ color:var(--dd-info,#5a96ff) !important; }
.dd-live-center-chat.is-scheduled .dd-lcn-cta{ background:var(--dd-info,#5a96ff) !important; color:#04121f !important; }

/* New quote keeps the accent (red) — already default. Ensure ico tinted. */
.dd-live-center-chat.is-quote .dd-lcn-ico{ background:rgba(var(--dealer-accent-rgb),.16) !important; color:var(--dealer-accent-3,#ff8c92) !important; }

/* =============================================================================
   Schedule booking — interactive month calendar
============================================================================= */
.dd-sched-modal{ width:min(760px, 96vw) !important; }
.dd-sched-body{ display:grid; grid-template-columns:1fr 240px; gap:20px; padding:18px 20px; }
@media (max-width:680px){ .dd-sched-body{ grid-template-columns:1fr; } }

.dd-sched-cal{ min-width:0; }
.dd-cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.dd-cal-arrow{ width:32px; height:32px; display:grid; place-items:center; border-radius:9px; border:1px solid var(--dd-line,rgba(255,255,255,.08)); background:rgba(255,255,255,.03); color:var(--dd-ink-1,rgba(255,255,255,.84)); cursor:pointer; }
.dd-cal-arrow:hover{ background:rgba(255,255,255,.07); }
.dd-cal-arrow svg{ width:16px; height:16px; }
.dd-cal-month{ font-family:var(--dd-font-display,sans-serif); font-size:15px; font-weight:600; }
.dd-cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; }
.dd-cal-dow span{ text-align:center; font:700 10px var(--dd-font-body,sans-serif); letter-spacing:.06em; color:var(--dd-ink-3,rgba(255,255,255,.4)); }
.dd-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.dd-cal-cell{ position:relative; aspect-ratio:1/1; min-height:42px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1px solid var(--dd-line,rgba(255,255,255,.06)); border-radius:10px; background:rgba(255,255,255,.018); color:var(--dd-ink-1,rgba(255,255,255,.84)); cursor:pointer; font-variant-numeric:tabular-nums; transition:background .15s ease,border-color .15s ease,transform .12s ease; }
.dd-cal-cell b{ font-size:13.5px; font-weight:600; }
.dd-cal-cell.is-empty{ border:0; background:none; cursor:default; }
.dd-cal-cell:not(.is-empty):not(.is-past):hover{ background:rgba(var(--dealer-accent-rgb),.12); border-color:rgba(var(--dealer-accent-rgb),.4); transform:translateY(-1px); }
.dd-cal-cell.is-today{ border-color:rgba(255,255,255,.28); }
.dd-cal-cell.is-past{ opacity:.32; cursor:not-allowed; }
.dd-cal-cell.is-sel{ background:var(--dealer-accent) !important; border-color:var(--dealer-accent) !important; color:#fff !important; box-shadow:0 6px 16px -6px rgba(var(--dealer-accent-rgb),.7); }
.dd-cal-cell.is-sel .dd-cal-dots i{ background:rgba(255,255,255,.85) !important; }
.dd-cal-dots{ display:flex; gap:3px; }
.dd-cal-dots i{ width:5px; height:5px; border-radius:50%; display:block; }

.dd-sched-side{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.dd-sched-side .dd-sched-field > span{ display:block; font:700 10px var(--dd-font-body,sans-serif); letter-spacing:.1em; text-transform:uppercase; color:var(--dd-ink-3,rgba(255,255,255,.4)); margin-bottom:8px; }
.dd-sched-times{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.dd-sched-time{ padding:8px 4px; border-radius:8px; border:1px solid var(--dd-line,rgba(255,255,255,.08)); background:rgba(255,255,255,.03); color:var(--dd-ink-1,rgba(255,255,255,.84)); font-size:11.5px; font-weight:600; cursor:pointer; transition:background .15s,border-color .15s; }
.dd-sched-time:hover{ background:rgba(255,255,255,.07); }
.dd-sched-time.is-on{ background:var(--dealer-accent); border-color:var(--dealer-accent); color:#fff; }
.dd-sched-day-evs{ display:flex; flex-direction:column; gap:6px; max-height:170px; overflow:auto; }
.dd-sched-day-ev{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; background:rgba(255,255,255,.03); border-left:3px solid var(--cust,var(--dealer-accent)); }
.dd-sched-day-ev b{ font-size:12px; font-variant-numeric:tabular-nums; min-width:62px; }
.dd-sched-day-ev span{ font-size:12px; color:var(--dd-ink-2,rgba(255,255,255,.58)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd-sched-day-empty{ font-size:12px; color:var(--dd-ink-3,rgba(255,255,255,.4)); padding:10px; border:1px dashed var(--dd-line,rgba(255,255,255,.1)); border-radius:9px; text-align:center; }
.dd-sched-foot{ display:flex; align-items:center; gap:10px; padding:14px 20px; border-top:1px solid var(--dd-line,rgba(255,255,255,.06)); }
.dd-sched-picked{ margin-right:auto; font-size:12.5px; font-weight:600; color:var(--dealer-accent-3,#ff8c92); }

/* Edit button to the right of the vehicle details in the detail popup */
.dd-mo-row.is-veh{ align-items:center; }
.dd-mo-edit{ flex:none; align-self:center; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:9px; border:1px solid rgba(var(--dealer-accent-rgb),.4); background:rgba(var(--dealer-accent-rgb),.1); color:var(--dealer-accent-3,#ff8c92); font:700 12px var(--dd-font-body,sans-serif); cursor:pointer; transition:background .15s,border-color .15s; }
.dd-mo-edit:hover{ background:rgba(var(--dealer-accent-rgb),.18); border-color:var(--dealer-accent); }
.dd-mo-edit svg{ width:14px; height:14px; }

/* =============================================================================
   Log out stays hidden by default — only revealed when "Dealer Admin" clicked.
   Fix: in the collapsed sidebar the base rule set min-height:36px which forced
   the logout button to show even with max-height:0. Gate it behind is-menu-open.
============================================================================= */
.dd-app[data-sidebar-collapsed="true"] .dd-logout{ min-height:0 !important; max-height:0 !important; opacity:0 !important; pointer-events:none !important; }
.dd-app[data-sidebar-collapsed="true"] .dd-sidebar-foot.is-menu-open .dd-logout{ min-height:36px !important; max-height:60px !important; opacity:1 !important; pointer-events:auto !important; }

/* Next recommended action — tint the icon (and a subtle left accent) with the
   customer's own color when the task is tied to a specific client. */
.dd-next-ico.is-cust{ background:linear-gradient(135deg, var(--cust), color-mix(in srgb, var(--cust) 70%, #000)) !important; }
.dd-next[style*="--cust"]{ position:relative; }
.dd-next[style*="--cust"]::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--cust); opacity:.9; }