/* =====================================================================
   Prime Car — Showroom dashboard (2026-10-22). Port of prototype/showroom
   to the live view app/Views/_showroom/dashboard/index.php. Every class
   is prefixed sd- so nothing here can reach the Classic theme.
   ===================================================================== */
:root[data-theme="showroom"] {
    --sd-gap: 18px;
    --sd-r: 28px;
    --sd-rose: #FBE3E4;  --sd-rose-ink: #A3202B;
    --sd-lilac: #ECE6FA; --sd-lilac-ink: #5B3FA6;
    --sd-sun: #FBF0C9;   --sd-sun-ink: #7A5A00;
    --sd-mint: #DDF3E6;  --sd-mint-ink: #1F6B43;
    --sd-sky: #DFEEFB;   --sd-sky-ink: #1E5C93;
    --sd-sand: #EFEBE3;  --sd-sand-ink: #5E574B;
    --sd-frame: #2B2A27; --sd-frame-2: #4A4842;
    --sd-car-base: #E4E1DA;
    --sd-slot: #FFFFFF; --sd-slot-line: #CFCAC1; --sd-slot-full: #FBFAF7;
    --sd-unit: var(--pc-canvas);
    --sd-h-on: #4FA97A; --sd-h-late: #F4CF6B; --sd-h-short: #BFE5CE; --sd-h-leave: #E2DCD0; --sd-h-none: var(--pc-track);
}
:root[data-theme="showroom"][data-mode="dark"] {
    --sd-rose: rgba(255, 138, 130, .14);  --sd-rose-ink: #FF9C95;
    --sd-lilac: rgba(170, 145, 240, .16); --sd-lilac-ink: #C3B2F5;
    --sd-sun: rgba(240, 198, 97, .14);    --sd-sun-ink: #F0C661;
    --sd-mint: rgba(111, 212, 155, .14);  --sd-mint-ink: #7EDBA7;
    --sd-sky: rgba(141, 189, 240, .14);   --sd-sky-ink: #9CC6F2;
    --sd-sand: rgba(255, 250, 240, .08);  --sd-sand-ink: #CFCAC1;
    --sd-frame: #8F8B84; --sd-frame-2: #6D6A64;
    --sd-car-base: #3A3935;
    --sd-slot: #1F1F1D; --sd-slot-line: #4A4842; --sd-slot-full: #262623;
    --sd-unit: #232320;
    --sd-h-on: #3F9A6B; --sd-h-late: #C9A443; --sd-h-short: #2F5E45; --sd-h-leave: #4A463E;
}

/* ---------- grid ---------- */
.sd-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sd-gap); align-items: stretch; }
.sd-bento > * { grid-column: span var(--span, 12); min-width: 0; }
.sd-bento:has(> .sd-hero) { margin-top: 46px; }
.sd-card {
    position: relative; display: block; min-width: 0;
    background: var(--pc-surface); color: var(--pc-ink); border-radius: var(--sd-r);
    padding: 20px 22px; box-shadow: var(--pc-shadow-sm); text-decoration: none;
}
[data-mode="dark"] .sd-card { box-shadow: none; border: 1px solid var(--pc-line); }
a.sd-card { transition: transform .2s var(--pc-ease-out, ease), box-shadow .2s; }
a.sd-card:hover { transform: translateY(-2px); box-shadow: var(--pc-shadow-md); }
.sd-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.sd-head__t { flex: 1; min-width: 0; }
.sd-eyebrow { font-size: 12px; color: var(--pc-muted); line-height: 1.5; }
.sd-title { margin: 2px 0 0; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--pc-ink); }
.sd-go {
    width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
    border: 1px solid var(--pc-line-strong); background: var(--pc-surface); color: var(--pc-ink); transition: background .15s;
}
.sd-go:hover { background: var(--pc-surface-2); }
.sd-go .icon { width: 18px; height: 18px; }
.sd-eyebrow bdi, .sd-title .num { white-space: nowrap; }
.sd-mono { font-family: var(--pc-mono); letter-spacing: .02em; unicode-bidi: isolate; }
.sd-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.sd-pill--rose { background: var(--sd-rose); color: var(--sd-rose-ink); }
.sd-pill--lilac { background: var(--sd-lilac); color: var(--sd-lilac-ink); }
.sd-pill--sun { background: var(--sd-sun); color: var(--sd-sun-ink); }
.sd-pill--mint { background: var(--sd-mint); color: var(--sd-mint-ink); }
.sd-pill--sky { background: var(--sd-sky); color: var(--sd-sky-ink); }
.sd-pill--sand { background: var(--sd-sand); color: var(--sd-sand-ink); }
.sd-bento .dec { color: var(--pc-faint); }
.sd-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 12px; color: var(--pc-body); }
.sd-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sd-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; flex: none; }
.sd-legend b { color: var(--pc-ink); font-weight: 600; }

