/* Velyx Management — styles du module catalog (variables et classes du socle uniquement). */

/* Grande vignette en tête des fiches objet et véhicule. */
.thumb.item-hero-thumb { width: 112px; height: 112px; flex: none; border: 0; background: var(--surface-2); }
.thumb.vehicle-hero-thumb { width: 220px; aspect-ratio: 16 / 9; flex: none; border: 0; background: var(--surface-2); }
.thumb.store-drawer-thumb { width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--surface-2); }

/* Pastille de couleur (couleurs personnalisées, néons, fumée des pneus). */
.veh-swatch { display: inline-block; width: 16px; height: 16px; border: 0; vertical-align: middle; }

/* Les liens « carte » gardent la couleur du texte. */
a.ocard, a.inv-slot { color: inherit; text-decoration: none; }

@media (max-width: 640px) {
  .thumb.item-hero-thumb { width: 80px; height: 80px; }
  .thumb.vehicle-hero-thumb { width: 100%; }
}

/* Lignes de réglage (handling, armes) : libellé, curseur, saisie, valeur par défaut et écart. */
.tune-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(120px, 1fr) 104px minmax(170px, auto); gap: 14px; align-items: center;
  padding: 10px 16px; box-shadow: inset 0 -1px 0 var(--line); }
.tune-row:last-child { box-shadow: none; }
.tune-row.over { background: var(--surface-2); }
.tune-row .tl { min-width: 0; }
.tune-row .tl b { display: block; font-size: 13px; font-weight: 600; }
.tune-row .tl small { display: block; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tune-row input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; }
.tune-row input[type="range"]:disabled { cursor: default; opacity: .5; }
.tune-row input[type="number"] { height: 34px; }
.tune-row .tr { display: flex; gap: 8px; align-items: center; justify-content: flex-end; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tune-row .tr b { color: var(--inv-ink); font-weight: 600; }

/* Choix par recherche (propriétaire, modèle). */
.cat-pick-block { display: grid; gap: 8px; }
.cat-pick-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.cat-pick { display: grid; gap: 6px; }
.cat-pick-list { display: grid; gap: 2px; max-height: 240px; overflow: auto; }
.cat-pick-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 8px 12px;
  border: 0; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cat-pick-item:hover { background: var(--surface-3); }
.cat-pick-item.on { background: var(--surface-3); cursor: default; }
.cat-pick-item b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-pick-item small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  .tune-row { grid-template-columns: minmax(0, 1fr) 104px; gap: 8px 12px; }
  .tune-row .tl, .tune-row .tr { grid-column: 1 / -1; }
  .tune-row .tr { justify-content: flex-start; }
}

/* Carte des véhicules stationnés : carte + liste côte à côte (#/registered-vehicles?tab=map), mini-carte de la fiche. */
.cat-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.mini-map.cat-map { height: 460px; }
.drawer .mini-map { height: 200px; }
@media (max-width: 960px) {
  .cat-split { grid-template-columns: minmax(0, 1fr); }
  .mini-map.cat-map { height: 320px; }
}