/* ============================================================
   Mjerenja procesa (plan 075, M1)

   Proširenje qms.css, ne zamjena: tokeni i komponente (kartica, polje, popis)
   dolaze odande, a ovdje stoji samo ono što registar pokazatelja ima, a drugi
   ekrani nemaju — koridor s granicama i ocjena vrijednosti.

   Ne posuđuje se iz qms-objectives.css iako je oblik sličan: tada bi izmjena
   jednog modula tiho mijenjala izgled drugoga.
   ============================================================ */

/* ---- oznaka vrste uz naslov ---- */
.qms-tag--ind { background: var(--info-soft); color: var(--ink-strong); }

/* ---- zaglavlje kartice, obrazac, radnje ---- */
.qms-ind-cardhead {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin: 0 0 13px;
    font-size: 15px; font-weight: 600; color: var(--ink-strong);
}

.qms-ind-cardhead + .qms-ind-cardhead,
.qms-ind-form + .qms-ind-cardhead,
.qms-grid-wrap + .qms-ind-cardhead { margin-top: 22px; }

/* Granice su odvojena skupina u obrascu i trebaju vidljiv rez — kad stoje uz
   ostala polja, korisnik upiše cilj u granicu. */
.qms-ind-cardhead--sep {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
}

.qms-ind-cardhead .qms-page-note { font-weight: 400; }

.qms-ind-form {
    display: grid; gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qms-ind-wide { grid-column: 1 / -1; }
.qms-ind-note { font-size: 12.5px; color: var(--ink-3); }

.qms-ind-actions {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 16px;
}

.qms-ind-chk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.qms-ind-clear { font-size: 12.5px; color: var(--ink-3); }

/* Vrijednost polja koje se više ne mijenja. Nije onemogućeni <select> — sivi
   izbornik izgleda kao kvar, a razlog stoji u rečenici ispod. */
.qms-ind-locked {
    display: inline-block;
    padding: 6px 0;
    font-weight: 550;
    color: var(--ink-strong);
}

/* ---- pet pokazatelja u jednom redu ---- */
.qms-ind-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1500px) { .qms-ind-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .qms-ind-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- koridor: donja → sada → gornja ----
   Tri brojke koje se čitaju zajedno, i to prostorno: lijevo donja granica,
   desno gornja, vrijednost među njima. Raspored sam po sebi kaže je li se
   izašlo i na koju stranu. */
.qms-ind-koridor {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    overflow: hidden;
}

.qms-ind-tocka {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px;
    background: var(--surface-2);
}

/* Zadnja vrijednost je ono zbog čega se ekran otvara — zato istaknuta. */
.qms-ind-tocka.is-now { background: var(--surface-1); }
.qms-ind-tocka.is-now.is-out { background: var(--bad-soft); }

.qms-ind-tocka-label { font-size: 12.5px; color: var(--ink-3); }
.qms-ind-tocka-value { font-size: 20px; font-weight: 650; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.qms-ind-tocka.is-now .qms-ind-tocka-value { font-size: 24px; }
.qms-ind-tocka-sub { font-size: 12px; color: var(--ink-3); }

/* ---- rečenica o prekoračenju ----
   Crvena brojka kaže da nešto ne valja; ova rečenica kaže što i koliko. */
.qms-ind-alarm {
    display: flex; align-items: baseline; gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--bad-soft);
    color: var(--bad-text);
    font-size: 13px;
}

/* ---- ciljana vrijednost ----
   Odvojena od granica i tiša od njih: težnja se ne čita kao alarm. */
.qms-ind-cilj {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin-top: 14px;
}

.qms-ind-cilj-value {
    font-size: 16px; font-weight: 600; color: var(--ink-strong);
    font-variant-numeric: tabular-nums;
}

.qms-ind-opis { margin: 0; color: var(--ink-2); white-space: pre-line; }

/* ---- vrijednost i njena ocjena ----
   Jedina boja koja na ovom ekranu nosi značenje: unutar koridora ili izvan
   njega. Sve ostalo je neutralno da bi se ovo vidjelo. */
.qms-ind-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.qms-ind-val.is-in  { color: var(--ink-strong); }
.qms-ind-val.is-out { color: var(--bad-text); }

.qms-ind-lim { font-variant-numeric: tabular-nums; color: var(--ink-2); }

.qms-ind-dev { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--bad-text); }
.qms-ind-dev.is-none { color: var(--ink-3); font-weight: 400; }

