/* ============================================================
   Karlix QMS — detalj nesukladnosti (UN)
   Dopuna uz qms-case.css. Učitava se poslije njega.

   Kostur je isti kao kod reklamacije; ovo su razlike koje
   nesukladnost ima, a reklamacija ne.
   ============================================================ */

/* ------------------------------------------------------------
   1. NALAZ IZ AUDITA
   Oznaka uz status: nesukladnost iz audita vodi se drukčije.
   ------------------------------------------------------------ */

.qms-un-source {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px;
    border-radius: 5px;
    background: var(--warn-soft); color: var(--warn-text);
    font-size: 11.5px; text-decoration: none;
}
.qms-un-source:hover { text-decoration: none; color: var(--warn-text); }
.qms-un-source i { font-size: 10.5px; }

.qms-un-source--complaint { background: var(--accent-soft); color: var(--accent-text); }

/* ------------------------------------------------------------
   2. RADNJE U GLAVNOM STUPCU
   Kod reklamacije radnje su prateći podatak; kod nesukladnosti
   su sadržaj faze „U tijeku“ — to je posao te faze.
   ------------------------------------------------------------ */

.qms-unactions {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.qms-unaction {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--line-soft);
    border-left: 3px solid transparent;
    color: inherit; text-decoration: none;
}
.qms-unaction:hover { background: var(--surface-2); text-decoration: none; color: inherit; }
.qms-unaction.is-late { border-left-color: var(--bad); }

/* stanje radnje kao znak, ne kao stupac */
.qms-unaction-state {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    margin-top: 1px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--neutral-soft); color: var(--ink-2);
    font-size: 11px;
}
.qms-unaction-state--open { background: var(--warn-soft); color: var(--warn-text); }
.qms-unaction-state--late { background: var(--bad-soft);  color: var(--bad-text); }
.qms-unaction-state--done { background: var(--good-soft); color: var(--good-text); }

.qms-unaction-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.qms-unaction-title { font-size: 13.5px; color: var(--ink-strong); line-height: 1.4; }
.qms-unaction-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qms-unaction-due { font-size: 11.5px; color: var(--ink-3); }
.qms-unaction.is-late .qms-unaction-due { color: var(--bad-text); }
.qms-unaction-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-5); }
.qms-unaction-owner { font-size: 11.5px; color: var(--ink-3); }

.qms-unactions-foot {
    display: flex; align-items: center; gap: 9px;
    padding: 12px 20px;
    font-size: 12.5px;
}
/* pravilo stoji prije nego korisnik pritisne gumb */
.qms-unactions-block { margin-left: auto; font-size: 12px; color: var(--bad-text); }

/* ------------------------------------------------------------
   3. DESNI STUPAC: PREGLED, NE FORMA
   Norma, točka i broj audita dolaze iz audita i ne uređuju se
   na nesukladnosti.
   ------------------------------------------------------------ */

.qms-unrail-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.qms-unrail-head {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
}
.qms-unrail-head i { font-size: 13px; color: var(--ink-3); }
.qms-unrail-title { font-size: 13.5px; font-weight: 600; color: var(--ink-strong); }

.qms-unrail-row {
    display: flex; align-items: baseline; gap: 12px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.qms-unrail-row:last-child { border-bottom: 0; }
.qms-unrail-label { flex: 0 0 96px; font-size: 11.5px; color: var(--ink-3); }
.qms-unrail-value {
    min-width: 0; font-size: 12.5px; color: var(--ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qms-unrail-value--link { color: var(--accent-text); text-decoration: none; }
.qms-unrail-value--link:hover { text-decoration: underline; }
.qms-unrail-value--empty { color: var(--ink-3); }

/* ------------------------------------------------------------
   4. RESPONZIVNO
   ------------------------------------------------------------ */

@media (max-width: 1100px) {
    .qms-unactions-foot { flex-wrap: wrap; }
    .qms-unactions-block { margin-left: 0; width: 100%; }
}

@media (max-width: 640px) {
    .qms-unrail-row { flex-direction: column; gap: 2px; }
    .qms-unrail-label { flex: 0 0 auto; }
    .qms-unrail-value { white-space: normal; }
}

/* ---- t. 10.2.1 e): razmatranje rizika pri zatvaranju (plan 070, P3) ----
   Stoji uz gumb zatvaranja, a ne kao zaseban ekran: pitanje koje se postavlja
   drugdje preskoči se prvo. */
.qms-un-rizici { align-self: stretch; text-align: left; }
.qms-un-rizici > summary {
    list-style: none; cursor: pointer;
    font-size: 12.5px; color: var(--ink-3);
}
.qms-un-rizici > summary::-webkit-details-marker { display: none; }
.qms-un-rizici > summary span { color: var(--ink-4); }

.qms-un-rizici-panel {
    margin-top: 8px; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px;
    min-width: 280px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 6px;
}
.qms-un-rizici-panel .chk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }