/* ============================================================
   Karlix QMS — raspored koji se ponavljao kao umetnuti stil (plan 097, N-04)

   Pravilo iz CLAUDE.md kaže da inline stilovi ne idu u .cshtml. Imalo je 201
   iznimku, ali to nije bio 201 različit raspored nego **nekoliko obrazaca
   prepisanih po ekranima**: zaglavlje iznad popisa stajalo je isto na dvanaest
   ekrana, a par „sitno i prigušeno" tridesetak puta.

   Ovdje stoje samo ti ponovljeni obrasci. Jednokratni raspored ostaje gdje jest
   dok mu se ne nađe mjesto — razred koji se koristi jednom nije bolji od
   umetnutog stila.

   Ne dira qms.css ni njegove tokene; koristi ih. Dopunjuje qms-pagehead.css,
   koji već nosi .qms-page-head.
   ============================================================ */

/* ------------------------------------------------------------
   1. Zaglavlje iznad popisa

   .qms-page-head (qms-pagehead.css) već raspoređuje sam red. Nedostajala su
   mu dva djeteta: stup s naslovom i podnaslovom, te skupina gumba desno.
   ------------------------------------------------------------ */

.qms-head-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* `margin-left: auto` ostaje i kad se red prelomi, pa skupina gumba na uskom
   zaslonu i dalje ide udesno. */
.qms-head-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Podnaslov uz naslov popisa („140 aktivnih · 245 ukupno“). Nije isto što i
   .qms-page-note unutar .qms-page-head: taj je 12.5px, ovaj 13px. Razlika je
   zatečena i ovdje se ne ujednačava, da zahvat ostane bez vidljive promjene. */
.qms-head-note {
    font-size: 13px;
}

/* ------------------------------------------------------------
   2. Dvije poveznice u traci filtara

   „Očisti sve" i „Odznači sve" su ista dva gumba na svakom popisu. Noviji
   moduli su za prvi izmislili po jedan razred (qms-emp-clear, qms-ind-clear,
   qms-obj-clear, qms-riz-clear, qms-dob-clear, qms-rev-clear, qms-notif-clear)
   — sedam imena za isto pravilo — a stariji su ga pisali umetnuto.

   Drugi, .qms-deselect, već JE jedan razred na svih deset ekrana, samo pravilo
   za njega nikad nije napisano: stariji moduli su ga dopunjavali umetnutim
   stilom, noviji nisu, pa je ista poveznica izgledala različito.
   ------------------------------------------------------------ */

.qms-filter-clear {
    font-size: 12.5px;
}

.qms-deselect {
    font-size: 12.5px;
    padding-left: 4px;
}

/* ------------------------------------------------------------
   3. Prigušena boja — mora se pisati OVAKO

   Tema nosi `body[class*="qms-theme"] a` i `… .btn-link` s bojom naglaska, a to
   je specifičnije od samog razreda. Pravilo napisano uz veličinu iznad ne bi
   prošlo, pa bi poveznice i gumb ostali tirkizni — kao što su i bili u novijim
   modulima: njihov `.qms-ind-clear { color: var(--ink-3) }` nikad nije ni
   primijenjen. U starijim modulima je prolazilo samo zato što je umetnuti stil
   jači od svega.

   Mjereno, ne pretpostavljeno: bez ovog pravila „Očisti sve" i gumb na
   nadzornoj ploči pokazuju oklch(.82 .09 195) umjesto #8b9298.
   ------------------------------------------------------------ */

body[class*="qms-theme"] .qms-head-note,
body[class*="qms-theme"] .qms-filter-clear,
body[class*="qms-theme"] .qms-deselect {
    color: var(--ink-3);
}

/* Na registru dokumenata stoji s druge strane oznake. */
.qms-deselect--right {
    padding-left: 0;
    padding-right: 4px;
}

/* ------------------------------------------------------------
   4. Mapa tijeka (plan 099, N-14)

   Koraci koriste razrede iz qms-case.css — stepper je kanonski oblik i ne smije
   izgledati drukčije ovisno o modulu. Ovdje stoji samo ono čega ondje nema:
   podredak koji javlja da nešto NEDOSTAJE (odobrena promjena bez imena
   odobravatelja, t. 8.5.6). Obična bilješka i manjak ne smiju izgledati isto.
   ------------------------------------------------------------ */

.qms-step-note.is-manjak { color: var(--bad-text); }

/* ------------------------------------------------------------
   5. Povučeni status (plan 100, N-03)

   Zapis u statusu koji tijek više ne nudi ostaje na putu — vidi se, ima točnu
   fazu i nudi prijelaz naprijed. Ali to mora i pisati, inače korisnik traži
   svoj status u popisu i ne nalazi ga. Prigušeno, ne crveno: ovo nije kvar
   zapisa nego povijest šifrarnika.
   ------------------------------------------------------------ */

