/* ============================================================
   Upravljanje promjenama — plan 080, paket I5

   Proširuje qms.css.

   Središnji dio je TOK: četiri koraka (ocijenjena → odobrena → provedena →
   provjerena) u jednom redu, jer promjena se ne čita po poljima nego po tome
   dokle je došla. Korak koji nije odrađen stoji prigušen, ne skriven — prazno
   mjesto u toku je ono što auditor traži.

   Drugo je OZNAKA STANJA, sedam vrijednosti. Boje ne idu po ljestvici „dobro →
   loše“ nego po tome ČEKA LI NEŠTO: provedeno bez provjere je crveno iako je
   napredak, jer je to stanje u kojem se najčešće nešto pokvarilo.
   ============================================================ */

/* ============================================================
   1. OZNAKA STANJA
   ============================================================ */
.qms-prm-stanje {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Nacrt i ocijenjena: posao u toku, bez boje koja nešto tvrdi. */
.qms-prm-stanje.is-draft {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--ink-2);
}

.qms-prm-stanje.is-assessed {
    background: var(--surface-3);
    border-color: var(--line-strong);
    color: var(--ink-strong);
}

/* Odobrena: zelena, ali samo obrisom — odobrenje nije ishod nego dopuštenje. */
.qms-prm-stanje.is-approved {
    background: transparent;
    border-color: var(--good);
    color: var(--good-text);
}

/* Provedena: ŽUTA, i to je namjerno. Provedba je napredak, ali stanje u kojem
   promjena čeka provjeru učinka — a to je jedino stanje u kojem se šteta može
   uočiti prije nego postane nesukladnost. */
.qms-prm-stanje.is-implemented {
    background: var(--warn-soft);
    border-color: var(--warn);
    color: var(--warn-text);
}

.qms-prm-stanje.is-verified {
    background: var(--good-soft);
    border-color: var(--good);
    color: var(--good-text);
}

/* Odbijena nije greška: preispitana promjena koja nije odobrena je dokaz da je
   razmotrena. Zato siva, ne crvena. */
.qms-prm-stanje.is-rejected,
.qms-prm-stanje.is-cancelled {
    background: transparent;
    border-color: var(--line);
    color: var(--ink-3);
}

/* ============================================================
   2. REGISTAR
   ============================================================ */
.qms-prm-nowrap { white-space: nowrap; }

.qms-prm-red--paznja > td:first-child {
    box-shadow: inset 3px 0 0 var(--bad);
}

/* Razlog pažnje stoji pod naslovom, u istoj ćeliji: vlastiti stupac bio bi prazan
   u većini redova, a rečenica uz naslov kaže zašto red gori. */
.qms-prm-zasto {
    display: block;
    margin-top: 3px;
    color: var(--bad-text);
    font-size: 11.5px;
    line-height: 1.45;
}

.qms-prm-legenda {
    padding: 0 2px;
    color: var(--ink-3);
    font-size: 12px;
    line-height: 1.6;
}

/* ============================================================
   3. GLAVA I TOK
   ============================================================ */
.qms-prm-glava {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
}

.qms-prm-glava-naslov {
    flex: 1 1 320px;
    min-width: 0;
    color: var(--ink-strong);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
}

.qms-prm-glava-znakovi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ============================================================
   4. UPOZORENJE
   ============================================================ */
.qms-prm-upozorenje {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 15px 16px;
    border-left: 3px solid var(--bad);
}

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

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

/* ============================================================
   5. ČETIRI STVARI IZ t. 6.3
   ============================================================ */
.qms-prm-tocke {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
}

.qms-prm-tocka {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.qms-prm-tocka-tekst {
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Nije upisano: prigušeno i u kurzivu, ne crveno. Crvena na svakom praznom polju
   učinila bi nacrt promjene neupotrebljivim, a nacrt je mjesto gdje se promjena
   tek opisuje. Manjak se javlja na prijelazu, ne pri pisanju. */
.qms-prm-tocka-tekst.je-prazna {
    color: var(--ink-3);
    font-style: italic;
}

.qms-prm-tekst {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
}

.qms-prm-tekst-sadrzaj {
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
}

.qms-prm-podaci {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px 22px;
    padding: 16px 18px;
}

/* ============================================================
   6. OBRASCI PRIJELAZA
   ============================================================ */
.qms-prm-forma {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px 18px;
    margin-top: 12px;
}

.qms-prm-forma--wide { grid-column: 1 / -1; }
.qms-prm-forma .qms-uvoz-actions { grid-column: 1 / -1; }

.qms-prm-crta {
    margin: 18px 0 4px;
    border: 0;
    border-top: 1px solid var(--line);
}

/* ============================================================
   7. UŽI EKRAN
   ============================================================ */
@media (max-width: 720px) {
    .qms-prm-glava { gap: 10px; padding: 14px; }
    .qms-prm-glava-naslov { font-size: 15px; }
    .qms-prm-podaci { grid-template-columns: 1fr; padding: 14px; }
    .qms-prm-tocke { padding: 14px; }
    .qms-prm-tekst { padding: 14px; }
    .qms-prm-forma { grid-template-columns: 1fr; }
}