/* =========================================================
   Design tokens
   Palette grounded in the dashboard/gauge world of cars:
   graphite instrument panel, warm paper, amber/red/green
   status lights instead of generic progress bars.
   ========================================================= */
@view-transition {
  navigation: auto;
}

:root{
  --ink:        #14181F;   /* graphite panel */
  --ink-soft:   #232935;
  --paper:      #F7F5F0;   /* warm off-white, not stark */
  --paper-dim:  #ECE8DF;
  --steel:      #5C6572;   /* secondary text */
  --steel-line: #DAD6CC;
  --amber:      #E19A2C;   /* due soon — status meaning, fixed across every palette */
  --amber-soft: #FBF0DC;
  --rust:       #C0432A;   /* overdue — status meaning, fixed across every palette */
  --rust-soft:  #F8E3DE;
  --green:      #059669;   /* healthy — status meaning, fixed across every palette */
  --green-soft: #A7F3D0;
  /* Brand identity — buttons, active nav, focus rings, wizard highlights.
     Separate from the status colors above on purpose: those carry meaning
     (amber=caution, rust=overdue, green=ok) that users learn to read at a
     glance, and must stay consistent no matter which palette is active.
     Defaults here match the original single amber brand color exactly, so
     picking no palette in Admin changes nothing from before this existed. */
  --brand:      #E19A2C;
  --brand-2:    #C0432A;
  --brand-soft: #FBF0DC;
  --brand-glow-weak: rgba(225,154,44,.18);
  --brand-glow-strong: rgba(225,154,44,.4);
  /* Body text and card/input surfaces - separate from --ink on purpose.
     --ink is also used for nav chrome and small self-contained dark
     badges (already dark background + white text, correct in either
     mode) that must NOT flip in dark mode. --text and --surface are
     the ones that actually need to invert for a dark page to be
     readable. Default values match --ink/#fff exactly, so nothing
     changes until dark mode is actually turned on. */
  --text: #14181F;
  --surface: #fff;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(20,24,31,.04), 0 6px 18px rgba(20,24,31,.06);
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Inter', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Inter', sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:.01em;
  margin:0 0 .4em;
  color:var(--text);
}
h1{font-size:2.6rem; line-height:1.05}
h2{font-size:1.7rem}
h3{font-size:1.2rem}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
p{margin:0 0 1em}
.muted{color:var(--steel)}
.mono{font-family:var(--font-mono)}