.qms-status-povucen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--ink-3);
}

/* ------------------------------------------------------------
   6. Široka tablica u kartici (plan 113)

   `.qms-card` ima `overflow: hidden` zbog zaobljenih rubova. Tablica šira od
   kartice se zato ne razvlači — **odreže se**, i odrezanog dijela nema kako
   dohvatiti.

   Izmjereno na /Equipment pri 375px: omotač 345 px, tablica 900 px. Vidjelo se
   Oznaka, Naziv i pola Vrste; Lokacija, Interval, Zadnje, **Rok**, Zadnji nalaz
   i **Stanje** nisu postojali. Stranica pritom nije imala vodoravnu traku, pa
   se kvar ne vidi ni mjerenjem širine dokumenta — samo usporedbom omotača i
   onoga što je u njemu.

   Omotač je u 25 pogleda stajao bez ijednog pravila i nije radio ništa. Ovo mu
   daje posao po kojem je i nazvan.

   Zašto ne slaganje u kartice kao `.qms-list`: za to treba `data-label` na
   svakoj ćeliji, a tih 26 tablica ih nema nijedan (160 `<td>`, 0 oznaka). To je
   odluka o izgledu sedam modula na telefonu i ide u vlastiti prolaz.
   ------------------------------------------------------------ */

.qms-table-wrap { overflow-x: auto; }

/* ------------------------------------------------------------
   7. Mreža obrasca (plan 113)

   `qms-osp-form-grid` i `qms-emp-form-grid` bile su **ista pravila pod dva
   imena**, a Certifikati su posegnuli za općim `qms-form-grid` kojeg nitko nije
   napisao — pa im je obrazac padao u jedan stupac.

   Isti nalaz kao decimala u polju (plan 112): lokalna kopija dobrog rješenja ne
   širi se, jer ju ništa ne može prepoznati. Ime je zato opće.
   ------------------------------------------------------------ */

.qms-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.qms-field--wide { grid-column: 1 / -1; }

/* ------------------------------------------------------------
   8. Popis parova dt/dd (plan 113)

   `<dl>` bez pravila ima pregledničke margine i `<dd>` uvučen 40px, pa su
   Certifikati i HACCP prikazivali podatke kao uvučeni popis umjesto kao
   parove. Redak je `<div><dt>…</dt><dd>…</dd></div>`, kako ga pogledi već pišu.
   ------------------------------------------------------------ */

.qms-deflist { margin: 0; display: flex; flex-direction: column; gap: 10px; }

.qms-deflist > div {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.qms-deflist dt {
    flex: 0 0 150px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--ink-3);
}

.qms-deflist dd {
    margin: 0;
    min-width: 0;
    font-size: 13px;
    color: var(--ink-2);
}

@media (max-width: 700px) {
    .qms-deflist > div { flex-direction: column; gap: 2px; }
    .qms-deflist dt { flex: none; }
}

/* ------------------------------------------------------------
   9. Prazno stanje unutar kartice (plan 113)

   `.qms-state` je napravljen za prazan ekran: 26px razmaka i sredina. Unutar
   kartice uz druge sadržaje to je previše, pa je polovica.
   ------------------------------------------------------------ */

.qms-state--inline { padding: 14px 16px; }

/* ------------------------------------------------------------
   10. Povratak na popis u glavi zapisa (plan 113)

   Certifikati su jedini modul koji poviše naslova nosi tekstualnu poveznicu
   natrag. Tema je specifičnija od razreda (`body[class*="qms-theme"] a`), pa
   boja mora ići istim oblikom — inače pravilo ne prolazi.
   ------------------------------------------------------------ */

.qms-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
}

body[class*="qms-theme"] .qms-back { color: var(--ink-3); }
body[class*="qms-theme"] .qms-back:hover { color: var(--ink-strong); text-decoration: none; }

/* ------------------------------------------------------------
   11. Obrazac u jednom retku (plan 113)

   Polje i gumb koji zajedno čine jednu radnju: naziv nove studije, naziv
   skupine proizvoda. Bez pravila je `<form>` blok, pa su polje i gumb padali
   jedno pod drugo i u ćeliji tablice razvlačili redak.
   ------------------------------------------------------------ */

.qms-inline-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qms-inline-form .form-control { min-width: 0; }

