/* ============================================================
   Program audita — godišnja rešetka (plan 044)

   Redak je jedinica (ili norma / auditor / vrsta), stupac mjesec. Outlookov
   kalendar bio bi pogrešan oblik: kod internog audita nikoga ne zanima je li
   u 10:00 ili 14:00 — zanima koja jedinica u kojem mjesecu.
   ============================================================ */

.qms-pgm-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.qms-pgm-title { font-size: 21px; margin: 0 0 4px; letter-spacing: -.015em; }
.qms-pgm-sub { color: var(--ink-3); font-size: 13px; margin: 0; max-width: 640px; }
.qms-pgm-tools { margin-left: auto; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

.qms-pgm-years {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
}
.qms-pgm-years a {
    padding: 4px 9px; border-radius: 6px;
    color: var(--ink-3); font-size: 12.5px; text-decoration: none;
}
.qms-pgm-years a:hover { color: var(--ink); background: var(--surface-2); }
.qms-pgm-years a.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }

/* ---- KPI ---- */
.qms-pgm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.qms-pgm-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 15px; }
.qms-pgm-kpi .k {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-3); font-weight: 600;
}
.qms-pgm-kpi .v { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 2px; font-family: var(--mono); }
.qms-pgm-kpi .v .of { font-size: 14px; color: var(--ink-4); font-weight: 500; }
.qms-pgm-kpi .v.is-warn { color: var(--warn-text); }
.qms-pgm-kpi .d { font-size: 11.5px; color: var(--ink-4); }

/* ---- napomena ---- */
.qms-pgm-note {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 14px; border-radius: 9px;
    background: var(--warn-soft); border: 1px solid var(--warn);
    font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
}
.qms-pgm-note i { color: var(--warn-text); margin-top: 1px; }
.qms-pgm-note.is-info { background: var(--info-soft); border-color: var(--info); }
.qms-pgm-note.is-info i { color: var(--info); }

/* ---- prekidači ---- */
.qms-pgm-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.qms-pgm-barlabel {
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-3); font-weight: 600;
}
.qms-pgm-seg {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px;
}
.qms-pgm-seg a {
    padding: 5px 11px; border-radius: 6px;
    font-size: 12.5px; color: var(--ink-3); text-decoration: none; cursor: pointer;
}
.qms-pgm-seg a:hover { color: var(--ink); background: var(--surface-2); }
.qms-pgm-seg a.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }

/* ---- rešetka ---- */
.qms-pgm-gridwrap { overflow-x: auto; padding: 0; }
.qms-pgm-grid { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 1000px; }

.qms-pgm-grid th {
    padding: 9px 6px; text-align: center;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-3); font-weight: 600;
    border-bottom: 1px solid var(--line-strong);
}
.qms-pgm-grid th.rowhead { text-align: left; padding-left: 15px; width: 190px; }
.qms-pgm-grid th.q, .qms-pgm-grid td.q { border-left: 1px solid var(--line); }

.qms-pgm-grid td {
    border-bottom: 1px solid var(--line-soft);
    border-left: 1px solid var(--line-soft);
    vertical-align: top; padding: 5px 4px; height: 58px;
}
.qms-pgm-grid td.rowhead {
    border-left: none; padding: 10px 12px 10px 15px;
    background: var(--surface-2); vertical-align: middle;
}
.qms-pgm-grid td.rowhead .nm { display: block; font-size: 12.5px; color: var(--ink); font-weight: 500; }
.qms-pgm-grid td.rowhead .sm { display: block; font-size: 11px; color: var(--ink-4); margin-top: 2px; }
.qms-pgm-grid tr:last-child td { border-bottom: none; }
.qms-pgm-grid tr.is-empty td.rowhead .nm { color: var(--ink-3); }