/* Layout */
.container{max-width:1400px;margin:0 auto;padding:0 24px}
.topbar{
  background:transparent;
  padding:14px 20px 0;
  position:sticky;top:0;z-index:50;
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--ink);color:var(--paper);
  padding:12px 22px;border-radius:28px;
  box-shadow:0 14px 32px rgba(20,24,31,.3);
}
.brand{
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  color:#fff;
  display:flex;align-items:center;gap:8px;
}
.brand .dot{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:inline-block}
.brand-logo{height:32px;max-width:160px;object-fit:contain}
.guest-logo-wrap{text-align:center;margin-bottom:20px}
.guest-logo{height:64px;max-width:100%;object-fit:contain}
.nav{display:flex;align-items:center;gap:6px}
.nav-pill{
  padding:9px 16px;border-radius:99px;color:rgba(247,245,240,.72);
  text-decoration:none;font-weight:600;font-size:.92rem;
  transition:background-color .15s ease, color .15s ease;
}
.nav-pill:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-pill.active{background:var(--brand-glow-weak);color:var(--brand)}
.nav-fab{
  width:38px;height:38px;margin-left:8px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 16px var(--brand-glow-strong);
  transition:transform .12s ease;
}
.nav-fab:hover{transform:scale(1.08)}
.nav-fab:active{transform:scale(.94)}
.nav a{color:#C7CDD6;text-decoration:none;font-weight:600;font-size:.95rem}
.nav a:hover{color:#fff}
.nav a.active{color:#fff;border-bottom:2px solid var(--brand);padding-bottom:2px}

main.container{padding-top:14px;padding-bottom:80px}

/* Cards */
.card{
  background:var(--surface);
  border:1px solid var(--steel-line);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow);
}
.card + .card{margin-top:14px}
.fleet-grid > .card,
.vehicle-grid > .card,
.account-grid > .card{margin-top:0}
.card-row + .card{margin-top:14px}
.card + .card-row{margin-top:14px}
.card-row + .card-row{margin-top:14px}
.card-row{display:flex;gap:18px;flex-wrap:wrap;align-items:stretch}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;min-height:44px;padding:10px 20px;
  border-radius:var(--radius-sm);
  background:var(--ink);color:#fff;
  font-weight:700;font-size:.95rem;font-family:var(--font-body);
  text-decoration:none;cursor:pointer;
  transition:transform .06s ease, background .15s ease;
}
.btn:hover{background:var(--ink-soft)}
.btn:active{transform:scale(.98)}
.btn.amber{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--ink)}
.btn.amber:hover{filter:brightness(.92)}
.btn.outline{background:transparent;color:var(--text);border:1.5px solid var(--steel-line)}
.btn.outline:hover{border-color:var(--text)}
.btn.danger{background:var(--rust);color:#fff}
.btn.danger:hover{background:#a3392370}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.small{min-height:36px;padding:6px 14px;font-size:.85rem}
.btn.block{width:100%}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.cost-prefix-wrap{position:relative;display:flex}
.cost-prefix-wrap .cost-prefix{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--steel);font-size:.95rem;pointer-events:none}
.cost-prefix-wrap input{padding-left:26px!important;width:100%}
.field label{font-weight:700;font-size:.85rem;color:var(--text)}
.field .hint{font-size:.8rem;color:var(--steel)}
input,select,textarea{
  font-family:var(--font-body);font-size:1rem;
  border:1.5px solid var(--steel-line);border-radius:var(--radius-sm);
  padding:11px 13px;background:var(--surface);color:var(--text);
  min-height:46px;
}
textarea{min-height:100px;resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* Desktop/mobile layout swap - used where a table genuinely needs a
   different structure on mobile rather than just shrinking (a wide table
   with several action buttons per row is unusable via horizontal scroll
   on a phone - most people never discover there's more to swipe to). */
.mobile-only{display:none}
.desktop-only{display:block}
@media(max-width:640px){
  .mobile-only{display:block}
  .desktop-only{display:none}
}

.maint-item-card{padding:12px 0;border-bottom:1px solid var(--steel-line)}
.maint-item-card:last-child{border-bottom:none;padding-bottom:0}
.maint-item-card:first-child{padding-top:0}
.maint-item-head{display:flex;align-items:center;gap:12px}
.maint-item-title{flex:1;min-width:0;display:flex;justify-content:space-between;align-items:center;gap:10px}
.maint-item-name{flex:1;min-width:0;font-weight:700;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.maint-item-meta{color:var(--steel);font-size:.83rem;margin:6px 0 10px;padding-left:50px}
.maint-item-actions{display:flex;gap:8px}
.maint-item-actions > *{flex:1;display:flex}
.maint-item-actions .btn{width:100%;text-align:center}

/* Dashboard: side-by-side sections on wider screens - decoupled from the
   nav breakpoints, since a tablet in landscape has room for two columns
   regardless of which nav mode is active there. */
.card + .desktop-2col{margin-top:14px}
.desktop-2col + .card{margin-top:14px}
@media(min-width:900px){
  .desktop-2col{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;align-items:start}
  .desktop-2col > .card{margin-top:0}
}

/* Dashboard: fleet summary + needs-attention list */
.fleet-stats-row{display:flex;justify-content:space-around;text-align:center;flex-wrap:wrap;gap:14px}
.fleet-stat{display:flex;flex-direction:column;gap:2px;min-width:64px}
.fleet-stat-num{font-family:var(--font-mono);font-weight:700;font-size:1.7rem;color:var(--text);line-height:1.1}
.fleet-stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--steel)}
.attention-row{padding:12px 0;border-bottom:1px solid var(--steel-line)}
.attention-row:last-child{border-bottom:none;padding-bottom:0}
.attention-row-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.attention-row-title{font-weight:700;font-size:.95rem;flex:1;min-width:0}
.attention-row-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-left:50px;flex-wrap:wrap}
.attention-row-vehicle{font-size:.85rem;flex-shrink:0}
.attention-row-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media(max-width:400px){
  .attention-row-bottom{padding-left:0}
}
@media(max-width:480px){
  .fleet-stats-row{justify-content:space-between;flex-wrap:nowrap;gap:4px}
  .fleet-stat{min-width:0;flex:1}
  .fleet-stat-num{font-size:1.25rem}
  .fleet-stat-label{font-size:.6rem;letter-spacing:.02em;line-height:1.2}
}

/* Add to Home Screen banner */
.a2hs-banner{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1.5px solid var(--steel-line);border-radius:var(--radius-md);
  padding:12px 14px;margin-bottom:20px;box-shadow:var(--shadow);
}
.a2hs-banner img{width:44px;height:44px;border-radius:12px;object-fit:cover;flex-shrink:0}
.a2hs-banner-text{flex:1;min-width:0;display:flex;flex-direction:column}
.a2hs-banner-text strong{font-size:.92rem}
.a2hs-banner-text span{font-size:.8rem;color:var(--steel)}
.a2hs-dismiss{background:none;border:none;color:var(--steel);font-size:1.3rem;cursor:pointer;padding:4px 6px;line-height:1;flex-shrink:0}

/* Searchable select widget - wraps every <select> app-wide */
.ss-wrap{position:relative}
.ss-native{
  /* Visually hidden but deliberately NOT display:none or visibility:hidden
     - both of those exclude an element from constraint validation, which
     would silently break required-field checks on this select. Opacity
     with real dimensions keeps it "rendered" for validation purposes. */
  position:absolute;inset:0;opacity:0;z-index:-1;pointer-events:none;
}
.ss-input{width:100%;cursor:text}
.ss-wrap.ss-disabled .ss-input{background:var(--paper-dim);color:var(--steel);cursor:not-allowed}
.ss-dropdown{
  display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;
  background:var(--surface);border:1.5px solid var(--steel-line);border-radius:var(--radius-sm);
  box-shadow:0 10px 28px rgba(20,24,31,.14);max-height:260px;overflow-y:auto;
}
.ss-dropdown.open{display:block}
.ss-option{padding:10px 13px;cursor:pointer;font-size:.95rem}
.ss-option:hover,.ss-option.ss-highlight{background:var(--paper-dim)}
.ss-option.ss-current{font-weight:700}
.ss-empty{padding:10px 13px;color:var(--steel);font-size:.9rem;font-style:italic}

/* Alerts */
.alert{padding:13px 16px;border-radius:var(--radius-sm);font-weight:600;margin-bottom:16px;border:1px solid transparent}
.alert.error{background:var(--rust-soft);color:var(--rust);border-color:#eac3ba}
.alert.success{background:var(--green-soft);color:var(--green);border-color:#c3dcc9}

/* Status pills */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:700}
.pill.overdue{background:var(--rust-soft);color:var(--rust)}
.pill.caution{background:var(--amber-soft);color:#93650f}
.pill.soon{background:var(--amber-soft);color:#93650f}
.pill.ok{background:var(--green-soft);color:var(--green)}

/* ============ Signature element: health bar ============ */
.health-bar{width:100%;max-width:220px;flex-shrink:0}
.health-bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.health-bar-score{font-family:var(--font-mono);font-weight:700;font-size:1.15rem;line-height:1}
.health-bar-status{font-size:.72rem;color:var(--steel);text-transform:uppercase;letter-spacing:.05em}
.health-bar-track{height:9px;border-radius:99px;background:var(--paper-dim);overflow:hidden;box-shadow:inset 0 1px 2px rgba(20,24,31,.08)}
.health-bar-fill{height:100%;border-radius:99px;background:var(--health-gradient);transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 2px rgba(0,0,0,.12)}
.health-bar-compact{display:flex;align-items:center;gap:8px;margin-top:4px}
.health-bar-compact span{font-family:var(--font-mono);font-weight:700;font-size:.78rem;flex-shrink:0;min-width:30px}
.health-bar-compact .health-bar-track{flex:1;height:6px}

/* ============ Floating bottom nav (mobile + tablet by default) ============ */
.bottom-nav{display:none}
@media(max-width:1024px){
  .topbar{display:none}
  main.container.has-bottom-nav{padding-bottom:104px}
  .bottom-nav{
    display:flex;position:fixed;left:14px;right:14px;bottom:16px;
    background:var(--ink);border-radius:28px;padding:8px 4px;gap:2px;
    box-shadow:0 14px 34px rgba(20,24,31,.4);z-index:60;
  }
  .bottom-nav a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 2px;color:rgba(255,255,255,.55);text-decoration:none;
    font-size:.66rem;font-weight:700;border-radius:15px;
    transition:color .15s ease, background-color .15s ease;
  }
  .bottom-nav a.active{color:var(--brand);background:var(--brand-glow-weak)}
  .bottom-nav .fab-btn{
    flex:0 0 auto;width:54px;height:54px;margin-top:-26px;
    border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));border:4px solid var(--ink);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    box-shadow:0 10px 22px var(--brand-glow-strong);
    transition:transform .12s ease;
  }
  .bottom-nav .fab-btn:active{transform:scale(.92)}
}

/* Tablet (641-1024px) gets mobile-style navigation by default, but can
   switch back to the desktop layout - phones never get this option, the
   toggle itself is hidden below 641px. */
.layout-toggle{display:none}
@media(min-width:641px) and (max-width:1024px){
  .layout-toggle{
    display:flex;align-items:center;gap:8px;position:fixed;right:16px;bottom:96px;z-index:65;
    background:var(--ink);color:#fff;border:none;border-radius:22px;padding:10px 16px;
    font-size:.8rem;font-weight:700;cursor:pointer;box-shadow:0 10px 24px rgba(20,24,31,.35);
  }
  html.force-desktop .topbar{display:block}
  html.force-desktop main.container.has-bottom-nav{padding-bottom:0}
  html.force-desktop .bottom-nav{display:none}
}
@media(max-width:640px){
  .layout-toggle{display:none!important}
}

/* ============ Page hero - its own sticky card, own shadow, normal
   spacing before whatever follows. No overlap trick this time - that
   combination (sticky + negative margin) was the fragile part before. */
.page-hero{
  background:linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
  border-radius:var(--radius-lg);padding:20px 24px;
  position:sticky;top:0;z-index:15;margin-bottom:14px;
  box-shadow:0 10px 26px rgba(20,24,31,.18);
}
.page-hero h1{color:#fff;margin-bottom:2px;font-size:1.9rem}
.page-hero p{color:rgba(255,255,255,.68);margin:0}
@media(min-width:1025px){
  .page-hero{position:static}
}
@media(min-width:641px) and (max-width:1024px){
  html.force-desktop .page-hero{position:static}
}
@media(max-width:640px){
  .page-hero{padding:18px}
  .page-hero h1{font-size:1.5rem}
  .page-hero .card-row{flex-wrap:nowrap;gap:10px;align-items:center}
  .page-hero .card-row > div:first-child{min-width:0;flex:1}
  .page-hero h1,.page-hero p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .page-hero .btn{flex-shrink:0;padding:9px 14px;font-size:.85rem;white-space:nowrap}
}

/* Vehicle cards */
/* Generic responsive card grid - used by admin pages. No forced row
   height; those cards vary in shape and should size naturally. */
.vehicle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;align-items:stretch}
.vehicle-grid .vehicle-card{height:100%;align-self:stretch;box-sizing:border-box}

/* Dashboard + Garage vehicle cards. Deliberately NOT forcing a fixed or
   computed-equal height here anymore — every attempt at that (stretch,
   flex-start with explicit height, grid-auto-rows) failed in a different
   way. Cards now size to their natural content, full stop. They won't be
   pixel-identical if one vehicle has more due categories than another,
   but nothing can misalign or clip, which matters more. */
.fleet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;align-items:stretch}
.fleet-grid .vehicle-card{height:100%;align-self:stretch;box-sizing:border-box}
.ghost-card{
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  align-self:stretch;height:100%;box-sizing:border-box;
  border:2px dashed var(--steel-line)!important;box-shadow:none!important;background:transparent!important;
  color:var(--steel);text-decoration:none;text-align:center;font-weight:600;font-size:.92rem;
  transition:border-color .15s ease,color .15s ease,background-color .15s ease;
}
.ghost-card:hover{border-color:var(--brand)!important;color:var(--brand);background:var(--brand-soft)!important}

