/* ==========================================================================
   forms.css — čisti obrazci, velika polja, segmentirani gumbi, napake
   ========================================================================== */

.form-field { margin-bottom: var(--space-5); }

/* Izjema velja SAMO za polje, ki je NEPOSREDNO zadnje v obrazcu.
   Prej se je glasila `.form-field:last-child` in je zajela tudi zadnje polje v
   OVOJU (npr. `<div id="room-fields">`, ki skriva skupino polj). Tako polje pa v
   obrazcu ni zadnje — naslednja oznaka se je zalepila nanj brez razmika.
   Prizadeti so bili kalkulatorji s skupinami polj: barva, elektrika, ploščice,
   beton, davek na promet nepremičnin. */
form > .form-field:last-child { margin-bottom: 0; }

.field-label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

/* Ovoj polja z enoto (enota prikazana ob vrednosti) */
.field-control {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-medium);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field-control:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.field-control input,
.field-control select {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-lg);
  color: var(--color-text);
  padding: 0.95rem 1rem;
  border-radius: var(--radius-medium);
}
.field-control input:focus,
.field-control select:focus { outline: none; box-shadow: none; }

.field-unit {
  flex: none;
  padding-right: 1rem;
  padding-left: 0.25rem;
  color: var(--color-muted);
  font-size: var(--text-base);
  font-weight: 600;   /* namesto 500 — da ni treba nositi cele dodatne debeline pisave */
  white-space: nowrap;
}

/* Samostojni select (brez enote) */
.select-control {
  position: relative;
}
.select-control select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font: inherit;
  font-size: var(--text-lg);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-medium);
  padding: 0.95rem 2.75rem 0.95rem 1rem;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.select-control select:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
.select-control::after {
  content: "";
  position: absolute;
  right: 1.1rem; top: 50%;
  width: 10px; height: 10px;
  margin-top: -3px;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.field-help {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.field-error {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-error);
  display: none;
}
.form-field.has-error .field-control,
.form-field.has-error .select-control select {
  border-color: var(--color-error);
}
.form-field.has-error .field-control:focus-within {
  box-shadow: 0 0 0 3px var(--color-error-soft), 0 0 0 1px var(--color-error);
}
.form-field.has-error .field-error { display: block; }

/* --- Segmentirani gumbi (sodobna zamenjava za radio) -------------------- */
.segmented {
  display: flex;
  flex-wrap: wrap;
  padding: 4px;
  gap: 4px;
  background: var(--color-surface-2);
  border-radius: var(--radius-medium);
  width: 100%;
}
/* `display: flex` + `span { flex: 1 }`: ko je .segmented raztegnjen na višino soseda
   (v .field-cluster ob vnosnem polju), mora pilulo raztegniti tudi navznoter — sicer
   ostane visoka le 44 px in v višjem sivem ovoju »plava«, kar ni poravnano z poljem. */
.segmented__option { flex: 1 1 30%; position: relative; cursor: pointer; display: flex; }
.segmented__option input {
  position: absolute; opacity: 0; inset: 0; cursor: pointer;
}
.segmented__option span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;              /* udobna dotik-tarča */
  text-align: center;
  padding: 0.5rem 0.9rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
  border-radius: var(--radius-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.segmented__option input:checked + span {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-xs);
}

/* Štiri izbire: privzeta osnova 30 % stisne tri v vrstico, četrta pa pade podnje
   in ostane sredinjena — videti je kot napaka. 45 % da urejeno mrežo 2 × 2 pri
   vsaki širini; postavitev je enaka na telefonu in namizju, oznake pa se ne lomijo. */
.segmented--quad .segmented__option { flex: 1 1 45%; }
.segmented__option input:focus-visible + span { box-shadow: var(--focus-ring); }

/* --- Checkbox kot pill stikalo --------------------------------------- */
.check-pill { display: inline-flex; position: relative; cursor: pointer; }
.check-pill input {
  position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0;
}
.check-pill span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
  background: var(--color-surface);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.check-pill span::before {
  content: "";
  width: 18px; height: 18px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 6px;
  flex: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.check-pill input:checked + span {
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.check-pill input:checked + span::before {
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color: var(--color-primary);
}
.check-pill input:focus-visible + span { box-shadow: var(--focus-ring); }

/* Splošno obvestilo o napaki v obrazcu */
.form-error-general {
  margin-bottom: var(--space-4);
  border-color: var(--color-error);
  background: var(--color-error-soft);
  color: var(--color-error);
}

.form-actions { margin-top: var(--space-5); }

/* Sestavljeno polje: vrednost + enota (npr. obdobje + Meseci/Leta).
   ENO polje z eno oznako, katerega kontrola je sestavljena iz več delov.
   Za več SAMOSTOJNIH polj drug ob drugem glej .field-row spodaj. */
.field-cluster {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}
.field-control--grow { flex: 1 1 auto; }

/* --- Vrstica samostojnih polj ------------------------------------------
   Več polj (vsako s svojo oznako) drug ob drugem — npr. dolžina + širina + višina.
   Na namizju je stolpec obrazca dovolj širok za dve do tri polja; obrazec je tako
   bistveno nižji in sorodna polja so vidno povezana.

   Prelom NI vezan na širino zaslona, ampak na širino stolpca obrazca: ta se med
   900 in 1200 px zaslona precej zoži (glej responsive.css, .calculator-layout).
   Zato flex-wrap + osnova v `--field-basis`: ko za polje ni več toliko prostora,
   se samo prelomi v svojo vrstico — pri vsaki širini in poljubnem številu polj.
   Medijsko poizvedbo bi morali za vsak primer posebej uganiti. */
.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-4);
  margin-bottom: var(--space-5);
}
/* `flex: 1 1 var(--field-basis)` da enako široke stolpce ne glede na dolžino oznak
   in enot; `min-width: 0` prepreči, da bi daljša enota razširila svoj stolpec.
   Razmik med polji prevzame `gap`, zato lastni margin polja odpade.

   240 px NI poljubna vrednost: pri ~430 px stolpca (zaslon 900 px) bi se dve polji
   po 200 px sicer še stisnili v vrstico, oznake bi se prelomile v dve vrstici in
   vnosni polji ne bi bili poravnani. Pri 240 px se v tem primeru raje prelomita
   drugo pod drugo, dve polji v vrstici pa dobimo šele, ko sta res udobno široki. */
.field-row > .form-field {
  flex: 1 1 var(--field-basis, 240px);
  min-width: 0;
  margin-bottom: 0;
}
/* Tri polja v vrstici (npr. dolžina + širina + višina): kratke oznake in enote, zato
   je nižja osnova varna — brez nje bi se tretje polje prelomilo v »2 + 1«. */
.field-row--3 { --field-basis: 110px; }
form > .field-row:last-child { margin-bottom: 0; }

.segmented--compact {
  width: auto;
  flex: 0 0 auto;
}
.segmented--compact .segmented__option { flex: 0 0 auto; }
.segmented--compact .segmented__option span { padding-inline: 1.1rem; }

.field-optional { color: var(--color-faint); font-weight: 400; font-size: var(--text-xs); }

/* --- Sekcije dolgega obrazca -------------------------------------------
   Kadar ima obrazec več deset polj (npr. primerjava stroška lastništva), je
   naslov sekcije edino, kar bralcu pove, kje je. Brez njega je obrazec stena. */
.form-section + .form-section {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.form-section__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

/* --- Zložljiv blok z naprednimi polji ----------------------------------
   Native <details>: deluje brez JavaScripta in ga brskalnik sam poveže z
   bralnikom zaslona. Oblikujemo le videz vrstice, ki ga odpira. */
.adv-block {
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface-2);
  padding: 0 var(--space-4);
}
.adv-block > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  min-height: 44px;                 /* dotik-tarča */
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}
.adv-block > summary::-webkit-details-marker { display: none; }
.adv-block > summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-faint);
  transition: transform var(--dur) var(--ease);
}
.adv-block[open] > summary::after { transform: rotate(45deg); }
.adv-block > summary:hover { color: var(--color-text); }
.adv-block > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-small);
}
.adv-block[open] { padding-bottom: var(--space-4); }
/* Zadnje polje v odprtem bloku nima odvečnega repa. */
.adv-block > .field-row:last-child,
.adv-block > .form-field:last-child { margin-bottom: 0; }