/* ============================================================
   Redak koji TRAŽI PAŽNJU (M25-1, 03.10.2026.)

   Stoji ovdje, a ne u datoteci jednog modula, jer je isto stanje u dvama:
   skupina zahtjeva koju nitko nije razmotrio i dobavljač bez ijedne
   specifikacije. Oboje je rupa na mjestu gdje zapis izgleda uredan.

   PAŽNJA, ne zapreka: boja upozorava, ne zabranjuje. Podloga je blaga
   (`-soft`), pa prigušen tekst na njoj ide za stupanj jače — isto pravilo kao
   kod nepročitane obavijesti.
   ============================================================ */
body[class*="qms-theme"] .qms-row--paznja > td {
    background: var(--warn-soft);
}

body[class*="qms-theme"] .qms-row--paznja .qms-hint {
    color: var(--ink-2);
}

/* ============================================================
   Redak koji je UGAŠEN (plan 212, 23.10.2026.)

   Stoji ovdje, kao i pažnja, jer je isto stanje u dvama registrima: vrsta
   otpada koja se više ne nudi i (do sada umetnuto) ugašeni rizik.

   PRIGUŠUJE SE TEKSTOM, NE PROZIRNOŠĆU. `opacity` dime i podlogu i tekst, pa
   omjer padne ispod 4,5 : 1 i redak se više ne može pročitati — a ugašena
   vrsta se MORA moći pročitati, inače se ne može ni uključiti natrag.
   `--ink-4` je mjeren prigušen tekst (5,5 : 1 na kartici).
   ============================================================ */
body[class*="qms-theme"] .qms-row--ugaseno > td {
    color: var(--ink-4);
}

/* ------------------------------------------------------------
   12. Oblici koji su se ponavljali umetnuti (plan 185, odluka D)

   `CLAUDE.md` kaže da umetnutih stilova u pogledima nema, a plan 097 ih je
   ostavio pod zaprekom na 136 jer je ostatak izgledao kao dug rep
   jednokratnih slučajeva.

   IZMJERENO 06.10.2026.: od 136 statičnih, **92 su se ponavljala** — isti niz
   svojstava na dva do osam mjesta. To nisu jednokratni slučajevi nego
   neimenovani obrasci, a razred koji se koristi osam puta nije „razred radi
   razreda".

   Ostaje ono što doista jest jednokratno (širine stupaca pojedine tablice,
   pojedinačni `padding`) — ondje bi razred bio samo drugo ime za isti stil.
   ------------------------------------------------------------ */

/* Ćelija s dva retka: naslov i podredak. Osam mjesta u pet registara. */
.qms-cellstack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Bez `min-width: 0` dugačak naslov razvlači stupac i tablica izlazi iz
       kartice — isti kvar kao `qms-table-wrap` (plan 113). */
    min-width: 0;
}

/* Ista ćelija, poravnata uz desni rub: brojke i radnje. */
.qms-cellstack--end {
    align-items: flex-end;
    gap: 6px;
}

/* Podredak u ćeliji: ono što naslov pojašnjava. */
.qms-cellsub { margin-top: 2px; }

/* Veličina ide KROZ TEMU, kao i boja ispod: `.qms-railhead > i` je
   `(0,1,1)` i tuče sam razred `(0,1,0)`. Izmjereno na produkciji — bez
   ovoga je strelica u zaglavlju tračnice bila 13,5px umjesto 11px, a prije
   prelaska je umetnuti stil tučio sve. */
body[class*="qms-theme"] .qms-cellsub { font-size: 12.5px; }
body[class*="qms-theme"] .qms-cellmicro { font-size: 11px; }

/* Ćelija koja uzima preostali prostor, a ne razvlači tablicu. */
.qms-grow {
    flex: 1;
    min-width: 0;
}

/* Potisnuto uz desni rub unutar flex-reda. */
.qms-pushright { margin-left: auto; }

/* `<form>` koji stoji u retku teksta (gumb uz vrijednost), ne kao blok.

   IZMJERENO, i jedno mjesto od šest ga doista treba. Na ostalih pet je
   roditelj `flex` ili `inline-flex`, pa je `<form>` FLEKS STAVKA — a njoj
   `display: inline` **blokificira** sam CSS. Umetnuti stil je ondje bio
   mrtav jednako kao što bi bio i razred, i to se nije vidjelo nigdje osim
   izmjerenom vrijednošću (isti rod kao `qms-table-wrap`, plan 113). Razred
   zato stoji samo gdje je roditelj `table-cell`. */
.qms-forminline { display: inline; }

/* `<summary>` koji se otvara klikom, bez trokutića preglednika. */
.qms-toggle {
    cursor: pointer;
    list-style: none;
}
.qms-toggle::-webkit-details-marker { display: none; }