.account-grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
@media(min-width:641px){.account-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1025px){.account-grid{grid-template-columns:1fr 1fr 1fr}}

.vehicle-card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:box-shadow .18s ease, transform .12s ease;
}
.vehicle-card:hover{box-shadow:0 14px 34px rgba(20,24,31,.12);transform:translateY(-1px)}
.vehicle-card h3{margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vehicle-meta{color:var(--steel);font-size:.9rem;margin-bottom:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vehicle-card .card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:16px;border-top:1px solid var(--steel-line)}
.vehicle-card .status-row{margin:12px 0;min-height:38px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* CSS-BUILD-MARKER: v2026-07-26-f — if you view-source this file on your
   live site and don't see this exact line, the browser/host is serving a
   stale cached copy and nothing below matters until that's resolved. */

@keyframes gentle-pulse{0%,100%{opacity:1}50%{opacity:.72}}
.status-row .category-overdue{animation:gentle-pulse 2.2s ease-in-out infinite}

/* Odometer-style mileage readout */
.odometer{
  font-family:var(--font-mono);
  background:var(--ink);color:#fff;
  display:inline-block;padding:4px 10px;border-radius:6px;
  letter-spacing:.05em;font-size:.95rem;
}

/* Tables */
table.list{width:100%;border-collapse:collapse;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table.list th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--steel);padding:10px 12px;border-bottom:2px solid var(--steel-line)}
table.list td{padding:12px;border-bottom:1px solid var(--steel-line);vertical-align:top}
table.list tr:last-child td{border-bottom:none}
table.list td > form{display:inline-block;margin:2px 8px 2px 0}
table.list td > a.btn{margin:2px 8px 2px 0}
table.list td > form:last-child, table.list td > a.btn:last-child{margin-right:0}

/* Empty states */
.empty-state{text-align:center;padding:60px 20px;color:var(--steel)}
.empty-state h3{color:var(--text)}

/* Guest / auth pages */
.guest-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ink);padding:24px}
.guest-card{background:var(--paper);border-radius:var(--radius-lg);padding:36px;width:100%;max-width:440px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.guest-brand{font-family:var(--font-display);font-size:1.8rem;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.guest-brand .dot{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:inline-block}
.guest-tag{color:var(--steel);margin-bottom:24px}
.guest-links{margin-top:18px;font-size:.9rem;color:var(--steel);text-align:center}
.guest-links a{color:var(--text);font-weight:700;text-decoration:underline}

/* Onboarding */
.onboard-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
@media(max-width:720px){.onboard-steps{grid-template-columns:1fr}}
.onboard-step{border:1.5px dashed var(--steel-line);border-radius:var(--radius-md);padding:18px}
.onboard-step .num{font-family:var(--font-mono);color:var(--brand);font-weight:700}

/* Add-vehicle wizard - one warm question at a time */
.wizard-shell{max-width:520px;margin:0 auto}

/* iOS-style push/pop transition for step-based flows (wizard, quick-add
   modal). .stage-clip is a dedicated wrapper purely for this purpose -
   never applied to a shared ancestor that might have its own shadow,
   radius, or padding depending on unclipped content. */
.stage-clip{position:relative;overflow:hidden}
.stage-frame{position:absolute;top:0;left:0;width:100%}
@keyframes stageSlideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes stageSlideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes stageSlideOutLeft{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes stageSlideOutRight{from{transform:translateX(0)}to{transform:translateX(100%)}}
.stage-anim-enter-right{animation:stageSlideInRight .34s cubic-bezier(.32,.72,0,1) forwards;position:relative;z-index:3}
.stage-anim-enter-left{animation:stageSlideInLeft .34s cubic-bezier(.32,.72,0,1) forwards;position:relative;z-index:3}
.stage-anim-exit-left{animation:stageSlideOutLeft .34s cubic-bezier(.32,.72,0,1) forwards;z-index:1}
.stage-anim-exit-right{animation:stageSlideOutRight .34s cubic-bezier(.32,.72,0,1) forwards;z-index:2}
.wizard-shell .card{padding:32px 28px}
.wizard-progress{height:6px;background:var(--paper-dim);border-radius:99px;overflow:hidden;margin-bottom:28px;box-shadow:inset 0 1px 2px rgba(20,24,31,.08)}
.wizard-progress-fill{height:100%;background:linear-gradient(135deg,var(--brand),var(--brand-2));transition:width .3s ease;border-radius:99px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 2px rgba(0,0,0,.12)}
.wizard-card{animation:wizard-in .25s ease}
@keyframes wizard-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.wizard-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);margin-bottom:8px}
.wizard-question{font-family:var(--font-display);font-size:1.7rem;line-height:1.15;margin-bottom:8px}
.wizard-blurb{color:var(--steel);margin-bottom:22px;line-height:1.5}
.wizard-choice-grid{display:grid;gap:10px;margin-bottom:22px}
@media(min-width:700px){
  #service-checklist{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
}
.wizard-choice{display:block;text-align:left;padding:16px 18px;border:1.5px solid var(--steel-line);border-radius:var(--radius-md);background:var(--surface);cursor:pointer;width:100%;font-family:var(--font-body);transition:border-color .12s ease,background .12s ease}

/* Collapsible itemized-part rows - compact one-line summary by default,
   only the part actually being edited right now takes up real space. */
.part-row{border-top:1px solid var(--steel-line);padding:10px 0}
.part-row:first-child{border-top:none;padding-top:0}
.part-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap}
.part-row-name{font-size:.88rem;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.part-row-desc{color:var(--steel);font-weight:400}
.part-row-head-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.part-row-icon-btn{background:var(--paper-dim);border:none;border-radius:50%;width:22px;height:22px;font-size:.72rem;font-weight:700;color:var(--steel);cursor:pointer;flex-shrink:0}
.part-row-toggle{min-width:150px;text-align:center}
.part-row-toggle.has-detail{border-color:var(--green);color:var(--green)}
.part-row-body{display:none;margin-top:10px}
.part-row.open .part-row-body{display:block}

.toggle-btn-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toggle-btn{
  padding:14px;border-radius:var(--radius-md);border:1.5px solid var(--steel-line);
  background:var(--surface);font-weight:700;font-size:.95rem;color:var(--text);cursor:pointer;
  font-family:var(--font-body);min-height:44px;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
@media(hover:hover){
  .toggle-btn:hover{border-color:var(--steel)}
}
.toggle-btn.selected{background:var(--ink);border-color:var(--ink);color:#fff}

/* Log Service: 3-column POS-style layout on tablet+desktop. Mobile stays
   single-column (normal stacked-card order) since there's no room for
   columns on a phone - everything below is gated behind min-width. */
.sf-card + .sf-card{margin-top:14px}
@media(max-width:640px){
  .sf-col1,.sf-col2,.sf-col3,.sf-submit{margin-top:14px}
}
#parts-column-header{margin-bottom:4px}
.sf-col3-title,#parts-empty-hint,#itemized-parts,#add-part-block{display:none}
#parts-column.open .sf-col3-title,
#parts-column.open #parts-empty-hint,
#parts-column.open #itemized-parts,
#parts-column.open #add-part-block{display:block}

@media(min-width:641px){
  #service-form{
    display:grid;grid-template-columns:1fr 1fr 1.3fr;column-gap:20px;align-items:start;
  }
  #service-form .sf-col1,
  #service-form .sf-col2,
  #service-form .sf-col3{
    display:flex;flex-direction:column;min-height:calc(100vh - 260px);
  }
  #service-form .sf-card-fill{flex:1;display:flex;flex-direction:column;overflow-y:auto}
  #service-form .sf-col1{justify-content:flex-start}
  #service-form .sf-submit{grid-column:1 / -1;margin-top:6px;justify-self:start;min-width:220px}
  #parts-column-header{display:none}
  .sf-col3-title,#parts-empty-hint,#itemized-parts,#add-part-block{display:block!important}
  .sf-col3-title{margin-top:0}
}

#view-mode-toggle{white-space:nowrap}
#service-form.wizard-mode{display:block!important}
#service-form.wizard-mode .sf-col1,
#service-form.wizard-mode .sf-col2,
#service-form.wizard-mode .sf-col3{
  display:block!important;min-height:0!important;margin-top:0!important;
}
#service-form.wizard-mode [data-wizard-step]{display:none!important;margin-top:0!important}
#service-form.wizard-mode [data-wizard-step].wizard-step-active{display:block!important}
#service-form.wizard-mode .sf-card-fill{flex:none!important;overflow:visible!important}
#service-form.wizard-mode .sf-submit{display:none}
#service-form.wizard-mode .sf-submit.wizard-step-active{display:inline-flex!important;grid-column:auto!important}
#wizard-review-content .wizard-review-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--steel-line)}
#wizard-review-content .wizard-review-row:last-child{border-bottom:none}
#wizard-review-content .wizard-review-label{color:var(--steel);font-size:.85rem}
.sf-wizard-nav{display:flex;justify-content:space-between;align-items:center;margin-top:16px}

