/* ============================================================
   FRIMAS — Authenticated app CSS
   Scoped to #fa. Tokens (--nuit, --stable etc.) live in tokens.css.
   ============================================================ */

/* ── Base ─────────────────────────────────────────────────────── */
#fa {
  font-family: Inter, ui-sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--nuit); min-height: 100vh;
  background: var(--givre) var(--pattern-light) 0 0/var(--pattern-size) var(--pattern-size);
  line-height: 1.55; -webkit-font-smoothing: antialiased; font-size: 15px;
}
#fa * { box-sizing: border-box }
#fa a { color: inherit; text-decoration: none }
#fa h1, #fa h2, #fa h3 { margin: 0; letter-spacing: -.025em }
#fa p { margin: 0 }

/* ── App header ───────────────────────────────────────────────── */
#fa .apphead {
  background: var(--papier); border-bottom: 1px solid var(--ligne);
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 1px 0 var(--ligne-2);
}
#fa .apphead-in {
  max-width: 1160px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 0; height: 60px;
}
#fa .logo {
  position: relative; display: inline-block;
  font-weight: 700; letter-spacing: -.05em; font-size: 20px; flex-shrink: 0;
}
#fa .logo .dot {
  position: absolute; background: var(--stable); border-radius: 1px;
  width: .115em; height: .115em; left: .268em; top: .055em;
}
/* The primary lockup SVG carries its own intrinsic width/height, so without a
   size rule here it rendered at full size and broke the header (the other
   pages -- site.css, tracking.css, login.html -- all define this; app.css was
   the one that did not). Constrain it to the header height so every signed-in
   page, admin included, shows the correct Frimas lockup at the right scale. */
#fa .logo-img { height: 26px; width: auto; display: block }

/* ── App nav ──────────────────────────────────────────────────── */
#fa nav#appNav { display: flex; gap: 2px; margin-left: 10px; flex: 1 }
#fa nav#appNav a {
  font-size: 13.5px; font-weight: 550; color: var(--acier);
  padding: 8px 11px; border-radius: var(--r-md); white-space: nowrap;
  transition: color 140ms ease-out, background 140ms ease-out;
}
#fa nav#appNav a:hover { color: var(--nuit); background: var(--givre) }
#fa nav#appNav a[aria-current="page"] {
  color: var(--nuit); background: var(--givre); font-weight: 620;
}
#fa nav#appNav a:focus-visible { outline: 2px solid var(--stable); outline-offset: 2px }

/* ── Header right ─────────────────────────────────────────────── */
#fa .apphead-right { margin-left: auto; display: flex; align-items: center; gap: 8px }
#fa .apphead-who {
  font-size: 12.5px; color: var(--acier);
  max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Account dropdown (built by app.js when signed in) ───────── */
#fa .acct-drop-wrap { position: relative; display: inline-flex; align-items: center }
#fa .acct-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--acier); background: transparent;
  border: 1px solid var(--ligne); border-radius: var(--r-md);
  padding: 5px 10px; cursor: pointer; white-space: nowrap;
  transition: color 140ms, border-color 140ms;
  max-width: 220px;
}
#fa .acct-btn:hover { color: var(--nuit); border-color: var(--nuit) }
#fa .acct-btn[aria-expanded="true"] { border-color: var(--stable); color: var(--nuit) }
#fa .acct-btn:focus-visible { outline: 2px solid var(--stable); outline-offset: 2px }
#fa .acct-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px }
#fa .acct-caret { flex-shrink: 0; transition: transform 180ms var(--ease) }
#fa .acct-btn[aria-expanded="true"] .acct-caret { transform: rotate(180deg) }
#fa .acct-drop {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 164px;
  background: var(--papier); border: 1px solid var(--ligne);
  border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(14,31,41,.12);
  padding: 4px; z-index: 200; display: flex; flex-direction: column;
}
#fa .acct-drop-item {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 13px; color: var(--acier);
  background: transparent; border: none;
  padding: 8px 12px; border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none;
  transition: background 120ms, color 120ms; white-space: nowrap;
}
/* Bug fix, 2026-09-11: was `background: var(--fond)` -- --fond is not a
   token defined anywhere in tokens.css (grep the whole file, it isn't
   there), so this hover rule has always been silently invalid and done
   nothing. --givre is the same hover background every other nav-style
   item in this file uses (nav#appNav a:hover, .qa-item:hover), so this
   just brings acct-drop-item in line with them instead of introducing a
   third convention. */
#fa .acct-drop-item:hover { background: var(--givre); color: var(--nuit) }
#fa .acct-drop-item:focus-visible { outline: 2px solid var(--stable); outline-offset: -2px }
#fa .acct-drop-item[aria-current="page"] { background: var(--givre); color: var(--nuit); font-weight: 620 }
#fa .acct-drop-sep { height: 1px; background: var(--ligne-2); margin: 4px 0 }
#fa .acct-drop-out { color: var(--nuit); font-weight: 500 }
#fa .acct-drop-info { padding: 8px 12px 6px }
#fa .acct-drop-name { font-size: 13px; font-weight: 600; color: var(--nuit); white-space: nowrap }
#fa .acct-drop-company { font-size: 11.5px; color: var(--acier); margin-top: 2px; white-space: nowrap }

