/* ============================================================
   Karlix QMS — poruke o ishodu radnje
   Dopuna uz qms.css (koristi njegove tokene, ne mijenja ih).
   Renderira se iz _Layout, pa vrijedi na svakom ekranu.
   ============================================================ */

.qms-flashwrap {
    display: flex; flex-direction: column; gap: 8px;
    margin: 0 0 18px;
}

.qms-flash {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r, 10px);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 13.5px; line-height: 1.45;
    animation: qms-flash-in .18s ease-out;
}

.qms-flash-icon { flex: 0 0 auto; font-size: 14px; margin-top: 1px; }
.qms-flash-text { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }

.qms-flash-x {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 5px;
    background: transparent; color: inherit;
    opacity: .55; cursor: pointer;
}
.qms-flash-x:hover { opacity: 1; background: rgba(127, 127, 127, .14); }
.qms-flash-x i { font-size: 10px; }

.qms-flash--ok {
    background: var(--good-soft);
    border-color: color-mix(in oklch, var(--good) 34%, transparent);
    color: var(--good-text);
}

.qms-flash--warn {
    background: var(--warn-soft);
    border-color: color-mix(in oklch, var(--warn) 34%, transparent);
    color: var(--warn-text);
}

.qms-flash--error {
    background: var(--bad-soft);
    border-color: color-mix(in oklch, var(--bad) 38%, transparent);
    color: var(--bad-text);
}

@keyframes qms-flash-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* nestajanje poruke o uspjehu */
.qms-flash.is-leaving { opacity: 0; transition: opacity .25s ease; }

@media (prefers-reduced-motion: reduce) {
    .qms-flash { animation: none; }
    .qms-flash.is-leaving { transition: none; }
}

/* poruka se ne ispisuje */
@media print {
    .qms-flashwrap { display: none; }
}

/* ------------------------------------------------------------
   POLJE KOJE SE NE UREĐUJE
   Pravilo: nikad disabled na polju koje se sprema. Onemogućen
   izbornik izgleda kao kvar („ne da se kliknuti“) i ne šalje se —
   pa se vrijednost prikazuje kao tekst, s razlogom kad ga ima.
   ------------------------------------------------------------ */

.qms-readonlyfield {
    display: flex; flex-direction: column; gap: 3px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r, 8px);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 13.5px;
}

.qms-readonlyfield-why {
    font-size: 11.5px; color: var(--ink-3); text-wrap: pretty;
}

/* ------------------------------------------------------------
   RAZDOBLJE NA DASHBOARDU
   Gore desno je stajao nepromjenjiv tekst; sada je izbor.
   ------------------------------------------------------------ */

.qms-period {
    display: flex; align-items: center; gap: 9px;
    margin-left: auto;
}
.qms-period label { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.qms-period .form-select { width: auto; min-width: 190px; }

/* ------------------------------------------------------------
   KORISNIK U IZBORNIKU
   Drugi red je e-mail manjim fontom (prije je tu bila uloga,
   a ime je i samo bilo e-mail).
   ------------------------------------------------------------ */

.qms-user-mail {
    font-size: 11px; color: var(--ink-4);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ------------------------------------------------------------
   IZBORNIK FIRMI (samo globalni administrator)
   ------------------------------------------------------------ */

.qms-tenant.dropdown { padding: 0; }

.qms-tenant-btn {
    display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 9px 12px;
    border: 0; border-radius: var(--r-sm, 8px);
    background: transparent; color: inherit;
    text-align: left; cursor: pointer;
}
.qms-tenant-btn:hover { background: var(--surface-2); }
.qms-tenant-btn > i { margin-left: auto; font-size: 10px; color: var(--ink-4); }

.qms-tenant-col { display: flex; flex-direction: column; min-width: 0; }

.qms-tenant .dropdown-item.is-current { color: var(--accent-text); font-weight: 600; }