/* shopdash.css — see components.css for the shared system; this file is owned by one module. */

/* ============================================================================
   The service shop: dashboard, wallboard additions, work-order desk fields,
   the counter. Everything here reads the design tokens, so dark mode follows.
   ========================================================================== */

/* ---- Alerts: the purple tone (awaiting the customer) -------------------- */
.alert--purple { background: var(--purple-soft); border-color: transparent; color: var(--purple-ink); }

/* ---- Work-order form: customer / vehicle pickers -------------------------- */
.custpick { display: flex; gap: var(--s-2); align-items: stretch; min-width: 0; flex-wrap: wrap; }
.custpick .select { flex: 1 1 200px; min-width: 0; }
.custpick__filter { flex: 1 1 150px; min-width: 0; }
.custpick__new { flex: none; white-space: nowrap; }
@media (max-width: 620px) { .custpick__new span { display: none; } .custpick__new { padding-inline: 10px; } }

/* ---- Work-order detail: the customer card and the authorisation box ------ */
.custcard__name { font-size: var(--fs-lg, 16px); font-weight: 700; letter-spacing: -.01em; }
.custcard__lines { display: grid; gap: 4px; margin: var(--s-2) 0 var(--s-1); font-size: var(--fs-sm); color: var(--ink-2); }
.custcard__lines a { color: inherit; }
.custcard__lines .row-tight { gap: 7px; min-width: 0; }
.custcard__lines .row-tight > *:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.authbox { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); background: var(--surface-inset); }
.authbox[data-tone="ok"] { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.authbox[data-tone="danger"] { border-color: var(--danger); background: var(--danger-soft); }
.authbox__row { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; padding: 3px 0; font-size: var(--fs-sm); color: var(--ink-2); }
.authbox__row b { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.authbox__row--sub { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 6px; }
.authbox[data-tone="danger"] .authbox__row--sub b { color: var(--danger-ink); }
.authbox__warn { display: flex; align-items: center; gap: 6px; margin-top: var(--s-2); font-size: var(--fs-sm); font-weight: 700; color: var(--danger-ink); }
.pullcard .table--lines td { vertical-align: middle; }

/* ---- Billing: the reference figures beside the live total ---------------- */
.billref { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-inset); border: 1px solid var(--border); display: grid; gap: 6px; }
.billref[data-tone="warn"] { border-color: var(--danger); background: var(--danger-soft); }
.billref__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); font-size: var(--fs-sm); color: var(--ink-2); align-items: baseline; }
.billref__row b { font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.billref__row i { grid-column: 1 / -1; font-style: normal; font-size: var(--fs-xs); color: var(--muted); }
.billref__row i[data-dir="over"] { color: var(--danger-ink); font-weight: 600; }
.billref__warn { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--danger-ink); }

