/* Vehicle Market screen. Shared pieces come from kit/; this file holds the market filters,
 * the valuation panel and the listing states mapped onto kit status tokens. */

/* Listing states. Each pill shows an icon and a word. */
.pill.active    { --status: var(--success); --i: var(--icon-check); }
.pill.pending, .pill.paid { --status: var(--info); --i: var(--icon-lock); }
.pill.sold      { --status: var(--info);    --i: var(--icon-check); }
.pill.cancelled, .pill.expired { --status: var(--neutral); --i: var(--icon-quiet); }
.pill.void      { --status: var(--warning); --i: var(--icon-warning); }
.pill.garaged   { --status: var(--success); --i: var(--icon-check); }
.pill.out       { --status: var(--warning); --i: var(--icon-warning); }
.pill.listed    { --status: var(--info);    --i: var(--icon-lock); }
.pill.blocked   { --status: var(--neutral); --i: var(--icon-lock); }

.balance { color: var(--ink-2); font-weight: 600; }
.plate {
    display: inline-block;
    margin-left: var(--sp-2);
    padding: 0 var(--sp-2);
    border: var(--border) solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink-2);
    font-size: var(--fs-sm);
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}
.car-name { font-weight: 600; white-space: nowrap; }

/* Market filters */
.filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.6fr);
    gap: 0 var(--sp-3);
    margin-bottom: var(--sp-3);
    padding-top: var(--sp-1);
    padding-bottom: var(--sp-1);
}
.search-box { position: relative; display: block; }
.search-box .i { position: absolute; left: var(--sp-3); top: 50%; margin-top: -.55em; color: var(--muted); pointer-events: none; }
.search-box input { padding-left: calc(var(--sp-3) * 2 + 1.1em); }

#market td, #cars td, #mine td { white-space: nowrap; }
tr[data-car] { cursor: pointer; }
tr[data-car].selected td { background: var(--accent-soft); }

/* My cars on the left, valuation on the right */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-3); align-items: start; }

.worth { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-1); }
.worth strong { font-size: var(--fs-2xl); font-weight: 700; font-stretch: var(--stretch-display); line-height: 1; }
.factors { margin: var(--sp-3) 0; }
.factors .bar-row { grid-template-columns: 6rem minmax(0, 1fr) 12rem; }
.row .grow { flex: 1; }
.meta { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-4); margin: var(--sp-3) 0; align-items: center; }
.meta > span:nth-child(odd) { color: var(--muted); font-size: var(--fs-sm); }
.meta > span:nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; }
.panel-section { border-top: var(--border) solid var(--line); margin-top: var(--sp-4); padding-top: var(--sp-3); }
.panel-section h3 { font-size: var(--fs-md); font-weight: 650; margin-bottom: var(--sp-1); }
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); align-items: end; }
.price-row .field { margin-bottom: 0; }
.note { color: var(--muted); font-size: var(--fs-sm); margin: var(--sp-2) 0 0; }
.note.warn { color: var(--warning); }

/* Admin */
#daily .col { gap: var(--sp-1); }
.why { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
#confirm-body .meta { margin-top: 0; }

@media (max-width: 1200px) {
    .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }
}