/* Car Planet — AutoGrid Pilots design system
   ------------------------------------------------------------------
   These are the four tools we intend to ship INTO AutoGrid (Customer 360,
   Photo QA, Review Finder, Code Red), so they wear AutoGrid's own skin, not
   the dark navy Command Centre skin.

   Tokens below were SAMPLED from the live app on 25 Jul 2026 via computed
   styles on https://cp.autogrid.co.uk/dashboard/stock-details?vid=31827 —
   they are the real values, not an approximation.

     canvas            #F9FAFC   (main content background)
     card              #FFFFFF   radius 8px, 1px #DDE8F9, shadow 0 1px 2px rgba(0,0,0,.05)
     hairline          #DDE8F9   (dominant border, 44 uses)  / #E5E7EB / #E2E8F0
     heading ink       #090C28   700
     strong label      #314158   600
     body text         #45556C   400/500
     muted             #6B7280 / #949597 / #9CA3AF
     primary blue      #1B55EC   (logo, active tab underline, links)
     orange accent     #FB923C
     green pill        #16A34A on #F0FDF4
     amber pill        #B45309 on #FFFBEB
     red pill          #B91C1C on #FEF2F2
     font              Inter
     status pill       radius 4px · 11px · 500   |  count pill radius 9999px

   IMPORTANT: variable NAMES are deliberately identical to assets/app.css so a
   page can swap one <link> for the other and every downstream rule still
   resolves. --teal is AutoGrid blue here (it is the "primary accent" slot).
   Do not fork colours per module — edit this file. */

:root{
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
}
html[data-theme="autogrid"],html[data-theme="dark"],html[data-theme="light"],:root{
  --canvas:#F9FAFC; --canvas2:#F3F4F6; --card-a:#ffffff; --card-b:#ffffff; --header:#ffffff;
  --ink:#090C28; --ink2:#314158; --body:#45556C; --mut:#6B7280; --mut2:#9CA3AF;
  --line:#DDE8F9; --line2:#E2E8F0; --line3:#E5E7EB;
  --teal:#1B55EC; --blue:#1B55EC; --amber:#B45309; --red:#B91C1C; --grn:#16A34A;
  --orange:#FB923C; --violet:#6D53E0;
  --grn-bg:#F0FDF4; --amber-bg:#FFFBEB; --red-bg:#FEF2F2; --blue-bg:#EFF4FE; --neutral-bg:#F9FAFB;
  --shadow:0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-lg:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --bg:var(--canvas);
  --radius:8px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans);background:var(--bg);color:var(--body);font-size:15px;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.num{font-variant-numeric:tabular-nums}
b,strong{color:var(--ink2)}