/* ── Buttons ──────────────────────────────────────────────────── */
#fa .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 15px; border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1;
  transition: background 140ms ease-out, border-color 140ms ease-out,
    color 140ms ease-out, transform 100ms ease-out, box-shadow 140ms ease-out;
}
#fa .btn:active { transform: translateY(1px) }
#fa .btn:disabled { opacity: .4; cursor: not-allowed; transform: none }
#fa .btn:focus-visible { outline: 2px solid var(--stable); outline-offset: 2px }

#fa .btn.primary { background: var(--nuit); color: var(--givre) }
#fa .btn.primary:hover { background: #08161E; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14,31,41,.14) }

#fa .btn.secondary { background: var(--papier); color: var(--nuit); border-color: var(--ligne) }
#fa .btn.secondary:hover { border-color: var(--nuit); transform: translateY(-1px) }

#fa .btn.quiet { background: transparent; color: var(--acier) }
#fa .btn.quiet:hover { color: var(--nuit); background: var(--givre) }

#fa .btn.sm { font-size: 12.5px; padding: 6px 12px }
#fa .btn.lg { font-size: 14.5px; padding: 11px 22px }
#fa .btn.block { width: 100%; justify-content: center }

/* ── App body ─────────────────────────────────────────────────── */
#fa .appbody { max-width: 1160px; margin: 0 auto; padding: 32px 20px 72px }
#fa .appbody h1 { font-size: 24px; font-weight: 660; margin: 0 0 4px }
#fa .appbody .sub { font-size: 14px; color: var(--acier); margin: 0 0 26px; max-width: 60ch }
#fa .appbody-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 0 }
#fa .appbody-hd > div { flex: 1; min-width: 0 }
#fa .appbody-hd .btn { flex-shrink: 0; margin-top: 4px }

/* The whole page waits for one real thing — confirming a session exists
   (assets/js/app.js's init()) — before it's allowed to render at all,
   see the [hidden] rule under Loading state below. Once it does, the
   body arrives with one entrance rather than snapping in. */
#fa .appbody { opacity: 0; animation: frimas-rise .5s var(--ease) forwards }

/* ── Loading state (app shell) ───────────────────────────────────
   #fa[hidden] until app.js's init() resolves — a real async boundary
   (the /api/auth/me round trip), not a decorative delay. appskel is a
   tiny fixed header-height placeholder so there's no blank white flash
   while that request is in flight. */
#appskel {
  position: fixed; inset: 0; z-index: 39; background: var(--givre);
  display: flex; flex-direction: column;
}
#appskel .sk-head { height: 60px; background: var(--papier); border-bottom: 1px solid var(--ligne); display: flex; align-items: center; padding: 0 20px; gap: 16px }
#appskel .sk-bar { border-radius: var(--r-sm) }
#appskel .sk-logo { width: 76px; height: 18px }
#appskel .sk-nav { width: 260px; height: 14px; margin-left: 6px }
#appskel .sk-who { width: 90px; height: 12px; margin-left: auto }
body.fa-loading #fa { visibility: hidden }
body:not(.fa-loading) #appskel { display: none }

/* ── Hint box ─────────────────────────────────────────────────── */
#fa .hint.boxed {
  background: var(--papier); border: 1px solid var(--ligne);
  border-left: 3px solid var(--ligne); border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 13px 16px; font-size: 13.5px; color: var(--acier); max-width: 64ch;
}

/* ── Panel / card ─────────────────────────────────────────────── */
#fa .panel {
  background: var(--papier); border: 1px solid var(--ligne);
  border-radius: var(--r-md); padding: 20px;
}
#fa .panel-head {
  font-size: 11.5px; font-weight: 640; color: var(--acier);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px;
}

/* ── Badges / status ──────────────────────────────────────────── */
#fa .badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 560; padding: 3px 9px; border-radius: 20px;
}
#fa .badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0 }
#fa .b-stable { background: #E8F2EE; color: var(--stable) }
#fa .b-attente { background: #F8F1DF; color: var(--attente) }
#fa .b-ecart  { background: #F9EBE7; color: var(--ecart) }
#fa .b-neutre { background: #EDF1F2; color: var(--acier) }

/* ── Plain list ───────────────────────────────────────────────── */
#fa .plain {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1px; background: var(--ligne-2);
  border: 1px solid var(--ligne-2); border-radius: var(--r-md); overflow: hidden;
}
#fa .plain li { background: var(--papier); padding: 12px 14px; font-size: 13.5px; line-height: 1.5 }
#fa .plain b { display: block; color: var(--nuit); font-weight: 620; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 3px }
#fa .plain span { color: var(--nuit); font-size: 14px }

