/* ============================================================
   Osposobljenost, radna mjesta i obuke — plan 080, paket I1

   Proširuje qms.css, ne dira njegove tokene.

   Središnji dio je MATRICA. Ona ima jedan zahtjev koji nijedna druga tablica u
   aplikaciji nema: stupaca je onoliko koliko radno mjesto traži osposobljenosti,
   a to može biti i petnaest. Zato:

     - zaglavlje nosi KRATICU, a puni naziv stoji u legendi iznad tablice i u
       naslovu ćelije;
     - ćelija je kvadrat sa znakom, ne tekst — petnaest stupaca teksta ne stane
       ni na jedan ekran;
     - prvi stupac (ime) je „sticky", jer se vodoravno skrolanje bez imena čita
       kao niz znakova bez značenja;
     - boja nosi stanje, a znak ga ponavlja — tko ne razlikuje zeleno i crveno
       vidi kvačicu i iks.

   Četiri stanja, četiri razreda: ok / soon / expired / gap. Isti razredi
   koriste se i za ocjenu djelotvornosti, jer je i ona stanje s tri stupnja plus
   „nije ocijenjeno".
   ============================================================ */

/* ============================================================
   0. OBRASCI — zajedničko za sva četiri ekrana ovog paketa
   ============================================================ */

.qms-osp-form { display: flex; flex-direction: column; gap: 1rem; }

/* Mreža obrasca i polje preko cijele širine stoje u qms-layout.css pod općim
   imenom (plan 113): ovdje su bile iste dvije deklaracije kao u
   qms-employees.css, pod drugim imenom, pa se ni jedna ni druga nisu proširile
   na Certifikate — oni su posegnuli za `qms-form-grid` kojeg nije bilo. */

.qms-osp-req { color: var(--bad-text); }

/* `qms-field-hint` se koristi od paketa I0, ali pravilo za njega nije bilo
   napisano — objašnjenje ispod polja naslijedilo je veličinu tijela stranice i
   čitalo se kao dio obrasca, ne kao pojašnjenje. Definira se neomeđeno jer se
   koristi na više ekrana. */
.qms-field-hint {
    color: var(--ink-3);
    font-size: 12px;
    line-height: 1.6;
}

/* ============================================================
   1. ZAJEDNIČKO — oznake stanja
   ============================================================ */

.qms-osp-znak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1;
}

.qms-osp-znak.is-ok {
    background: var(--good-soft);
    border-color: var(--good);
    color: var(--good-text);
}

.qms-osp-znak.is-soon {
    background: var(--warn-soft);
    border-color: var(--warn);
    color: var(--warn-text);
}

.qms-osp-znak.is-expired {
    background: var(--bad-soft);
    border-color: var(--bad);
    color: var(--bad-text);
}

/* Rupa u OBVEZNOJ je nalaz i nosi obrub; rupa u poželjnoj je plan razvoja i
   samo je prigušena. Da su iste, matrica bi pokazivala dvadeset crvenih polja
   za nešto što nitko nije ni tražio. */
.qms-osp-znak.is-gap {
    background: var(--surface-3);
    border-color: var(--line-strong);
    color: var(--ink-3);
}

.qms-osp-znak.is-gap-soft {
    background: transparent;
    border-color: transparent;
    color: var(--ink-4);
}

/* ============================================================
   2. MATRICA
   ============================================================ */

/* `is-bad` i `is-good` na brojci u sažetku dolaze iz qms-rin.css i vrijede
   globalno; `is-warn` je tamo izostao i bio je dopisan samo za zaposlenike. Ovdje
   se dodaje neomeđeno, jer žuta brojka nije stvar jednog ekrana. */
.qms-summary-value.is-warn { color: var(--warn-text); }

/* Legenda: puni nazivi stupaca. Bez nje su kratice šifre, a šifre ne idu
   korisniku. */
.qms-matrica-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 11px 14px;
    color: var(--ink-2);
    font-size: 12.5px;
}

