/* ============================================================
   HACCP — studija, koraci i opasnosti (planovi 107 i 108)

   Proširuje qms.css.

   PRVI DIO su razredi koje su ekrani M9-0 već koristili, a NIJEDAN list stilova
   ih nije definirao: `qms-form`, `qms-form-actions`, `qms-field-row`,
   `qms-checklist`, `qms-checkitem`. Ekran se zato nije raspao — Bootstrapov
   `.form-control` nosi polje sam — nego je samo izgubio razmake, a popis kvačica
   se slio u redak teksta. Takav kvar prolaz kroz sučelje ne vidi, jer ekran
   izgleda uvjerljivo; vidi ga se samo kad se razredi prebroje.

   Imena su općenita, pa ovo ostaje u haccp listu samo dok ga ne zatraži drugi
   modul — tada ide u qms-layout.css, gdje i spada.

   DRUGI DIO je M9-1: korak u dijagramu tijeka i opasnost na njemu.
     - OZNAKA VRSTE OPASNOSTI (biološka, kemijska, fizikalna, alergen);
     - OZNAKA ZNAČAJNOSTI, i okvir za značajnu opasnost BEZ MJERE — to nije
       prazno polje nego nedovršen posao, pa nosi isti oblik kao rupa u kontekstu;
     - PRIJEDLOG ZNAČAJNOSTI uz obrazac: bodovi, razina i što sustav predlaže,
       prije spremanja.
   ============================================================ */

/* ============================================================
   1. OBRAZAC — razredi koje je M9-0 koristio bez stila
   ============================================================ */
.qms-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Dva stupca na širokom, jedan na uskom. Polja se ne stišću pod 220 px jer
   ispod toga datum i šifra prelome oznaku. */
.qms-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    align-items: start;
}

.qms-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid var(--line-soft);
    margin-top: 2px;
}

/* Popis kvačica: omeđen i s vlastitim pomicanjem, jer šifrarnik skupina kod
   PIK-a ima desetke redaka i inače rastegne karticu u nedogled. */
.qms-checklist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
}

.qms-checkitem {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-2);
    margin: 0;
}

.qms-checkitem:hover {
    background: var(--surface-3);
}

.qms-checkitem input {
    flex: 0 0 auto;
    margin: 0;
}

.qms-checkitem input:disabled + span {
    color: var(--ink-3);
}

/* Okvir praznog stanja u žutoj varijanti: ikona nosi ton, tekst ostaje
   `qms-state-note` iz qms.css. Postojao je samo `--error`, pa je upozorenje
   dosad imalo ugašenu sivu ikonu i čitalo se kao obavijest. */
.qms-state--warn i {
    color: var(--warn-text);
}

/* ============================================================
   2. KORACI — popis na detalju studije
   ============================================================ */
.qms-hac-cardhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.qms-hac-cardhead > i {
    color: var(--accent-text);
}

.qms-hac-cardhead > span:first-of-type {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-strong);
}

/* Oznaka koraka — „1", „2a", „7.1". Monospace jer se čita kao redoslijed. */
.qms-hac-korak {
    display: inline-block;
    min-width: 2.2em;
    padding: 1px 6px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--surface-3);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    text-align: center;
}

/* ============================================================
   3. OZNAKE
   ============================================================ */