/* ---- činjenice (naziv → vrijednost) ---- */
.qms-ind-facts { margin: 0; display: flex; flex-direction: column; }

.qms-ind-facts dt {
    font-size: 12.5px; font-weight: 400; color: var(--ink-3);
    padding-top: 8px;
}

.qms-ind-facts dd {
    margin: 0 0 2px;
    padding-bottom: 8px;
    color: var(--ink-strong);
    border-bottom: 1px solid var(--line-soft);
}

.qms-ind-facts dd:last-child { border-bottom: 0; }

/* ---- stanje u desnom stupcu ---- */
.qms-ind-ishod { display: flex; align-items: baseline; gap: 8px; min-height: 30px; }
.qms-ind-ishod .qms-ind-val { font-size: 22px; font-weight: 650; }

/* .qms-railcard nema unutarnji razmak — ovdje sadržaj stoji izravno, pa mu
   razmak daje omotač. */
.qms-ind-railbody { padding: 14px 18px; }
.qms-ind-railbody > :first-child { margin-top: 0; }
.qms-ind-railbody > :last-child { margin-bottom: 0; }

/* ---- širine stupaca registra ----
   Tablica je table-layout: fixed; bez zadanih širina svi stupci dobiju jednako,
   pa bi „Pokazatelj“ bio stisnut jednako kao „Odstupanja“ s jednom brojkom. */
.qms-list--ind th.col-check { width: 40px; }
.qms-list--ind th.c-code   { width: 128px; }
.qms-list--ind th.c-title  { width: auto; }
.qms-list--ind th.c-proc   { width: 150px; }
.qms-list--ind th.c-owner  { width: 130px; }
.qms-list--ind th.c-status { width: 120px; }
.qms-list--ind th.c-val    { width: 130px; }
.qms-list--ind th.c-lim    { width: 130px; }
.qms-list--ind th.c-dev    { width: 110px; }
.qms-list--ind th.c-meas   { width: 130px; }

@media (max-width: 900px) {
    .qms-list--ind { table-layout: auto; }
    .qms-list--ind th, .qms-list--ind td { width: auto !important; }
    .qms-ind-form { grid-template-columns: minmax(0, 1fr); }
    .qms-ind-koridor { grid-template-columns: minmax(0, 1fr); }
}

/* ---- upis vrijednosti (M2) --------------------------------------------- */

/* Obrazac stoji iznad popisa mjerenja, pa mu treba rez — inače se čita kao
   zaglavlje tablice. */
.qms-ind-mjerenje {
    padding-bottom: 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line-soft);
}

/* Poveznica na brzi unos stoji na desnom kraju retka s gumbom. */
.qms-ind-dodaj { font-size: 12.5px; margin-left: auto; }

.qms-ind-c-act { width: 76px; text-align: right; white-space: nowrap; }
.qms-ind-c-act form { display: inline-block; }

/* Vrijednost s mjernom jedinicom: jedinica ne smije izgledati kao dio polja. */
.qms-ind-unos { display: inline-flex; align-items: center; gap: 6px; }
.qms-ind-unos .form-control { max-width: 140px; }
.qms-ind-jed { font-size: 12.5px; color: var(--ink-3); }

/* „48 od 50“ — tri elementa koja se čitaju kao jedna rečenica. */
.qms-ind-uzorak { display: inline-flex; align-items: center; gap: 6px; }
.qms-ind-uzorak .form-control { max-width: 110px; }
.qms-ind-od { font-size: 12.5px; color: var(--ink-3); }

/* Uputa iznad tablice brzog unosa. */
.qms-ind-uputa { margin: 0 0 14px; }

/* ---- brzi unos ----
   Stupci su uži nego u registru: ovdje se ne čita nego upisuje, pa polja za
   unos moraju dobiti prostor, a opis pokazatelja stane u dva reda. */
.qms-list--entry th.c-code  { width: 120px; }
.qms-list--entry th.c-title { width: auto; }
.qms-list--entry th.c-per   { width: 140px; }
.qms-list--entry th.c-lim   { width: 120px; }
.qms-list--entry th.c-val   { width: 230px; }
.qms-list--entry th.c-note  { width: 220px; }

@media (max-width: 900px) {
    .qms-list--entry { table-layout: auto; }
    .qms-list--entry th, .qms-list--entry td { width: auto !important; }
    .qms-ind-unos .form-control,
    .qms-ind-uzorak .form-control { max-width: none; }
}