.qms-matrica-legenda-stavka {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.qms-matrica-kratica {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.qms-matrica-obvezna {
    color: var(--bad-text);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.qms-matrica-pozeljna {
    color: var(--ink-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Objašnjenje znakova — stoji jednom, iznad svih tablica. */
.qms-matrica-kljuc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 10px 14px;
    border-top: 1px solid var(--line-soft);
    color: var(--ink-3);
    font-size: 12px;
}

.qms-matrica-kljuc-stavka {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* ---- jedno radno mjesto ---- */
.qms-matrica-mjesto { display: flex; flex-direction: column; }

.qms-matrica-mjesto-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
}

.qms-matrica-mjesto-naziv {
    color: var(--ink-strong);
    font-size: 15px;
    font-weight: 600;
}

.qms-matrica-mjesto-jedinica {
    color: var(--ink-3);
    font-size: 12.5px;
}

.qms-matrica-mjesto-brojke {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-left: auto;
    font-size: 12.5px;
}

.qms-matrica-mjesto-brojke .is-bad { color: var(--bad-text); }
.qms-matrica-mjesto-brojke .is-warn { color: var(--warn-text); }
.qms-matrica-mjesto-brojke .is-muted { color: var(--ink-3); }

/* ---- tablica ---- */
.qms-matrica-table {
    width: auto;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.qms-matrica-table th,
.qms-matrica-table td {
    padding: 7px 9px;
    border-bottom: 1px solid var(--line-soft);
    text-align: center;
    vertical-align: middle;
}

/* Ime je jedini stupac koji nosi značenje kad se skrola vodoravno. */
.qms-matrica-table th.qms-matrica-ime,
.qms-matrica-table td.qms-matrica-ime {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 200px;
    padding-left: 16px;
    background: var(--surface);
    text-align: left;
}

.qms-matrica-table thead th {
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.qms-matrica-table thead th.qms-matrica-ime { background: var(--surface-2); }

.qms-matrica-table thead th.qms-matrica-stupac { min-width: 54px; }

.qms-matrica-stupac-obvezna { color: var(--ink-strong); }

.qms-matrica-table tbody tr:hover td { background: var(--surface-2); }
.qms-matrica-table tbody tr:hover td.qms-matrica-ime { background: var(--surface-2); }

.qms-matrica-osoba {
    display: block;
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
}

.qms-matrica-osoba:hover { color: var(--accent-text); text-decoration: underline; }

.qms-matrica-sifra {
    color: var(--ink-3);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

/* Redak osobe kojoj sve obvezno vrijedi — prigušen, da se problemi izdvoje sami. */
.qms-matrica-table tbody tr.is-uredan td.qms-matrica-ime .qms-matrica-osoba { font-weight: 400; }

.qms-matrica-zbir {
    min-width: 90px;
    white-space: nowrap;
    font-size: 11.5px;
}

.qms-matrica-zbir .is-bad { color: var(--bad-text); }
.qms-matrica-zbir .is-warn { color: var(--warn-text); }
.qms-matrica-zbir .is-ok { color: var(--good-text); }

/* Dokaz koji vrsta traži a nije upisan: točka u kutu ćelije. Ne mijenja stanje,
   samo kaže da se zapis na auditu ne može poduprijeti. */
.qms-matrica-celija { position: relative; }

.qms-matrica-bez-dokaza::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--warn);
}

/* ============================================================
   3. ŠTO MATRICA NE MJERI
   ============================================================
   Dva popisa koja su jedina razlika između matrice i matrice koja laže u korist
   sustava. Stoje ISPOD tablica, ali nose upozoravajući obrub. */

.qms-osp-nemjerljivo {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px 16px;
    border-left: 3px solid var(--warn);
}

.qms-osp-nemjerljivo-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--ink-strong);
    font-size: 14px;
    font-weight: 600;
}

.qms-osp-nemjerljivo-text {
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.6;
}

.qms-osp-nemjerljivo-popis {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 12.5px;
}

.qms-osp-nemjerljivo-popis a { color: var(--ink); }

/* ============================================================
   4. KATALOG VRSTA I RADNA MJESTA
   ============================================================ */

.qms-osp-table td,
.qms-osp-table th { vertical-align: middle; }

.qms-osp-naziv {
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
}

.qms-osp-naziv:hover { color: var(--accent-text); text-decoration: underline; }

.qms-osp-vrsta {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 11.5px;
    white-space: nowrap;
}

.qms-osp-rok {
    color: var(--ink-2);
    font-size: 12.5px;
    white-space: nowrap;
}

.qms-osp-rok.is-trajno { color: var(--ink-3); }

.qms-osp-prazno { color: var(--ink-3); font-style: italic; }

.qms-osp-brojka { font-variant-numeric: tabular-nums; }
.qms-osp-brojka.is-nula { color: var(--ink-3); }

/* Vrsta koja se ne traži ni na jednom radnom mjestu ne ulazi u matricu — to je
   zapis koji postoji i ne radi ništa. */
.qms-osp-neiskoristeno {
    color: var(--warn-text);
    font-size: 11.5px;
    white-space: nowrap;
}

/* ---- tražena osposobljenost na radnom mjestu ---- */
.qms-osp-trazeno {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.qms-osp-trazeno-redak {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line-soft);
}

.qms-osp-trazeno-redak:last-child { border-bottom: 0; }

.qms-osp-trazeno-naziv {
    color: var(--ink);
    font-weight: 500;
}

.qms-osp-trazeno-tag {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.qms-osp-trazeno-tag.is-obvezna {
    background: var(--bad-soft);
    color: var(--bad-text);
}

.qms-osp-trazeno-tag.is-pozeljna {
    background: var(--neutral-soft);
    color: var(--ink-3);
}

.qms-osp-trazeno-napomena {
    flex: 1 1 100%;
    color: var(--ink-3);
    font-size: 12px;
}

.qms-osp-trazeno-akcije {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

/* ---- obrazac „dodaj traženo" ---- */
.qms-osp-dodaj {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--line);
}

.qms-osp-dodaj .qms-field { min-width: 220px; }
.qms-osp-dodaj .qms-field--rast { flex: 1 1 260px; }

.qms-osp-chk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    color: var(--ink-2);
    font-size: 13px;
    white-space: nowrap;
}

/* ============================================================
   5. OBUKE
   ============================================================ */

.qms-obuka-broj {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
}

.qms-obuka-broj:hover { color: var(--accent-text); text-decoration: underline; }

.qms-obuka-naslov { color: var(--ink-2); }

.qms-obuka-iz-radnje {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent-text);
    font-size: 11.5px;
    white-space: nowrap;
}

.qms-obuka-sudionici {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.qms-obuka-bez-ocjene {
    color: var(--warn-text);
    font-size: 11.5px;
    white-space: nowrap;
}

/* ---- sudionici na detalju ---- */
.qms-sudionik-table td { vertical-align: middle; }

.qms-sudionik-ime {
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
}

.qms-sudionik-ime:hover { color: var(--accent-text); text-decoration: underline; }

.qms-sudionik-nije-bio { color: var(--ink-3); }

.qms-sudionik-rezultat {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.qms-sudionik-ocjena-datum {
    display: block;
    color: var(--ink-3);
    font-size: 11.5px;
    white-space: nowrap;
}

.qms-sudionik-akcije {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

/* Obrasci stoje U REDU sudionika, ne u prozoru koji se otvara.
   Razlog: lista prisutnosti se ispravlja u nizu — dvadeset ljudi, dvadeset
   kvačica. Prozor po osobi znači dvadeset otvaranja i zatvaranja, a to je posao
   koji se ne obavi do kraja. Tablica se vodoravno skrola, pa širina nije
   prepreka. */
.qms-sudionik-inline {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
}

.qms-sudionik-inline .form-control,
.qms-sudionik-inline .form-select {
    height: 30px;
    padding: 2px 7px;
    font-size: 12.5px;
}

.qms-sudionik-inline .qms-sudionik-broj { width: 74px; }
.qms-sudionik-inline .qms-sudionik-ocjena { width: 132px; }
.qms-sudionik-inline .qms-sudionik-datum { width: 132px; }
.qms-sudionik-inline .qms-sudionik-biljeska { width: 150px; }

.qms-sudionik-inline-chk {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink-2);
    font-size: 12px;
    white-space: nowrap;
}

.qms-sudionik-cell { white-space: nowrap; }

/* ---- privitci uz obuku ---- */
.qms-obuka-prilozi {
    display: flex;
    flex-direction: column;
}

.qms-obuka-prilog {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px;
    border-bottom: 1px solid var(--line-soft);
}

.qms-obuka-prilog:last-child { border-bottom: 0; }

/* `qms-file` je iz pogleda slučaja i nosi vlastiti raspored; ovdje mu treba
   samo da popuni redak do gumba za brisanje. */
.qms-obuka-prilog .qms-file { flex: 1 1 auto; min-width: 0; }

/* ---- dodjela osposobljenosti ---- */
.qms-obuka-dodjela {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 15px 16px;
    border-left: 3px solid var(--accent);
}

.qms-obuka-dodjela-head {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ink-strong);
    font-size: 14px;
    font-weight: 600;
}

.qms-obuka-dodjela-text {
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.6;
}

.qms-obuka-dodjela-red {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.qms-obuka-dodjela-red .qms-field { min-width: 170px; }

/* ============================================================
   6. OSPOSOBLJENOST NA DETALJU ZAPOSLENIKA
   ============================================================ */

.qms-osoba-osp-brojke {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
}

.qms-osoba-osp-brojke .is-bad { color: var(--bad-text); }
.qms-osoba-osp-brojke .is-warn { color: var(--warn-text); }
.qms-osoba-osp-brojke .is-ok { color: var(--good-text); }

.qms-osoba-rupe {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 12px 16px;
}

.qms-osoba-rupa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px dashed var(--line-strong);
    border-radius: 999px;
    font-size: 12px;
}

.qms-osoba-rupa.is-obvezna {
    border-color: var(--bad);
    border-style: solid;
    color: var(--bad-text);
}

.qms-osoba-rupa.is-pozeljna { color: var(--ink-3); }

/* Zamijenjeni zapis (obnova) ostaje kao povijest, ali ne smije izgledati kao
   trenutno stanje. */
.qms-osoba-osp-table tr.is-zamijenjen td { color: var(--ink-3); }

.qms-osoba-osp-zamijenjen {
    color: var(--ink-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.qms-osoba-osp-dokaz {
    color: var(--ink-2);
    font-size: 12px;
}

.qms-osoba-osp-dokaz.is-nema { color: var(--warn-text); }

/* ============================================================
   7. ČEKA OCJENU DJELOTVORNOSTI
   ============================================================ */

.qms-ceka-dana {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.qms-ceka-dana.is-dugo { color: var(--bad-text); }

.qms-ceka-obrazac {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 9px;
}

.qms-ceka-obrazac select { min-width: 160px; }

/* ---- ispravak zapisa stečenog (plan 127) ----

   Redak ispod zapisa, sklopljen. Tablica osposobljenosti ima po osobi i
   desetak zapisa; obrazac otvoren uz svaki od njih pretvorio bi tablicu u
   stranicu obrazaca. Otvara se sam samo kad je upis odbijen, da korisnik vidi
   gdje mu je ostalo upisano. */
.qms-osp-ispravak-red > td {
    padding: 0 16px 10px;
    border-top: 0;
}

.qms-osp-ispravak-red.is-zamijenjen { opacity: .72; }

.qms-osp-ispravak > summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--ink-3);
    padding: 4px 0;
}

.qms-osp-ispravak[open] > summary { color: var(--ink-2); }

.qms-osp-ispravak .qms-form-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding-top: 6px;
}

.qms-osp-ispravak .qms-field { min-width: 180px; }
.qms-osp-ispravak .qms-field--rast { flex: 1 1 240px; }
.qms-osp-ispravak .qms-form-actions { padding-top: 10px; }