/* ═══════════════════════════════════════════════════════════════
   GENERISANO iz itt/ui-kit v0.3.0 — NE EDITUJ RUČNO.
   Izvor = src/*.css u tom repou. Ručna izmena preživi do sledećeg builda.

   Zahteva itt/design-tokens (tokens.css) UČITAN PRE ovog fajla —
   ovde nema nijedne boje, samo var(--field-*) / var(--button-*).
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   field — polje unosa (input / select / textarea) + red forme
   itt/ui-kit · VERSION 0.1.0

   ZAŠTO POSTOJI (nalaz 2026-07-14): [D] rečnik je imao primitiv za dugme, ali
   NIJEDAN za polje. `core.css` polja stilizuje ELEMENT-selektorom
   `input[type="text"], select, textarea` — a `<input>` BEZ `type` atributa taj
   selektor NE HVATA, iako se ponaša kao tekstualno polje. Tako je `modules/ytv`
   dobio gola bela polja iako CSS „postoji", dok je `<select>` bio uredan.

   ZATO JE `field` KLASA, NE ELEMENT-SELEKTOR: klasa ne može da promaši zbog
   zaboravljenog atributa. Isto važi za `<div contenteditable>` ili bilo šta što
   sutra bude polje a nije `<input>`.

   ZAKON: nijedan hex, nijedan rgb — samo var(--field-*) / var(--button-*) iz
   itt/design-tokens (D4). Ovaj fajl ne sme znati nijednu boju.
   ═══════════════════════════════════════════════════════════════ */

/* ─── polje ─── */
.field {
    background: var(--field-bg);
    border: var(--field-border-w) solid var(--field-border);
    border-radius: var(--field-radius);
    padding: var(--field-padding-y) var(--field-padding-x);
    color: var(--field-text);
    font-family: var(--field-font);
    font-size: var(--field-font-size);
    line-height: 1.4;
    outline: none;
    transition: border-color var(--field-transition), background var(--field-transition);
}

.field::placeholder { color: var(--field-placeholder); }

.field:focus,
.field:focus-visible { border-color: var(--field-border-focus); }

/* Stanja koja u zatečenom CSS-u NE POSTOJE — forma bez njih nije forma.
   `.invalid` (ručno) i `[aria-invalid=true]` (pristupačnost) idu zajedno:
   čitač ekrana i oko moraju videti istu stvar. */
.field.invalid,
.field[aria-invalid="true"] {
    border-color: var(--field-invalid-border);
    background: var(--field-invalid-bg);
}

.field:disabled,
.field[disabled],
.field[aria-disabled="true"] {
    background: var(--field-disabled-bg);
    color: var(--field-disabled-text);
    cursor: not-allowed;
}

/* select: strelica je sistemska; ne diramo je (ponašanje ≠ izgled).
   textarea: rastezanje samo po visini — horizontalno lomi layout reda. */
select.field { cursor: pointer; }
textarea.field { resize: vertical; min-height: calc(var(--field-height) * 2); }

/* ─── grupa: labela + polje + poruka ─── */
.field-group {
    display: flex;
    flex-direction: column;
    gap: var(--field-row-gap);
}

.field-label {
    color: var(--field-label-text);
    font-size: var(--field-label-font-size);
    font-weight: var(--field-label-weight);
}

.field-hint  { color: var(--field-hint-text);  font-size: var(--field-label-font-size); }
.field-error { color: var(--field-error-text); font-size: var(--field-label-font-size); }

/* ─── red forme (vodoravno: polja + dugmad) ─── */
.form-row {
    display: flex;
    gap: var(--field-row-gap);
    align-items: center;
    flex-wrap: wrap;
}

/* Polje u redu raste, dugme ne. `min-width: 0` je obavezan: bez njega flex stavka
   ne sme da se skupi ispod svog sadržaja i dugi placeholder razvuče ceo red. */
.form-row .field {
    flex: 1;
    min-width: 0;
}

/* Kontrole u istom redu moraju biti iste visine. Danas se poklapaju SLUČAJNO
   (isti padding), ne po ugovoru — `--field-height` to zaključava. */
.form-row .field,
.form-row .btn,
.form-row .btn-sm { height: var(--field-height); }

.form-row textarea.field { height: auto; }