/* ── Welcome banner ───────────────────────────────────────────── */
#fa .welcome-band {
  background: var(--nuit) var(--pattern-dark) 0 0/var(--pattern-size) var(--pattern-size);
  border-radius: var(--r-lg);
  padding: 28px 32px; margin-bottom: 26px;
  position: relative; overflow: hidden;
  /* Premium-elevation treatment, 2026-09-11: this is the one hero panel on
     the dashboard, so it gets a deeper, warmer shadow than an ordinary
     .panel -- same idea as login.html's .card shadow bump, so the two
     surfaces feel like the same product. Nothing here moves or responds to
     hover: it is a static elevation, not an interaction. */
  box-shadow: 0 22px 44px -18px rgba(14,31,41,.32);
}
#fa .welcome-band::after {
  content: ''; position: absolute; right: -50px; top: -50px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(30,127,99,.1); pointer-events: none;
}
/* Quiet background truck, same static (no-spin) watermark treatment as the
   login page's brandside panel -- reuses the one asset, just a different
   spot. ::before so it paints below ::after's glow and below .wb-inner
   (explicit z-index:1), i.e. it's the bottom layer of the band, never
   competing with the greeting text or the action buttons for attention.
   Sized in px with a max-width media override rather than vw, because this
   band's own width is capped by .appbody's max-width (1160px) same as the
   rest of the dashboard -- it doesn't need to track the raw viewport. */
#fa .welcome-band::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  right: -20px; bottom: -14px; width: 340px; aspect-ratio: 2.594/1;
  background: url('../../public/images/vehicles/frimas-truck-static.svg?v=2') no-repeat right bottom/contain;
  opacity: .12;
}
#fa .wb-inner { position: relative; z-index: 1 }
#fa .wb-greet { font-size: 12px; color: rgba(255,255,255,.42); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px }
#fa .wb-name { font-size: clamp(21px, 3.4vw, 28px); font-weight: 700; color: var(--papier); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 8px }
#fa .wb-sub { font-size: 13.5px; color: rgba(255,255,255,.48); max-width: 52ch; line-height: 1.65 }
#fa .wb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px }
#fa .wb-actions .btn.primary { background: var(--givre); color: var(--nuit) }
#fa .wb-actions .btn.primary:hover { background: #fff }
#fa .wb-actions .btn.ghost { background: rgba(255,255,255,.1); color: var(--papier); border: 1px solid rgba(255,255,255,.18) }
#fa .wb-actions .btn.ghost:hover { background: rgba(255,255,255,.18) }

/* ── Stats row ────────────────────────────────────────────────── */
#fa .stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px;
}
#fa .stat-card {
  background: var(--papier); border: 1px solid var(--ligne);
  border-radius: var(--r-md); padding: 16px 18px;
  /* Depth-hover, 2026-09-11: same translateY+shadow lift already used for
     .vc (fleet cards) on this page and .card on the marketing site --
     reused rather than invented, so the "hover lifts it slightly" language
     stays consistent everywhere it appears. Kept to a 2px lift: these are
     data readouts, not links, so the motion should read as "responsive
     surface", not "clickable button". */
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
#fa .stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14,31,41,.08) }
#fa .stat-card .sc-icon {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
#fa .stat-card .sc-label { font-size: 11.5px; font-weight: 600; color: var(--acier); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px }
#fa .stat-card .sc-value { font-size: 26px; font-weight: 720; letter-spacing: -.03em; color: var(--nuit); line-height: 1; margin-bottom: 4px }
#fa .stat-card .sc-sub { font-size: 12px; color: var(--acier) }

/* ── Dashboard two-column grid ────────────────────────────────── */
#fa .dash-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start }
/* Scoped to .dash-grid rather than the shared .panel rule above, on
   purpose: .panel is reused on bookings.html, fleet.html, admin.html and
   inside the booking wizard for plain, non-card containers where a hover
   lift would be noise, not signal. Confined here to the dashboard's own
   "Account" panel, which is presented as one of the page's content cards
   alongside the stat cards and contact card. */
#fa .dash-grid .panel { transition: transform 180ms ease-out, box-shadow 180ms ease-out }
#fa .dash-grid .panel:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14,31,41,.08) }

/* ── Section header ───────────────────────────────────────────── */
#fa .sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 14px }
#fa .sec-head h2 { font-size: 17px; font-weight: 660 }
#fa .sec-head p { font-size: 13px; color: var(--acier); margin-top: 2px }

/* ── Fleet / vehicle cards ────────────────────────────────────── */
#fa .fleet-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px;
}

#fa .vc {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFD 100%); border: 1px solid var(--ligne);
  border-radius: 18px; overflow: hidden;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
  box-shadow: 0 1px 2px rgba(14,31,41,.05);
}
#fa .vc:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(14,31,41,.12) }

