/* ============================================================
   Administracija → Integracije (plan 048, paket 4)

   Jedan izvor = jedna kartica. Postavke gore, stanje dolje, jer se
   „kad je zadnji put prošlo" gleda češće nego što se postavke mijenjaju.
   ============================================================ */

/* Točka za stanje koje nije ni dobro ni loše — isključen izvor,
   napuštena serija. qms.css ima good/warn/bad/accent/info, ali ne i ovo. */
.qms-dot--muted { background: var(--ink-5); }

.qms-int-feed { padding: 0; }

.qms-int-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 11px;
    padding: 15px 22px;
    border-bottom: 1px solid var(--line-soft);
}
.qms-int-title { font-size: 15px; font-weight: 600; color: var(--ink-strong); }

.qms-int-badge {
    padding: 2px 9px; border-radius: 20px;
    background: var(--surface-3); color: var(--ink-3);
    font-size: 11.5px; font-weight: 600;
}
.qms-int-badge.is-wait { background: var(--warn-soft); color: var(--warn-text); }

/* Uvoz koji je stao (plan 073, A5) — traži odluku, ne klik, pa nosi jaču boju
   od onih koji čekaju potvrdu. */
.qms-int-badge.is-bad { background: var(--bad-soft); color: var(--bad-text); }

.qms-int-grid {
    padding: 18px 22px;
    display: grid; gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Znak pitanja uz naslov polja nosi objašnjenje u title atributu —
   praga i roka nema smisla objašnjavati rečenicom ispod svakog polja. */
.qms-int-hint {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--surface-3); color: var(--ink-4);
    font-size: 10px; font-weight: 700;
    text-transform: none; letter-spacing: 0; cursor: help;
}

/* Postavke dohvata: sklopljene, jer se tiču samo izvora po koji idemo sami. */
.qms-int-conn {
    margin: 0 22px 16px;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface-2);
}
.qms-int-conn > summary {
    padding: 10px 14px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-3);
    cursor: pointer;
}
.qms-int-conn > summary:hover { color: var(--ink-strong); }
.qms-int-conn[open] > summary { border-bottom: 1px solid var(--line-soft); }
.qms-int-conn .qms-int-grid { padding: 16px 14px 6px; }
.qms-int-connnote {
    padding: 0 14px 14px;
    font-size: 12px; line-height: 1.55; color: var(--ink-4);
}
.qms-span4 { grid-column: span 4; }

.qms-int-warn {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 0 22px 16px;
    padding: 10px 13px;
    border: 1px solid var(--warn); border-radius: var(--r);
    background: var(--warn-soft);
    font-size: 12.5px; color: var(--ink-2);
}
.qms-int-warn i { color: var(--warn-text); margin-top: 1px; }

.qms-int-foot {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 22px;
    border-top: 1px solid var(--line-soft);
    background: var(--surface-2);
}
.qms-int-state {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
    font-size: 12.5px; color: var(--ink-3);
}
.qms-int-result { color: var(--ink-2); }
.qms-int-actions { margin-left: auto; display: flex; gap: 8px; }

/* Pokretanje i uvoz su zasebne forme pa su i vizualno odvojeni od kartice,
   uvučeni pod nju — da se vidi na koji se izvor odnose. */
.qms-int-run {
    display: flex; flex-direction: column; gap: 8px;
    margin: -8px 22px 4px;
}

/* Prvi red su radnje nad onim što je već stiglo, drugi red je unos datoteke.
   U jednom redu se stapaju u vrpcu od šest kontrola u kojoj se ne vidi da su
   to dvije različite stvari. */
.qms-int-runbtns { display: flex; align-items: center; gap: 8px; }

