/* Motifiti shared design foundation.
   Tokens and component classes extracted directly from the approved
   backend-dashboard mockup (:root block, .add-btn, .stat, .filter-chip,
   .table-card/table, .badge, .token/.price). A handful of components the
   mockup didn't literally show (form inputs, a secondary button, a danger
   badge/box variant, success text) are marked below as EXTENDED - built
   using the mockup's own formula (pastel bg + saturated text for status
   colors; lime for primary actions; consistent radius scale) rather than
   invented from scratch. */

:root {
  /* ---- Colors: extracted verbatim from the mockup's :root ---- */
  --white: #FFFFFF;
  --paper: #FAFAFA;
  --black: #0A0A0A;
  --ink: #1A1A1A;
  --lime: #C0FF72;
  --lime-deep: #8FD437;
  --line: #E8E8E8;
  --grey: #6B6B6B;

  /* ---- Colors: extracted from the mockup's component rules ---- */
  --line-soft: #F2F2F2;      /* td border-bottom, lighter than --line */
  --row-hover: #FBFFF5;      /* tr:hover td */
  --sidebar-hover: #1A1A1A;  /* .nav-item:hover background */
  --sidebar-line: #262626;   /* .sidebar-foot border-top */
  --sidebar-muted: #AAAAAA;  /* .nav-item color */
  --sidebar-faint: #666666;  /* .sidebar-foot color */
  --thumb-placeholder: linear-gradient(135deg, #EEEEEE, #DDDDDD);

  --badge-complete-bg: #EAFAE0;
  --badge-complete-text: #3D7A1F;
  --badge-pending-bg: #FFF4E0;
  --badge-pending-text: #8A5A00;

  /* ---- EXTENDED: not literally in the mockup, built on its formula ---- */
  /* Danger badge/box: same "pastel bg + saturated text" formula as
     complete/pending above, needed because every current template has a
     red/error state (badge-red, .warning-box, .error) the mockup doesn't
     show a variant for. */
  --badge-danger-bg: #FDE8E8;
  --badge-danger-text: #B91C1C;
  /* Negotiable badge (listing_price above target_selling_price) - same
     pastel-bg/saturated-text formula, a blue since it's neither a
     warning (danger) nor a completion state (complete/pending). */
  --badge-negotiable-bg: #E5F0FF;
  --badge-negotiable-text: #1D4ED8;
  /* Success text (upload confirmations, "Settings saved") - reuses the
     badge-complete green rather than inventing a second green. */
  --success-text: #3D7A1F;

  /* ---- Spacing / radius scale, formalized from the mockup's literal values ---- */
  --radius-sm: 6px;   /* brand mark */
  --radius-md: 7px;   /* buttons, nav items */
  --radius-lg: 10px;  /* cards, table-card, stats */
  --radius-pill: 20px; /* filter chips, badges */

  /* ---- Type scale ----
     A named 7-tier scale the whole dealer-facing app is meant to
     reference going forward, same formalization as the radius scale
     above. Replaces one-off, drifting per-element font-size choices -
     the audit that led to this found 24 distinct values in use, several
     a fraction of a point apart (0.7/0.72/0.75/0.76/0.78rem all doing
     the same "small label" job). Not yet retroactively applied
     everywhere - see the flagged backlog in theme.css's own history/PR
     for the full list of drifting declarations still to migrate.
     Excludes platform_admin/platform_reference_data/platform_login,
     which don't use this stylesheet or its custom properties at all -
     login.html now does (see login.html's own styling). */
  --font-size-display: 1.6rem;   /* .stat .num - the one or two numbers a page wants seen first */
  --font-size-h1: 1.4rem;        /* page title */
  --font-size-h2: 1.05rem;       /* section/card headings */
  --font-size-body: 0.87rem;     /* inputs, buttons, primary readable text */
  --font-size-small: 0.8rem;     /* secondary text, muted, warnings */
  --font-size-label: 0.72rem;    /* field labels, table headers, tokens/stock-id */
  --font-size-micro: 0.65rem;    /* uppercase badges, pills, "Soon" tags */

  /* .vd-price only - a deliberate, named exception to the h1-matching
     rule above, not a general scale tier (nothing else needs "a size
     between h1 and h2"). Price should read as secondary to the vehicle
     name, not equal to it - but a full drop to --font-size-h2 read as a
     "small text" demotion rather than a gentle step down, so this sits
     between the two instead. */
  --font-size-price: 1.2rem;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  padding: 24px;
}
h1, h2, h3, .brand {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--font-size-h1); margin: 0 0 24px; display: flex; align-items: center; justify-content: space-between; }
h2 { font-size: 1.05rem; margin: 0 0 16px; }

/* ---- Cards: .card { background:white; border:1px solid line; radius:10px } ---- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  max-width: 720px;
}
.card h2 { font-size: 0.95rem; margin: 0 0 10px; color: var(--ink); }

/* ---- Buttons: .add-btn (primary, lime) from the mockup ---- */
.btn, .add-btn, button {
  background: var(--lime);
  color: var(--black);
  border: none;
  padding: 11px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.87rem;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  text-decoration: none;
  display: inline-block;
}
.btn:hover, .add-btn:hover, button:hover { background: var(--lime-deep); }
button:disabled, .btn:disabled { opacity: 0.4; cursor: default; }

/* EXTENDED: secondary button - mockup only shows the one primary lime
   button; every wizard needs a "Back"/"Cancel" that isn't the primary
   action. Built as the natural complement: white/bordered instead of
   filled, same radius and type as the primary button. */
.btn-secondary, button.secondary {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-secondary:hover, button.secondary:hover { background: var(--paper); }
/* Promoted from a vehicle_detail.html page-local style (.edit-panel
   .btn-danger) - now needed on the Stock list too (row + batch delete),
   so it's a real shared utility instead of a second, duplicated copy. */
.btn-danger { background: var(--white); color: var(--badge-danger-text); border: 1px solid var(--badge-danger-bg); }
.btn-danger:hover { background: var(--badge-danger-bg); }

/* ---- Badges: .badge.complete / .badge.pending from the mockup,
   .badge.danger EXTENDED on the same formula ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
}
.badge.complete { background: var(--badge-complete-bg); color: var(--badge-complete-text); }
.badge.pending { background: var(--badge-pending-bg); color: var(--badge-pending-text); }
.badge.danger { background: var(--badge-danger-bg); color: var(--badge-danger-text); }
.badge.negotiable { background: var(--badge-negotiable-bg); color: var(--badge-negotiable-text); }
/* Stock list's simplified 3-code status - "blue" reuses the same
   informational-blue palette the Negotiable badge already established,
   rather than inventing a second blue. */
.badge.blue { background: var(--badge-negotiable-bg); color: var(--badge-negotiable-text); }
.badge-row { display: flex; gap: 5px; flex-wrap: wrap; }

/* ---- Table: .table-card / table / th / td, verbatim from the mockup ---- */
.table-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
/* Ported verbatim from QC Aero's platform_admin.html: a table's own real
   min-content width (e.g. vehicle_list's 7-column table measures 702px at
   a 375px viewport) must never just be clipped by .table-card's own
   overflow:hidden (that's there for rounded-corner clipping, not to hide
   real data) - .table-scroll wraps ONLY the <table> itself, inside
   .table-card, so the corners stay clipped but the table's excess width
   becomes genuinely reachable by a horizontal swipe/scroll instead of
   silently invisible. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th {
  text-align: left; color: var(--grey); font-weight: 500; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--row-hover); }

/* ---- Monospace data: .token / .price from the mockup ---- */
.token { font-family: 'Space Mono', monospace; font-size: 0.72rem; color: var(--grey); }
a.token:hover { color: var(--black); }
.price { font-family: 'Space Mono', monospace; font-weight: 700; color: var(--black); }

/* ---- Filter chips, from the mockup ---- */
.filter-chip { padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--white); font-size: 0.78rem; font-weight: 500; color: var(--grey); cursor: pointer; }
.filter-chip.active { background: var(--black); color: #fff; border-color: var(--black); }

/* ---- Stat tiles, from the mockup ---- */
/* First real use is the Analytics dashboard's 5 tiles (Dashboard
   redesign, Part A) - the mockup's literal 4-column value was sized for
   its own 4-stat demo, never used anywhere in this app until now, so
   auto-fit/minmax here (rather than a hardcoded count) lets any future
   page with a different number of tiles reuse this same class and still
   sit evenly, responsive down to phone width. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 28px; }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.stat .num { font-family: 'Space Mono', monospace; font-size: 1.5rem; font-weight: 700; color: var(--black); }
.stat .lbl { color: var(--grey); font-size: 0.76rem; margin-top: 3px; }

/* ---- Small pill tag, from the mockup's .ownership-tag ---- */
.tag { font-size: 0.72rem; padding: 2px 8px; border-radius: 5px; background: var(--paper); color: var(--grey); border: 1px solid var(--line); }

/* ---- Text utilities ---- */
.muted { color: var(--grey); font-size: 0.85rem; }
.link { color: var(--ink); text-decoration: underline; }
.link:hover { color: var(--black); }
.success-text { color: var(--success-text); }

/* EXTENDED: error/warning text and box - the mockup has no error state at
   all; built on the same pastel-bg/saturated-text formula as the badges
   above rather than a new palette. */
.error-text { color: var(--badge-danger-text); font-size: 0.8rem; margin-top: 8px; }
.warning-box { background: var(--badge-danger-bg); color: var(--badge-danger-text); border-radius: var(--radius-md); padding: 10px 14px; font-size: 0.82rem; margin-top: 10px; }
.warning-box p { margin: 2px 0; }

/* ---- Field label/value pairs (vehicle_detail's .row/.field) ---- */
.field { font-size: 0.85rem; }
.field .label { color: var(--grey); display: block; font-size: 0.72rem; }
.row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 6px; }