#fa .vc-img {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: linear-gradient(180deg,#173541,#0E1F29); cursor: pointer;
}
#fa .vc-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  transition: transform 300ms ease-out;
}
#fa .vc:hover .vc-img img { transform: scale(1.04) }
#fa .vc-img .vc-badge { position: absolute; top: 12px; right: 12px }
#fa .vc-img::after {
  content: "Cold-chain ready"; position: absolute; left: 12px; bottom: 12px;
  background: rgba(14,31,41,.78); color: #fff; border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; padding: 5px 9px; font-size: 11px; font-weight: 700;
}

#fa .vc-body { padding: 16px 18px 18px }
#fa .vc-type { font-size: 11px; font-weight: 640; color: var(--stable); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px }
#fa .vc-name { font-size: 19px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1 }
#fa .vc-sub { font-size: 13px; color: var(--acier); margin-top: 2px; margin-bottom: 14px }

#fa .vc-specs { display: flex; border-top: 1px solid var(--ligne-2); border-bottom: 1px solid var(--ligne-2); margin-bottom: 14px; background:#F7FBFA; border-radius:10px; padding:0 8px }
#fa .vc-spec { flex: 1; padding: 10px 0; border-right: 1px solid var(--ligne-2) }
#fa .vc-spec:last-child { border-right: none }
#fa .vc-spec dt { font-size: 10.5px; color: var(--acier); margin-bottom: 2px }
#fa .vc-spec dd { font-size: 13px; font-weight: 620; margin: 0 }

#fa .vc-actions { display: flex; gap: 8px }
#fa .vc-actions .btn { flex: 1 }

/* ── Vehicle detail ───────────────────────────────────────────── */
#fa .vd-back { font-size: 13.5px; color: var(--acier); margin-bottom: 20px }
#fa .vd-back a { color: var(--stable); font-weight: 550 }
#fa .vd-back a:hover { text-decoration: underline }

#fa .vd-hero {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--ardoise); margin-bottom: 26px;
  position: relative; aspect-ratio: 21/9;
}
@media(max-width: 760px) { #fa .vd-hero { aspect-ratio: 16/9 } }
#fa .vd-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: .93 }
#fa .vd-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,31,41,.72) 0%, transparent 52%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 32px;
}
#fa .vd-hero-name { font-size: clamp(26px, 4.4vw, 40px); font-weight: 800; color: var(--papier); letter-spacing: -.04em; line-height: 1 }
#fa .vd-hero-sub { font-size: 15px; color: rgba(255,255,255,.65); margin-top: 6px }

#fa .vd-layout { display: grid; grid-template-columns: 1fr 290px; gap: 20px; align-items: start }
#fa .vd-sticky { position: sticky; top: 72px }

#fa .spec-table { width: 100%; border-collapse: collapse }
#fa .spec-table tr { border-bottom: 1px solid var(--ligne-2) }
#fa .spec-table tr:last-child { border-bottom: none }
#fa .spec-table td { padding: 10px 16px; font-size: 13.5px }
#fa .spec-table td:first-child { color: var(--acier); width: 44% }
#fa .spec-table td:last-child { font-weight: 600 }

#fa .feat-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px }
#fa .feat-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45 }
#fa .feat-list li::before {
  content: ''; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: #E8F2EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231E7F63'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E") center/10px no-repeat;
}

#fa .ideal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
#fa .itag { background: var(--givre); color: var(--ardoise); font-size: 12px; font-weight: 550; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--ligne) }

/* ── Fleet page header ────────────────────────────────────────── */
#fa .fleet-band {
  background:
    linear-gradient(135deg, rgba(14,31,41,.98), rgba(18,55,63,.95)),
    var(--pattern-dark) 0 0/var(--pattern-size) var(--pattern-size);
  border-radius: 18px;
  padding: 30px 34px; margin-bottom: 22px; overflow: hidden; position: relative;
  box-shadow: 0 20px 44px -22px rgba(14,31,41,.45);
}
#fa .fleet-band::after {
  content: ''; position: absolute; right: -30px; bottom: -18px; width: 360px; aspect-ratio: 2.594/1;
  background: url('../../public/images/vehicles/frimas-truck-static.svg?v=2') no-repeat right bottom/contain;
  opacity: .18; pointer-events: none;
}
#fa .fb-inner { position: relative; z-index: 1 }
#fa .fb-eyebrow { font-size: 10.5px; font-weight: 640; color: var(--stable); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px }
#fa .fb-title { font-size: clamp(22px, 3.6vw, 30px); font-weight: 800; color: var(--papier); letter-spacing: -.04em; line-height: 1.05; margin-bottom: 6px }
#fa .fb-sub { font-size: 13.5px; color: rgba(255,255,255,.48); max-width: 48ch }
#fa .fleet-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px }
#fa .fleet-stats span { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); color: rgba(255,255,255,.72); border-radius: 999px; padding: 7px 10px; font-size: 12px }
#fa .fleet-stats b { color: var(--papier); font-weight: 700 }

