/* ============================================================
   Administracija → Dijagnostika → Pozadinski poslovi (plan 049, paket 2)

   Ekran postoji zato što se 11.09.2026. na pitanje „rade li poslovi" moglo
   odgovoriti samo mjerenjem — termin u prošlost izravno u bazi, pa čekaj i
   gledaj pomiče li se. Zato gore stoji jedna rečenica koja odgovara na to
   pitanje, a tablice su ispod, za onoga tko želi detalj.
   ============================================================ */

.qms-jobs-stanje {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line-soft);
}
.qms-jobs-stanje > i { font-size: 20px; line-height: 1.2; }
.qms-jobs-stanje.is-ok > i { color: var(--good-text); }
.qms-jobs-stanje.is-bad > i { color: var(--bad); }

.qms-jobs-stanje-body { display: flex; flex-direction: column; gap: 3px; }

.qms-jobs-stanje-naslov {
    font-size: 15px; font-weight: 600; color: var(--ink-strong);
}
.qms-jobs-stanje.is-bad .qms-jobs-stanje-naslov { color: var(--bad-text); }

.qms-jobs-table { margin-top: 0; }

/* Naziv i poruka u istoj ćeliji: poruka je objašnjenje naziva, a ne
   zaseban podatak — zaseban stupac za nju rastegnuo bi tablicu. */
.qms-jobs-naziv { display: block; font-weight: 600; color: var(--ink-strong); }

.qms-jobs-poruka {
    display: block; margin-top: 2px;
    font-size: 12px; color: var(--ink-3);
}

/* Datum i trajanje ne smiju se lomiti: „11.09.2026." u jednom retku i
   „12:04:24" u drugom čita se kao dva podatka, a jedan je. */
.qms-jobs-nowrap { white-space: nowrap; }

.qms-jobs-table tr.is-bad td { background: var(--bad-soft); }
.qms-jobs-table tr.is-bad .qms-jobs-naziv { color: var(--bad-text); }
.qms-jobs-table tr.is-warn td { background: var(--warn-soft); }

.qms-jobs-legenda {
    padding: 12px 22px;
    font-size: 12px; color: var(--ink-3);
    border-top: 1px solid var(--line-soft);
}

/* Uska ploča: pet stupaca ne stane, pa tablica dobiva vlastito pomicanje
   umjesto da rastegne stranicu. */
@media (max-width: 720px) {
    .qms-jobs-table { display: block; overflow-x: auto; }
}