/* ---- Thumbnails ---- */
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.thumbs img { object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); cursor: pointer; }

/* EXTENDED: form inputs - the mockup has no form UI at all (it's a
   read-only dashboard view). Built to match the established radius/border
   conventions: white fill, --line border, lime focus ring (the one place
   focus state needs a color, and lime is the only accent color in the
   system). */
label { display: block; font-size: 0.8rem; color: var(--grey); margin: 12px 0 4px; font-weight: 500; }
input[type=text], input[type=number], input[type=email], input[type=password], select, textarea {
  width: 100%; padding: 9px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  font-family: inherit; font-size: 0.87rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lime-deep); }
/* Not just "inactive" - a genuinely greyed, obviously non-interactive
   look, for fields a computed value drives (target selling price) or
   whichever commission-mode field isn't the active one. */
input:disabled, input:read-only { background: var(--paper); color: var(--grey); cursor: not-allowed; }
textarea { min-height: 70px; resize: vertical; }
.radio-group { display: flex; gap: 16px; margin-top: 8px; }
.radio-group label { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 0.9rem; margin: 0; font-weight: 400; }

/* EXTENDED: progress bar (vehicle_new.html's 10-step wizard) - not in the
   mockup at all. --line for undone segments, --lime for done, the same
   "lime = primary/active" signal the mockup already uses for .nav-item.active. */
.progress { display: flex; gap: 4px; margin-bottom: 20px; }
.progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.progress span.done { background: var(--lime); }

/* ---- Toggle rows (dealer_settings.html) ---- */
.toggle-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.toggle-row:last-of-type { border-bottom: none; }
.toggle-row input[type=checkbox] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--lime-deep); }
.toggle-row .title { font-size: 0.9rem; color: var(--ink); }
.toggle-row .desc { font-size: 0.78rem; color: var(--grey); margin-top: 2px; }
/* A disabled toggle (e.g. "Save as client" when nothing new to save)
   needs to visually read as inactive, not just be non-clickable. */
.toggle-row:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* ---- Key/value summary rows (wizard step 10) ---- */
.summary-row { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 4px 0; border-bottom: 1px solid var(--line); }

/* Conditional-visibility utility (no color - layout only, unchanged from before) */
.conditional { display: none; }
.conditional.visible { display: block; }

/* ---- App shell + persistent sidebar nav (templates/_nav.html) ----
   Built from the --sidebar-* tokens already reserved in :root above for
   exactly this (extracted from the original mockup but never consumed
   until now - a dark sidebar with light/muted nav text). Sidebar width
   (170px) and the mobile collapse breakpoint (max-width:640px, sidebar
   hidden + a fixed bottom mobile-nav shown instead) are ported verbatim
   from QC Aero's own real, proven platform_admin.html sidebar - kept
   consistent across the product family rather than picked arbitrarily. */
.app-shell { display: flex; align-items: flex-start; min-height: 100vh; margin: -24px; padding-top: 56px; }
/* Item: nav redesign (public signup flow) - a real full-width top bar,
   not squeezed into the existing 170px sidebar (Marketplace + Sell a
   Car + a logo all fit comfortably here; they wouldn't in the narrow
   column below). position:fixed takes it fully out of .app-shell's own
   flex flow - the exact same technique .mobile-nav already used for its
   own fixed-bottom bar, just applied to a fixed-top one instead -
   .app-shell's new padding-top reserves the space this leaves. Logo
   moves here from the old .dealer-brand slot (removed - it lived at the
   top of .sidebar before this). */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 60;
  background: var(--black); border-bottom: 1px solid var(--sidebar-line);
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
}
.topbar-actions { display: flex; gap: 8px; }
.topbar-btn {
  padding: 8px 14px; border-radius: var(--radius-pill); font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem; font-weight: 600; text-decoration: none; color: var(--sidebar-muted);
  background: var(--sidebar-hover); white-space: nowrap;
}
.topbar-btn:hover { color: var(--white); }
/* Lime, the one accent color in the system (same role it plays for
   .nav-item.active/.filter-chip.active elsewhere) - "Sell a Car" is the
   primary action this whole bar exists for. */
.topbar-btn-primary { background: var(--lime); color: var(--black); }
.topbar-btn-primary:hover { color: var(--black); opacity: 0.85; }
.topbar-logo { height: 32px; max-width: 140px; object-fit: contain; border-radius: var(--radius-sm); background: var(--paper); flex-shrink: 0; }

.sidebar {
  width: 170px; flex-shrink: 0; min-height: calc(100vh - 56px); position: sticky; top: 0;
  background: var(--black); padding: 20px 12px; display: flex; flex-direction: column;
}
/* margin-right (not flex gap) is the one spacing mechanism, since this
   icon is used both inside flex brand containers (sidebar, mobile header,
   marketplace header) and inline within plain text spans with no flex at
   all (.public-header-powered's "Powered by <img>Motifiti", footers) -
   caught live: the inline contexts had zero gap between icon and text
   without this. */
.brand-icon { height: 14px; width: auto; display: inline-block; vertical-align: middle; margin-right: 4px; }
/* Trader mode-switcher (Item: unified user accounts) - a plain seller,
   the ~100% case today, never sees this at all (gated on
   current_user.buyer_mode.enabled in _nav.html). Segmented-pill styling
   reuses the same lime-active language as .nav-item.active rather than
   inventing a second accent treatment. */
.mode-switcher {
  display: flex; background: var(--sidebar-hover); border-radius: var(--radius-md);
  padding: 3px; margin: 0 8px 16px;
}
.mode-switch-item {
  flex: 1; text-align: center; padding: 6px 8px; border-radius: calc(var(--radius-md) - 2px);
  font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 600;
  color: var(--sidebar-muted); text-decoration: none; cursor: pointer;
}
.mode-switch-item.active { background: var(--lime); color: var(--black); }
.nav-item {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: none; border: none; padding: 10px 12px; border-radius: var(--radius-md);
  font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem; font-weight: 600;
  color: var(--sidebar-muted); text-decoration: none; cursor: pointer; margin-bottom: 2px;
}
.nav-item:hover { background: var(--sidebar-hover); color: var(--white); }
/* Lime highlight for the active page - the one accent color in the
   system, same role it already plays for .filter-chip.active/.progress
   span.done elsewhere in this file. */