/* ── Filter chips ─────────────────────────────────────────────── */
#fa .filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px }
#fa .fchip {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--ligne);
  background: var(--papier); color: var(--acier); cursor: pointer;
  transition: all 140ms ease-out;
}
#fa .fchip:hover { border-color: var(--nuit); color: var(--nuit) }
#fa .fchip.on { background: var(--nuit); color: var(--givre); border-color: var(--nuit) }

/* ── Fleet page: cold-chain specifics ─────────────────────────────
   Added 2026-09-13. The fleet page was a photo, a name and three numbers
   per vehicle, which is what every van hire catalogue looks like. What
   makes this fleet worth hiring is the temperature side of it, so that is
   what the cards and the sections under the grid now carry. */

/* The temperature range each vehicle actually holds, as chips on the card.
   Colour carries the mode and the word is always next to it -- brand.html's
   rule: dot plus word, never colour alone. */
#fa .vc-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px }
#fa .vc-mode {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 620;
  padding: 4px 9px; border-radius: 20px; border: 1px solid;
  font-variant-numeric: tabular-nums;
}
#fa .vc-mode i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none }
#fa .vc-mode.chill { color: #14607C; background: #ECF5F8; border-color: #CFE4EC }
#fa .vc-mode.froze { color: #1F4E8C; background: #EDF2FA; border-color: #D3DFF0 }

/* One line of real detail per card: body type and pallet count, the two
   things a customer with a load to move asks first. */
#fa .vc-detail {
  font-size: 12.5px; color: var(--acier);
  margin-bottom: 14px; line-height: 1.45;
}
#fa .vc-detail b { color: var(--ardoise); font-weight: 620 }

/* ── Cold-chain standard band ─────────────────────────────────── */
#fa .cc-band { margin-top: 34px }
#fa .cc-head { margin-bottom: 14px }
#fa .cc-head h2 { font-size: 19px; font-weight: 680; letter-spacing: -.02em; margin: 0 0 4px }
#fa .cc-head p { font-size: 13px; color: var(--acier); margin: 0; max-width: 58ch }
#fa .cc-grid { display: grid; gap: 10px; grid-template-columns: 1fr }
@media (min-width: 620px) { #fa .cc-grid { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 980px) { #fa .cc-grid { grid-template-columns: repeat(4, 1fr) } }
#fa .cc-item {
  background: var(--papier); border: 1px solid var(--ligne-2);
  border-top: 2px solid var(--stable);
  border-radius: 12px; padding: 15px 16px 16px;
}
#fa .cc-item h3 { font-size: 13.5px; font-weight: 660; margin: 0 0 5px; letter-spacing: -.01em }
#fa .cc-item p { font-size: 12.5px; color: var(--acier); margin: 0; line-height: 1.5 }

/* ── Closing band ─────────────────────────────────────────────────
   The page used to stop dead after the last vehicle card. This is the
   ending: the question a customer is left holding -- hire a vehicle, or
   just send this one load -- answered, with a way to act on either. */
#fa .fleet-close {
  margin-top: 34px;
  background:
    linear-gradient(135deg, rgba(14,31,41,.98), rgba(18,55,63,.95)),
    var(--pattern-dark) 0 0/var(--pattern-size) var(--pattern-size);
  border-radius: 18px; padding: 28px 32px; overflow: hidden; position: relative;
  box-shadow: 0 20px 44px -22px rgba(14,31,41,.45);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
#fa .fc-txt { position: relative; z-index: 1; min-width: 0; flex: 1 1 340px }
#fa .fc-txt h2 { font-size: clamp(19px, 2.6vw, 24px); font-weight: 720; color: var(--papier); letter-spacing: -.03em; margin: 0 0 6px; line-height: 1.15 }
#fa .fc-txt p { font-size: 13.5px; color: rgba(255,255,255,.56); margin: 0; max-width: 54ch; line-height: 1.55 }
#fa .fc-actions { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap }
#fa .fc-actions .btn.primary { background: var(--papier); color: var(--nuit) }
#fa .fc-actions .btn.primary:hover { background: var(--givre) }
#fa .fc-actions .btn.secondary { background: transparent; color: var(--givre); border-color: rgba(255,255,255,.28) }
#fa .fc-actions .btn.secondary:hover { border-color: var(--givre); background: rgba(255,255,255,.08) }
@media (max-width: 560px) {
  #fa .fleet-close { padding: 22px 20px }
  #fa .fc-actions { width: 100% }
  #fa .fc-actions .btn { flex: 1 1 100%; justify-content: center }
}

