/* === v1.69.0 Gume ↔ Gumax B2B =======================================================================================
   gume/gumax-view.mjs (HTML) + app.js „[v1.69.0 Gumax]” (ponašanje). Tab „S Gumaxa” (stanje čitanja, „Finance”, kartice
   narudžbi sa stavkama i odabirom „Naše vozilo / Za nekoga”), sličica „za koga” i Gumax oznaka u retku Guma, „Stiglo”.
   Samo raspored; boje su tokeni (svijetla tema i iCare). Tražilica vozila je Leasingova (leasing-vehicle.css). */

.gx-tab { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }

/* --- Stanje čitanja --- */
.gx-status { display: grid; gap: 12px; }
.gx-status-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gx-status-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); flex: 0 0 auto; }
.gx-status-ico svg { width: 22px; height: 22px; }
.gx-status.is-running .gx-status-ico svg { animation: gx-spin 1.6s linear infinite; }
@keyframes gx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gx-status.is-running .gx-status-ico svg { animation: none; } }
.gx-status-text { flex: 1 1 260px; min-width: 0; }
.gx-status-text h2 { margin: 0; font-size: 16px; }
.gx-status-text p { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; }
.gx-status-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gx-status-error { margin: 0; display: flex; gap: 6px; align-items: center; color: var(--danger); font-size: 13px; font-weight: 560; }
.gx-status-changes { margin: 0; color: var(--ink-2); font-size: 12.5px; }
.gx-status-foot { margin: 0; color: var(--ink-3); font-size: 12px; }

.gx-finance { display: flex; flex-wrap: wrap; gap: 8px; }
.gx-fin {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-soft);
  font-size: 12.5px; color: var(--ink-3);
}
.gx-fin b { color: var(--ink); font-family: var(--num); font-size: 13.5px; font-weight: 650; }
.gx-fin.is-danger { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.gx-fin.is-danger b { color: var(--danger); }
.gx-fin.is-warn { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.gx-fin.is-warn b { color: var(--warn); }
.gx-fin.is-text b { font-family: inherit; }

.gx-cred { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)) auto; gap: 10px 12px; align-items: end; }
.gx-cred-help { grid-column: 1 / -1; margin: 0; color: var(--ink-3); font-size: 12.5px; }
.gx-cred-help.is-error { color: var(--danger); }
.gx-cred-actions { display: flex; gap: 8px; }
@media (max-width: 720px) { .gx-cred { grid-template-columns: minmax(0, 1fr); } }

/* --- Popis narudžbi --- */
.gx-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; color: var(--ink-2); font-size: 13px; }
.gx-filter-days { display: inline-flex; align-items: center; gap: 8px; }
.gx-filter-days select { width: auto; }
.gx-filter-hidden { display: inline-flex; align-items: center; gap: 6px; }
.gx-filter-count { margin-left: auto; color: var(--ink-3); }
.gx-order-list { display: grid; gap: 12px; }
.gx-empty { margin: 8px 0; color: var(--ink-3); }

.gx-order { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.gx-order.is-hidden { opacity: 0.65; border-style: dashed; }
.gx-order.is-done { background: var(--surface-soft); }
.gx-order-head {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: 6px 16px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-soft);
}
.gx-order-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.gx-order-title > b { font-family: var(--num); font-size: 14px; }
.gx-order-date { color: var(--ink-3); font-size: 12.5px; }
.gx-order-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; min-width: 0; color: var(--ink-3); font-size: 12.5px; }
.gx-order-meta span { display: inline-flex; align-items: center; gap: 4px; }
.gx-order-total { color: var(--ink); font-family: var(--num); font-size: 13.5px; }
.gx-order-actions { display: flex; gap: 6px; justify-content: flex-end; }
@container listpanel (max-width: 860px) {
  .gx-order-head { grid-template-columns: minmax(0, 1fr) auto; }
  .gx-order-meta { grid-column: 1 / -1; grid-row: 2; }
}

.gx-items { display: grid; }
.gx-item {
  display: grid; grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.6fr); gap: 10px 18px; align-items: start;
  padding: 12px 14px;
}
.gx-item + .gx-item { border-top: 1px solid var(--line); }
@container listpanel (max-width: 860px) { .gx-item { grid-template-columns: minmax(0, 1fr); } }
.gx-item-tire { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.gx-tire-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); flex: 0 0 auto; }
.gx-tire-ico svg { width: 20px; height: 20px; }
.gx-item-text { display: grid; gap: 4px; min-width: 0; }
.gx-item-name { color: var(--ink); font-size: 14px; line-height: 1.3; }
.gx-item-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--ink-3); font-size: 12.5px; }
.gx-dim { color: var(--ink); font-family: var(--num); font-weight: 650; }
.gx-empty-items { margin: 0; padding: 12px 14px; color: var(--ink-3); font-size: 13px; }

.gx-assign { display: grid; gap: 8px; min-width: 0; }
.gx-seg { display: inline-flex; width: max-content; max-width: 100%; padding: 3px; gap: 3px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-soft); }
.gx-seg-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 560; box-shadow: none;
}
.gx-seg-btn.is-on { background: var(--surface); color: var(--brand-strong); box-shadow: var(--shadow-xs); }
.gx-assign-body .lvp-search { max-width: 520px; }
.gx-assign-body .lvp-card { max-width: 640px; }
.gx-who-field { max-width: 520px; }
.gx-assign-actions { display: flex; gap: 8px; }
.gx-assign-actions [aria-disabled="true"] { opacity: 0.6; }
.gx-assign-error { margin: 0; color: var(--danger); font-size: 12.5px; font-weight: 600; }
.gx-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 2px; }
.gx-suggest-label { color: var(--ink-3); font-size: 12.5px; }
.gx-suggest-btn { max-width: 100%; white-space: normal; text-align: left; }

.gx-linked { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.gx-linked-ok { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-size: 13px; font-weight: 600; }
.gx-linked-meta { color: var(--ink-3); font-size: 12.5px; }

/* --- „Za koga” u retku i u tabu --- */
.gx-who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.gx-thumb {
  flex: 0 0 auto; width: 72px; 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);
}
.gx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gx-thumb svg { width: 20px; height: 20px; }
.gx-thumb.is-empty { opacity: 0.7; }
/* „za nekoga”: isti okvir i mjesto kao slika vozila (Matija 30.10.: „čovječuljak neka bude pozicioniran isto kao auto”) */
.gx-thumb.is-person { background: var(--brand-soft); color: var(--brand-strong); box-shadow: none; }
.gx-thumb.is-person svg { width: 26px; height: 26px; }
.gx-thumb-link { display: inline-flex; border-radius: var(--radius-sm); }
.gx-thumb-link:hover .gx-thumb { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 2px var(--brand-soft); }
.gx-who-main { display: grid; gap: 2px; min-width: 0; }
.gx-who-title { color: var(--ink); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.gx-who-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; color: var(--ink-3); font-size: 12px; }

/* --- Dorada 30.10.: vozilo prvo ---
   U tablici je „Vozilo / za koga” prvi stupac s većom slikom; na kartici (uži panel ≤ 1200 px, mobitel) prvi red preko
   cijele širine, a ostale uloge red niže (dimenzija i iznos 2., datumi i status 3.; polja s oznakom se slažu sama).
   U tablici grid-row ne djeluje. Specifičnost je iznad pravila slaganja u styles.css / ui.css (0,5,1). */
.tire-table td.tire-who-cell .gx-thumb { width: 88px; }
.tire-table td.tire-who-cell > .tire-context-badge { display: flex; width: fit-content; }   /* uvijek ispod slike, i na kartici */
.app-shell .tire-page .tire-table.is-stack tbody tr > td[data-cell="who"] { grid-column: 1 / -1; grid-row: 1; padding-bottom: 4px; }
.app-shell .tire-page .tire-table.is-stack tbody tr > td:is([data-cell="title"], [data-cell="amount"]) { grid-row: 2; }
.app-shell .tire-page .tire-table.is-stack tbody tr > td:is([data-cell="meta"], [data-cell="status"]) { grid-row: 3; }

/* redak bez vozila (nova narudžba s Gumaxa): prazna sličica + „Odaberi vozilo” (otvara obrazac s tražilicom vozila) */
button.gx-thumb.is-pick {
  min-height: 0; padding: 0; border: 1px dashed var(--line-strong); background: var(--surface-soft); box-shadow: none;
  color: var(--ink-3); cursor: pointer;
}
button.gx-thumb.is-pick:hover, button.gx-thumb.is-pick:focus-visible { border-color: var(--brand); color: var(--brand-strong); background: var(--brand-soft); }
.gx-pick-btn {
  min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; text-align: left; cursor: pointer;
  color: var(--brand-strong); font-weight: 600; line-height: 1.25;
}
.gx-pick-btn:hover { background: none; text-decoration: underline; }

/* --- Gumax oznaka ispod dimenzije --- */
.gx-row-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; font-size: 12px; }
.gx-link { color: var(--brand-strong); font-family: var(--num); font-weight: 600; text-decoration: none; white-space: nowrap; }
a.gx-link:hover { text-decoration: underline; }
/* cijena stavke: s PDV-om i bez PDV-a (dorada 30.10.) — u retku Guma i na stavci taba „S Gumaxa” */
.gx-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; color: var(--ink-3); }
.gx-price > span { white-space: nowrap; }
.gx-price b { color: var(--ink-2); font-family: var(--num); font-weight: 600; }
.gx-price .is-net b { font-weight: 500; }
.gx-track { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-2); font-family: var(--num); font-size: 12px; white-space: nowrap; text-decoration: none; }
a.gx-track:hover { color: var(--brand-strong); text-decoration: underline; }

.gx-form-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: var(--radius); }
.gx-form-link .gx-row-badge { margin-top: 0; }
.tire-form-vehicle { margin-bottom: 4px; }

.gx-hint {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px;
  padding: 8px 12px; border: 1px solid var(--brand-line, var(--line)); border-radius: var(--radius); background: var(--brand-soft); color: var(--brand-strong); font-size: 13px; font-weight: 560;
}
.gx-hint span { display: inline-flex; align-items: center; gap: 8px; }
.gx-hint svg { width: 18px; height: 18px; }

.gx-finish { color: var(--ok); }