/* fleet // DASH — design system
   Matches the established ALL//DASH aesthetic: dark navy, Space Grotesk +
   JetBrains Mono, teal/green glow accents, rounded cards. The "//" motif
   used throughout is the same signature already carried by älg // DASH
   and sim // DASH — not a generic icon set. */

:root {
    --bg: #0a0f1c;
    --surface: #121a2b;
    --surface-hover: #16213a;
    --border: #223050;
    --text: #e7ecf6;
    --text-muted: #8892a8;
    --accent: #2fe6b8;
    --accent-dim: rgba(47, 230, 184, 0.16);
    --accent-glow: rgba(47, 230, 184, 0.28);
    --on-accent: #06120e;
    --warning: #f0b429;
    --on-warning: #1a1203;
    --danger: #f0654a;
    --on-danger: #1a0705;
    --radius: 14px;
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0 0 0.6em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; color: var(--text); }

.mono { font-family: var(--font-mono); }

/* The recurring "//" signature — accent-colored mono glyph before a label */
.slash {
    font-family: var(--font-mono);
    color: var(--accent);
    margin-right: 0.35em;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.wordmark {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.01em;
}
.wordmark:hover { text-decoration: none; }
.wordmark .slash { font-size: 1rem; }

.user-menu {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.user-menu a { color: var(--text-muted); }
.user-menu a:hover { color: var(--accent); }

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 36px 28px 60px;
}

.welcome {
    color: var(--text-muted);
    margin-bottom: 28px;
    font-size: 0.95rem;
}
.welcome strong { color: var(--text); font-weight: 500; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    box-shadow: 0 8px 30px -18px var(--accent-glow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover {
    border-color: var(--accent);
    box-shadow: 0 12px 36px -16px var(--accent-glow);
    transform: translateY(-1px);
    text-decoration: none;
}

.card-label {
    font-family: var(--font-display);
    font-size: 1.02rem;
    color: var(--text);
    display: flex;
    align-items: center;
}

.card-count {
    font-family: var(--font-mono);
    font-size: 1.9rem;
    color: var(--accent);
    margin-top: 0;
    line-height: 1;
}

/* Shared primitives, ready for the rest of the app's pages */

table { width: 100%; border-collapse: collapse; margin: 16px 0; }
th, td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}
th { color: var(--text-muted); font-weight: 500; font-family: var(--font-display); }
td.mono, td.num { font-family: var(--font-mono); }

form { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 0.9rem; color: var(--text-muted); }
input, select, textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 11px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[type="checkbox"], input[type="radio"] { align-self: flex-start; width: auto; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

button, .button {
    display: inline-block;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    align-self: flex-start;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
button:hover, .button:hover {
    box-shadow: 0 6px 20px -6px var(--accent-glow);
    transform: translateY(-1px);
}
button.secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}
button.danger { background: var(--danger); color: var(--on-danger); }

fieldset { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 0; }
legend { padding: 0 6px; color: var(--text-muted); font-size: 0.85rem; }

.note { color: var(--text-muted); font-size: 0.88rem; }

.site-footer {
    margin-top: 48px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-align: center;
}

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 26px; }
.tag-row a {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--text);
}
.tag-row a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.list-rows { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 26px; }
.list-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.9rem;
}
.list-row .meta { color: var(--text-muted); font-size: 0.82rem; margin-top: 4px; }

.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    max-width: none;
    margin-bottom: 24px;
}
.filter-row label { font-size: 0.8rem; }

.inline-form { display: flex; flex-direction: row; gap: 8px; max-width: none; }
.inline-form input { width: auto; }

.fieldset-row { display: flex; flex-wrap: wrap; gap: 20px; max-width: none; }
.fieldset-row fieldset { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 10px; }

.action-form { display: inline-flex; align-items: center; gap: 8px; max-width: none; margin-right: 12px; }

/* Dashboard-specific: profile card, stat rings, quick-links grid */

.dashboard-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 720px) {
    .dashboard-grid { grid-template-columns: 1fr; }
}

.profile-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: 0 8px 30px -18px var(--accent-glow);
}
.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.profile-name { font-family: var(--font-display); font-size: 1.05rem; }
.profile-role { color: var(--text-muted); font-size: 0.85rem; margin: 2px 0 16px; }
.profile-facts { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
.profile-fact { display: flex; justify-content: space-between; font-size: 0.85rem; }
.profile-fact span:first-child { color: var(--text-muted); }
.profile-fact span:last-child { font-family: var(--font-mono); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 20px; }

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 30px -18px var(--accent-glow);
}

.ring-value { font-family: var(--font-mono); font-size: 0.95rem; }
.stat-label { font-family: var(--font-display); font-size: 0.88rem; color: var(--text); }
.stat-sub { color: var(--text-muted); font-size: 0.78rem; margin-top: 2px; }

.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.quick-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    font-family: var(--font-display);
    font-size: 0.92rem;
    color: var(--text);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.quick-tile:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }

/* Centered single-card layout for login/register/verify/no-login-submission pages */
.auth-wrap {
    min-height: calc(100vh - 65px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: 0 8px 30px -18px var(--accent-glow);
}
.auth-card h1 { text-align: center; margin-bottom: 4px; }
.auth-card h2 { text-align: center; color: var(--text-muted); font-family: var(--font-body); font-weight: 400; font-size: 0.95rem; margin-bottom: 24px; }
.auth-card form { max-width: none; }
.auth-card.wide { max-width: 520px; }

/* ============================================================
   FIQ-inspired accent system
   Extends the existing teal (--accent) with a small palette of
   secondary accents for distinguishing data categories (spending
   vs. saved vs. wants, earnings vs. bills, etc.) — same pattern
   already used for --accent/--accent-dim/--on-accent, so any of
   these can drop into an existing .card, button, or stat-card
   without new markup patterns.
   ============================================================ */
:root {
    --accent-pink: #ef4d8f;
    --accent-pink-dim: rgba(239, 77, 143, 0.16);
    --accent-pink-glow: rgba(239, 77, 143, 0.28);
    --on-accent-pink: #1a0510;

    --accent-orange: #f0954a;
    --accent-orange-dim: rgba(240, 149, 74, 0.16);
    --accent-orange-glow: rgba(240, 149, 74, 0.28);
    --on-accent-orange: #1a0e03;

    --accent-blue: #4d7bef;
    --accent-blue-dim: rgba(77, 123, 239, 0.16);
    --accent-blue-glow: rgba(77, 123, 239, 0.28);
    --on-accent-blue: #050a1a;

    --radius-lg: 22px;
}

/* Pill buttons — fully rounded, for short/casual actions ("Mark Paid",
   "Pay now") sitting inside list rows or cards, alongside the existing
   rectangular button/.button for primary form actions. */
button.pill, .button.pill {
    border-radius: 999px;
    padding: 8px 20px;
}
button.pill.outline, .button.pill.outline {
    background: transparent;
    border: 1.5px solid var(--accent);
    color: var(--accent);
}
button.pill.outline:hover, .button.pill.outline:hover {
    background: var(--accent-dim);
}

/* Color modifiers — combine with .pill, or use standalone on any
   button/.button/.card-count/.stat-label to recolor for a specific
   data category. Mirrors the existing button.danger pattern. */
.accent-pink   { background: var(--accent-pink);   color: var(--on-accent-pink); }
.accent-orange { background: var(--accent-orange); color: var(--on-accent-orange); }
.accent-blue   { background: var(--accent-blue);   color: var(--on-accent-blue); }
button.accent-pink.pill.outline, .button.accent-pink.pill.outline {
    background: transparent; border-color: var(--accent-pink); color: var(--accent-pink);
}
button.accent-orange.pill.outline, .button.accent-orange.pill.outline {
    background: transparent; border-color: var(--accent-orange); color: var(--accent-orange);
}
button.accent-blue.pill.outline, .button.accent-blue.pill.outline {
    background: transparent; border-color: var(--accent-blue); color: var(--accent-blue);
}
/* Text-only color utilities, for labels/numbers that aren't buttons */
.text-pink   { color: var(--accent-pink); }
.text-orange { color: var(--accent-orange); }
.text-blue   { color: var(--accent-blue); }

/* Ring / donut progress — pure CSS via conic-gradient, no JS or SVG
   needed. Usage:
     <div class="ring" style="--ring-pct: 68%; --ring-color: var(--accent-pink);">
         <div class="ring-hole">
             <span class="ring-hole-value">$4,200</span>
             <span class="ring-hole-label">of $6,000</span>
         </div>
     </div>
   --ring-pct and --ring-color are the only two custom properties a
   caller needs to set; everything else (size, hole, track color) has
   a sensible default below and can be overridden the same way. */
.ring {
    --ring-size: 160px;
    --ring-thickness: 14px;
    --ring-track: var(--border);
    --ring-color: var(--accent);
    --ring-pct: 0%;
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 50%;
    background: conic-gradient(var(--ring-color) var(--ring-pct), var(--ring-track) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ring-hole {
    width: calc(var(--ring-size) - var(--ring-thickness) * 2);
    height: calc(var(--ring-size) - var(--ring-thickness) * 2);
    border-radius: 50%;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.ring-hole-value { font-family: var(--font-display); font-size: 1.3rem; color: var(--text); line-height: 1.1; }
.ring-hole-label { color: var(--text-muted); font-size: 0.78rem; margin-top: 2px; }

/* Multi-segment ring (e.g. Wants/Saved/Needs in one donut) — same
   conic-gradient technique, but the caller supplies the full stop
   list since segment count varies. Usage:
     <div class="ring" style="background: conic-gradient(
         var(--accent-blue) 0% 30%,
         var(--accent-pink) 30% 65%,
         var(--accent-orange) 65% 100%);">
       <div class="ring-hole">...</div>
     </div>
   (.ring's flex/hole styling still applies; only --ring-pct/--ring-color
   are skipped in favor of an inline background.) */

/* Small legend row for ring segments, paired with the categories above */
.ring-legend { display: flex; flex-direction: column; gap: 10px; }
.ring-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.ring-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ring-legend-item .ring-legend-label { color: var(--text); }
.ring-legend-item .ring-legend-value { color: var(--text-muted); margin-left: auto; font-family: var(--font-mono); }

/* Larger-radius card variant, for a chunkier FIQ-style surface where
   the default --radius (14px) reads as too tight — e.g. a hero/summary
   card at the top of a page. */
.card-lg { border-radius: var(--radius-lg); }

/* Inline emoji accent — slightly enlarges a trailing/leading emoji next
   to a heading or headline number without affecting surrounding text
   sizing, matching the casual, human touches in the reference design. */
.emoji-accent { font-size: 1.3em; vertical-align: -0.15em; line-height: 1; }

/* Read-only spec card for a vehicle linked to the catalog (vehicle_form.php) */
.spec-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.spec-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.spec-card-title { font-family: var(--font-display); font-size: 1.05rem; color: var(--text); }
.spec-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent);
    background: var(--accent-dim);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
    vertical-align: middle;
}
.spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px 18px;
    margin: 0;
}
.spec-grid dt { color: var(--text-muted); font-size: 0.78rem; }
.spec-grid dd { margin: 2px 0 0; color: var(--text); font-family: var(--font-mono); font-size: 0.9rem; }
.spec-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Admin → Updates (admin_updates.php) */
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 18px 0; }
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 16px;
}
.panel-grid .panel { margin-bottom: 0; }
.panel.attention { border-color: var(--warning); }
.panel h2 { margin-top: 0; font-size: 1.1rem; }
.panel h3 { margin: 18px 0 6px; font-size: 0.98rem; }
.panel form { max-width: none; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.kv dt { color: var(--text-muted); font-size: 0.88rem; }
.kv dd { margin: 0; }
.pending-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.pending-list li { display: flex; gap: 12px; }
.pending-list .mono { color: var(--warning); }
.changelog { margin: 0; padding-left: 18px; }
.changelog li { margin: 3px 0; }
.changelog li.sub { margin-left: 18px; }
.spec-badge.warn { color: var(--warning); background: rgba(240, 180, 41, 0.14); }
.notice { border-radius: 10px; padding: 12px 14px; margin: 14px 0; border: 1px solid var(--border); }
.notice.ok { border-color: var(--accent); background: var(--accent-dim); }
.notice.err { border-color: var(--danger); background: rgba(240, 101, 74, 0.12); }
.notice pre { white-space: pre-wrap; margin: 8px 0 0; font-family: var(--font-mono); font-size: 0.82rem; }
.update-dot { color: var(--warning); }

/* ---- v1.5.1: dashboard icons, plates, vehicle list & edit layout ---- */

.icon { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex-shrink: 0; }

/* Dashboard card: count (if any) bottom-left, icon bottom-right, both at the count's size */
.card { display: flex; flex-direction: column; min-height: 118px; }
.card-foot {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.card-icon {
    width: 2.2rem;
    height: 2.2rem;
    color: var(--accent);
    opacity: 0.55;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.card:hover .card-icon { opacity: 1; transform: scale(1.06); }

/* EU-style license plate */
.plate {
    display: inline-flex;
    align-items: stretch;
    background: #f4f4ef;
    border: 2px solid #1b1b1b;
    border-radius: 6px;
    overflow: hidden;
    line-height: 1;
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}
.plate-band {
    background: #1e47b8;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 1.9em;
    padding: 0 0.3em 0.35em;
}
.plate-text {
    color: #111;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    padding: 0.32em 0.6em;
}
.plate-sm { border-width: 1.5px; border-radius: 4px; box-shadow: none; }
.plate-sm .plate-text { font-size: 0.85rem; padding: 0.28em 0.5em; }
.plate-sm .plate-band { font-size: 0.6rem; min-width: 1.6em; }

/* Vehicles list */
.vehicle-table td { vertical-align: middle; }
.vehicle-table tbody tr:hover { background: var(--surface-hover); }
.vehicle-table .row-link { color: var(--text); }
.vehicle-table .row-link:hover { color: var(--accent); }
.plate-link:hover { text-decoration: none; }
.icon-links { display: flex; gap: 4px; justify-content: flex-end; }
.icon-links a {
    display: inline-flex;
    padding: 6px;
    border-radius: 8px;
    color: var(--text-muted);
    border: 1px solid transparent;
}
.icon-links a:hover { color: var(--accent); border-color: var(--border); background: var(--bg); }
.icon-links .icon { width: 18px; height: 18px; }

/* Vehicle edit/new: team // dash-style section cards across the full width */
form.form-wide { max-width: none; gap: 16px; }
.vehicle-grid { margin: 0; align-items: start; }
.panel.stack { display: flex; flex-direction: column; gap: 14px; margin-bottom: 0; }
.panel.stack h2 { margin-bottom: 0; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.field-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field-grid .span-2 { grid-column: 1 / -1; }
.field-grid select, .field-grid input { width: 100%; }
.spec-card { background: var(--bg); }

.vehicle-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin-bottom: 4px;
}
.vehicle-head h1 { margin-bottom: 4px; }
.vehicle-head .note { margin: 0; }
.status-pill {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.75rem;
    padding: 2px 9px;
    border-radius: 999px;
    color: var(--accent);
    background: var(--accent-dim);
}
.status-pill.status-in_service { color: var(--warning); background: rgba(240, 180, 41, 0.14); }
.status-pill.status-retired, .status-pill.status-sold { color: var(--text-muted); background: var(--surface-hover); }

@media (max-width: 760px) {
    .field-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .field-grid, .field-grid.cols-4 { grid-template-columns: 1fr; }
    .plate-text { font-size: 1.1rem; }
}
.entry-mode-toggle { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.panel .spec-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.table-scroll { overflow-x: auto; }

/* ---- v1.6.0: leasing (lease.php, leases.php) ---- */
.lease-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 18px 0; }
.lease-grid .panel { margin-bottom: 0; }
.lease-stat { display: flex; flex-direction: column; gap: 12px; }
.lease-stat .kv { font-size: 0.9rem; grid-template-columns: minmax(0, 1fr) auto; }
.lease-stat .kv dd { white-space: nowrap; text-align: right; }
.lease-lower { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 16px; margin: 18px 0; }
.lease-lower .panel { margin-bottom: 0; }
.lease-lower:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.lease-lower td, .lease-lower th { white-space: nowrap; }
@media (max-width: 760px) { .lease-lower { grid-template-columns: minmax(0, 1fr); } }
.lease-big { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1.1; color: var(--text); }
.lease-big .unit { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--text-muted); }
.lease-bar { position: relative; height: 8px; border-radius: 999px; background: var(--surface-hover); overflow: visible; }
.lease-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.lease-bar > i { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; opacity: 0.7; }
.lease-bar.small { height: 5px; margin-top: 6px; max-width: 160px; }
.lease-bar.tier-warn > span { background: var(--warning); }
.lease-bar.tier-critical > span { background: var(--danger); }
.pace-pill {
    align-self: flex-start;
    display: inline-block;
    font-size: 0.82rem;
    padding: 3px 10px;
    border-radius: 999px;
    color: var(--accent);
    background: var(--accent-dim);
    white-space: nowrap;
}
.pace-pill.tier-warn { color: var(--warning); background: rgba(240, 180, 41, 0.14); }
.pace-pill.tier-critical { color: var(--danger); background: rgba(240, 101, 74, 0.14); }
.tier-text-warn { color: var(--warning); }
.tier-text-critical { color: var(--danger); }
.settle { border-radius: 10px; padding: 12px 14px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.settle .lease-big { font-size: 1.5rem; }
.settle-owe { border-color: var(--danger); background: rgba(240, 101, 74, 0.10); }
.settle-refund { border-color: var(--accent); background: var(--accent-dim); }
.settle-text-owe { color: var(--danger); }
.settle-text-refund { color: var(--accent); }
.lease-terms summary { cursor: pointer; list-style: none; }
.lease-terms summary::-webkit-details-marker { display: none; }
.lease-terms summary h2 { display: inline; }
.lease-terms summary::after { content: ' ▾'; color: var(--text-muted); }
.lease-terms[open] summary { margin-bottom: 14px; }
.lease-terms[open] summary::after { content: ' ▴'; }
button.small { padding: 5px 10px; font-size: 0.8rem; }
.lease-table td.mono { white-space: nowrap; }