/* ── Modal ────────────────────────────────────────────────────── */
#fa .modal-back {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(14,31,41,.5); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; pointer-events: none; transition: opacity 180ms ease-out;
}
#fa .modal-back.on { opacity: 1; pointer-events: all }
#fa .modal {
  background: var(--papier); border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(14,31,41,.22);
  width: 100%; max-width: 500px; max-height: 92vh; overflow-y: auto;
  transform: translateY(14px); transition: transform 200ms ease-out;
}
#fa .modal-back.on .modal { transform: translateY(0) }
#fa .modal-head { padding: 18px 22px; border-bottom: 1px solid var(--ligne); display: flex; align-items: center; justify-content: space-between; gap: 14px }
#fa .modal-head h3 { font-size: 16px; font-weight: 660 }
#fa .modal-body { padding: 22px }
#fa .modal-foot { padding: 14px 22px; border-top: 1px solid var(--ligne); display: flex; justify-content: flex-end; gap: 10px }

/* ── Form elements ────────────────────────────────────────────── */
#fa .field { margin-bottom: 14px }
#fa label { display: block; font-size: 12px; font-weight: 550; color: var(--acier); margin-bottom: 5px }
#fa label span { font-weight: 400 }
#fa .inp {
  width: 100%; font: inherit; font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--ligne); border-radius: var(--r-md); background: #FBFDFD; color: var(--nuit);
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
#fa .inp:hover { border-color: #AFC0C5 }
#fa .inp:focus { outline: none; border-color: var(--nuit); box-shadow: 0 0 0 3px rgba(30,127,99,.14) }
#fa .inp.err { border-color: var(--ecart); background: #FEF8F6 }
#fa textarea.inp { min-height: 80px; resize: vertical }
#fa .errtext { font-size: 12px; color: var(--ecart); margin-top: 4px }
#fa .form-error-summary { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fff1ed; border: 1px solid rgba(191,74,46,.25) }
#fa .row2 { display: grid; gap: 12px }
@media(min-width: 480px) { #fa .row2 { grid-template-columns: 1fr 1fr } }

/* ── Quick action list ────────────────────────────────────────── */
#fa .qa-list { display: grid; gap: 5px }
#fa .qa-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border-radius: var(--r-md); border: 1px solid var(--ligne); background: var(--papier);
  font-size: 13.5px; font-weight: 550; color: var(--nuit); cursor: pointer;
  transition: all 140ms ease-out; text-decoration: none;
}
#fa .qa-item:hover { border-color: var(--nuit); background: #F5F8F8; transform: translateX(3px) }
#fa .qa-icon { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--givre); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px }
#fa .qa-label { font-weight: 600; font-size: 13px }
#fa .qa-desc { font-size: 11.5px; color: var(--acier); font-weight: 400; margin-top: 1px }
#fa .qa-arrow { margin-left: auto; color: var(--acier); font-size: 15px; transition: transform 140ms ease-out }
#fa .qa-item:hover .qa-arrow { transform: translateX(4px); color: var(--nuit) }

/* ── Activity feed ────────────────────────────────────────────── */
#fa .activity { list-style: none; padding: 0; margin: 0 }
#fa .activity li { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--ligne-2); font-size: 13.5px }
#fa .activity li:last-child { border-bottom: none }
#fa .act-icon { width: 30px; height: 30px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
#fa .act-text { color: var(--nuit); line-height: 1.4 }
#fa .act-time { font-size: 12px; color: var(--acier); margin-top: 2px }

/* ── Contact card ─────────────────────────────────────────────── */
#fa .contact-card {
  background: var(--nuit); border-radius: var(--r-md); padding: 17px; margin-top: 12px;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
#fa .contact-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14,31,41,.16) }
#fa .contact-card .cc-title { font-size: 13.5px; font-weight: 620; color: var(--papier); margin-bottom: 5px }
#fa .contact-card .cc-body { font-size: 12.5px; color: rgba(255,255,255,.44); line-height: 1.6; margin-bottom: 13px }
#fa .contact-card .btn { background: rgba(255,255,255,.11); color: var(--papier); border: 1px solid rgba(255,255,255,.2); width: 100%; justify-content: center }
#fa .contact-card .btn:hover { background: rgba(255,255,255,.2) }

/* ── Toast ────────────────────────────────────────────────────── */
#fa-toasts {
  position: fixed; bottom: 22px; right: 22px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.fa-toast {
  background: var(--nuit); color: var(--givre); font-size: 13.5px;
  padding: 11px 18px; border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(14,31,41,.24);
  pointer-events: all; max-width: 340px; line-height: 1.45;
  transform: translateX(12px); opacity: 0; transition: transform 220ms ease-out, opacity 220ms ease-out;
}
.fa-toast.show { transform: translateX(0); opacity: 1 }
.fa-toast.t-ok   { border-left: 3px solid var(--stable) }
.fa-toast.t-err  { border-left: 3px solid var(--ecart) }
.fa-toast.t-warn { border-left: 3px solid var(--attente) }