.qms-int-upload { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qms-int-upload input[type="file"] { max-width: 232px; }
.qms-int-upload select { max-width: 208px; }

/* ------------------------------------------------------------
   RUČNI UVOZ — pregled prije potvrde
   ------------------------------------------------------------ */

.qms-imp-file {
    display: grid; gap: 16px;
    grid-template-columns: 1.4fr 1.6fr 0.6fr;
    font-size: 13px; color: var(--ink-2);
}
.qms-imp-name { font-weight: 600; color: var(--ink-strong); word-break: break-all; }

.qms-imp-grid {
    padding: 18px 22px;
    display: grid; gap: 14px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
/* Dok posao traje: jedna rečenica i vrtuljak, ništa više. Ekran se osvježava
   sam, pa ovdje nema gumba koje bi se htjelo pritisnuti. */
.qms-imp-radi { display: flex; align-items: center; gap: 14px; }
.qms-imp-radi-t { font-size: 14px; font-weight: 600; color: var(--ink-strong); }
.qms-imp-radi-p { margin-top: 3px; font-size: 12.5px; color: var(--ink-4); }
.qms-imp-spin {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--line); border-top-color: var(--accent);
    animation: qms-imp-vrti .8s linear infinite;
}
@keyframes qms-imp-vrti { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .qms-imp-spin { animation: none; border-top-color: var(--line); }
}

.qms-imp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qms-imp-num { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qms-imp-n { font-size: 22px; font-weight: 600; color: var(--ink-strong); line-height: 1.1; }
.qms-imp-l { font-size: 11.5px; color: var(--ink-4); }
.qms-imp-num.is-warn .qms-imp-n { color: var(--warn-text); }
.qms-imp-num.is-bad .qms-imp-n { color: var(--bad-text); }

.qms-imp-findings { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); }
.qms-imp-findings li + li { margin-top: 4px; }

.qms-imp-confirm { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.qms-imp-form { flex: 1 1 420px; display: flex; flex-direction: column; gap: 12px; }

/* Kvačica uz punu rečenicu s brojem — gašenje se ne potvrđuje gumbom koji
   izgleda kao svaki drugi. */
.qms-imp-check {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--warn); border-radius: var(--r);
    background: var(--warn-soft);
    font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.qms-imp-check input { margin-top: 3px; flex: 0 0 auto; }

.qms-imp-note { font-size: 13px; color: var(--ink-3); }
.qms-imp-actions { display: flex; gap: 8px; }
.qms-imp-drop { margin-left: auto; }

@media (max-width: 1100px) {
    .qms-imp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .qms-imp-file { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .qms-imp-grid, .qms-imp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qms-imp-file { grid-template-columns: 1fr; }
    .qms-int-upload { border-left: 0; padding-left: 0; }
    .qms-imp-drop { margin-left: 0; }
}

/* Pojedinost zapisnika (broj redaka, razlog odbijanja) ide u drugi red,
   prigušeno — poruka je ono što se čita, pojedinost ono što se traži. */
.qms-int-detail { display: block; margin-top: 4px; }
.qms-int-detail > summary {
    font-size: 11.5px; color: var(--ink-4);
    cursor: pointer; width: fit-content;
}
.qms-int-detail > summary:hover { color: var(--ink-2); }
.qms-int-detail ul {
    margin: 6px 0 0; padding-left: 18px;
    max-height: 320px; overflow-y: auto;
    font-size: 11.5px; line-height: 1.6; color: var(--ink-3);
}
.qms-int-detailmore { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-4); }

@media (max-width: 1100px) {
    .qms-int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qms-span4 { grid-column: span 2; }
}
@media (max-width: 700px) {
    .qms-int-grid { grid-template-columns: 1fr; }
    .qms-span2, .qms-span4 { grid-column: auto; }
    .qms-int-foot { flex-direction: column; align-items: flex-start; }
    .qms-int-actions { margin-left: 0; }
}

/* ---- Redovi serije (plan 170, odluka A6) ------------------------------- */

/* Birač statusa stoji u jednom redu s gumbom: tri elementa, pa grid nije
   potreban. Oznaka ide `label` + `for`, ne `span` — polje bez programskog
   imena čitač zaslona ne pročita (v. plan 160). */
.qms-rowfilter {
    display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
}
.qms-rowfilter select { width: auto; min-width: 240px; }
.qms-rowfilter .qms-field-label { margin: 0 0 2px; }

/* Sirovi red kakav je stigao. Zatvoren je zadano: razlog odbijanja je ono što
   se čita, a JSON je ono čime se dokazuje. */
.qms-rowpayload { margin-top: 6px; }
.qms-rowpayload > summary {
    font-size: 11.5px; color: var(--ink-4);
    cursor: pointer; width: fit-content;
}
.qms-rowpayload > summary:hover { color: var(--ink-2); }

/* `pre` ne lomi dugačke retke sam, pa jedan red od tisuću znakova razvuče
   tablicu i na širokom ekranu. */
.qms-rowpayload-p {
    margin: 6px 0 0; padding: 8px 10px;
    max-height: 220px; overflow: auto;
    background: var(--surface-2); border-radius: 6px;
    font-size: 11.5px; line-height: 1.55; color: var(--ink-3);
    white-space: pre-wrap; word-break: break-all;
}

@media (max-width: 700px) {
    .qms-rowfilter select { min-width: 0; width: 100%; }
}