/* ============================================================
   Čuvanje zapisa (plan 055, P1 i P2)

   Popis vrsta zapisa lijevo, pravilo za odabranu desno — kao kod šifrarnika.
   Dvanaest istovjetnih kartica jedna ispod druge bila je duga traka u kojoj se
   jedno pravilo traži pomicanjem, a sve su izgledale isto.
   ============================================================ */

/* Raspored stupaca dolazi iz .qms-grid--kpi (v. pogled): popis zauzima jedan
   stupac te mreže, a kartica sve ostale. Zato je popis uvijek širok točno kao
   pločica iznad njega, bez zadane mjere koja bi se razišla na drugoj širini. */
.qms-ret { align-items: start; }

.qms-ret > .qms-ret-izbor { grid-column: span 1; }
.qms-ret > form.qms-card { grid-column: 2 / -1; }

/* ---- popis lijevo ---- */

.qms-ret-izbor { display: flex; flex-direction: column; gap: 8px; }

/* Naslov skupine je zaglavlje okvira, a ne natpis iznad njega — tako lijevi
   okvir i kartica desno počinju na istoj liniji. */
.qms-ret-izbor-naslov {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
    padding: 9px 10px 9px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line-soft);
}

.qms-ret-izbor-popis {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.qms-ret-izbor-note {
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink-3);
    padding: 6px 4px 0;
    text-wrap: pretty;
}

.qms-ret-stavka {
    display: flex;
    align-items: center;
    gap: 9px;
    box-sizing: border-box;
    padding: 8px 10px;
    min-height: 38px;
    border-radius: 7px;
    color: var(--ink-2);
    font-size: 13.5px;
    text-decoration: none;
}