/* ── Booking rows (dashboard "recent", bookings.html full list) ──
   Real rows built from GET /api/bookings by assets/js/bookings-shared.js —
   see that file. */
#fa .bk-list { display: grid; gap: 1px; background: var(--ligne-2); border: 1px solid var(--ligne-2); border-radius: var(--r-md); overflow: hidden }
#fa .bk-row {
  display: grid; grid-template-columns: 1fr; gap: 4px 14px;
  background: var(--papier); padding: 13px 14px; font-size: 13px;
  transition: background 140ms ease-out;
}
@media(min-width: 720px) {
  #fa .bk-row { grid-template-columns: 130px 1fr 150px 120px 100px; align-items: center; gap: 10px }
}
#fa .bk-row:hover { background: #F5F8F8 }
#fa .bk-ref { font-weight: 660; font-variant-numeric: tabular-nums; font-size: 12.5px }
#fa .bk-route { color: var(--nuit); font-size: 13px }
#fa .bk-date { color: var(--acier); font-size: 12.5px; font-variant-numeric: tabular-nums }
#fa .bk-total { font-weight: 620; font-variant-numeric: tabular-nums; text-align: right }
@media(max-width: 719px) { #fa .bk-total { text-align: left } }

/* ── Empty state ──────────────────────────────────────────────── */
#fa .empty-state { text-align: center; padding: 48px 20px }
#fa .empty-state .es-icon { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--givre); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 22px }
#fa .empty-state h3 { font-size: 17px; font-weight: 660; margin-bottom: 6px }
#fa .empty-state p { font-size: 13.5px; color: var(--acier); max-width: 38ch; margin: 0 auto 20px; line-height: 1.6 }

/* ── Documents (pages/documents.html) ─────────────────────────────
   Real rows from GET /api/bookings (assets/js/documents-list.js),
   using the same .bk-list divider container as the bookings list
   above, with a two-line row of its own: the booking summary, then
   its document actions (assets/js/document.js, pages/document.html).
   "Proof of delivery" is disabled until the booking is actually
   delivered or completed -- there is nothing honest to show before
   that (README rule 11: don't let a document look real before the
   event it documents has happened). */
#fa .doc-row { background: var(--papier); padding: 14px; display: grid; gap: 10px }
#fa .doc-row-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px }
#fa .doc-row-actions { display: flex; flex-wrap: wrap; gap: 8px }
#fa .doc-row-actions .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; pointer-events: none }

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width: 1020px) {
  #fa .dash-grid { grid-template-columns: 1fr }
  #fa .stats-row { grid-template-columns: repeat(2, 1fr) }
}
@media(max-width: 820px) {
  #fa .vd-layout { grid-template-columns: 1fr }
  #fa .vd-sticky { position: static }
}
@media(max-width: 700px) {
  /* Hide the name/company/role text so nav links have breathing room */
  #fa .apphead-who { display: none }
}
@media(max-width: 680px) {
  #fa .appbody { padding: 20px 14px 60px }
  #fa .welcome-band { padding: 20px }
  #fa .welcome-band::before { width: 190px; opacity: .08 }
  #fa .fleet-band { padding: 20px }
  #fa .vd-hero { aspect-ratio: 4/3 }
  #fa .vd-hero-overlay { padding: 18px 20px }
  #fa nav#appNav a { font-size: 12px; padding: 7px 8px }
  #fa .stats-row { gap: 10px }
  #fa #fa-toasts { right: 12px; bottom: 12px }
}
@media(max-width: 520px) {
  /* Two-row header: logo + sign-out on row 1, nav scrolls on row 2 */
  #fa .apphead-in { height: auto; flex-wrap: wrap; padding: 0 14px }
  #fa .apphead-in .logo { order: 1; height: 48px; display: flex; align-items: center; flex-shrink: 0 }
  #fa .apphead-right { order: 2; margin-left: auto; height: 48px; align-items: center }
  #fa nav#appNav { order: 3; flex: 0 0 100%; margin-left: 0; padding: 2px 0 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch }
  #fa nav#appNav::-webkit-scrollbar { display: none }
}
@media(max-width: 480px) {
  #fa .stats-row { grid-template-columns: 1fr 1fr }
  #fa .wb-name { font-size: 20px }
  #fa .appbody-hd { flex-direction: column; align-items: stretch }
  #fa .appbody-hd .btn { margin-top: 0; align-self: flex-start }
  #fa .appbody-hd .sub { margin-bottom: 14px }
  /* At this width the band is tight enough that even a faint watermark
     competes with the greeting text and action buttons -- drop it rather
     than shrink it further. */
  #fa .welcome-band::before { display: none }
}
@media(prefers-reduced-motion: reduce) {
  #fa *, #fa *::before, #fa *::after { transition: none !important; animation: none !important }
}