/* ---- Print: the customer block on the repair order ------------------------ */
.printdoc__cust { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3mm 6mm; margin-bottom: 5mm; padding: 3mm 0; border-bottom: 1px solid #ccc; }
.printdoc__custname { display: block; font-weight: 700; font-size: 10.5pt; }
.printdoc__grid--2 { grid-template-columns: 1fr 1fr; }
.printdoc--receipt { max-width: 7in; }
.printdoc__thanks { margin-top: 6mm; text-align: center; font-size: 10pt; }
@media screen and (max-width: 860px) { .printdoc__cust { grid-template-columns: 1fr 1fr; } }

/* ---- Dashboard: today's appointments strip ------------------------------- */
.aptstrip { margin-bottom: var(--s-5); }
.aptstrip__scroll { display: flex; gap: var(--s-3); overflow-x: auto; padding: var(--s-3) var(--s-4); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.aptchip { flex: 0 0 auto; width: 250px; max-width: 80vw; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px var(--s-3); align-items: start; padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-inset); border: 1px solid var(--border); border-left: 3px solid var(--info); color: inherit; text-decoration: none; scroll-snap-align: start; min-width: 0; }
.aptchip:hover { border-color: var(--border-strong); text-decoration: none; }
.aptchip[data-status="confirmed"] { border-left-color: var(--accent); }
.aptchip[data-status="arrived"] { border-left-color: var(--purple); }
.aptchip[data-status="in_shop"] { border-left-color: var(--warning); }
.aptchip[data-status="done"] { border-left-color: var(--success); opacity: .7; }
.aptchip[data-status="no_show"], .aptchip[data-status="cancelled"] { border-left-color: var(--danger); opacity: .6; }
.aptchip__time { grid-row: 1 / span 2; font: 800 var(--fs-lg, 16px) var(--font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); align-self: center; }
.aptchip__body { display: grid; min-width: 0; }
.aptchip__body b { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aptchip__body span { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aptchip__tail { grid-column: 2; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.aptchip__bay { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border-strong); }

/* ---- Dashboard: the floor, tile by tile ---------------------------------- */
.floortiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
.floortile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); color: inherit; text-decoration: none; min-width: 0; box-shadow: var(--shadow-xs, none); transition: border-color .15s ease, transform .15s ease; }
.floortile:hover { text-decoration: none; border-color: var(--border-strong); transform: translateY(-1px); }
.floortile__icon { grid-row: 1 / span 3; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-inset); color: var(--ink-3); }
.floortile[data-tone="accent"] .floortile__icon { background: var(--accent-soft); color: var(--accent); }
.floortile[data-tone="info"] .floortile__icon { background: var(--info-soft); color: var(--info-ink); }
.floortile[data-tone="warning"] .floortile__icon { background: var(--warning-soft); color: var(--warning-ink); }
.floortile[data-tone="purple"] .floortile__icon { background: var(--purple-soft); color: var(--purple-ink); }
.floortile[data-tone="success"] .floortile__icon { background: var(--success-soft); color: var(--success-ink); }
.floortile__n { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.floortile[data-tone="muted"] .floortile__n { color: var(--ink-3); }
.floortile__l { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.floortile__s { grid-column: 2; font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 1100px) { .floortiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .floortiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .floortile { padding: var(--s-3); } .floortile__l { white-space: normal; line-height: 1.2; } }

/* ---- Dashboard: the desk's four numbers ---------------------------------- */
.shopkpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); }
.shopkpis .kpi { min-height: 0; }

/* ---- Dashboard: hours sold vs punched ------------------------------------ */
.hourscmp { display: flex; gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-3); }
.hourscmp__fig b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hourscmp__fig span { font-size: var(--fs-xs); color: var(--muted); }
.hourscmp__fig[data-tone="good"] b { color: var(--success); } .hourscmp__fig[data-tone="fair"] b { color: var(--warning); } .hourscmp__fig[data-tone="poor"] b { color: var(--danger); }