/* ---------- hero: the newest car breaks the frame, bite notch holds the link ---------- */
.sd-hero { padding: 0; background: none; box-shadow: none !important; border: 0 !important; isolation: isolate; min-height: 318px; }
.sd-hero__lift { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 18px 26px rgba(120, 60, 20, .16)); }
[data-mode="dark"] .sd-hero__lift { filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .5)); }
.sd-hero__bg {
    position: absolute; inset: 0; border-radius: var(--sd-r); background: var(--sr-hero-bg);
    -webkit-mask: radial-gradient(circle 37px at var(--sd-bite, 31px) calc(100% - 31px), transparent 36px, #000 37px);
            mask: radial-gradient(circle 37px at var(--sd-bite, 31px) calc(100% - 31px), transparent 36px, #000 37px);
}
:root[dir="ltr"] .sd-hero { --sd-bite: calc(100% - 31px); }
.sd-hero__bg::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .35; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .35 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-mode="dark"] .sd-hero__bg::after { mix-blend-mode: screen; opacity: .1; }
.sd-hero__body { position: relative; z-index: 2; padding: 24px 26px 26px; max-width: 54%; min-height: 318px; display: flex; flex-direction: column; color: var(--sr-hero-ink); }
.sd-hero__tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .75); color: #9A4A12; font-size: 12px; font-weight: 600; }
.sd-hero__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #F07A1D; flex: none; }
[data-mode="dark"] .sd-hero__tag { background: rgba(255, 255, 255, .08); color: #F7B98A; }
.sd-hero__name { margin: 14px 0 4px; font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; overflow-wrap: anywhere; }
.sd-hero__sub { display: flex; flex-wrap: wrap; gap: 4px 6px; color: var(--sr-hero-sub); font-size: 13.5px; }
.sd-hero__specs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 auto; }
.sd-spec { padding: 8px 12px; border-radius: 13px; background: rgba(255, 255, 255, .7); font-size: 12px; color: #6B4B36; line-height: 1.45; }
.sd-spec b { display: block; font-size: 13.5px; color: #161616; font-weight: 600; }
[data-mode="dark"] .sd-spec { background: rgba(255, 255, 255, .07); color: var(--sr-hero-sub); }
[data-mode="dark"] .sd-spec b { color: var(--sr-hero-ink); }
.sd-hero__price { margin-top: 18px; display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; flex-direction: row-reverse; }
.sd-big { font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.sd-cur { font-size: 13px; color: var(--sr-hero-sub); font-weight: 500; }
.sd-hero__car {
    position: absolute; z-index: 3; pointer-events: none; top: -50px; left: 3%; width: 46%; max-width: 410px; height: auto;
    filter: var(--sd-paint, saturate(1)) drop-shadow(0 28px 22px rgba(60, 40, 20, .26)); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
:root[dir="ltr"] .sd-hero__car { left: auto; right: 3%; transform: scaleX(-1); }
.sd-hero:hover .sd-hero__car { transform: translateY(-6px) rotate(-1.5deg); }
:root[dir="ltr"] .sd-hero:hover .sd-hero__car { transform: scaleX(-1) translateY(-6px) rotate(-1.5deg); }
.sd-hero__floor { position: absolute; z-index: 1; left: 8%; top: 142px; width: 38%; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 60, 20, .22), transparent); }
:root[dir="ltr"] .sd-hero__floor { left: auto; right: 8%; }
[data-mode="dark"] .sd-hero__floor { background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
.sd-hero__notch { position: absolute; z-index: 4; bottom: 0; left: 0; width: 62px; height: 62px; display: grid; place-items: center; }
:root[dir="ltr"] .sd-hero__notch { left: auto; right: 0; }
.sd-hero__notch a { width: 54px; height: 54px; border-radius: 50%; background: var(--pc-dark); color: #fff; display: grid; place-items: center; box-shadow: var(--pc-shadow-md); transition: transform .2s; }
[data-mode="dark"] .sd-hero__notch a { background: var(--pc-ink); color: var(--pc-canvas); }
.sd-hero__notch a:hover { transform: scale(1.06); }
:root[dir="ltr"] .sd-hero__notch .icon { transform: scaleX(-1); }

/* ---------- KPI quad ---------- */
.sd-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sd-gap); }
.sd-kpi { padding: 18px 20px; min-height: 150px; display: flex; flex-direction: column; }
.sd-kpi__top { display: flex; align-items: center; gap: 9px; color: var(--pc-body); font-size: 13px; line-height: 1.35; }
.sd-kpi__ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--pc-surface-2); color: var(--pc-ink); flex: none; }
.sd-kpi__ic .icon { width: 20px; height: 20px; }
.sd-kpi__val { margin-top: auto; padding-top: 12px; font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.sd-kpi__val small { font-size: 13px; font-weight: 500; color: var(--pc-muted); letter-spacing: 0; }
.sd-kpi--ink .sd-kpi__val { font-size: clamp(20px, 1.9vw, 28px); white-space: nowrap; }
.sd-kpi__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--pc-muted); line-height: 1.45; }
.sd-trend { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 9px; border-radius: 999px; font-weight: 600; font-size: 11.5px; }
.sd-trend--down { background: var(--sd-rose); color: var(--sd-rose-ink); }
.sd-kpi--ink { background: var(--pc-dark); color: #fff; }
[data-mode="dark"] .sd-kpi--ink { background: #F3F2EE; color: #161616; border-color: transparent; }
.sd-kpi--ink .sd-kpi__top { color: rgba(255, 255, 255, .72); }
.sd-kpi--ink .sd-kpi__ic { background: rgba(255, 255, 255, .1); color: #fff; }
.sd-kpi--ink .dec, .sd-kpi--ink .sd-kpi__val small { color: rgba(255, 255, 255, .45); }
.sd-kpi--ink .sd-kpi__foot { color: rgba(255, 255, 255, .58); }
[data-mode="dark"] .sd-kpi--ink .sd-kpi__top, [data-mode="dark"] .sd-kpi--ink .sd-kpi__foot { color: rgba(22, 22, 22, .62); }
[data-mode="dark"] .sd-kpi--ink .sd-kpi__ic { background: rgba(22, 22, 22, .07); color: #161616; }
[data-mode="dark"] .sd-kpi--ink .dec, [data-mode="dark"] .sd-kpi--ink .sd-kpi__val small { color: rgba(22, 22, 22, .45); }
.sd-spark { display: block; width: 100%; height: 34px; margin-top: 8px; color: var(--pc-primary); }

/* ---------- sale journey: the car is the progress bar ---------- */
.sd-journey { display: flex; flex-direction: column; }
.sd-journey__stage { position: relative; flex: 1; min-height: 156px; margin: 2px 0 12px; }
.sd-journey__road { position: absolute; inset-inline: 0; bottom: 12px; height: 2px; background: repeating-linear-gradient(to left, var(--pc-line-strong) 0 14px, transparent 14px 24px); }
.sd-journey__car { position: absolute; bottom: 6px; left: 50%; width: 340px; max-width: 70%; height: auto; transform: translateX(-50%); overflow: visible; color: var(--pc-ink); }
:root[dir="ltr"] .sd-journey__car { transform: translateX(-50%) scaleX(-1); }
.sd-journey__pct { position: absolute; top: 4px; inset-inline-start: 0; font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.sd-journey__pct small { display: block; font-size: 12px; font-weight: 500; color: var(--pc-muted); letter-spacing: 0; margin-top: 6px; }
.sd-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sd-step { position: relative; padding-top: 14px; font-size: 12.5px; color: var(--pc-muted); }
.sd-step::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 5px; border-radius: 3px; background: var(--pc-track); }
.sd-step b { display: block; font-weight: 600; font-size: 13px; line-height: 1.35; }
.sd-step.is-done { color: var(--pc-ink); }
.sd-step.is-done::before { background: var(--pc-ink); }
.sd-step.is-now { color: var(--pc-primary-ink, var(--pc-primary-600)); }
.sd-step.is-now::before { background: linear-gradient(to left, var(--pc-primary) 50%, var(--pc-primary-100) 50%); animation: sd-pulse 1.6s ease-in-out infinite; }
:root[dir="ltr"] .sd-step.is-now::before { background: linear-gradient(to right, var(--pc-primary) 50%, var(--pc-primary-100) 50%); }
@keyframes sd-pulse { 50% { opacity: .55; } }
.sd-journey__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pc-line); font-size: 12.5px; color: var(--pc-muted); }
.sd-journey__foot b { color: var(--pc-ink); font-weight: 600; }

/* ---------- widgets ---------- */
.sd-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sd-gap); }
.sd-w { padding: 16px; min-height: 182px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sd-w__label { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--pc-muted); text-align: start; }
.sd-live { width: 7px; height: 7px; border-radius: 50%; background: #2DBE6C; box-shadow: 0 0 0 4px var(--sd-mint); flex: none; }
.sd-clock { width: 92px; height: 92px; margin: 8px 0 6px; color: var(--pc-ink); }
.sd-w__big { font-size: 22px; font-weight: 600; line-height: 1.15; }
.sd-w__small { font-size: 12px; color: var(--pc-muted); line-height: 1.45; margin-top: 2px; }
.sd-finger { position: relative; width: 84px; height: 84px; margin: 8px 0 6px; display: grid; place-items: center; color: var(--pc-ink); }
.sd-finger__ic { width: 44px !important; height: 44px !important; }
.sd-finger > i:not(.sd-finger__scan) { position: absolute; width: 16px; height: 16px; border: 2.5px solid var(--pc-line-strong); }
.sd-finger .c1 { top: 0; right: 0; border-left: 0 !important; border-bottom: 0 !important; border-radius: 0 6px 0 0; }
.sd-finger .c2 { top: 0; left: 0; border-right: 0 !important; border-bottom: 0 !important; border-radius: 6px 0 0 0; }
.sd-finger .c3 { bottom: 0; right: 0; border-left: 0 !important; border-top: 0 !important; border-radius: 0 0 6px 0; }
.sd-finger .c4 { bottom: 0; left: 0; border-right: 0 !important; border-top: 0 !important; border-radius: 0 0 0 6px; }
.sd-finger__scan { position: absolute; inset-inline: 10px; height: 2px; top: 14px; border-radius: 2px; background: linear-gradient(90deg, transparent, #2DBE6C, transparent); animation: sd-scan 2.4s ease-in-out infinite; }
@keyframes sd-scan { 0%, 100% { top: 14px; } 50% { top: 68px; } }
.sd-ring { width: 104px; height: 104px; margin: 10px 0 4px; }
.sd-ring__n { font-family: var(--pc-num); font-size: 22px; font-weight: 600; fill: var(--pc-ink); }
.sd-ring__s { font-family: var(--pc-num); font-size: 8.5px; fill: var(--pc-muted); }
.sd-w--ink { background: var(--pc-dark); color: #fff; }
[data-mode="dark"] .sd-w--ink { background: #F3F2EE; color: #161616; border-color: transparent; }
.sd-w--ink .sd-w__label, .sd-w--ink .sd-w__small { color: rgba(255, 255, 255, .62); }
[data-mode="dark"] .sd-w--ink .sd-w__label, [data-mode="dark"] .sd-w--ink .sd-w__small { color: rgba(22, 22, 22, .6); }
.sd-w__primo { width: 82px; height: 82px; margin: 4px 0 2px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.sd-mic { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 12.5px; font-weight: 500; }
:root[dir="rtl"] .sd-mic { padding: 4px 6px 4px 14px; }
[data-mode="dark"] .sd-mic { background: rgba(22, 22, 22, .08); }
.sd-mic i { width: 26px; height: 26px; border-radius: 50%; background: var(--pc-primary); color: #fff; display: grid; place-items: center; }
.sd-mic .icon { width: 15px; height: 15px; }

/* ---------- carrier truck ---------- */
.sd-carrier__meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.sd-carrier__count { font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.sd-carrier__count small { font-size: 15px; color: var(--pc-muted); font-weight: 500; letter-spacing: 0; }
.sd-route { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 12px; }
.sd-route__city b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; }
.sd-route__line { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(to left, var(--pc-muted) 0 6px, transparent 6px 11px); }
.sd-route__line::before, .sd-route__line::after { content: ""; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; }
.sd-route__line::before { inset-inline-start: -2px; background: var(--pc-ink); }
.sd-route__line::after { inset-inline-end: -2px; border: 2px solid var(--pc-ink); background: var(--pc-surface); }
.sd-route__truck { position: absolute; top: -13px; inset-inline-start: 38%; width: 28px; height: 28px; border-radius: 50%; background: var(--pc-primary); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 5px var(--pc-primary-050); }
.sd-route__truck .icon { width: 16px; height: 16px; }
.sd-eta b { display: block; font-size: 15px; font-weight: 600; }
.sd-eta span { font-size: 12px; color: var(--pc-muted); }
.sd-truck { display: block; width: 100%; height: auto; margin-top: 6px; }
:root[dir="ltr"] .sd-truck { transform: scaleX(-1); }
:root[dir="ltr"] .sd-truck text { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
.sd-slot__box { fill: var(--sd-slot); stroke: var(--sd-slot-line); stroke-width: 1.5; stroke-dasharray: 4 4; }
.sd-slot--full .sd-slot__box { fill: var(--sd-slot-full); stroke: var(--pc-line-strong); stroke-dasharray: none; }
.sd-slot--next .sd-slot__box { fill: var(--pc-primary-050); stroke: var(--pc-primary); stroke-dasharray: none; animation: sd-pulse 1.6s ease-in-out infinite; }
.sd-slot__t { font-family: var(--pc-num); font-size: 12px; fill: var(--pc-muted); }
.lg-full { background: var(--pc-ink); }
.lg-next { background: var(--pc-primary-050); border: 1.5px solid var(--pc-primary); }
.lg-empty { border: 1.5px dashed var(--sd-slot-line); }

/* ---------- ticket ---------- */
.sd-ticket-wrap { filter: drop-shadow(0 10px 22px rgba(22, 22, 22, .09)); }
[data-mode="dark"] .sd-ticket-wrap { filter: none; }
.sd-ticket {
    position: relative; height: 100%; border-radius: var(--sd-r); background: var(--pc-surface); color: var(--pc-ink); display: flex; flex-direction: column;
    -webkit-mask: radial-gradient(circle 13px at 0 var(--cut, 62%), transparent 12px, #000 13px) left / 51% 100% no-repeat,
                  radial-gradient(circle 13px at 100% var(--cut, 62%), transparent 12px, #000 13px) right / 51% 100% no-repeat;
            mask: radial-gradient(circle 13px at 0 var(--cut, 62%), transparent 12px, #000 13px) left / 51% 100% no-repeat,
                  radial-gradient(circle 13px at 100% var(--cut, 62%), transparent 12px, #000 13px) right / 51% 100% no-repeat;
}
[data-mode="dark"] .sd-ticket { background: var(--pc-surface-2); }
.sd-ticket__top { padding: 20px 22px 16px; flex: 1; }
.sd-ticket__head { display: flex; align-items: center; gap: 10px; }
.sd-ticket__ht { flex: 1; min-width: 0; }
.sd-ticket__ht b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.sd-ticket__badge { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--pc-primary-050); color: var(--pc-primary-600); flex: none; }
.sd-ticket__no { margin: 14px 0 12px; font-size: 22px; font-weight: 600; text-align: end; }
.sd-leg { display: flex; align-items: center; gap: 10px; }
.sd-leg__pt { min-width: 0; }
.sd-leg__pt b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.sd-leg__pt span { font-size: 12px; color: var(--pc-muted); }
.sd-leg__pt--end { text-align: end; }
.sd-leg__line { flex: 1; position: relative; height: 2px; background: var(--pc-ink); min-width: 30px; }
.sd-leg__line::before, .sd-leg__line::after { content: ""; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; }
.sd-leg__line::before { inset-inline-start: -2px; background: var(--pc-ink); }
.sd-leg__line::after { inset-inline-end: -2px; border: 2px solid var(--pc-ink); background: var(--pc-surface); }
.sd-ticket__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.sd-ticket__grid > div { font-size: 12px; color: var(--pc-muted); min-width: 0; }
.sd-ticket__grid b { display: block; font-size: 13.5px; color: var(--pc-ink); font-weight: 600; overflow-wrap: anywhere; }
.sd-ticket__perf { height: 0; margin: 0 22px; border-top: 2px dashed var(--pc-line-strong); }
.sd-ticket__bottom { display: flex; align-items: center; gap: 14px; padding: 16px 22px 20px; color: var(--pc-ink); text-decoration: none; }
.sd-ticket__bottom .sr-qr { width: 74px; height: 74px; flex: none; }
.sd-ticket__bottom p { margin: 0; font-size: 12px; color: var(--pc-muted); line-height: 1.5; }
.sd-ticket__bottom p b { display: block; font-size: 13px; color: var(--pc-ink); }

/* ---------- schedule (gantt + now line) ---------- */
.sd-sched__scroll { position: relative; }
.sd-sched__hours { display: grid; grid-template-columns: repeat(9, 1fr); font-size: 12px; color: var(--pc-muted); padding-bottom: 8px; border-bottom: 1px solid var(--pc-line); }
.sd-sched__rows { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px 0 36px; }
.sd-sched__rows::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to left, var(--pc-line) 0 1px, transparent 1px calc(100% / 9)); }
:root[dir="ltr"] .sd-sched__rows::before { background: repeating-linear-gradient(to right, var(--pc-line) 0 1px, transparent 1px calc(100% / 9)); }
.sd-task {
    position: relative; height: 48px; margin-inline-start: var(--s); width: max(var(--w), 210px); max-width: calc(100% - var(--s));
    border-radius: 999px; display: flex; align-items: center; gap: 8px; padding-inline: 6px 6px; overflow: hidden; text-decoration: none; z-index: 1;
}
.sd-task__av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .7); }
[data-mode="dark"] .sd-task__av { background: rgba(255, 255, 255, .1); }
.sd-task__txt { flex: 1; min-width: 0; line-height: 1.3; }
.sd-task__txt b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-task__txt span { display: block; font-size: 11px; font-weight: 500; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-task__pct { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--pc-surface); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--pc-ink); }
.sd-task--rose { background: var(--sd-rose); color: var(--sd-rose-ink); }
.sd-task--lilac { background: var(--sd-lilac); color: var(--sd-lilac-ink); }
.sd-task--sun { background: var(--sd-sun); color: var(--sd-sun-ink); }
.sd-nowline { position: absolute; top: -4px; bottom: 30px; inset-inline-start: var(--x); width: 2px; background: var(--pc-primary); z-index: 2; pointer-events: none; }
.sd-nowline::after { content: ""; position: absolute; top: -5px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--pc-primary); }
.sd-nowline b { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); height: 22px; padding: 0 9px; border-radius: 999px; background: var(--pc-primary); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; white-space: nowrap; }

/* ---------- attendance heatmap ---------- */
.sd-heat { display: grid; grid-template-columns: minmax(70px, 96px) repeat(5, minmax(0, 1fr)); gap: 6px; align-items: center; }
.sd-heat__name { font-size: 12.5px; color: var(--pc-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-heat__day { font-size: 11.5px; color: var(--pc-muted); text-align: center; }
.sd-heat__day.is-today { color: var(--pc-ink); font-weight: 700; }
.sd-heat__day.is-today::after { content: ""; display: block; width: 18px; height: 3px; margin: 3px auto 0; border-radius: 2px; background: var(--pc-primary); }
.sd-cell { height: 30px; border-radius: 9px; }
.sd-cell--on { background: var(--sd-h-on); }
.sd-cell--late { background: var(--sd-h-late); }
.sd-cell--short { background: var(--sd-h-short); }
.sd-cell--leave { background: var(--sd-h-leave); }
.sd-cell--none { background: var(--sd-h-none); }
.sd-cell--future { background: transparent; border: 1.5px dashed var(--pc-line-strong); }

/* ---------- needs-attention list ---------- */
.sd-attn__list { display: flex; flex-direction: column; gap: 4px; }
.sd-attn__row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border-radius: 16px; color: var(--pc-ink); text-decoration: none; transition: background .15s; }
.sd-attn__row:hover { background: var(--pc-surface-2); }
.sd-attn__row > b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.sd-attn__ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--sd-sand); color: var(--sd-sand-ink); }
.sd-attn__ic .icon { width: 20px; height: 20px; }
.sd-attn__ic--red, .sd-attn__ic--coral { background: var(--sd-rose); color: var(--sd-rose-ink); }
.sd-attn__ic--gold, .sd-attn__ic--amber { background: var(--sd-sun); color: var(--sd-sun-ink); }
.sd-attn__ic--green { background: var(--sd-mint); color: var(--sd-mint-ink); }
.sd-attn__ic--sky, .sd-attn__ic--blue { background: var(--sd-sky); color: var(--sd-sky-ink); }
.sd-attn__ic--violet { background: var(--sd-lilac); color: var(--sd-lilac-ink); }
.sd-count { min-width: 28px; height: 26px; padding: 0 8px; border-radius: 13px; display: grid; place-items: center; background: var(--pc-primary); color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.sd-attn__go { width: 18px; height: 18px; color: var(--pc-muted); }
:root[dir="ltr"] .sd-attn__go { transform: scaleX(-1); }
.sd-allgood { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0 6px; }
.sd-allgood__primo { width: 96px; height: 96px; }
.sd-allgood p { margin: 6px 0 0; color: var(--pc-muted); font-size: 13px; }

@media (min-width: 1181px) {
    .sd-attn[style*="--span:12"] .sd-attn__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
    .sd-attn[style*="--span:12"] .sd-attn__row { background: var(--pc-surface-2); }
}
@media (min-width: 761px) and (max-width: 1180px) {
    .sd-attn[style*="--span:12"] .sd-attn__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
}

/* ---------- stock in colour ---------- */
.sd-units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sd-unit { display: block; border-radius: 22px; background: var(--sd-unit); padding: 12px 14px 14px; min-width: 0; color: var(--pc-ink); text-decoration: none; transition: transform .2s; }
.sd-unit:hover { transform: translateY(-2px); }
.sd-unit__car { display: block; width: 100%; height: 78px; margin: 6px 0 10px; overflow: visible; }
:root[dir="ltr"] .sd-unit__car { transform: scaleX(-1); }
.sd-unit__name { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-unit__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--pc-muted); }
.sd-swatch { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sd-swatch::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--paint); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); flex: none; }
.sd-stock__total { margin-top: 18px; font-size: 12.5px; color: var(--pc-muted); }
.sd-stockbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 3px; margin-top: 8px; }
.sd-stockbar span { display: block; height: 100%; border-radius: 4px; min-width: 4px; }
.sb-free { background: var(--pc-ink); }
.sb-res { background: var(--sr-hatch, repeating-linear-gradient(-45deg, var(--pc-primary) 0 3px, var(--pc-primary-100) 3px 7px)); }
.sb-sale { background: var(--sd-lilac-ink); }
.sb-other { background: var(--pc-line-strong); }