/* ============================================================
   PREMIUM PASS — richer, more considered styling for the signed-in
   shell (Dashboard, Bookings, Documents, Users). Appended so it layers
   cleanly over the base rules above without disturbing them. Uses only
   existing tokens (tokens.css). Nothing here loops or moves on its own;
   motion is confined to hover/entrance, and reduced-motion still wins.
   ============================================================ */

/* ── Sample-data banner (shown when demo-data.js supplies records) ── */
#fa .sample-banner {
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(180deg, #FBF6E7 0%, #F8F1DF 100%);
  border: 1px solid #EAD9A8; border-radius: var(--r-lg);
  padding: 12px 15px; margin-bottom: 16px;
  font-size: 12.5px; color: #6E5410; line-height: 1.5;
}
#fa .sample-banner .sample-tag {
  flex-shrink: 0; font-size: 10px; font-weight: 720; letter-spacing: .08em;
  background: var(--attente); color: #fff; padding: 3px 8px; border-radius: 20px;
  align-self: center;
}

/* ── App header polish ── */
#fa .apphead { box-shadow: 0 1px 0 var(--ligne-2), 0 6px 20px -14px rgba(14,31,41,.18) }
#fa nav#appNav a { position: relative }
#fa nav#appNav a[aria-current="page"] {
  color: var(--nuit); background: linear-gradient(180deg, #EDF3F1, var(--givre));
}
#fa nav#appNav a[aria-current="page"]::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--stable);
}

/* ── Section header ── */
#fa .sec-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -.03em }
#fa .appbody h1 { font-size: 25px; letter-spacing: -.03em }

/* ── Stat cards: elevated, colour-coded, larger figures ── */
#fa .stats-row { gap: 16px }
#fa .stat-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFD 100%);
  box-shadow: 0 1px 2px rgba(14,31,41,.05);
  padding: 18px 20px 17px;
}
#fa .stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--acier); opacity: .85;
}
#fa .stat-card:nth-child(1)::before { background: var(--stable) }
#fa .stat-card:nth-child(2)::before { background: var(--attente) }
#fa .stat-card:nth-child(3)::before { background: var(--nuit) }
#fa .stat-card:nth-child(4)::before { background: var(--ecart) }
#fa .stat-card .sc-value { font-size: 30px; font-weight: 760 }
#fa .stat-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(14,31,41,.10) }

/* ── Booking rows: card-like list with a hover accent and chevron ── */
#fa .bk-list {
  gap: 1px; background: var(--ligne-2);
  border: 1px solid var(--ligne); border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(14,31,41,.04);
}
#fa .bk-row {
  padding: 15px 34px 15px 18px; position: relative;
  box-shadow: inset 3px 0 0 transparent;
  transition: background 140ms var(--ease), box-shadow 160ms var(--ease);
}
#fa .bk-row:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0 }
#fa .bk-row:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg) }
#fa .bk-row:hover { background: #F4F8F7; box-shadow: inset 3px 0 0 var(--stable) }
#fa .bk-row::after {
  content: '›'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ligne); font-size: 20px; line-height: 1; transition: color 140ms var(--ease), right 140ms var(--ease);
}
#fa .bk-row:hover::after { color: var(--stable); right: 11px }
@media(max-width: 719px) { #fa .bk-row::after { display: none } #fa .bk-row { padding-right: 16px } }
#fa .bk-ref { font-size: 12.5px; color: var(--nuit) }

/* ── Filter chips ── */
#fa .fchip { box-shadow: 0 1px 1px rgba(14,31,41,.03) }
#fa .fchip.on { background: linear-gradient(180deg, #16303C, var(--nuit)); box-shadow: 0 4px 12px -4px rgba(14,31,41,.4) }

/* ── Documents: proper cards ── */
#fa #docWrap .bk-list { background: transparent; border: none; box-shadow: none; display: grid; gap: 12px }
#fa .doc-row {
  border: 1px solid var(--ligne); border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(14,31,41,.04);
  padding: 16px 18px; gap: 12px;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
#fa .doc-row:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(14,31,41,.08) }
#fa .doc-row .bk-ref { font-size: 14px; font-weight: 680 }
#fa .doc-row-actions .btn.sec, #fa .doc-row-actions .btn.sm {
  background: var(--papier); border: 1px solid var(--ligne); color: var(--nuit);
  font-weight: 600;
}
#fa .doc-row-actions a.btn:hover { border-color: var(--stable); color: var(--stable) }

/* ── Users / profile list ── */
#fa #ownProfile { box-shadow: 0 1px 2px rgba(14,31,41,.04) }

/* ── Empty state a touch warmer ── */
#fa .empty-state .es-icon { background: linear-gradient(180deg, #EEF3F1, var(--givre)) }

@media(prefers-reduced-motion: reduce) {
  #fa .stat-card:hover, #fa .doc-row:hover, #fa .bk-row:hover { transform: none !important }
}