/* ============================================================
   Karlix QMS — detalj slučaja (RIN / UN)
   Dopuna uz qms.css, qms-list.css i qms-codebooks.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. ZAGLAVLJE SLUČAJA
   Naslov je naslov, broj je oznaka u putanji.
   ------------------------------------------------------------ */

.qms-case-crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); text-decoration: none; }
.qms-case-crumb:hover { color: var(--ink-strong); text-decoration: none; }
.qms-case-sep { color: var(--ink-5); }

.qms-case-head { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.qms-case-headmain { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.qms-case-titleline { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.qms-case-title { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--ink-strong); }
.qms-case-metaline { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.qms-case-meta { font-size: 13px; color: var(--ink-3); }

/* jedan glavni prijelaz + ostalo u izborniku */
.qms-case-actions { display: flex; align-items: center; gap: 9px; }

/* ------------------------------------------------------------
   2. FAZE KAO TIJEK
   Tri koraka jednog postupka, ne tri ravnopravna pogleda.
   ------------------------------------------------------------ */

.qms-flow {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 16px 20px;
    display: flex; align-items: center; gap: 0;
    overflow-x: auto;
}

.qms-step { display: flex; align-items: center; gap: 0; flex: 0 0 auto; min-width: 0; }
.qms-step-body { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.qms-step-body:hover { text-decoration: none; color: inherit; }

.qms-step-dot {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-3); border: 1px solid var(--line-strong);
    color: var(--ink-muted-icon);
    font-size: 11px;
}
.qms-step-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qms-step-label { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }
.qms-step-note { font-size: 11.5px; color: var(--ink-4); white-space: nowrap; }
.qms-step-line { flex: 1; height: 1px; margin: 0 14px; min-width: 20px; background: var(--line-strong); }

/* prošla faza */
.qms-step.is-done .qms-step-dot {
    background: var(--good-soft);
    border-color: color-mix(in oklch, var(--good) 40%, transparent);
    color: var(--good-text);
}
.qms-step.is-done .qms-step-label { color: var(--ink-2); font-weight: 500; }
.qms-step.is-done + .qms-step .qms-step-line,
.qms-step.is-done .qms-step-line { background: color-mix(in oklch, var(--good) 35%, transparent); }

/* trenutna faza */
.qms-step.is-current .qms-step-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.qms-step.is-current .qms-step-label { color: var(--ink-strong); font-weight: 600; }
.qms-step.is-current .qms-step-note { color: var(--accent-text); }

/* buduća faza — katanac s razlogom, ne samo katanac */
.qms-step.is-locked .qms-step-label { color: var(--ink-3); }

/* ------------------------------------------------------------
   3. GLAVNI SADRŽAJ + DESNI STUPAC
   Workflow i povijest ne smiju gurati sadržaj ispod pregiba.
   ------------------------------------------------------------ */

.qms-case-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.qms-case-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.qms-case-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ------------------------------------------------------------
   4. SKUPINE POLJA
   ------------------------------------------------------------ */

.qms-fgroup {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.qms-fgroup-head {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
}
.qms-fgroup-title { font-size: 14px; font-weight: 600; color: var(--ink-strong); }

/* koliko polja nije popunjeno — bez toga se slučaj zatvara s praznom klasifikacijom */
.qms-fgroup-missing {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 9px; border-radius: 20px;
    background: var(--warn-soft); color: var(--warn-text);
    font-size: 11.5px;
}
.qms-fgroup-missing i { font-size: 10.5px; }

.qms-fgroup-body { padding: 18px 20px; display: grid; gap: 14px; }
.qms-fgroup-body--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qms-fgroup-body--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qms-span2 { grid-column: span 2; }

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

.qms-fieldlabel {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 600;
}
.qms-counter { margin-left: auto; font-size: 11.5px; color: var(--ink-4); text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------------
   5. ZAKLJUČANA FAZA
   Jedno objašnjenje s izlazom, ne dvije kutije sa šifrom.
   ------------------------------------------------------------ */

.qms-locked-head {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
}
.qms-locked-head i { font-size: 13px; color: var(--ink-muted-icon); }
.qms-locked-title { font-size: 14px; font-weight: 600; color: var(--ink-2); }

.qms-locked-note {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 20px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
}
.qms-locked-note i { flex: 0 0 auto; font-size: 13px; color: var(--ink-muted-icon); margin-top: 2px; }

/* zaključano polje IZGLEDA zaključano — siva textarea izgleda kao prazna */
.qms-lockedfield {
    display: flex; align-items: flex-start; gap: 9px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface-locked, #141a1e);
    font-size: 13px; color: var(--ink-3); line-height: 1.5;
}
.qms-theme-light { --surface-locked: #f4f6f6; }
.qms-lockedfield i { flex: 0 0 auto; font-size: 11px; margin-top: 2px; }

/* ------------------------------------------------------------
   6. OPRAVDANOST — tri imenovane vrijednosti, ne „(null)“
   ------------------------------------------------------------ */

.qms-choices { display: flex; gap: 8px; }
.qms-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-choice input { position: absolute; opacity: 0; pointer-events: none; }
.qms-choice-top { display: flex; align-items: center; gap: 7px; }
.qms-choice-top i { flex: 0 0 auto; font-size: 11.5px; }
.qms-choice-label { font-size: 13px; color: var(--ink-2); }
.qms-choice-note { font-size: 11px; line-height: 1.4; color: var(--ink-4); }

/* opravdana = crvena, greška je naša */
.qms-choice.is-selected.is-bad {
    border-color: color-mix(in oklch, var(--bad) 40%, transparent);
    background: var(--bad-soft);
}
.qms-choice.is-selected.is-bad .qms-choice-label,
.qms-choice.is-selected.is-bad .qms-choice-top i { color: var(--bad-text); font-weight: 600; }

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

/* ------------------------------------------------------------
   7. DESNI STUPAC
   ------------------------------------------------------------ */

.qms-railcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.qms-railhead {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}
.qms-railhead > i { font-size: 13.5px; color: var(--ink-3); }
.qms-railtitle { font-size: 13.5px; font-weight: 600; color: var(--ink-strong); }
.qms-railcount { margin-left: auto; font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.qms-railfoot { display: flex; align-items: center; gap: 9px; padding: 12px 18px; font-size: 12.5px; }

/* radnja u desnom stupcu: rubnica nosi kašnjenje */
.qms-railaction {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--line-soft);
    border-left: 3px solid transparent;
    color: inherit; text-decoration: none;
}
.qms-railaction:last-of-type { border-bottom: 0; }
.qms-railaction:hover { background: var(--surface-2); text-decoration: none; color: inherit; }
.qms-railaction.is-late { border-left-color: var(--bad); }

.qms-railaction-title { font-size: 13px; color: var(--ink-strong); line-height: 1.4; }
.qms-railaction-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.qms-railaction-due { color: var(--ink-4); }
.qms-railaction.is-late .qms-railaction-due { color: var(--bad-text); }
.qms-railaction-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-5); }
.qms-railaction-owner { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* prilog */
.qms-file {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--line-soft);
    color: inherit; text-decoration: none;
}
.qms-file:hover { background: var(--surface-2); text-decoration: none; }
.qms-file i { flex: 0 0 auto; font-size: 13px; color: var(--ink-3); }

/* Minijatura slike stoji na mjestu ikone i zauzima jednako mjesta, pa se redak
   ne pomiče između priloga sa sličicom i onih bez nje. */
.qms-file-thumb {
    flex: 0 0 auto; width: 26px; height: 26px;
    object-fit: cover; border-radius: 4px;
    border: 1px solid var(--line); background: var(--surface-2);
}
.qms-file-name { font-size: 12.5px; color: var(--ink-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qms-file-size { margin-left: auto; flex: 0 0 auto; font-size: 11.5px; color: var(--ink-4); }

/* Redak priloga nosi poveznicu i gumb za uklanjanje jedan uz drugi. Obrazac ne
   smije stajati UNUTAR <a> (neispravan HTML), pa poveznica dobiva omotač koji
   popunjava redak, a crta se prenosi na njega (plan 135). */
.qms-file-row { display: flex; align-items: center; border-bottom: 1px solid var(--line-soft); }
.qms-file-row:last-child { border-bottom: 0; }
.qms-file-row .qms-file { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
.qms-file-x {
    flex: 0 0 auto; margin-right: 12px;
    padding: 4px 6px; line-height: 1;
    background: none; border: 0; border-radius: 4px; cursor: pointer;
}
.qms-file-x:hover { background: var(--surface-2); }

/* Boja ide u temiranom obliku: `body[class*="qms-theme"]` je specifičniji, pa
   bi gola pravila ostala neprimijenjena (CLAUDE.md, „Tema je specifičnija"). */
body[class*="qms-theme"] .qms-file-x { color: var(--ink-4); }
body[class*="qms-theme"] .qms-file-x:hover { color: var(--bad-text); }

/* jedno polje za prilog, ne Choose File + zaseban gumb */
.qms-dropzone {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    margin: 12px 18px 14px;
    padding: 16px 12px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    text-align: center; cursor: pointer;
}
.qms-dropzone:hover { border-color: var(--accent-line); }
.qms-dropzone i { font-size: 15px; color: var(--accent-text); }
.qms-dropzone-main { font-size: 12.5px; color: var(--ink-2); }
.qms-dropzone-note { font-size: 11px; color: var(--ink-4); }
.qms-dropzone input[type="file"] { display: none; }

/* povijest */
.qms-hist { display: flex; align-items: flex-start; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--line-soft); }
.qms-hist:last-child { border-bottom: 0; }
.qms-hist-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-5); margin-top: 6px; }
.qms-hist-dot--accent { background: var(--accent); }
.qms-hist-dot--good { background: var(--good); }
.qms-hist-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.qms-hist-meta { font-size: 11.5px; color: var(--ink-4); }

/* ------------------------------------------------------------
   8. PODNOŽJE FORME — tko i kada, uz Spremi
   ------------------------------------------------------------ */

.qms-savebar {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.qms-savebar-meta { font-size: 12.5px; color: var(--ink-3); }
.qms-savebar-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }

/* upozorenje pri zatvaranju: ne blokira, samo kaže */
.qms-closewarn {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--warn);
    border-radius: var(--r-sm);
    font-size: 12px; line-height: 1.55; color: var(--ink-2);
}
.qms-closewarn i { flex: 0 0 auto; font-size: 12px; color: var(--warn-text); margin-top: 2px; }

/* ------------------------------------------------------------
   9. RESPONZIVNO
   ------------------------------------------------------------ */

@media (max-width: 1400px) {
    .qms-case-body { grid-template-columns: minmax(0, 1fr) 300px; }
    .qms-fgroup-body--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .qms-case-body { grid-template-columns: minmax(0, 1fr); }
    /* desni stupac ide ISPOD forme, ne iznad — sadržaj slučaja je važniji */
    .qms-case-rail { order: 2; }
    .qms-case-main { order: 1; }
}

@media (max-width: 640px) {
    .qms-fgroup-body--2, .qms-fgroup-body--3 { grid-template-columns: minmax(0, 1fr); }
    .qms-span2 { grid-column: auto; }
    .qms-choices { flex-direction: column; }
    .qms-case-actions { width: 100%; }
    .qms-flow { padding: 14px 16px; }
}

@media print {
    .qms-case-rail .qms-dropzone,
    .qms-savebar, .qms-case-actions { display: none !important; }
    .qms-case-body { grid-template-columns: 1fr; }
    .qms-fgroup, .qms-railcard { break-inside: avoid; }
}

/* ------------------------------------------------------------
   10. ZAKLJUČAN PRIJELAZ
   Onemogućen gumb ostaje čitljiv: --ink-2 na --surface-3 pada
   pod 4.5:1 u svjetloj temi, pa se boja postavlja izrijekom.
   ------------------------------------------------------------ */

.qms-case-actions .btn-outline-secondary:disabled,
.qms-case-actions .btn-outline-secondary[disabled] {
    opacity: 1;                     /* Bootstrap .5 opacity ubija kontrast */
    background: var(--surface-3);
    border-color: var(--line-strong);
    color: var(--ink-disabled);
    cursor: not-allowed;
}

.qms-theme, .qms-theme-dark { --ink-disabled: #868f96; }  /* 4.90:1 na #1b2226 */
.qms-theme-light { --ink-disabled: #5f6b70; }             /* 4.93:1 na #f1f3f4 */

/* razlog stoji uz gumb, ne samo na hover */
.qms-transition-reason {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--bad-text);
}
.qms-transition-reason i { font-size: 10.5px; }

/* ------------------------------------------------------------
   Radnje na nesukladnosti: zaključan gumb i prazno stanje.
   Gumb se ne skriva nego zaključa — inače se ne vidi da radnje
   uopće postoje, pa se ne zna ni što treba čekati.
   ------------------------------------------------------------ */

.qms-railfoot-locked {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink-4); cursor: default;
}
.qms-railfoot-locked i { font-size: 11px; }

/* stoji desno bez obzira dolazi li iza gumba ili iza razloga */
.qms-railfoot-all { margin-left: auto; color: var(--ink-3); }

.qms-railfoot { flex-wrap: wrap; }

.qms-state--inset { padding: 16px; }

/* ------------------------------------------------------------
   OBAVEZNA POLJA PO FAZI (plan 046, D2)

   Značka „5 polja nepopunjeno" je upozorenje. Kad među njima ima obaveznih,
   ona više nije upozorenje nego prepreka — prijelaz u sljedeću fazu neće
   proći. Zato mijenja boju: žuto znači „nedostaje", crveno „ne ide dalje".
   ------------------------------------------------------------ */

.qms-fgroup-missing.is-blocking {
    background: var(--bad-soft);
    color: var(--bad-text);
}