/* Prigušen tekst.

   Boja ide kroz temu, ne kroz sam razred: `body[class*="qms-theme"] a` i
   `… .btn-link` nose boju naglaska i specifičniji su od razreda, pa
   `.qms-dim { color: … }` na poveznici ne bi prošao (v. odjeljak 3 i
   CLAUDE.md). Mjereno, ne pretpostavljeno. */
body[class*="qms-theme"] .qms-dim { color: var(--ink-3); }
body[class*="qms-theme"] .qms-cellsub { color: var(--ink-3); }
body[class*="qms-theme"] .qms-cellmicro { color: var(--ink-3); }

/* Traka „nije odabrana kompanija" (plan 203).

   Stoji iznad sadržaja na SVAKOM ekranu dok kompanija nije odabrana, jer bez
   nje je svaki popis prazan — a prazan popis izgleda kao podatak.

   Boja je `--warn` obitelj: ovo nije greška (ništa nije puklo) nego stanje
   koje korisnik treba razriješiti. Tekst ide kroz `-text` ton, jer je podloga
   blaga (CLAUDE.md, „Boja teksta mora proći mjerenje"). */
/* Izbornik koji nije učitan (plan 318) ima isti oblik: stanje, a ne greška. */
.qms-nokompanija,
.qms-izbornici-nedostupni {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid color-mix(in oklch, var(--warn) 45%, transparent);
    border-radius: 10px;
    background: var(--warn-soft);
    font-size: 14px;
}
body[class*="qms-theme"] .qms-nokompanija,
body[class*="qms-theme"] .qms-izbornici-nedostupni { color: var(--warn-text); }
body[class*="qms-theme"] .qms-nokompanija a { color: var(--warn-text); font-weight: 600; }
.qms-nokompanija i,
.qms-izbornici-nedostupni i { font-size: 16px; }

/* Obrazac u ćeliji tablice (plan 212 → poopćeno planom 215).

   Nastao je za dozvolu prijevoznika, a sada ga traže još dva ekrana energije:
   nositelj se ispravlja u svom redu, vrijednost imenitelja upisuje u svom.
   Uzorak je isti i razlog je isti: ulaz stoji UZ NALAZ koji zatvara, a to
   znači obrazac u tablici — ondje `qms-form-grid` ne radi, jer bi tri polja
   razbio u stupce širine 230px i ćeliju razvukao preko ekrana.

   Oznake polja su vidljive, ne skrivene: polje bez pristupnog imena čita se
   kao „edit text" (plan 184), a `span.qms-field-label` nije oznaka. */
.qms-cell-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .5rem .75rem;
}

/* Polje i njegova oznaka drže se zajedno: oznaka zauzima cijeli red unutar
   svoje skupine, pa svaka trojka (oznaka + polje) stoji kao jedan stupac. */
.qms-cell-form .qms-field-label {
    display: block;
    width: 100%;
    margin-bottom: -.25rem;
}

.qms-cell-form .form-control,
.qms-cell-form .form-select {
    flex: 1 1 11rem;
    min-width: 0;
}

.qms-cell-form .qms-datefield {
    flex: 1 1 11rem;
}

.qms-cell-form button {
    flex: 0 0 auto;
}

/* Na telefonu red postaje stupac — polja jedno pod drugim, s oznakama. */
@media (max-width: 575.98px) {
    .qms-cell-form {
        display: grid;
        grid-template-columns: 1fr;
        gap: .5rem;
    }
}

/* ============================================================
   ZAGLAVLJE KARTICE SE LOMI NA TELEFONU (plan 238)
   ============================================================
   IZMJERENO U PREGLEDNIKU na 375 px, na naslovnici produkcije:
   `.qms-card-head` je `flex-wrap: nowrap`, pa legenda grafa (RIN / UN /
   zatvoreni, 224 px) pocinje na x=159 i zavrsava na 383 — 39 px izvan
   kartice. Kartica ima `overflow: hidden`, pa je zadnja oznaka
   „zatvoreni" BILA ODREZANA: graf je imao tri boje, a legenda dvije.

   Ovo je isti oblik kvara kao `qms-table-wrap` iz plana 113 — sadrzaj
   odrezan omotacem koji se ne skrola, i nevidljiv na svakom testu.

   Prag je 560 px, a ne svugdje: na stolnom zaslonu naslov i legenda stoje
   u istom redu NAMJERNO, i to se ne dira. */
@media (max-width: 560px) {
    .qms-card-head { flex-wrap: wrap; row-gap: 8px; }

    /* Legenda ide u svoj red, poravnata lijevo s naslovom. */
    .qms-card-head .qms-legend { margin-left: 0; flex-wrap: wrap; row-gap: 6px; }
}