/* ---- pločica audita ---- */
.qms-pgm-chip {
    display: block; border-radius: 6px; padding: 4px 6px; margin-bottom: 3px;
    font-size: 11px; line-height: 1.35;
    border-left: 3px solid; background: var(--surface-3);
    text-decoration: none; color: inherit;
}
.qms-pgm-chip:hover { filter: brightness(1.25); text-decoration: none; }
.qms-pgm-chip .n { font-family: var(--mono); font-size: 10px; opacity: .75; letter-spacing: -.02em; }
.qms-pgm-chip .t {
    display: block; font-weight: 600; color: var(--ink); margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qms-pgm-chip .m {
    display: block; font-size: 9.5px; margin-top: 2px; opacity: .85;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.qms-pgm-chip.c-done { border-left-color: var(--good); background: var(--good-soft); }
.qms-pgm-chip.c-run  { border-left-color: var(--warn); background: var(--warn-soft); }
.qms-pgm-chip.c-plan { border-left-color: var(--accent); background: var(--accent-soft); }
.qms-pgm-chip.c-late { border-left-color: var(--bad);  background: var(--bad-soft); }
.qms-pgm-chip.c-canc { border-left-color: var(--ink-4); background: var(--surface-3); opacity: .55; }

/* Prazna ćelija nudi planiranje tek na prijelaz mišem — inače bi rešetka bila
   išarana plusevima i teže bi se čitala. */
.qms-pgm-add {
    display: flex; align-items: center; justify-content: center;
    height: 100%; min-height: 44px;
    border: 1px dashed var(--line-strong); border-radius: 6px;
    color: var(--ink-4); font-size: 16px; text-decoration: none;
    opacity: 0; transition: opacity .12s;
}
.qms-pgm-grid td:hover .qms-pgm-add { opacity: .45; }
.qms-pgm-add:hover { opacity: 1 !important; color: var(--accent-text); border-color: var(--accent-line); }

/* ---- sklopive prazne jedinice ---- */
.qms-pgm-emptyhead td { background: var(--surface-2); padding: 0; border-left: none; }
.qms-pgm-emptytoggle {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 9px 15px; border: none; background: none;
    color: var(--ink-3); font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.qms-pgm-emptytoggle:hover { color: var(--ink-2); }
.qms-pgm-emptytoggle i { font-size: 10px; transition: transform .12s; }
.qms-pgm-emptytoggle.is-open i { transform: rotate(90deg); }

/* ---- legenda ---- */
.qms-pgm-legend {
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
    padding: 11px 15px; border-top: 1px solid var(--line-soft);
    font-size: 11.5px; color: var(--ink-3);
}
.qms-pgm-legend b { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.qms-pgm-legend b.c-plan { background: var(--accent); }
.qms-pgm-legend b.c-run  { background: var(--warn); }
.qms-pgm-legend b.c-done { background: var(--good); }
.qms-pgm-legend b.c-late { background: var(--bad); }
.qms-pgm-legend b.c-canc { background: var(--ink-5); }

/* ---- odobrenje ---- */
.qms-pgm-approve { display: flex; align-items: center; gap: 12px; padding: 13px 16px; flex-wrap: wrap; }
.qms-pgm-approve-text { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); }
.qms-pgm-approve-text i { font-size: 15px; color: var(--ink-3); }
.qms-pgm-approve-text strong { color: var(--ink-strong); }

/* ---- pregled preuzimanja ---- */
.qms-pgm-copy { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.qms-pgm-copy th {
    text-align: left; padding: 9px 15px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--line-strong);
}
.qms-pgm-copy td { padding: 9px 15px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.qms-pgm-copy tr:last-child td { border-bottom: none; }
.qms-pgm-copy .arrow { color: var(--ink-4); }

@media (max-width: 900px) {
    .qms-pgm-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------
   Ispis programa audita (plan 113)

   Bilo je u <style> bloku pogleda `Audits/ProgramList.cshtml`, gdje ga ograda
   razreda nije vidjela. Pogled ima `Layout = null` pa ovaj list veže sam.
   ------------------------------------------------------------ */

.qms-program-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.qms-program-table th,
.qms-program-table td {
    padding: 7px 9px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: top;
}

.qms-program-table th {
    border-bottom: 1px solid var(--line-strong);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-3);
}

.qms-program-num {
    font-family: var(--mono);
    white-space: nowrap;
}