.wizard-only-prompt{display:none}
#service-form.wizard-mode .wizard-only-prompt{display:block;margin-bottom:16px}
#service-form.wizard-mode .sf-col3-title,
#service-form.wizard-mode #parts-empty-hint{display:none!important}
#service-form.wizard-mode #parts-column-header{display:none!important}
#service-form.wizard-mode #itemized-parts,
#service-form.wizard-mode #add-part-block{display:block!important}
@media(hover:hover){
  .wizard-choice:hover{border-color:var(--brand)}
}
.wizard-choice.selected{border-color:var(--brand);background:var(--brand-soft)}

/* Dark mode - a user-level preference (Account settings, and chosen at
   signup), independent of and layered on top of whichever color
   palette is active. Only the variables that actually need to invert
   for a dark page to stay legible: page/card surfaces, body text, and
   borders. Nav chrome and small self-contained dark badges (already
   dark background + white text, correct either way) are untouched on
   purpose - see the --text/--surface split at the top of this file for
   why. Brand gradient and status colors (amber/rust/green) are
   deliberately NOT touched here either - they read correctly against
   both a light and dark page. */
html.dark-mode{
  --paper: #181B21;
  --paper-dim: #22262E;
  --surface: #1F232A;
  --text: #EDEBE5;
  --steel: #9098A5;
  --steel-line: #333944;
  --brand-soft: rgba(255,255,255,.08);
}
html.dark-mode .card{box-shadow:0 1px 2px rgba(0,0,0,.2),0 6px 18px rgba(0,0,0,.3)}

.palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.palette-card{
  position:relative;display:block;border:2px solid var(--steel-line);border-radius:var(--radius-md);
  overflow:hidden;cursor:pointer;background:var(--surface);transition:border-color .15s ease,box-shadow .15s ease;
}
.palette-card:hover{border-color:var(--steel)}
.palette-card.selected{border-color:var(--text);box-shadow:var(--shadow)}
.palette-swatch{height:64px}
.palette-card-body{padding:14px}
.palette-preview-btn{
  width:100%;border:none;border-radius:99px;padding:8px 14px;font-weight:700;font-size:.85rem;
  color:#14181F;cursor:default;
}
.palette-current-badge{
  position:absolute;top:10px;right:10px;background:var(--ink);color:#fff;font-size:.7rem;font-weight:700;
  padding:3px 9px;border-radius:99px;letter-spacing:.03em;
}
.wizard-choice strong{display:block;font-size:1.02rem;color:var(--text)}
.wizard-choice span{display:block;color:var(--steel);font-size:.85rem;margin-top:2px}
.wizard-nav{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;margin-top:28px;padding-top:18px;border-top:1px solid var(--steel-line);gap:14px}
.wizard-nav > div{display:flex;align-items:center;gap:14px}
.wizard-skip{background:none;border:none;color:var(--steel);font-weight:700;font-size:.9rem;cursor:pointer;padding:10px 4px;white-space:nowrap}
.wizard-review-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--steel-line)}
.wizard-review-row:last-child{border-bottom:none}
.wizard-review-row .k{color:var(--steel);font-size:.88rem}
.wizard-review-row .v{font-weight:700;text-align:right}

/* Quick-service modal (triggered from a due item, avoids leaving the page) */
.modal-overlay{
  position:fixed;inset:0;background:rgba(20,24,31,.55);z-index:100;
  display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 16px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease, visibility 0s linear .22s;
}
.modal-overlay.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease}
.modal-overlay.open{display:flex}
.modal-box{background:var(--surface);border-radius:var(--radius-lg);padding:22px;max-width:760px;width:100%;margin:20px auto;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.35);max-height:calc(100vh - 40px);overflow-y:auto;transform:translateY(10px) scale(.98);transition:transform .22s ease}
@media(min-width:900px){
  .modal-box{max-width:1360px}
  .fuel-form-card{max-width:580px!important}
}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1)}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:1.4rem;color:var(--steel);cursor:pointer;line-height:1;padding:6px}
.modal-close:hover{color:var(--text)}

@media(max-width:640px){
  h1{font-size:2rem}
  .container{padding:0 16px}
  .card{padding:18px}
  table.list th,table.list td{padding:8px 8px}
  table.list td > form,table.list td > a.btn{margin:2px 4px 2px 0;font-size:.85rem}
}