/* ---- top bar + department nav ---- */
.topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line3)}
.topbar-in{max-width:1400px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em;color:var(--ink)}
.brand .logo{width:26px;height:26px;border-radius:7px;background:var(--blue)}
.brand small{font-weight:600;color:var(--mut);letter-spacing:.14em;font-size:11px;text-transform:uppercase}
.who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--mut)}
.who .av{width:30px;height:30px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px}
.nav{border-bottom:1px solid var(--line3);background:#fff}
.nav-in{max-width:1400px;margin:0 auto;padding:0 12px;display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav-in::-webkit-scrollbar{height:0}
.nav a{white-space:nowrap;padding:12px 14px;font-size:13px;font-weight:500;color:var(--mut);border-bottom:2px solid transparent;display:flex;align-items:center;gap:7px}
.nav a:hover{color:var(--ink2)}
.nav a.on{color:var(--blue);font-weight:600;border-bottom-color:var(--blue)}
.nav a .ic{width:15px;height:15px;opacity:.9}

/* ---- page scaffold ---- */
.wrap{max-width:1400px;margin:0 auto;padding:24px 20px 60px}
.page-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
h1.page{font-size:clamp(22px,4vw,28px);font-weight:700;letter-spacing:-.4px;margin:0;color:var(--ink)}
h1,h2,h3,h4{color:var(--ink)}
.sub{color:var(--mut);font-size:13.5px;max-width:760px;margin:2px 0 22px}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:26px 0 12px}

/* ---- KPI tiles ---- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.kpi .k{font-size:10px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;font-weight:500}
.kpi .v{font-size:26px;font-weight:700;letter-spacing:-.5px;margin-top:3px;color:var(--ink)}
.kpi .v small{font-size:14px;font-weight:600;color:var(--mut)}
.kpi .r{font-size:12px;margin-top:5px;color:var(--mut)}
.kpi.accent-teal{box-shadow:var(--shadow),inset 0 0 0 1px rgba(27,85,236,.18)}
.kpi.accent-blue{box-shadow:var(--shadow),inset 0 0 0 1px rgba(27,85,236,.18)}

/* ---- cards / panels ---- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.card h2{font-size:16px;font-weight:600;letter-spacing:-.2px;margin:0 0 4px;color:var(--ink)}
.card .cap{color:var(--mut);font-size:12px}
.grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ---- badges (AutoGrid status-pill geometry: 4px radius, 11px, 500) ---- */
.badge{font-size:11px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;padding:3px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.badge.live{color:var(--grn);background:var(--grn-bg)}
.badge.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grn);animation:pulse 2s infinite}
.badge.target{color:var(--blue);background:var(--blue-bg)}
.badge.soon,.badge.coming{color:var(--amber);background:var(--amber-bg)}
.badge.warn{color:var(--red);background:var(--red-bg)}
.badge.neutral{color:#4B5563;background:var(--neutral-bg)}
@keyframes pulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}

/* count pill — AutoGrid uses fully-round for numeric counters */
.pill{font-size:10px;font-weight:500;padding:2px 8px;border-radius:9999px;background:var(--canvas2);color:var(--mut)}

/* chips for deltas */
.chip{font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px}
.chip.up{color:var(--grn);background:var(--grn-bg)}
.chip.dn{color:var(--red);background:var(--red-bg)}
.chip.flat{color:var(--mut);background:var(--neutral-bg)}

/* ---- tables ---- */
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th,table.tbl td{text-align:right;padding:8px 8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
table.tbl th:first-child,table.tbl td:first-child{text-align:left}
table.tbl th{color:var(--mut);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:500}
table.tbl td{color:var(--body)}
table.tbl tr:hover td{background:var(--canvas)}
.rag{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
.rag.g{background:var(--grn)}.rag.a{background:#F59E0B}.rag.r{background:#EF4444}

/* ---- coming soon overlay for scaffolded modules ---- */
.soon-wrap{position:relative}
.soon-ribbon{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--amber);background:var(--amber-bg);border:1px solid #FDE68A;border-radius:999px;padding:6px 13px;margin-bottom:14px}
.ghost{filter:saturate(.5) opacity(.55)}
.hint{color:var(--mut);font-size:12px;line-height:1.55;margin-top:12px}

/* bars */
.bar{height:8px;border-radius:5px;background:var(--canvas2);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:5px;background:var(--blue)}
.split{display:flex;height:12px;border-radius:6px;overflow:hidden}
.split > i{display:block;height:100%}

/* notes */
.note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--radius);padding:12px 14px;font-size:12.5px;color:var(--body);line-height:1.55}
.note.tight{padding:10px 12px}

.foot{color:var(--mut2);font-size:12px;margin-top:30px;padding-top:16px;border-top:1px solid var(--line3)}

/* ---- inputs / buttons, matching AutoGrid ---- */
input,select,textarea{font-family:var(--sans);font-size:13px;color:var(--ink2);background:#fff;border:1px solid var(--line3);border-radius:6px;padding:8px 10px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,85,236,.12)}
.btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;padding:8px 14px;border-radius:6px;border:1px solid var(--line3);background:#fff;color:var(--ink2);cursor:pointer}
.btn:hover{background:var(--canvas)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:#1547cc}

@media(max-width:1050px){.kpis{grid-template-columns:repeat(2,1fr)}.grid2,.grid3{grid-template-columns:1fr}}
@media(max-width:560px){.kpis{grid-template-columns:1fr 1fr}.wrap{padding:18px 14px 50px}}