/* ---------- entry shimmer ---------- */
html.sr-loading .sd-card, html.sr-loading .sd-ticket { background: var(--sr-sk) !important; box-shadow: none !important; }
html.sr-loading .sd-card > *, html.sr-loading .sd-ticket > * { visibility: hidden; }
html.sr-loading .sd-hero__car, html.sr-loading .sd-hero__floor { opacity: 0; }
html.sr-loading .sd-hero__bg { background: var(--sr-sk); }
html.sr-loading .sd-hero__bg::after { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
    .sd-bento > * { grid-column: span 12; }
    .sd-bento > .sd-ticket-wrap, .sd-bento > .sd-heat-card, .sd-bento > .sd-attn { grid-column: span 6; }
    .sd-bento > .sd-ticket-wrap[style*="--span:12"], .sd-bento > .sd-attn[style*="--span:12"], .sd-bento > .sd-heat-card[style*="--span:12"] { grid-column: span 12; }
    .sd-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sd-widgets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sd-kpi { min-height: 140px; }
}
@media (max-width: 900px) {
    .sd-bento > .sd-ticket-wrap, .sd-bento > .sd-heat-card, .sd-bento > .sd-attn { grid-column: span 12; }
    .sd-kpis, .sd-widgets { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    :root[data-theme="showroom"] { --sd-gap: 14px; --sd-r: 24px; }
    .sd-card { padding: 16px 18px; }
    .sd-bento:has(> .sd-hero) { margin-top: 34px; }
    .sd-hero { min-height: 0; }
    .sd-hero__body { max-width: none; padding: 150px 20px 84px; min-height: 0; }
    .sd-hero__car { top: -30px; left: 50% !important; right: auto !important; width: 80%; max-width: 330px; transform: translateX(-50%); }
    :root[dir="ltr"] .sd-hero__car { transform: translateX(-50%) scaleX(-1); }
    .sd-hero:hover .sd-hero__car { transform: translateX(-50%) translateY(-4px); }
    :root[dir="ltr"] .sd-hero:hover .sd-hero__car { transform: translateX(-50%) scaleX(-1) translateY(-4px); }
    .sd-hero__floor { display: none; }
    .sd-hero__name { font-size: 26px; }
    .sd-hero__price { justify-content: flex-start; flex-direction: row; }
    :root[dir="rtl"] .sd-hero__price { flex-direction: row-reverse; justify-content: flex-end; }
    .sd-big { font-size: 28px; }
    .sd-kpis { gap: 12px; }
    .sd-kpis > .sd-kpi--ink, .sd-kpis > .sd-kpi--ink + .sd-kpi { grid-column: span 2; min-height: 0; }
    .sd-head { flex-wrap: wrap; }
    .sd-head__t { flex: 1 1 calc(100% - 56px); }
    .sd-head > .sd-pill { order: 3; }
    .sd-kpi { min-height: 128px; padding: 14px 16px; }
    .sd-kpi__val { font-size: 27px; }
    .sd-kpi--ink .sd-kpi__val { font-size: 26px; }
    .sd-widgets { gap: 12px; }
    .sd-w { min-height: 170px; padding: 14px 12px; }
    .sd-journey__stage { min-height: 180px; }
    .sd-journey__car { max-width: 82%; width: 270px; }
    .sd-journey__pct { font-size: 32px; }
    .sd-steps { gap: 5px; }
    .sd-step b { font-size: 11.5px; }
    .sd-carrier__meta { gap: 12px; }
    .sd-carrier__count { font-size: 32px; }
    .sd-route { order: 3; flex: 1 0 100%; min-width: 0; }
    .sd-eta { margin-inline-start: auto; text-align: end; }
    .sd-slot__t { display: none; }
    /* phone: the gantt becomes a plain stacked list — nothing scrolls sideways, nothing is clipped */
    .sd-sched__hours, .sd-nowline, .sd-sched__rows::before { display: none; }
    .sd-sched__rows { padding: 0; gap: 8px; }
    .sd-task { margin: 0; width: 100%; max-width: none; height: auto; min-height: 54px; padding-block: 6px; border-radius: 20px; }
    .sd-task__txt b, .sd-task__txt span { white-space: normal; }
    .sd-units { grid-template-columns: 1fr 1fr; gap: 10px; }
    .sd-unit { padding: 10px 12px 12px; }
    .sd-ticket__no { font-size: 19px; }
}
@media (max-width: 400px) {
    .sd-ticket__grid { grid-template-columns: 1fr 1fr; }
    .sd-ticket__grid > div:last-child { grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-bento *, .sd-bento *::before { animation: none !important; transition: none !important; }
}

/* phone hero (rev 2): the car sits in the free corner beside the name instead of a giant banner */
@media (max-width: 760px) {
    .sd-bento:has(> .sd-hero) { margin-top: 30px; }
    .sd-hero__body { padding: 18px 18px 78px !important; }
    .sd-hero__tag, .sd-hero__name, .sd-hero__sub { max-width: 54%; }
    .sd-hero__tag { font-size: 11.5px; line-height: 1.4; }
    .sd-hero__name { font-size: 24px; margin-top: 12px; }
    .sd-hero__specs { margin-top: 20px; }
    .sd-hero__car { top: -28px !important; left: -2% !important; right: auto !important; width: 52% !important; max-width: 230px; transform: none !important; }
    :root[dir="ltr"] .sd-hero__car { left: auto !important; right: -2% !important; transform: scaleX(-1) !important; }
    .sd-hero:hover .sd-hero__car { transform: translateY(-4px) !important; }
    :root[dir="ltr"] .sd-hero:hover .sd-hero__car { transform: scaleX(-1) translateY(-4px) !important; }
    .sd-hero__floor { display: block; left: 4%; top: 86px; width: 44%; height: 20px; }
    :root[dir="ltr"] .sd-hero__floor { left: auto; right: 4%; }
}
@media (max-width: 760px) {
    .sd-hero__car { left: 3% !important; width: 47% !important; top: -24px !important; }
    :root[dir="ltr"] .sd-hero__car { right: 3% !important; }
    .sd-hero__body { padding-bottom: 72px !important; }
    .sd-hero__tag, .sd-hero__name, .sd-hero__sub { max-width: 52%; }
}