/* === v1.53 leasing vozilo: vozilo leasing predmeta =================================================================
   leasing-vehicle.mjs (HTML) + app.js "[v1.53 leasing vozilo]" (ponašanje). Polje "Vozilo" (tražilica ili odabrano
   vozilo) u obrascu predmeta i u tabu Izračun leasinga; sličica vozila u retku popisa. Samo raspored; boje su tokeni
   (svijetla tema i iCare). Redak padajućeg popisa dijeli izgled s tražilicom dosjea (.vqs-row u vehicle-search.css). */

/* Polje preko cijelog reda obrasca (3 stupca) */
.leasing-form-grid > .lvp { grid-column: 1 / -1; }
.lvp { gap: 6px; }
.lvp-label { color: var(--ink-2); font-size: 12px; font-weight: 560; }
.lvp-req { color: var(--danger); }
.lvp-opt { color: var(--ink-3); font-weight: 450; }
.lvp-help { margin: 0; color: var(--ink-3); font-size: 12px; font-weight: 450; }
.lvp-error { margin: 0; color: var(--danger); font-size: 12.5px; font-weight: 600; }

/* Tražilica: polje do 640 px, popis ispod polja (lijevo poravnat), iznad ostatka obrasca */
.lvp-search { position: relative; display: flex; align-items: center; gap: 8px; max-width: 640px; }
.lvp-search > .lvp-input { flex: 1 1 auto; min-width: 0; padding-left: 34px; }
.lvp-icon { position: absolute; left: 12px; top: calc(var(--control-h) / 2); translate: 0 -50%; display: inline-flex; color: var(--ink-3); pointer-events: none; }
.lvp.is-invalid .lvp-input { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft, transparent); }
.lvp-cancel { flex: 0 0 auto; }
.lvp-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-menu);
  width: max(100%, 520px); max-width: min(640px, calc(100vw - 32px));
  max-height: min(470px, 60vh); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-pop); text-align: left;
}
.lvp-pop[hidden] { display: none; }
.lvp-row:hover:not(.is-active) { background: var(--surface-soft); }
.lvp-row .vqs-title::after { content: none; }   /* nije poveznica: cijeli redak bira (mousedown u app.js) */
.lvp-side { flex-direction: column; align-items: flex-end; gap: 4px; }
.lvp-price { color: var(--ink-2); font-family: var(--num); font-size: 12.5px; font-weight: 650; white-space: nowrap; }

/* Odabrano vozilo: sličica 120 × 80 (kao Moja vozila) · naziv · registracija · VIN (zadnja 4 istaknuta) · godište · cijena */
.lvp-card, .lvp-legacy {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  max-width: 820px; padding: 10px 12px 10px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-soft);
}
.lvp-legacy { grid-template-columns: 120px minmax(0, 1fr); border-style: dashed; background: transparent; max-width: 640px; }
.lvp-card.is-changing { opacity: 0.6; }
.lvp-thumb {
  width: 120px; aspect-ratio: 3 / 2; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--radius-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3);
}
.lvp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lvp-thumb svg { width: 26px; height: 26px; }
.lvp-main { display: grid; gap: 5px; min-width: 0; }
.lvp-title { color: var(--ink); font-size: 15px; font-weight: 650; line-height: 1.3; }
.lvp-version { color: var(--ink-3); font-size: 13px; font-weight: 450; }
.lvp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; color: var(--ink-3); font-size: 12.5px; font-weight: 450; }
.lvp-vin { color: var(--ink-3); font-family: var(--num); font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; }
.lvp-vin b { color: var(--ink); font-weight: 700; }
.lvp-missing { color: var(--warn, var(--ink-3)); }
.lvp-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.lvp-card + .lvp-search, .lvp-legacy + .lvp-search { margin-top: 4px; }

/* Uski obrazac (prozor / telefon): radnje ispod naziva, sličica 96 px */
@media (max-width: 640px) {
  .lvp-card, .lvp-legacy { grid-template-columns: 96px minmax(0, 1fr); gap: 10px 12px; }
  .lvp-thumb { width: 96px; }
  .lvp-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .lvp-pop { width: 100%; }
  /* redak popisa: sličica 56 px, cijena i stanje ispod naziva (naziv i VIN ne ulaze u oznaku stanja) */
  .lvp-pop .vqs-row { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
  .lvp-pop .vqs-thumb { width: 56px; grid-row: span 2; }
  .lvp-pop .lvp-side { grid-column: 2; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px; }
}
.mobile-shell .lvp-input { height: 44px; font-size: 16px; }   /* 16 px: iOS ne zumira pri fokusu */
.mobile-shell .lvp-icon { top: 22px; }

/* === Sličica vozila u retku popisa predmeta ("početna slika vozila"): ispred klijenta ============================== */
.leasing-client { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.leasing-client-main { flex: 1 1 auto; min-width: 0; }
.leasing-thumb {
  flex: 0 0 auto; width: 96px; aspect-ratio: 3 / 2; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--radius-sm); background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3);
}
.leasing-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leasing-thumb svg { width: 22px; height: 22px; }
.leasing-thumb.is-empty { opacity: 0.7; }
a.leasing-thumb:hover { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 2px var(--brand-soft); }
.mobile-shell .leasing-thumb { width: 84px; }

/* Sličica (+108 px) proširuje tablicu Praćenja s ~1193 na ~1300 px. Panel 1200–1360 px (prozor ~1340–1480 px, npr.
   1366 i 1440 px s izbornikom zatvorenim): druga skupina radnji ("Predujam …" · "Platne liste … ⋯") se lomi u dva reda —
   stupac radnji je ~120 px uži, redak nije viši (klijent sa sličicom i oznakama je ionako najviši), a svi stupci stanu
   bez vodoravnog skrolera. "⋯" ostaje uz zadnji gumb (.row-actions-tail). Šire: dvije skupine kao prije. */
@container listpanel (width > 1200px) and (width <= 1360px) {
  .app-shell:not(.mobile-shell) .leasing-actions-cell .row-actions-group:last-child { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
}