.nav-item.active, .nav-item.active:hover { background: var(--lime); color: var(--black); }
/* Leads/Closure: genuinely non-interactive (a <span>, no href - not just
   a greyed-out link), matching the honest Coming Soon precedent already
   proven on QC Aero's landing page rather than a clickable dead end. */
.nav-item.disabled, .nav-item.disabled:hover { background: none; color: var(--sidebar-faint); cursor: not-allowed; }
.nav-item .soon-label {
  margin-left: auto; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--sidebar-faint);
}
.main-content { flex: 1; min-width: 0; padding: 24px; }

/* Part 2 (mobile-only): no top-of-page element existed on mobile before
   this - the sidebar (where the dealer name now lives) is hidden below
   640px, and .mobile-nav is fixed to the bottom, not the top. Same
   fixed/dark treatment as .mobile-nav for a consistent "app chrome"
   feel, hidden on desktop where the sidebar already covers this. */
.mobile-header { display: none; }
.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--black); border-top: 1px solid var(--sidebar-line); z-index: 50; }
.mobile-nav-inner { display: flex; }
.mobile-nav-tab {
  flex: 1; background: none; border: none; display: flex; flex-direction: column;
  align-items: center; gap: 2px; padding: 8px 4px 10px; color: var(--sidebar-muted);
  font-family: 'Inter', sans-serif; font-size: 0.62rem; font-weight: 600; text-decoration: none;
}
.mobile-nav-tab.active { color: var(--lime); }
.mobile-nav-icon svg { width: 20px; height: 20px; }

/* Item 9: shared base for every icon() macro output - sized to sit
   inline with surrounding text, recolors automatically via currentColor
   (no separate active/inactive icon assets needed). */
.icon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; flex-shrink: 0; }

@media (max-width: 640px) {
  /* align-items:stretch is load-bearing, not cosmetic - ported from the
     exact same real bug QC Aero's platform_admin.html already hit and
     documented: the desktop align-items:flex-start default keeps a
     row-direction flex child from stretching to the tallest column's
     height, but once flex-direction switches to column here, flex-start
     on the (now vertical) cross axis instead means every child
     shrink-wraps to its own content width - so .main-content would
     balloon out to match vehicle_list's 702px-wide table instead of the
     viewport, dragging the whole page into horizontal scroll along with
     it. stretch restores full-width children, leaving .table-scroll's
     own overflow-x:auto as the only thing that scrolls horizontally. */
  /* padding-top: 0 - .topbar is desktop-only below (display:none here);
     mobile's own top clearance comes entirely from .main-content's
     padding, matching how the bottom clearance for .mobile-nav already
     works. */
  .app-shell { flex-direction: column; align-items: stretch; margin: 0; padding-top: 0; }
  .sidebar, .topbar { display: none; }
  /* Top padding now clears .mobile-header's real height (~52px) the same
     way the existing bottom padding already clears .mobile-nav's. */
  .main-content { padding: 68px 16px 76px; }
  .mobile-nav { display: block; }
  /* Same left-actions/right-logo split as .topbar, reusing its own
     .topbar-actions/.topbar-btn/.topbar-logo classes rather than a
     second parallel set - .mobile-header just swaps the flex container
     itself in for the old text-align:center block layout. */
  .mobile-header {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: var(--black); border-bottom: 1px solid var(--sidebar-line); padding: 8px 12px;
  }
  .mobile-header .topbar-btn { padding: 7px 10px; font-size: 0.74rem; }
  .mobile-header .topbar-logo { height: 26px; max-width: 96px; }
}