/* ---- Dashboard: late work orders, technicians ---------------------------- */
.latelist, .techlist { display: grid; }
.laterow { display: grid; grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: var(--s-3); align-items: center; padding: 9px var(--s-4); border-top: 1px solid var(--border); color: inherit; text-decoration: none; font-size: var(--fs-sm); min-width: 0; }
.laterow:first-child { border-top: 0; }
.laterow:hover { background: var(--surface-inset); text-decoration: none; }
.laterow__who { color: var(--ink); font-weight: 600; }
.laterow__what { color: var(--ink-3); }
.laterow__when { white-space: nowrap; }
@media (max-width: 620px) { .laterow { grid-template-columns: auto minmax(0, 1fr) auto; } .laterow__what { display: none; } }
.techrow { display: flex; align-items: center; gap: var(--s-3); padding: 8px var(--s-4); border-top: 1px solid var(--border); color: inherit; text-decoration: none; min-width: 0; }
.techrow:first-child { border-top: 0; }
.techrow:hover { background: var(--surface-inset); text-decoration: none; }
.techrow__body { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.techrow__body b { font-size: var(--fs-sm); }
.techrow__body span { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.techrow__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.techrow__dot[data-state="job"] { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.techrow__dot[data-state="break"] { background: var(--warning); }
.techrow__dot[data-state="indirect"] { background: var(--info); }
.techrow__dot[data-state="idle"] { background: var(--danger); }

/* ---- Wallboard: arrivals and ready vehicles ------------------------------ */
.wall__apts { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.wall__apt { display: flex; align-items: center; gap: .8em; padding: .6em .85em; border-radius: .85em; background: rgba(255, 255, 255, .045); min-width: 0; }
.wall__apt[data-ready] { box-shadow: inset 3px 0 0 #4ade80; }
.wall__apttime { flex: none; font: 800 1.05em var(--font-mono); color: #fff; letter-spacing: -.02em; min-width: 3.4em; font-variant-numeric: tabular-nums; }

/* ---- The counter ---------------------------------------------------------- */
.cslayout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-5); align-items: start; }
.cslayout__main { display: grid; gap: var(--s-4); min-width: 0; }
.cslayout__side { display: grid; gap: var(--s-4); min-width: 0; position: sticky; top: var(--s-4); }
@media (max-width: 1100px) { .cslayout { grid-template-columns: minmax(0, 1fr); } .cslayout__side { position: static; } }
.cspick__bar { display: flex; align-items: center; gap: var(--s-3); }
.cspick__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.cspick__input { flex: 1; min-width: 0; height: 44px; font-size: 17px; }
.cspick__results { display: grid; gap: 4px; margin-top: var(--s-2); }
.cspick__results:empty { display: none; }
.csresult { all: unset; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: center; padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-sm); min-width: 0; }
.csresult:hover, .csresult:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.csresult__no { font-weight: 700; }
.csresult__stock { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.csresult__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 620px) { .csresult { grid-template-columns: auto minmax(0, 1fr) auto; } .csresult__stock { display: none; } }
.cslines .input--sm { width: 90px; height: 34px; text-align: right; }
.cslines td { vertical-align: middle; }
.cslines .td-actions { width: 40px; }
.cstotals .card__body { padding-top: var(--s-4); }
.cscheckout { margin-top: var(--s-4); height: 50px; font-size: 16px; }
.csdone { max-width: 900px; margin: 0 auto; }
.t-warning { color: var(--warning-ink); }
.cscheckout.btn--block { display: flex; justify-content: center; }

/* ==========================================================================
   The guided tour — a spotlight that glides from one thing to the next
   ========================================================================== */
.tour { position: fixed; inset: 0; z-index: 1200; opacity: 0; transition: opacity .25s ease; }
.tour.is-in { opacity: 1; }
.tour.is-out { opacity: 0; }
.tour__veil { position: absolute; inset: 0; }
.tour__spot {
  position: fixed; border-radius: var(--r-lg);
  box-shadow: 0 0 0 100vmax rgba(8, 14, 28, .58), 0 0 0 3px var(--accent), 0 0 40px rgba(59, 108, 246, .45);
  transition: top .45s cubic-bezier(.2,.8,.2,1), left .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.tour__spot[hidden] { display: block; opacity: 0; box-shadow: 0 0 0 100vmax rgba(8, 14, 28, .58); width: 0; height: 0; top: 50%; left: 50%; }
.tour__spot[hidden] + .tour__card { box-shadow: var(--shadow-xl), 0 0 0 100vmax rgba(8, 14, 28, .58); }
.tour__card {
  position: fixed; width: 400px; max-width: calc(100vw - 24px);
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-xl); padding: 18px 20px 16px; overflow: hidden;
  transition: top .4s cubic-bezier(.2,.8,.2,1), left .4s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.tour__card.is-busy { opacity: .6; }
.tour__bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--border); }
.tour__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #8b5cf6); transition: width .4s ease; }
.tour__x { position: absolute; top: 10px; right: 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 50%; display: inline-flex; }
.tour__x:hover { background: var(--surface-2, rgba(127,127,127,.12)); color: var(--ink); }
.tour__kicker { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs, 11px); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.tour__title { margin: 0 0 8px; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
.tour__text { margin: 0 0 14px; font-size: var(--fs-sm, 13.5px); line-height: 1.55; color: var(--ink-2, var(--ink)); }
.tour__nav { display: flex; align-items: center; gap: 8px; }
.tour__nav .spacer { flex: 1; }
.tour__nav .btn { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 719px) { .tour__spot { box-shadow: 0 0 0 100vmax rgba(8, 14, 28, .5), 0 0 0 2px var(--accent); } }
@media print { .tour { display: none; } }
.tourbtn { display: inline-flex; align-items: center; gap: 6px; padding-inline: 10px; color: var(--accent); font-weight: 600; font-size: var(--fs-sm); border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tourbtn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
@media (max-width: 480px) { .demopill { display: none; } .tourbtn { padding-inline: 8px; } }

/* ---- The showcase: choose your seat ---------------------------------------- */
.showcase { position: fixed; inset: 0; z-index: 1210; overflow: auto; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(1200px 600px at 15% -10%, rgba(59, 108, 246, .35), transparent 60%), radial-gradient(900px 500px at 100% 100%, rgba(139, 92, 246, .28), transparent 60%), #0b1120; color: #e8edf8; }
.showcase.is-in { opacity: 1; } .showcase.is-out { opacity: 0; }
.showcase__inner { max-width: 1240px; margin: 0 auto; padding: clamp(24px, 5vh, 56px) 24px 40px; }
.showcase__head { text-align: center; max-width: 760px; margin: 0 auto 32px; }
.showcase__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a5b4fc; margin-bottom: 14px; }
.showcase__head h1 { margin: 0 0 12px; font-size: clamp(28px, 4.4vw, 46px); letter-spacing: -.03em; line-height: 1.05; color: #fff; }
.showcase__head p { margin: 0; font-size: 16px; line-height: 1.55; color: #b7c3df; }
.showcase__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.showcase__card { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 18px; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: transform .2s, background .2s, border-color .2s; }
.showcase__card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2); }
.showcase__card[data-seat="all"] { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 28px; background: linear-gradient(120deg, rgba(59, 108, 246, .35), rgba(139, 92, 246, .3)); border-color: rgba(165, 180, 252, .45); }
.showcase__card[data-seat="all"] h3 { font-size: 24px; } .showcase__card[data-seat="all"] .showcase__tag { flex-basis: 100%; margin-top: -4px; }
.showcase__card[data-seat="all"] .showcase__sees { flex: 1 1 380px; } .showcase__card[data-seat="all"] .showcase__btns { margin-top: 0; }
.showcase__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; }
.showcase__card[data-tone="accent"] .showcase__icon { background: rgba(59, 108, 246, .35); } .showcase__card[data-tone="success"] .showcase__icon { background: rgba(34, 197, 94, .3); }
.showcase__card[data-tone="warning"] .showcase__icon { background: rgba(245, 158, 11, .3); } .showcase__card[data-tone="info"] .showcase__icon { background: rgba(56, 189, 248, .3); }
.showcase__card[data-tone="purple"] .showcase__icon { background: rgba(168, 85, 247, .3); } .showcase__card[data-tone="danger"] .showcase__icon { background: rgba(239, 68, 68, .3); }
.showcase__card h3 { margin: 0; font-size: 19px; letter-spacing: -.01em; color: #fff; display: flex; align-items: center; gap: 8px; }
.showcase__seen { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #86efac; background: rgba(34, 197, 94, .18); padding: 3px 8px; border-radius: 999px; }
.showcase__tag { margin: 0; color: #c5cee6; font-size: 14.5px; line-height: 1.45; }
.showcase__sees { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: #b7c3df; font-size: 13.5px; line-height: 1.4; }
.showcase__sees li { display: flex; gap: 8px; align-items: flex-start; } .showcase__sees li svg { flex: 0 0 auto; margin-top: 3px; color: #86efac; }
.showcase__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.showcase__btns .btn--soft { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .16); } .showcase__btns .btn--soft:hover { background: rgba(255, 255, 255, .18); }
.showcase__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; color: #7f8cab; font-size: 13px; }
.showcase__foot .btn--ghost { color: #dbe3f7; } .showcase__foot .btn--ghost:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 640px) { .showcase__inner { padding: 20px 14px 32px; } .showcase__card { padding: 18px; } .showcase__card[data-seat="all"] { flex-direction: column; align-items: stretch; } }
/* a section title card in the middle of a tour */
.tour.is-section .tour__card { width: 520px; text-align: center; padding: 28px 28px 22px; }
.tour.is-section .tour__title { font-size: 26px; } .tour.is-section .tour__text { font-size: 15px; }