.qms-ret-stavka:hover { background: var(--surface-3); color: var(--ink-strong); text-decoration: none; }
.qms-ret-stavka.active { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.qms-ret-stavka.active:hover { background: var(--accent); color: var(--accent-ink); }

.qms-ret-stavka-naziv { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Rok stoji uz naziv: popis tako odgovara na „koliko se što čuva" bez ijednog
   klika, a to je pitanje s kojim se na ovaj ekran i dolazi. */
.qms-ret-stavka-rok { margin-left: auto; font-size: 11.5px; color: var(--ink-4); white-space: nowrap; }
.qms-ret-stavka.active .qms-ret-stavka-rok { color: var(--accent-ink); }

/* ---- pravilo desno ---- */

.qms-ret-opis { font-size: 12.5px; color: var(--ink-3); text-wrap: pretty; }

.qms-ret-polja { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 14px; align-items: start; }

.qms-ret-mjeseci-unos { display: flex; align-items: center; gap: 7px; }
.qms-ret-mjeseci-unos .form-control { width: 92px; }
.qms-ret-sufiks { font-size: 12.5px; color: var(--ink-4); }

/* Brojka u mjesecima, a ispod nje ista mjera u godinama — rok se u proceduri
   piše kao „pet godina", ne kao „60". */
.qms-ret-hint { font-size: 11.5px; color: var(--ink-4); margin-top: 3px; }

.qms-ret-noga {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid var(--line-soft);
}

.qms-ret-noga .btn:first-of-type { margin-left: auto; }

.qms-ret-prekidac {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-2);
    cursor: pointer;
}

.qms-ret-prekidac input { width: 15px; height: 15px; }

/* ---- kartica „Isteklo" ---- */

.qms-ret-dobro { color: var(--good-text); }

.qms-ret-isteklo { color: var(--bad-text); font-weight: 600; }

/* Oznaka da rok teče od nastanka jer zapis nije zatvoren. Stoji uz datum, tiho:
   nije upozorenje nego podatak po čemu je rok računat — ali se mora vidjeti
   prije nepovratnog postupka, jer sam datum izgleda isto kao i pravi. */
.qms-ret-zamjena {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11px;
    line-height: 16px;
    white-space: nowrap;
    color: var(--ink-2);
}

.qms-list--ret th.c-num, .qms-list--ret td.c-num { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.qms-list--ret th:first-child { width: 220px; }

/* Naslov je jedini stupac koji nosi rečenicu, pa guta sav preostali prostor
   (width: 100% u tablici s automatskim rasporedom), a ostali se stisnu na ono
   što im treba. Fiksne širine ovdje ne rade: šest zadanih stupaca zbrajalo je
   više nego što tablica ima na laptopu. */
.qms-list--retred th:nth-child(3) { width: 100%; }
.qms-list--retred th:not(:nth-child(3)),
.qms-list--retred td:not(:nth-child(3)) { white-space: nowrap; }

.qms-list--retred td:nth-child(3) { text-wrap: pretty; }
.qms-list--retred .qms-mono { font-size: 12px; }

@media (max-width: 1100px) {
    /* Jedan stupac: popis iznad kartice, oboje pune širine. */
    .qms-ret { grid-template-columns: minmax(0, 1fr); }
    .qms-ret > .qms-ret-izbor,
    .qms-ret > form.qms-card { grid-column: auto; }

    .qms-ret-polja { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    .qms-ret-polja { grid-template-columns: 1fr; }
    .qms-ret-noga { flex-wrap: wrap; }
    .qms-ret-noga .btn:first-of-type { margin-left: 0; }
}

/* Napomena pod tablicom: kartica nema --pad (zbog tablice), pa razmak nosi sama. */
.qms-ret-napomena {
    padding: 13px 22px;
    border-top: 1px solid var(--line-soft);
}

/* ---- probni prolaz (P3a) ---- */

.qms-ret-plan-opis { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); text-wrap: pretty; }

.qms-ret-plan-brojke { display: flex; gap: 32px; margin-top: 14px; }
.qms-ret-plan-brojke > div { display: flex; flex-direction: column; gap: 3px; }

.qms-ret-plan-broj { font-size: 28px; font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.qms-ret-plan-broj.is-bad { color: var(--bad-text); }
.qms-ret-plan-oznaka { font-size: 12px; color: var(--ink-3); }

.qms-list--plan th:nth-child(2) { width: 100%; }
.qms-list--plan th:not(:nth-child(2)),
.qms-list--plan td:not(:nth-child(2)) { white-space: nowrap; }

/* Razlog i gumb u jednom retku: zadržavanje je odluka od dvije riječi, ne obrazac. */
.qms-ret-zadrzi { display: flex; align-items: center; gap: 6px; }
.qms-ret-zadrzi .form-control { width: 190px; }

/* Potvrda je zadnja kutija na ekranu i jedina s crvenim gumbom — nakon nje
   nešto trajno nestaje. */
.qms-ret-potvrda { border-color: var(--bad-text); }
.qms-ret-potvrda p { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); text-wrap: pretty; }

.qms-ret-potvrda-form { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }

.qms-ret-potvrda-kvacica { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.qms-ret-potvrda-kvacica input { width: 15px; height: 15px; }

.qms-ret-potvrda-potpis { margin-top: 12px; font-size: 11.5px; color: var(--ink-4); }

.qms-list--zadrzano th:nth-child(3) { width: 100%; }
.qms-list--zadrzano th:not(:nth-child(3)),
.qms-list--zadrzano td:not(:nth-child(3)) { white-space: nowrap; }

.qms-list--ret td.c-act, .qms-list--zadrzano td.c-act { text-align: right; }

/* ---- zahtjev pojedinca (plan 055, P5) ---- */

/* Traka za pretragu: polje nosi red, gumb stoji uz njega i ne lomi se u novi
   red na užem ekranu. */
.qms-ret-osoba-trazi {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.qms-ret-osoba-trazi .qms-field { flex: 1 1 320px; margin: 0; }

.qms-list--osoba th:nth-child(3) { width: 120px; }
.qms-list--osoba th:nth-child(4) { width: 260px; }
.qms-list--osoba td.c-act, .qms-list--osoba th:last-child { width: 130px; text-align: right; }

/* Staro i novo jedno uz drugo: razlika se mora vidjeti bez čitanja obje ćelije
   do kraja, pa staro ide prigušeno, a novo naglašeno. */
.qms-list--promjene th:first-child { width: 200px; }
.qms-list--promjene th:last-child, .qms-list--promjene td.c-num { width: 90px; text-align: right; }

.qms-promjena-prije { color: var(--ink-2); }
.qms-promjena-poslije { font-weight: 600; }

.qms-ret-privitci {
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--ink-2);
}