/* Vrstica z gumbom za zamenjavo (npr. pretvornik enot) */
.swap-row { display: flex; justify-content: center; margin: calc(var(--space-5) * -0.5) 0 var(--space-4); }

/* --- Pretvornik: »iz« → gumb za zamenjavo → »v« -------------------------
   Privzeto zloženo eno pod drugim. V vrsto gre šele, ko je STOLPEC OBRAZCA
   dovolj širok — zato @container in ne medijska poizvedba: širina zaslona tu
   ni dober pokazatelj. Pri 900–1100 px zaslona je stolpec obrazca najožji
   (asimetrična postavitev, glej responsive.css), pri 700 px zaslona pa je
   obrazec čez celo širino in torej ŠIRŠI. Brskalnik brez @container ostane
   pri zloženi postavitvi — to je delujoča postavitev, ne okvara. */
.field-row--swap {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-3);
}
/* V stolpčni postavitvi je glavna os NAVPIČNA, zato bi podedovani `flex-basis: 240px`
   iz .field-row določal VIŠINO polja (240 px visoko polje s prazinino pod izbirnikom),
   ne širine. Osnovo zato prevzamemo nazaj na vsebino; širino dobi polje iz `stretch`. */
.field-row--swap > .form-field { flex: 0 0 auto; }
.swap-col { display: flex; flex-direction: column; align-items: center; }

/* Prazna oznaka enake velikosti kot prava: gumb tako sam sede v isto vrstico kot
   izbirnika, brez ugibanja odmika v pikslih. Vidna je le v vrstični postavitvi. */
.swap-col__spacer { display: none; }

.swap-btn { flex: none; }

@container (min-width: 560px) {
  .field-row--swap { flex-direction: row; align-items: flex-start; }
  .field-row--swap > .form-field { flex: 1 1 0; min-width: 0; }
  .swap-col { flex: 0 0 auto; }
  .swap-col__spacer { display: block; }
  /* Med izbirnikoma je pomen gumba očiten iz položaja; beseda vzame le prostor.
     Kvadratna mera velja SAMO tu — v zloženi postavitvi je gumb z besedo in bi mu
     bila širina 52 px pretesna (besedilo bi ušlo iz gumba in razširilo stran). */
  .swap-btn__text { display: none; }
  .swap-btn {
    width: 52px;
    height: 52px;
    padding: 0;
    font-size: var(--text-lg);
  }
}

@media (max-width: 520px) {
  .field-cluster { flex-direction: column; }
  .segmented--compact { width: 100%; }
  .segmented--compact .segmented__option { flex: 1 1 0; }
  /* Tri ozka polja v vrstici so na telefonu pretesna; poln stolpec jih zloži enega
     pod drugega. Dvostolpčni .field-row se pri tej širini prelomi že sam (osnova 240 px). */
  .field-row--3 { --field-basis: 100%; }
}