/* ============================================================
   Karlix QMS — detalj radnje
   Dopuna uz qms-case.css i qms-actions.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. ZAGLAVLJE
   Radnja bez slučaja nema smisla — slučaj stoji uz naslov.
   ------------------------------------------------------------ */

.qms-act-caseref {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--ink-3);
    text-decoration: none;
}
.qms-act-caseref:hover { text-decoration: none; color: var(--ink-2); }
.qms-act-caseref .qms-mono { font-size: 12px; color: var(--accent-text); }

/* greška u podacima: dva roditelja na istoj radnji */
.qms-act-twoparents {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px; border-radius: 5px;
    background: var(--bad-soft); color: var(--bad-text);
    font-size: 11.5px;
}

/* veza koja skoči na panel; glavni gumb je u panelu */
.qms-act-jump {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 13px; text-decoration: none;
}
.qms-act-jump:hover { border-color: var(--pop-line); color: var(--ink-strong); text-decoration: none; }

/* ------------------------------------------------------------
   2. PANEL VERIFIKACIJE
   Zelena rubnica: to je korak koji radnju zatvara.
   ------------------------------------------------------------ */

.qms-verify {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--good);
    border-radius: var(--r);
    overflow: hidden;
    scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.qms-verify-head {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
}
.qms-verify-head > i { font-size: 13.5px; color: var(--good-text); }
.qms-verify-title { font-size: 14px; font-weight: 600; color: var(--ink-strong); }
.qms-verify-note { margin-left: auto; font-size: 12px; color: var(--ink-3); }

.qms-verify-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.qms-verify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.qms-verify-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 20px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}
/* posljedica ocjene stoji uz gumb, prije klika */
.qms-verify-consequence { font-size: 12px; color: var(--ink-3); }
.qms-verify-foot .btn { margin-left: auto; }

/* ------------------------------------------------------------
   3. OCJENA UČINKOVITOSTI
   Tri vrijednosti s posljedicom, ne prazan padajući izbornik.
   ------------------------------------------------------------ */

.qms-eff-choices { display: flex; gap: 8px; }

/* zaključan izbor: vidi se da je prikaz, ne unos */
.qms-eff-choices.is-locked .qms-eff-choice { cursor: default; opacity: .72; }

/* razlog zašto se panel ne uređuje — na vrhu, prije polja */
.qms-verify-locked {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 12.5px; line-height: 1.45; text-wrap: pretty;
}
.qms-verify-locked i { flex: 0 0 auto; margin-top: 1px; font-size: 12px; color: var(--ink-3); }

.qms-eff-choice {
    flex: 1;
    display: flex; flex-direction: column; gap: 3px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    cursor: pointer;
}
.qms-eff-choice input { position: absolute; opacity: 0; pointer-events: none; }
.qms-eff-choice-top { display: flex; align-items: center; gap: 7px; }
.qms-eff-choice-top i { flex: 0 0 auto; font-size: 11.5px; }
.qms-eff-choice-label { font-size: 13px; color: var(--ink-2); }
.qms-eff-choice-note { font-size: 11px; line-height: 1.4; color: var(--ink-3); }

.qms-eff-choice.is-selected.is-good {
    border-color: color-mix(in oklch, var(--good) 45%, transparent);
    background: var(--good-soft);
}
.qms-eff-choice.is-selected.is-good .qms-eff-choice-label,
.qms-eff-choice.is-selected.is-good .qms-eff-choice-top i { color: var(--good-text); font-weight: 600; }

.qms-eff-choice.is-selected.is-bad {
    border-color: color-mix(in oklch, var(--bad) 45%, transparent);
    background: var(--bad-soft);
}
.qms-eff-choice.is-selected.is-bad .qms-eff-choice-label,
.qms-eff-choice.is-selected.is-bad .qms-eff-choice-top i { color: var(--bad-text); font-weight: 600; }

.qms-eff-choice.is-selected.is-warn {
    border-color: color-mix(in oklch, var(--warn) 45%, transparent);
    background: var(--warn-soft);
}
.qms-eff-choice.is-selected.is-warn .qms-eff-choice-label,
.qms-eff-choice.is-selected.is-warn .qms-eff-choice-top i { color: var(--warn-text); font-weight: 600; }

/* ------------------------------------------------------------
   4. OSOBA U POLJU
   ------------------------------------------------------------ */

.qms-personfield {
    display: flex; align-items: center; gap: 9px;
    box-sizing: border-box;
    height: 38px; padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: 13.5px; color: var(--ink);
}
.qms-personfield-avatar {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--surface-3); color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 600;
}

/* ------------------------------------------------------------
   5. DESNI STUPAC
   ------------------------------------------------------------ */

.qms-act-rail-row {
    display: flex; align-items: baseline; gap: 12px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.qms-act-rail-row:last-child { border-bottom: 0; }
.qms-act-rail-label { flex: 0 0 90px; font-size: 11.5px; color: var(--ink-3); }
.qms-act-rail-value {
    min-width: 0; font-size: 12.5px; color: var(--ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qms-act-rail-value--good { color: var(--good-text); }
.qms-act-rail-value--bad { color: var(--bad-text); }
.qms-act-rail-value--empty { color: var(--ink-3); }

/* ------------------------------------------------------------
   6. RESPONZIVNO
   ------------------------------------------------------------ */

@media (max-width: 900px) {
    .qms-eff-choices { flex-direction: column; }
    .qms-verify-grid { grid-template-columns: minmax(0, 1fr); }
    .qms-verify-foot { flex-wrap: wrap; }
    .qms-verify-foot .btn { margin-left: 0; width: 100%; }
    .qms-act-rail-row { flex-direction: column; gap: 2px; }
    .qms-act-rail-label { flex: 0 0 auto; }
    .qms-act-rail-value { white-space: normal; }
}

/* Zapis iz starog sustava: ime bez korisnika. Upozorenje stoji uz birač,
   a ne kao poruka nakon spremanja — tada je već kasno. */
.qms-person-warn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 4px;
    font-size: 12px; color: var(--warn-text);
}
.qms-person-warn i { font-size: 11px; }

/* ------------------------------------------------------------
   KORACI KAO POVEZNICE (plan 046, D6)

   Kod slučaja koraci vode na drugu fazu, svaka sa svojim ekranom. Radnja
   faze nema — sva polja stoje na jednoj stranici, pa korak vodi na njezin
   odsječak. Zato ovdje treba vidljiv nagovještaj da se može kliknuti:
   korisnik je prijavio da „ne može kliknuti", a nije ni izgledalo da može.
   ------------------------------------------------------------ */

.qms-step-link { border-radius: 8px; padding: 4px 6px; margin: -4px -6px; }
.qms-step-link:hover { background: var(--surface-3); }
.qms-step-link:hover .qms-step-label { color: var(--ink-strong); }
.qms-step-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Zaglavlje je ljepljivo, pa bi skok doveo odsječak pod njega. */
#zadatak, #verify { scroll-margin-top: 74px; }