.qms-hac-vrsta,
.qms-hac-znacaj {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Vrsta opasnosti: četiri, i norma ih propisuje. SVE ČETIRI NOSE ISTI TON, a
   razlikuje ih znak. Alergen je isprva imao žutu — izgledalo je kao oznaka, a
   čitalo se kao ljestvica: ozbiljnost opasnosti je ocjena, ne vrsta. Biološka
   opasnost na prijemu sirovine je redovito teža od alergena na istom koraku. */
.qms-hac-vrsta {
    background: var(--neutral-soft);
    border-color: var(--line-strong);
    color: var(--ink-2);
}

/* Značajna opasnost — crveno jer je to ono što plan mora držati. */
.qms-hac-znacaj.is-yes {
    background: var(--bad-soft);
    border-color: var(--bad);
    color: var(--bad-text);
}

.qms-hac-znacaj.is-no {
    background: transparent;
    border-color: var(--line);
    color: var(--ink-3);
}

/* Korak bez ijedne opasnosti: nije uredan nego neprovjeren. Žuta, ne siva. */
.qms-hac-stanje {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.qms-hac-stanje.is-empty {
    color: var(--warn-text);
}

.qms-hac-stanje.is-ok {
    color: var(--good-text);
}

/* ============================================================
   4. OKVIR NEDOVRŠENOG POSLA
   Značajna opasnost bez mjere nadzora. Isti oblik kao rupa u kontekstu: to nije
   prazno polje nego jedino što HACCP traži da se vidi.
   ============================================================ */
.qms-hac-rupa {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--bad);
    border-left-width: 3px;
    border-radius: 8px;
    background: var(--bad-soft);
    font-size: 13px;
    color: var(--ink-2);
}

.qms-hac-rupa > i {
    color: var(--bad-text);
    font-size: 15px;
    line-height: 1.4;
}

/* ============================================================
   5. PRIJEDLOG ZNAČAJNOSTI uz obrazac opasnosti
   Bodovi i razina su ishod ljestvice; prijedlog je ono što sustav misli, i
   pokazuje se PRIJE spremanja, da odluka ne bude iznenađenje nakon klika.
   ============================================================ */
.qms-hac-ishod {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.qms-hac-bodovi {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink-strong);
    line-height: 1;
}

.qms-hac-razina {
    font-size: 13px;
    color: var(--ink-2);
}

/* Prijedlog nosi i razlog — zašto sustav misli to što misli. Podloga s naglaskom
   posvjetljuje tekst ispod sebe, pa prigušeni ton ide za stupanj jače (--ink-2). */
.qms-hac-prijedlog {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 8px 10px;
    border: 1px solid var(--accent-line);
    border-radius: 8px;
    background: var(--accent-soft);
    font-size: 13px;
    color: var(--ink-2);
}

.qms-hac-prijedlog b {
    color: var(--ink-strong);
}

/* Odluka se razišla s prijedlogom: obrazloženje postaje obavezno, i to se kaže
   uz polje, prije klika — API bi inače vratio poruku nakon spremanja. */
.qms-hac-razlika {
    border-color: var(--warn);
    background: var(--warn-soft);
}

/* ============================================================
   6. MREŽA LJESTVICE
   Ista brojka se drukčije čita u 3×3 i u 5×5, pa se pokazuje gdje ocjena pada,
   a ne samo koliko iznosi. Isti obrazac kao matrica rizika.
   ============================================================ */
.qms-hac-matrix table {
    width: auto;
    min-width: 0;
}

.qms-hac-cell {
    text-align: center;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    min-width: 42px;
}

/* Polje koje sustav predlaže kao značajno. Obrub, ne ispuna — ispuna je razina
   bodova i ona ostaje čitljiva ispod. */
.qms-hac-cell.is-znacajna {
    outline: 2px solid var(--bad);
    outline-offset: -2px;
    font-weight: 700;
}

.qms-hac-matrix table thead th { text-align: center; font-size: 12.5px; color: var(--ink-3); }
.qms-hac-matrix table tbody th { text-align: right; font-size: 12.5px; color: var(--ink-3); }

/* Na uskom ekranu `qms-list` se raspada u kartice — to je ispravno za popis, a
   besmisleno za mrežu 5×5: redci i stupci SU sadržaj. Mreža zato ostaje tablica
   i pomiče se unutar svog spremnika. */
@media (max-width: 900px) {
    .qms-hac-matrix {
        overflow-x: auto;
    }

    .qms-hac-matrix .qms-list,
    .qms-hac-matrix .qms-list tbody,
    .qms-hac-matrix .qms-list tr,
    .qms-hac-matrix .qms-list td,
    .qms-hac-matrix .qms-list th {
        display: revert;
        width: auto;
    }

    .qms-hac-matrix .qms-list thead {
        display: table-header-group;
    }

    .qms-hac-matrix .qms-list tbody tr {
        border: 0;
        border-radius: 0;
        background: none;
        padding: 0;
        margin: 0;
    }

    .qms-hac-matrix .qms-list tbody td {
        border: 1px solid var(--line);
        padding: 6px 8px !important;
    }
}

/* ============================================================
   7. STABLO ODLUČIVANJA (M9-2)
   Četiri pitanja, svako s vlastitim odgovorom. Tekst lijevo, odgovor desno —
   popis se čita kao razgovor, a ne kao obrazac.
   ============================================================ */
.qms-hac-stablo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 14px;
}

.qms-hac-pitanje {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 14px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--surface-2);
}

.qms-hac-pitanje-tekst {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13.5px;
    color: var(--ink-2);
}

/* Na uskom ekranu odgovor ide pod pitanje; 160 px uz tekst ondje ne stane. */
@media (max-width: 720px) {
    .qms-hac-pitanje {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================
   8. PRAVNA GRANICA (M9-3)
   „Odluku smije li roba van donosi čovjek." Stoji na vrhu ekrana odstupanja,
   ne u uputi — to nije savjet nego granica odgovornosti.

   Ton je obavijest, ne upozorenje: pravilo nije kvar nego okvir u kojem se radi.
   ============================================================ */
.qms-hac-granica {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    background: var(--surface-2);
    font-size: 13px;
    color: var(--ink-2);
}

.qms-hac-granica > i {
    color: var(--accent-text);
    font-size: 15px;
}

.qms-hac-granica b {
    color: var(--ink-strong);
}

/* ============================================================
   9. RAZVRSTAVANJE ARTIKALA U SKUPINE (/Admin/ProductGroups)

   Ekran je do 04.10.2026. samo mjerio razvrstanost; razvrstavanja nije bilo.
   Popis, odabir redova i traka odabira dolaze iz kuće (`qms-list.css`,
   `qms-list.js`), pa je ovdje samo ono što je ovom ekranu vlastito:
   raspored filtra, birač skupine u traci i oznaka „nerazvrstano“.
   ============================================================ */

/* Pretraga nosi dvostruku širinu prikaza: u nju se upisuje, u prikaz se bira. */
.qms-skp-filter {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

/* Napomena uz brojku označenih. Stoji u traci s podlogom naglaska, a na njoj
   prigušen tekst ide za stupanj jače (--ink-2, ne --ink-4) — podloga
   posvjetljuje ono ispod sebe. */
.qms-skp-scope {
    font-size: 13px;
    color: var(--ink-2);
}

/* Birač skupine u traci odabira: ne razvlači se preko cijele trake, ali mora
   pokazati šifru I naziv skupine, pa ne ide ni pod 240 px. */
.qms-skp-pick {
    width: auto;
    min-width: 240px;
    max-width: 360px;
}

/* „Nerazvrstano" je STANJE, ne šifra — pa nije oznaka sa šifrom nego prigušen
   tekst. Traži pažnju dok je tu, ali nije pogreška u zapisu. */
.qms-skp-none {
    color: var(--ink-4);
    font-style: italic;
}

/* Izlaz iz prazne pretrage stoji uz objašnjenje, u istom redu. Tema je
   specifičnija od razreda (`body[class*="qms-theme"] a` nosi boju naglaska),
   pa pravilo mora ići istim oblikom — inače boja nikad ne stigne. */
body[class*="qms-theme"] .qms-skp-clear {
    margin-left: 8px;
    color: var(--accent-text);
    text-decoration: underline;
}

@media (max-width: 900px) {
    .qms-skp-filter { grid-template-columns: minmax(0, 1fr); }

    /* Traka odabira na uskom ekranu: „Odznači sve" uzima svoj red, a birač i
       gumb dijele sljedeći. Bez prelamanja gumb „Razvrstaj označeno" IZLAZI IZ
       EKRANA — izmjereno na 375 px: desni rub gumba 446 px, a stranica široka
       375. Prelamanje je vezano na vlastiti razred trake (`qms-skp-bar`), da
       pravilo kuće ostane jedno i ovdje se ne prepisuje. */
    .qms-skp-bar .qms-selbar-actions { flex-wrap: wrap; }
    .qms-skp-bar .qms-deselect { flex: 1 1 100%; }
    .qms-skp-pick { flex: 1 1 auto; min-width: 0; max-width: none; }
}

/* ---- Veza odstupanja na šaržu (plan 178, odluka A4) ------------------- */

/* Zaseban blok ispod obrasca odstupanja: drugi posao, pa i drugi okvir. */
.qms-hac-sarza {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--line);
}
.qms-hac-sarza-vez { font-size: 12.5px; color: var(--ink-2); }
.qms-hac-sarza-vez i { margin-right: 5px; color: var(--ink-4); }

.qms-hac-sarza-forma { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.qms-hac-sarza-forma .form-select { min-width: 260px; }

@media (max-width: 700px) {
    .qms-hac-sarza-forma .form-select { min-width: 0; width: 100%; }
}