/* ============================================================
   Pomoć — tipografija tema iz Help/*.md

   Sadržaj dolazi kao HTML iz Markdowna, pa se ne može ostilati po elementu
   u samoj temi. Sve ide preko .qms-help-body, koji omeđuje renderirani tekst.

   Ne dira qms.css ni njegove tokene (pravilo iz CLAUDE.md) — koristi ih.
   ============================================================ */

.qms-help {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@media (max-width: 1200px) {
    .qms-help { grid-template-columns: 220px minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .qms-help { grid-template-columns: minmax(0, 1fr); }
    .qms-help-nav { display: none; }
}

/* ---- lijevi stupac: popis tema ---- */

.qms-help-nav {
    position: sticky;
    top: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
}

.qms-help-navtitle {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-3);
    padding: 4px 8px 8px;
}

.qms-help-navlink {
    display: block;
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--ink-2);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.35;
}

.qms-help-navlink:hover { background: var(--surface-2); color: var(--ink); }

.qms-help-navlink.active {
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 600;
}

/* ---- navigacija po naslovima: vodoravno iznad teme ---- */

.qms-help-onpage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    margin-bottom: 12px;
    font-size: 12.5px;
}

.qms-help-onpage a {
    padding: 2px 0;
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.qms-help-onpage a:hover { color: var(--ink); border-bottom-color: var(--accent-line); }
/* Treća razina se u vodoravnom nizu razlikuje bojom, ne uvlakom. */
.qms-help-onpage a.lvl3 { color: var(--ink-4); }

/* ---- tijelo teme ---- */

.qms-help-body {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 26px 30px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.62;
    /* Bez gornje granice: kartica ide do desnog ruba, kao i traka „na ovoj
       stranici" iznad nje. Granica od 144ch držala je tekst čitljivim, ali je
       na širokom zaslonu ostavljala prazninu desno i lomila poravnanje —
       kartica je završavala 220 px prije trake koja stoji iznad nje. */
}

.qms-help-body > *:first-child { margin-top: 0; }

.qms-help-body h1 { font-size: 22px; margin: 0 0 6px; }
.qms-help-body h2 {
    font-size: 16px;
    margin: 30px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.qms-help-body h3 { font-size: 14px; margin: 22px 0 8px; color: var(--ink-strong); }

.qms-help-body p { margin: 0 0 12px; }
.qms-help-body ul, .qms-help-body ol { margin: 0 0 12px; padding-left: 20px; }
.qms-help-body li { margin: 3px 0; }
.qms-help-body strong { color: var(--ink-strong); }

.qms-help-body a { color: var(--accent-text); text-decoration: none; }
.qms-help-body a:hover { text-decoration: underline; }

/* Blockquote je u temama „ovo je najvažnije u odjeljku", pa se i vidi tako. */
.qms-help-body blockquote {
    margin: 14px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--accent-line);
    background: var(--accent-soft);
    border-radius: 0 8px 8px 0;
    color: var(--ink);
}
.qms-help-body blockquote p:last-child { margin-bottom: 0; }

.qms-help-body code {
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12.5px;
}

.qms-help-body pre {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    overflow-x: auto;
}
.qms-help-body pre code { background: none; border: 0; padding: 0; }

/* Tablice nose većinu sadržaja u temama — prate izgled popisa u aplikaciji. */
.qms-help-tablewrap { overflow-x: auto; margin: 0 0 14px; }

.qms-help-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 0 0 14px;
}

.qms-help-body th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line-strong);
    padding: 7px 10px;
    white-space: nowrap;
}

.qms-help-body td {
    border-bottom: 1px solid var(--line-soft);
    padding: 7px 10px;
    vertical-align: top;
}

.qms-help-body tr:last-child td { border-bottom: 0; }

.qms-help-body img {
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin: 6px 0 14px;
}

.qms-help-body hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

/* ---- zaglavlje i podnožje teme ---- */

.qms-help-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--ink-3);
    margin-bottom: 14px;
}

.qms-help-role {
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 2px 9px;
}

.qms-help-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    font-size: 13px;
}

.qms-help-foot a { color: var(--ink-2); text-decoration: none; }
.qms-help-foot a:hover { color: var(--accent-text); }

/* ---- pretraga ---- */

.qms-help-search { display: flex; gap: 8px; margin-bottom: 16px; }
.qms-help-search input { max-width: 420px; }

.qms-help-hit {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    margin-bottom: 8px;
    text-decoration: none;
}

.qms-help-hit:hover { border-color: var(--accent-line); }
.qms-help-hit-title { color: var(--ink-strong); font-weight: 600; font-size: 14px; }
.qms-help-hit-snippet { color: var(--ink-3); font-size: 12.5px; margin-top: 4px; }

/* ---- gumb „?" u traci zaglavlja ---- */

/* Bez `margin-left: auto` — razmak drži naslov (`.qms-topbar-title`).
   Dva automatska razmaka u istom flex retku dijele slobodan prostor na pola,
   pa bi datum završio na sredini trake umjesto uz ovaj gumb. */
.qms-topbar-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--ink-3);
    text-decoration: none;
    font-size: 16px;
}

.qms-topbar-help:hover {
    background: var(--surface-3);
    color: var(--accent-text);
}

/* ---- dijagrami tijeka ----
   SVG je ugrađen u temu, ne učitan kao slika, da može koristiti tokene teme —
   isti dijagram tako radi i na tamnoj i na svijetloj temi, bez JavaScripta. */

.qms-help-flow { margin: 16px 0 20px; }

.qms-help-flow svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 660px;
}

.qms-flow-box { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.qms-flow-box.is-end { fill: var(--accent-soft); stroke: var(--accent-line); }
.qms-flow-text { fill: var(--ink); font-size: 12px; text-anchor: middle; }
.qms-flow-line { stroke: var(--ink-5); stroke-width: 1.5; fill: none; }
.qms-flow-head { fill: var(--ink-5); }

/* Naslov trake s navigacijom stoji u istom redu kao poveznice, pa ne smije biti
   blok element kakav je bio u desnom stupcu. */
.qms-help-onpage .qms-help-navtitle {
    margin: 0;
    color: var(--ink-4);
}

/* ------------------------------------------------------------
   PORAVNANJE TABLICA (plan 048, D6)

   Na sadržaju stoje četiri tablice jedna ispod druge. Svaka si sama računa
   širinu stupaca prema svom najduljem nazivu teme, pa stupac „O čemu je"
   počinje na drugom mjestu u svakoj — čita se odozgo prema dolje kao da
   skače lijevo-desno.

   Zadane širine to poravnaju. Prvi stupac je naziv, zadnji „Za koga" kad
   postoji; sredina uzima ostatak.
   ------------------------------------------------------------ */

.qms-help-body table { table-layout: fixed; }

.qms-help-body th:first-child,
.qms-help-body td:first-child { width: 260px; }

/* Treći stupac („Za koga") pojavljuje se samo u dijelu tablica. */
.qms-help-body tr > :nth-child(3):last-child { width: 220px; }

/* Fiksni raspored reže dugačke nazive — dopuštamo prelamanje. */
.qms-help-body td,
.qms-help-body th { overflow-wrap: anywhere; }

@media (max-width: 900px) {
    .qms-help-body table { table-layout: auto; }
    .qms-help-body th:first-child,
    .qms-help-body td:first-child { width: auto; }
}