/* ============================================================
   Karlix QMS — „Kako teče obrada"
   Sklopivo objašnjenje postupka uz traku faza.
   ============================================================ */

.qms-process {
    border: 1px solid var(--line);
    border-radius: var(--r, 10px);
    background: var(--surface);
}

.qms-process-head {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.qms-process-head::-webkit-details-marker { display: none; }
.qms-process-head > i:first-child { font-size: 13px; color: var(--ink-3); }

.qms-process-title { font-size: 13.5px; font-weight: 600; color: var(--ink-strong); }
.qms-process-hint { font-size: 12px; color: var(--ink-3); }
.qms-process-chev { margin-left: auto; font-size: 11px; color: var(--ink-3); transition: transform .15s ease; }
.qms-process[open] .qms-process-chev { transform: rotate(180deg); }

.qms-process-body { padding: 4px 16px 16px; border-top: 1px solid var(--line-soft); }

.qms-process-steps {
    list-style: none; margin: 14px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 12px;
}

.qms-process-step { display: flex; align-items: flex-start; gap: 11px; }

.qms-process-n {
    flex: 0 0 auto;
    width: 22px; height: 22px; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--surface-3); color: var(--ink-3);
    font-size: 11.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.qms-process-step.is-current .qms-process-n { background: var(--accent); color: var(--accent-ink); }

.qms-process-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.qms-process-label {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 13px; font-weight: 500; color: var(--ink-strong);
}

.qms-process-now {
    padding: 1px 7px; border-radius: 20px;
    background: var(--accent-soft); color: var(--accent-text);
    font-size: 10.5px; font-weight: 600;
}

.qms-process-what { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; text-wrap: pretty; }

.qms-process-meta {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 1px;
    font-size: 11.5px; color: var(--ink-3);
}
.qms-process-who, .qms-process-bell, .qms-process-next { display: inline-flex; align-items: center; gap: 5px; }
.qms-process-meta i { font-size: 10.5px; }

/* Primatelj obavijesti stoji uz izvršitelja jer odgovara na isto pitanje —
   tko je sljedeći na redu. Zvono ga odvaja da se dva imena ne stope u jedno. */
.qms-process-bell { align-items: flex-start; }
.qms-process-bell i { margin-top: 2px; color: var(--accent-text); }

.qms-process-note {
    display: flex; align-items: flex-start; gap: 9px;
    margin-top: 14px; padding: 10px 12px;
    border-radius: var(--r-sm, 8px);
    background: var(--surface-2);
    font-size: 12px; color: var(--ink-3); line-height: 1.45; text-wrap: pretty;
}
.qms-process-note i { flex: 0 0 auto; margin-top: 1px; font-size: 11px; }

@media (max-width: 700px) {
    .qms-process-hint { display: none; }
}

/* objašnjenje se ne ispisuje */
@media print {
    .qms-process { display: none; }
}