/* ═══════════════════════════════════════════════════════════════
   button — SAMO ono što nedostaje (`.btn-sm`)
   itt/ui-kit · VERSION 0.1.0

   OPSEG, NAMERNO UZAK: `.btn` / `.btn-primary` / `.btn-danger` / `.btn-solid`
   VEĆ POSTOJE u `core.css` i rade. Njihov prevod na tokene je izmena postojećeg
   izgleda → nosi parity rizik → radi se odvojeno, posle koraka 3 (lint), kad
   postoji mreža koja hvata pad. Ovde se ne dira ništa što radi.

   `.btn-sm` je druga priča: koristi se **7×** (ytv, aibo…) a NE POSTOJI NIGDE —
   ni u foundation-u ni u app-u. Modul koji ga napiše dobije SISTEMSKO dugme
   (bez `.btn` klase nema ni osnovnih stilova). Dodavanje je čisto aditivno:
   nova klasa, nula parity rizika, i bez njega korak 5 (prepravka `ytv`) ne može
   da se uradi bez izmišljanja.

   ZAKON: nijedan hex — samo var(--button-*) iz itt/design-tokens (D4).
   ═══════════════════════════════════════════════════════════════ */

/* Nasleđuje sve od `.btn` (piše se `class="btn btn-sm"`), menja samo meru.
   Samostalan `.btn-sm` bez `.btn` je greška — lint (korak 3) će je hvatati. */
.btn-sm {
    padding: var(--button-sm-padding-y) var(--button-sm-padding-x);
    font-size: var(--button-sm-font-size);
    gap: var(--button-sm-gap);
}

/* ═══════════════════════════════════════════════════════════════
   stepper — koraci višekoračnog toka (wizard)
   itt/ui-kit · VERSION 0.2.0

   ZAŠTO POSTOJI (CTO 2026-07-16, Ingest Kokpit SPEC v7 §15.1): wizard 0→7
   traži vizuelni jezik za „gde sam / šta je prošlo / šta je palo" — [D] rečnik
   nije imao NIJEDAN primitiv za korake. Bez ovoga svaki wizard izmišlja svoje
   (isti obrazac kao `.input`/`.form-row` presedan).

   MARKUP UGOVOR (ponašanje = potrošačev JS, K2; kit daje samo oblik):
     <ol class="stepper">
       <li class="stepper-step done"><span class="stepper-dot">✓</span><span class="stepper-label">Preflight</span></li>
       <li class="stepper-step active" aria-current="step"><span class="stepper-dot">2</span><span class="stepper-label">Izvor</span></li>
       <li class="stepper-step"><span class="stepper-dot">3</span><span class="stepper-label">Opseg</span></li>
     </ol>

   Stanja: (bez klase)=pending · .active/[aria-current="step"]=tekući ·
   .done=završen · .error=pao. Kao kod `field.invalid`/[aria-invalid]: klasa i
   aria atribut idu ZAJEDNO — čitač ekrana i oko vide isto.

   ZAKON: nijedan hex, nijedan rgb — samo var(--stepper-*) iz itt/design-tokens
   (D4). Ovaj fajl ne sme znati nijednu boju.
   ═══════════════════════════════════════════════════════════════ */

/* ─── traka koraka ─── */
.stepper {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: stepper;
}

/* ─── korak: dot iznad labele, konektor linija ka PRETHODNOM koraku ─── */
.stepper-step {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--stepper-gap) / 2);
    text-align: center;
}

/* Konektor: od sredine prethodnog do sredine ovog koraka, u visini centra
   dot-a. Prvi korak nema odakle da dođe — nema ni linije. */
.stepper-step::before {
    content: '';
    position: absolute;
    top: calc(var(--stepper-dot-size) / 2 - var(--stepper-line-w) / 2);
    right: 50%;
    width: 100%;
    height: var(--stepper-line-w);
    background: var(--stepper-line);
    transition: background var(--stepper-transition);
}

.stepper-step:first-child::before { display: none; }

/* Linija se „pali" IZA završenog koraka: konektor pripada koraku DESNO od
   sebe, pa je zelen kad je korak LEVO (prethodni sibling) done. */
.stepper-step.done + .stepper-step::before { background: var(--stepper-done-line); }

