/* ============================================================
   Ciljevi kvalitete (plan 067, C1)

   Proširenje qms.css, ne zamjena: tokeni i komponente (kartica, polje, popis,
   traka) dolaze odande, a ovdje stoji samo ono što registar ciljeva ima, a
   drugi ekrani nemaju — put od polazišta do cilja i traka napretka.
   ============================================================ */

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

/* ---- zaglavlje kartice, obrazac, radnje ----
   Isti oblik kao na rizicima; ne posuđuje se jer bi tada izmjena jednog modula
   mijenjala izgled drugoga. */
.qms-obj-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-obj-cardhead + .qms-obj-cardhead,
.qms-obj-form + .qms-obj-cardhead,
.qms-grid-wrap + .qms-obj-cardhead { margin-top: 22px; }

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

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

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

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

.qms-obj-chk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.qms-obj-clear { font-size: 12.5px; color: var(--ink-3); }
.qms-obj-dodaj { font-size: 12.5px; font-weight: 400; margin-left: auto; }

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

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

/* ---- put: polazište → sada → cilj ----
   Tri brojke koje se čitaju zajedno. Odvojene u redove izgledaju kao tri
   nepovezana podatka, a one su jedna rečenica. */
.qms-obj-put {
    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-obj-tocka {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px;
    background: var(--surface-2);
}

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

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

/* ---- traka napretka ----
   Širina ispune ide razredom, u koracima od 10 %: inline stilovi u .cshtml se
   ne koriste, a točna brojka ionako stoji uz traku. */
.qms-obj-napredak {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 14px;
}

.qms-obj-bar {
    display: inline-block;
    position: relative;
    width: 84px; height: 8px;
    border-radius: 999px;
    background: var(--neutral-soft);
    overflow: hidden;
    vertical-align: middle;
}

.qms-obj-napredak .qms-obj-bar { width: 220px; height: 10px; }

.qms-obj-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ink-3);
    width: 0;
}

.qms-obj-bar--good .qms-obj-bar-fill { background: var(--good); }
.qms-obj-bar--warn .qms-obj-bar-fill { background: var(--warn); }
.qms-obj-bar--bad  .qms-obj-bar-fill { background: var(--bad); }
.qms-obj-bar--none .qms-obj-bar-fill { background: transparent; }

.qms-obj-bar-fill.is-p0   { width: 0; }
.qms-obj-bar-fill.is-p10  { width: 10%; }
.qms-obj-bar-fill.is-p20  { width: 20%; }
.qms-obj-bar-fill.is-p30  { width: 30%; }
.qms-obj-bar-fill.is-p40  { width: 40%; }
.qms-obj-bar-fill.is-p50  { width: 50%; }
.qms-obj-bar-fill.is-p60  { width: 60%; }
.qms-obj-bar-fill.is-p70  { width: 70%; }
.qms-obj-bar-fill.is-p80  { width: 80%; }
.qms-obj-bar-fill.is-p90  { width: 90%; }
.qms-obj-bar-fill.is-p100 { width: 100%; }

.qms-obj-pct { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.qms-obj-pct.is-muted { color: var(--ink-3); }

/* ---- granica upozorenja ---- */
.qms-obj-prag {
    display: flex; align-items: baseline; gap: 8px;
    margin-top: 14px;
    font-size: 12.5px; color: var(--ink-2);
}

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

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

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

.qms-obj-facts dd:last-child { border-bottom: 0; }
.qms-obj-facts dd .qms-page-note { display: block; }

/* ---- stanje u desnom stupcu ---- */
.qms-obj-ishod { display: flex; align-items: baseline; gap: 8px; min-height: 30px; }
.qms-obj-ishod .qms-obj-val { font-size: 22px; font-weight: 650; color: var(--ink-strong); }
.qms-obj-trend { color: var(--ink-3); }

.qms-obj-obrazlozenje {
    margin-top: 10px;
    font-size: 12.5px; color: var(--ink-2);
}

/* .qms-railcard nema unutarnji razmak — na slučajevima ga donose komponente u
   njoj. Ovdje sadržaj stoji izravno, pa mu razmak daje omotač. */
.qms-obj-railbody { padding: 14px 18px; }
.qms-obj-railbody > :first-child { margin-top: 0; }
.qms-obj-railbody > :last-child { margin-bottom: 0; }

/* ---- kaskada ---- */
.qms-obj-roditelj {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 13px; color: var(--ink-2);
}

.qms-obj-kaskada {
    display: inline-flex; align-items: baseline; gap: 3px;
    margin-right: 10px;
    color: var(--ink-3);
}

/* ---- popis: stanje i cilj jedno ispod drugoga ---- */
.qms-obj-val { font-variant-numeric: tabular-nums; }
.qms-obj-cilj { display: block; font-size: 12px; color: var(--ink-3); }

/* ---- širine stupaca registra ----
   Tablica je table-layout: fixed; bez zadanih širina svi stupci dobiju jednako,
   pa bi „Cilj“ bio stisnut jednako kao „Napredak“ s jednom brojkom. */
.qms-list--obj th.c-code   { width: 128px; }
.qms-list--obj th.c-title  { width: auto; }
.qms-list--obj th.c-proc   { width: 150px; }
.qms-list--obj th.c-owner  { width: 130px; }
.qms-list--obj th.c-status { width: 120px; }
.qms-list--obj th.c-val    { width: 140px; }
.qms-list--obj th.c-prog   { width: 150px; }
.qms-list--obj th.c-per    { width: 130px; }

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

/* ---- mjerenja (C2) ---------------------------------------------------- */

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

/* „Osvježi sada" stoji uz naslov kartice, na desnom kraju. */
.qms-obj-dodaj-form { margin-left: auto; }

.qms-obj-c-act { width: 44px; text-align: right; }

/* Popis izvora ispod obrasca: objašnjenje što koji broji. Sitno, jer se čita
   jednom — pri prvom postavljanju cilja. */
.qms-obj-izvori {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.qms-obj-izvori .qms-obj-facts dt { font-weight: 550; color: var(--ink-2); }
.qms-obj-izvori .qms-obj-facts dd { font-size: 12.5px; color: var(--ink-3); }