/* ============================================================
   Karlix QMS — moje uloge i prava
   Dopuna uz qms.css. Učitava se poslije njega.
   ============================================================ */

/* ------------------------------------------------------------
   1. IDENTITET
   ------------------------------------------------------------ */

.qms-idcards { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }

.qms-idcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 15px 18px;
    display: flex; flex-direction: column; gap: 4px;
}
.qms-idcard--user { flex-direction: row; align-items: center; gap: 13px; }

.qms-idcard-avatar {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--accent); color: var(--accent-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600;
}
.qms-idcard-label { font-size: 11.5px; color: var(--ink-3); }
.qms-idcard-value { font-size: 14px; color: var(--ink-strong); }
.qms-idcard-name { font-size: 14px; font-weight: 600; color: var(--ink-strong); }
.qms-idcard-mail {
    font-size: 12.5px; color: var(--ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* GUID: treba kad se prijavljuje problem, pa mora biti čitljiv */
.qms-idcard-guid {
    font-size: 11px; font-family: var(--mono);
    color: var(--ink-code);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* uloga kao oznaka uz korisnika; više uloga = više oznaka */
.qms-rolepill {
    display: inline-flex; align-items: center; gap: 7px;
    width: fit-content;
    padding: 3px 11px 3px 9px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    color: var(--accent-text);
    font-size: 13px;
}
.qms-rolepill i { font-size: 11.5px; }
.qms-roleset { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------
   2. PRAVA PO MODULU
   ------------------------------------------------------------ */

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

.qms-permgroup {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.qms-permgroup-head {
    display: flex; align-items: center; gap: 11px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
}
.qms-permgroup-head i { font-size: 14px; color: var(--ink-3); }
.qms-permgroup-title { font-size: 14px; font-weight: 600; color: var(--ink-strong); }
.qms-permgroup-count {
    margin-left: auto;
    font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums;
}

/* upozorenje: modul bez ijednog prava u kodu */
.qms-permgroup-warn {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 11px 20px;
    background: var(--warn-soft);
    border-bottom: 1px solid var(--line);
    font-size: 12px; line-height: 1.55; color: var(--ink-2);
}
.qms-permgroup-warn i { font-size: 12px; color: var(--warn-text); margin-top: 2px; }

.qms-perm {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 20px;
    border-bottom: 1px solid var(--line-soft);
}
.qms-perm:last-child { border-bottom: 0; }

.qms-perm-icon { flex: 0 0 auto; font-size: 13px; margin-top: 2px; }
.qms-perm.has .qms-perm-icon { color: var(--good-text); }
.qms-perm.hasnt .qms-perm-icon { color: var(--ink-muted-icon); }

.qms-perm-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qms-perm-text { font-size: 13.5px; line-height: 1.45; color: var(--ink-strong); }
.qms-perm.hasnt .qms-perm-text { color: var(--ink-3); }

/* šifra nije crvena — crveni monospace u aplikaciji znači grešku */
.qms-perm-code { font-size: 11px; font-family: var(--mono); color: var(--ink-code); }

/* ------------------------------------------------------------
   3. FAZE
   ------------------------------------------------------------ */

.qms-phaserow { display: flex; align-items: center; gap: 12px; }
.qms-phaserow-label { flex: 0 0 130px; font-size: 13px; color: var(--ink-2); }
.qms-phaseset { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.qms-phasechip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 12.5px;
}
.qms-phasechip i { font-size: 10.5px; }

.qms-phasechip--allowed {
    background: var(--good-soft);
    border-color: color-mix(in oklch, var(--good) 30%, transparent);
    color: var(--good-text);
}

/* faza za koju pravo ne postoji u kodu — ni dopuštena ni zabranjena */
.qms-phasechip--unknown {
    border-style: dashed;
    color: var(--ink-muted-icon);
}

/* ------------------------------------------------------------
   4. PRIGUŠENI TEKST — čitljiv u obje teme
   ------------------------------------------------------------ */

.qms-theme, .qms-theme-dark { --ink-code: var(--ink-4); --ink-muted-icon: var(--ink-4); }
.qms-theme-light { --ink-code: #6b757c; --ink-muted-icon: #6b757c; }

/* ------------------------------------------------------------
   5. NAPOMENA
   ------------------------------------------------------------ */

.qms-readonly-note {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    background: var(--surface);
    font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
}
.qms-readonly-note i { font-size: 13px; color: var(--accent-text); margin-top: 2px; }

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

@media (max-width: 1200px) {
    .qms-idcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qms-permgrid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .qms-idcards { grid-template-columns: minmax(0, 1fr); }
    .qms-phaserow { flex-direction: column; align-items: flex-start; gap: 7px; }
    .qms-phaserow-label { flex: 0 0 auto; }
}

/* ------------------------------------------------------------
   Prava po statusu — prikaz bez prava uređivanja.
   Kad korisnik ne smije mijenjati postavku, stanje se prikazuje kao znak, a ne
   kao ugašena kvačica: ugašeno polje izgleda kao kvar, a ne kao „ovo se ovdje
   ne mijenja".
   ------------------------------------------------------------ */
.qms-grantmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--ink-3);
}