/* ============================================================
   Ekrani uvoza iz datoteke — šifrarnici i norme (plan 073, B2)

   Proširuje qms.css, ne dira njegove tokene.

   Dva ekrana, `Admin/CodebookImport` i `Admin/StandardImport`, imali su
   zajedno 40 `style` atributa — najviše u projektu. Struktura im je ista:
   naslov s objašnjenjem, obrazac s datotekom, pa izvještaj o obavljenom.
   Zato jedna datoteka pokriva oba; kad se treći ekran uvoza doda, koristi iste
   razrede.

   Zašto uopće: raspored u `style` atributu nema prijelom. Tri kvara na
   mobitelu bila su upravo to — redak koji se na uskom ekranu nije imao gdje
   slomiti.
   ============================================================ */

/* Uvoz je uzak ekran: jedan stupac, obrazac i izvještaj. Široko bi značilo
   redak od 200 znakova u popisu poruka. */
.qms-uvoz { max-width: 720px; }

/* ---- zaglavlje ---- */
.qms-uvoz-head {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
}

.qms-uvoz-head-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.qms-uvoz-hint {
    color: var(--ink-3);
    font-size: 13px;
}

/* ---- greška ---- */
.qms-uvoz-error {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 13px 16px;
    border-left: 3px solid var(--bad);
}

.qms-uvoz-error i { color: var(--bad-text); }

/* ---- obrazac i izvještaj ---- */
.qms-uvoz-form,
.qms-uvoz-done {
    display: flex;
    flex-direction: column;
    padding: 18px;
}

.qms-uvoz-form { gap: 14px; }
.qms-uvoz-done { gap: 12px; }

.qms-uvoz-note {
    color: var(--ink-3);
    font-size: 12.5px;
    line-height: 1.6;
}

.qms-uvoz-check {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: var(--ink-2);
    font-size: 13px;
}

.qms-uvoz-check-side { color: var(--ink-3); }

.qms-uvoz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

/* ---- ishod ---- */
.qms-uvoz-done-head {
    display: flex;
    align-items: center;
    gap: 9px;
}

.qms-uvoz-done-head i {
    color: var(--good-text);
    font-size: 20px;
}

/* Brojke se lome na uskom ekranu umjesto da guraju redak u stranu. */
.qms-uvoz-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    font-size: 14px;
}

.qms-uvoz-counts .is-good { color: var(--good-text); }
.qms-uvoz-counts .is-muted { color: var(--ink-3); }
.qms-uvoz-counts .is-bad { color: var(--bad-text); }

.qms-uvoz-messages {
    margin: 0;
    padding-left: 18px;
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.7;
}

.qms-uvoz-more {
    color: var(--ink-3);
    font-size: 12px;
}