/* ─── dot (krug sa brojem / ✓ / ✕) ─── */
.stepper-dot {
    position: relative; /* iznad konektor linije */
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--stepper-dot-size);
    height: var(--stepper-dot-size);
    border-radius: 50%;
    background: var(--stepper-dot-bg);
    border: var(--stepper-line-w) solid var(--stepper-dot-border);
    color: var(--stepper-dot-text);
    font-size: var(--stepper-dot-font-size);
    font-weight: var(--stepper-dot-weight);
    transition: background var(--stepper-transition), border-color var(--stepper-transition), color var(--stepper-transition);
}

.stepper-label {
    color: var(--stepper-label-text);
    font-size: var(--stepper-label-font-size);
    font-weight: var(--stepper-label-weight);
    overflow-wrap: anywhere; /* duga labela lomi red, ne razvlači traku */
}

/* ─── stanja ─── */
.stepper-step.active .stepper-dot,
.stepper-step[aria-current="step"] .stepper-dot {
    background: var(--stepper-active-dot-bg);
    border-color: var(--stepper-active-dot-border);
    color: var(--stepper-active-dot-text);
}

.stepper-step.active .stepper-label,
.stepper-step[aria-current="step"] .stepper-label {
    color: var(--stepper-active-label-text);
}

.stepper-step.done .stepper-dot {
    background: var(--stepper-done-dot-bg);
    border-color: var(--stepper-done-dot-border);
    color: var(--stepper-done-dot-text);
}

.stepper-step.done .stepper-label { color: var(--stepper-done-label-text); }

/* Završen korak je legitimna meta povratka (potrošačev JS odlučuje) —
   pointer je afordans, ponašanje NIJE u kitu. */
.stepper-step.done { cursor: pointer; }

.stepper-step.error .stepper-dot {
    background: var(--stepper-error-dot-bg);
    border-color: var(--stepper-error-dot-border);
    color: var(--stepper-error-dot-text);
}

.stepper-step.error .stepper-label { color: var(--stepper-error-label-text); }

/* ═══ SHELL — responsive chrome (K2, Faza 3) ═══════════════════════════════
   Off-canvas drawer + hamburger za ≤ bp-mobile. DESKTOP baza (.sidebar/.topbar/
   .main-content pozicioniranje) živi u foundation core.css; OVDE su SAMO responsive
   override-i (mobilni). Rail (769–900px) ostaje u core.css @media.

   Breakpoint = 768px → ui-kit build INJEKTUJE iz --shell-bp-mobile
   (design-tokens). @media ne prima var() (K1/K4); hand-typed breakpoint = ZABRANJEN.

   Ponašanje (otvori/zatvori/ESC/route-close/scroll-lock) = foundation core.js (K2:
   jedna impl po runtime-u; ovde je vanilla/browser). Nijedna boja — samo var(--…) (D4).
   ══════════════════════════════════════════════════════════════════════════ */

/* Hamburger — skriven na desktopu; ponaša se kao dugme (boja/ivica iz tokena). */
.shell-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-bright);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.shell-hamburger:hover { border-color: var(--accent); }

/* Backdrop — scrim iza otvorene fioke; skriven dok fioka nije otvorena. */
.shell-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--overlay);
  opacity: 0;
  transition: opacity 0.22s ease;
  border: 0;
  cursor: pointer;
}

@media (max-width: 768px) {
  /* Sidebar → off-canvas fioka (pun sadržaj, ne rail). z iznad topbara i backdrop-a. */
  .sidebar {
    width: var(--shell-sidebar-width);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 160;
    will-change: transform;
  }
  body.shell-drawer-open .sidebar { transform: translateX(0); }

  /* Topbar preko pune širine (sidebar je off-canvas); hamburger se pojavljuje. */
  .topbar { left: 0; }
  .main-content { margin-left: 0; }
  .shell-hamburger { display: inline-flex; }

  /* Gust desktop sadržaj koji preliva na uskom ekranu se sklanja (povod: overflow na zoom/mobilnom). */
  .topbar-center,
  .topbar-layout-btn { display: none; }

  /* Backdrop aktivan tek kad je fioka otvorena. */
  .shell-backdrop { display: block; }
  body.shell-drawer-open .shell-backdrop { opacity: 1; }

  /* Zaključaj skrol pozadine dok je fioka otvorena. */
  body.shell-drawer-open { overflow: hidden; }
}