/* ══ IT PODRŠKA ═══════════════════════════════════════════════════════════════════════
   Izgled modula IT podrške — prenos STech rasporeda (dokument sa stubom odluka, Trello
   tabla, grupisanje tabele, sat rada) u SirmiumMeat. Okvir ekrana (cart, popup, dugmad,
   polja) je kućni; ovde je SAMO ono čega u kućnom CSS-u nema. Sve klase nose prefiks
   `sup-`, da se ne sudare ni sa jednim postojećim ekranom.
   ══════════════════════════════════════════════════════════════════════════════════ */

/* ── Tabela liste ── vazduh u ćelijama (crni okvir selekcije ne sme da nalegne na tekst),
   isti lek kao .cr-table na POVRATU KUPCA. Tabela se drži širine ekrana i lomi dug tekst. */
.sup-table { table-layout: fixed; width: 100%; }
.sup-table th { padding: 7px 9px !important; }
.sup-table td { padding: 8px 9px !important; vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.sup-table td:first-child, .sup-table th:first-child { padding-left: 11px !important; }
.sup-table td:last-child, .sup-table th:last-child { padding-right: 11px !important; }
.sup-table td [style*="nowrap"] { white-space: nowrap; }

/* Pilula statusa / vrste u tabeli i na kartici. */
.sup-badge { display: inline-block; font-size: 10px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.sup-muted { font-size: 11px; color: #64748b; }
.sup-line { font-size: 11px; line-height: 1.45; margin-top: 3px; }
.sup-clamp2 { font-size: 11.5px; color: #334155; line-height: 1.45; margin-top: 2px;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Grupisanje po koloni ── dugme u zaglavlju kolone uključuje nivo (broj = nivo),
   red grupe se otvara/zatvara klikom. */
.sup-gbtn { margin-left: 4px; cursor: pointer; color: #9aa7b4; white-space: nowrap; }
.sup-gbtn:hover, .sup-gbtn.on { color: #069c9e; }
.sup-glvl { background: #069c9e; color: #fff; border-radius: 50%; font-size: 9px; width: 13px; height: 13px; display: inline-flex;
            align-items: center; justify-content: center; font-weight: 800; vertical-align: top; margin-left: 1px; }
.sup-group td { background: #eef3f8; border-top: 2px solid #cfd9e3; padding: 7px 10px; font-size: 13px; cursor: pointer; }
.sup-group:hover td { background: #e2ecf5; }
.sup-group.lvl1 td { background: #f3f7fb; border-top: 1px solid #dde3ea; }
.sup-group.lvl2 td { background: #f7fafd; border-top: 1px solid #e6ecf2; }
.sup-group.lvl3 td { background: #fbfdff; border-top: 1px solid #eef2f6; }
.sup-arrow { display: inline-block; width: 14px; font-weight: 900; color: #069c9e; }
.sup-gcnt { background: #fff; border: 1px solid #cfd9e3; border-radius: 999px; padding: 0 8px; font-weight: 800; color: #64748b; margin-left: 6px; font-size: 11px; display: inline-block; }
.sup-gsub { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.sup-gsub.open { color: #0a6a6d; background: #e6f6f6; }
.sup-gsub.stop { color: #fff; background: #C0392B; }

/* ── Trello tabla ── kolone su faze života prijave; tabla se skroluje bočno. */
.sup-board-scroll { flex: 1 1 auto; min-height: 0; width: 100%; min-width: 0; max-width: 100%; contain: inline-size; overflow-x: auto; overflow-y: hidden; }
.sup-board { display: flex; gap: 12px; padding: 4px 4px 10px; align-items: stretch; width: max-content; height: 100%; }
.sup-col { flex: 0 0 340px; background: #f6f8fb; border: 1px solid #e3e9f0; border-radius: 14px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.sup-col-head { display: flex; align-items: center; gap: 9px; padding: 13px 14px 10px; font-size: 12px; font-weight: 800;
                text-transform: uppercase; letter-spacing: .5px; color: #2c3a4b; }
.sup-col-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.sup-cnt { margin-left: auto; background: #fff; border: 1px solid #e3e9f0; border-radius: 999px; padding: 2px 9px; font-weight: 800; color: #64748b; }
.sup-fold-btn { flex: 0 0 auto; cursor: pointer; color: #94a3b8; font-size: 13px; font-weight: 900; line-height: 1; padding: 2px 5px; border-radius: 6px; }
.sup-fold-btn:hover { background: #e2e8f0; color: #334155; }
.sup-col.folded { flex: 0 0 40px; width: 40px; cursor: pointer; }
.sup-col.folded:hover { background: #e9eff7; }
.sup-fold-bar { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 14px; height: 100%; min-height: 0; }
.sup-fold-cnt { background: #fff; border: 1px solid #dbe2ec; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 800; color: #64748b; }
.sup-fold-title { writing-mode: vertical-rl; text-orientation: mixed; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
                  color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 0; display: flex; align-items: center; }
.sup-subnote { padding: 0 14px 8px; font-size: 11px; color: #9aa7b6; font-weight: 600; }
.sup-cards { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 11px 14px; display: flex; flex-direction: column; gap: 10px; }
.sup-empty { text-align: center; color: #b6c0cc; padding: 18px 14px; font-size: 12px; }
.sup-card { flex: 0 0 auto; background: #fff; border: 1px solid #e6ebf1; border-radius: 12px; overflow: hidden; cursor: pointer;
            box-shadow: 0 1px 2px rgba(20,34,47,.05); transition: box-shadow .14s, transform .14s; }
.sup-card:hover { box-shadow: 0 6px 18px rgba(20,34,47,.12); transform: translateY(-1px); }
.sup-card.muted { opacity: .72; }
.sup-card.stopped { border-color: #f0c4c0; }
/* Izabrana kartica — pandan crnog okvira (black-row) u tabeli. */
.sup-card.sel { outline: 2.5px solid #1e293b; outline-offset: -2px; }
.sup-card.pinned { border-color: #f6b73c; box-shadow: 0 0 0 1px #f6b73c inset, 0 1px 3px rgba(20,34,47,.06); }
.sup-card-head { display: flex; align-items: center; gap: 6px; padding: 5px 11px; color: #fff; }
/* line-height: Montserrat ima visoke kvačice — bez njega overflow:hidden odseče Č/Š u „ČEKA ODOBRENJE". */
.sup-card-status { font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.6; }
.sup-card-stop { font-size: 11px; line-height: 1; }
.sup-card-age { margin-left: auto; font-size: 9.5px; font-weight: 700; opacity: .92; white-space: nowrap; }
.sup-card-body { padding: 11px 13px 12px; }
.sup-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sup-code { font-size: 10.5px; font-weight: 700; color: #7c8a99; font-family: Consolas, ui-monospace, monospace; letter-spacing: .2px; }
.sup-pill { margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; border-radius: 999px; padding: 2px 9px; white-space: nowrap; color: #fff; }
.sup-card-title { font-size: 14.5px; font-weight: 800; line-height: 1.3; color: #132132; }
.sup-card-desc { font-size: 12.5px; color: #64748b; margin-top: 4px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sup-reporter { font-size: 11.5px; color: #475569; margin-top: 7px; }
.sup-card-foot { display: flex; align-items: center; gap: 7px; margin-top: 11px; padding-top: 9px; border-top: 1px solid #eef2f6; }
.sup-card-btn { font-size: 11.5px; font-weight: 700; border-radius: 9px; padding: 7px 13px; cursor: pointer; background: #069c9e; color: #fff; }
.sup-card-btn:hover { background: #4f8685; color: #fff; }
.sup-pin { margin-left: auto; cursor: pointer; opacity: .25; filter: grayscale(1); padding: 3px; border-radius: 7px; }
.sup-pin img { width: 18px; height: 18px; display: block; }
.sup-pin:hover { opacity: .75; filter: grayscale(0); }
.sup-pin.on { opacity: 1; filter: none; background: #fff3cd; border: 1px solid #ffe08a; }

/* Obojeni pojasevi na kartici (odbijeno, dopunjeno, čeka dizanje). */
.sup-band { border-left: 3px solid; padding: 6px 8px; border-radius: 6px; margin-top: 8px; font-size: 11px; line-height: 1.45; }
.sup-band.red { background: #fee2e2; border-color: #dc2626; color: #991b1b; }
.sup-band.orange { background: #ffedd5; border-color: #ea580c; color: #9a3412; }
.sup-band.teal { background: #ccfbf1; border-color: #0d9488; color: #115e59; }

/* „Neko upravo radi" — zelena tačka koja pulsira; kod prekida narandžasta i mirna. */
.sup-work-line { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 8px; border-radius: 7px;
                 background: #f0fdf4; border: 1px solid #bbf7d0; font-size: 11px; line-height: 1.4; color: #166534; }
.sup-work-line.wait { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.sup-work-dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; flex: 0 0 auto; animation: supWorkPulse 1.6s ease-in-out infinite; }
.sup-work-line.wait .sup-work-dot { background: #ea580c; animation: none; }
@keyframes supWorkPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sup-work-dot { animation: none; } }

/* ── Dokument prijave (detalj) ── zaglavlje sa pločicama, pa dve kolone sa JEDNIM skrolom:
   predmet levo (šta je prijavljeno, razgovor), upravljanje desno (kapija, razvoj, potvrda). */
.sup-doc-head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 6px 12px; }
.sup-doc-head-l { flex: 1 1 auto; min-width: 0; }
.sup-doc-head-a { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; margin-right: 60px; }
.sup-doc-title { font-size: 21px; font-weight: 800; line-height: 1.2; color: #0f172a; }
.sup-doc-title .code { color: #64748b; }
.sup-doc-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.sup-doc-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.sup-doc-pill { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 3px 11px; border-radius: 999px; color: #fff; white-space: nowrap; }
.sup-doc-pill.soft { background: #fff; border: 1px solid #e2e8f0; color: #5b6b7b; }
.sup-doc-pill.warn { background: #fdf3d8; color: #8a5a00; }

.sup-doc { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: #f3f6fa; border-radius: 12px; padding: 12px 10px 4px; }
.sup-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; }
.sup-cols { display: grid; grid-template-columns: minmax(0,1fr) 404px; gap: 14px; align-items: start; }
.sup-main { min-width: 0; }
.sup-rail { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 1240px) { .sup-cols { grid-template-columns: minmax(0,1fr); } }

.sup-sec { background: #fff; border: 1px solid #e7ecf3; border-radius: 14px; padding: 15px 17px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.sup-rail .sup-sec { margin-bottom: 0; }
.sup-sec-t { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; color: #16222f; margin: 0 0 10px; letter-spacing: .3px; }
.sup-sec-t.cursor-pointer:hover { color: #069c9e; }
.sup-sec-c { font-size: 11px; font-weight: 800; background: #f1f5f9; color: #64748b; border-radius: 999px; padding: 2px 9px; }
.sup-fold { font-size: 12px; color: #8a93a3; margin-right: 2px; }
.sup-hint { font-size: 12px; line-height: 1.45; color: #64748b; margin: 6px 0 0; }
.sup-af-l { display: block; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #94a3b8; margin: 10px 0 4px; }

.sup-desc { background: #fffbeb; border: 1px solid #fde9b5; border-left: 4px solid #f0b429; border-radius: 10px; padding: 10px 14px; margin-bottom: 11px; }
.sup-desc-x { font-size: 15px; font-weight: 700; color: #1e293b; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

.sup-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 14px; }
.sup-facts > div { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 9px; }
.sup-facts > div.hot { background: #fef2f2; border-color: #fbdada; }
.sup-facts > div.hot strong { color: #c0392b; }
.sup-facts span { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #94a3b8; }
.sup-facts strong { font-size: 13px; color: #16222f; }
.sup-facts em { font-size: 11px; color: #94a3b8; font-style: normal; }

/* Greška uhvaćena neposredno pre prijave — monospace i skrol umesto razvučene kolone. */
.sup-err { margin-top: 10px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px; padding: 8px 11px; color: #991b1b;
           font-family: monospace; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow-y: auto; }

.sup-atts { display: flex; flex-wrap: wrap; gap: 10px; }
.sup-att { border: 1px solid #e7ecf3; border-radius: 11px; overflow: hidden; width: 210px; background: #fff; }
.sup-att-x { height: 130px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; }
.sup-att-x img { max-width: 100%; max-height: 130px; display: block; }
.sup-att-x span { font-size: 12px; color: #64748b; }
.sup-att-b { padding: 7px 10px; }
.sup-att-n { font-size: 11px; font-weight: 600; color: #334155; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-att-pill { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: #fff; border: 1px solid #cbd5e1;
                border-radius: 8px; padding: 5px 9px; max-width: 100%; }
.sup-att-pill span { font-size: 12px; line-height: 1.5; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-att-pill small { font-size: 10.5px; line-height: 1.5; color: #94a3b8; white-space: nowrap; }

/* Razgovor — mehurići: razvoj levo i sivo, korisnička strana desno i plavo. */
.sup-msg { margin-bottom: 10px; }
.sup-msg.mine { text-align: right; }
.sup-msg-b { display: inline-block; max-width: 80%; text-align: left; border-radius: 11px; padding: 9px 12px; background: #dbeafe; }
.sup-msg.dev .sup-msg-b { background: #f1f5f9; }
.sup-msg-w { font-size: 11px; font-weight: 700; line-height: 1.4; color: #1e40af; }
.sup-msg.dev .sup-msg-w { color: #475569; }
.sup-msg-x { font-size: 13px; line-height: 1.45; color: #1e293b; margin-top: 3px; white-space: pre-wrap; }
.sup-msg-d { font-size: 10.5px; line-height: 1.4; color: #64748b; margin-top: 5px; }
.sup-say { background: #f8fafc; border: 1px solid #e7ecf3; border-radius: 11px; padding: 10px 12px; margin-top: 10px; }
/* font-family: inherit — aplikacija nema reset za textarea (pregledač bi dao monospace); STech ga nasleđuje. */
.sup-say textarea { width: 100%; min-height: 56px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 8px; font-size: 14px; resize: vertical; background: #fff; font-family: inherit; }

/* Stub: dugmad radnji preko cele širine, sitnija od kućnih 42px/20px. */
.sup-rail .button--primary, .sup-rail .button--secondary, .sup-rail .button--third {
    width: 100%; max-width: none; height: 38px; font-size: 15px; margin-bottom: 7px; }
.sup-rail .button img { height: 20px; margin-right: 8px; }
.sup-rail textarea, .sup-rail input[type=text] { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 8px; font-size: 14px; background: #fff; font-family: inherit; }
.sup-rail-sep { border-top: 1px solid #e7ecf3; padding-top: 11px; margin-top: 4px; }

/* Faza, prioritet i tip prekida — pilule, ne padajuća lista: sve se vidi odjednom. */
.sup-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sup-chip { border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 700; line-height: 1.2; border: 1.5px solid #e2e8f0; background: #fff; cursor: pointer; }
.sup-chip:disabled { opacity: .55; cursor: default; }

.sup-deploy { background: #ccfbf1; border: 1px solid #99f6e4; border-radius: 10px; padding: 8px 11px; margin-bottom: 11px; font-size: 12px; line-height: 1.45; color: #115e59; }
.sup-phase { border-left: 4px solid #cbd5e1; background: #f8fafc; border-radius: 0 10px 10px 0; padding: 9px 12px; margin-bottom: 12px; }
.sup-phase strong { display: block; font-size: 13.5px; line-height: 1.35; }
.sup-phase div { font-size: 12px; line-height: 1.45; color: #475569; margin-top: 3px; }
.sup-phase em { display: block; font-size: 11.5px; line-height: 1.4; color: #94a3b8; font-style: normal; margin-top: 5px; }

/* Put prijave — ceo niz faza, SAMO prikaz: prošlo prigušeno, tekuće u boji, buduće bledo. */
.sup-flow { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.sup-flow-i { font-size: 11px; font-weight: 700; line-height: 1.3; padding: 4px 9px; border-radius: 999px; border: 1.5px solid #e7ecf3; background: #fff; white-space: nowrap; }
.sup-flow-i.past { color: #94a3b8; background: #f8fafc; }
.sup-flow-i.now { border-width: 2px; }
.sup-flow-i.next { color: #cbd5e1; }

/* Sat rada — zeleno dok kuca, sivo kad stoji. */
.sup-work { border: 1px solid #e7ecf3; background: #f8fafc; border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; }
.sup-work.on { border-color: #bbf7d0; background: #f0fdf4; }
.sup-work-t { display: flex; align-items: baseline; gap: 8px; }
.sup-work-t span { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #94a3b8; }
.sup-work.on .sup-work-t span { color: #15803d; }
.sup-work-t strong { font-size: 16px; font-weight: 800; color: #16222f; margin-left: auto; font-variant-numeric: tabular-nums; }
.sup-work-w { font-size: 11.5px; line-height: 1.5; color: #64748b; margin-top: 4px; }
.sup-mini { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 8px; padding: 5px 11px; cursor: pointer; background: #fff; border: 1.5px solid #d7dde3; color: #5b6b7b; }
.sup-mini:hover { border-color: #069c9e; color: #069c9e; }

.sup-log { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; border: 1px solid #e7ecf3; border-radius: 10px; padding: 8px 10px; background: #f8fafc; margin: 8px 0 12px; }
.sup-log > div { font-size: 11.5px; line-height: 1.45; }
.sup-log > div > span { font-weight: 800; }
.sup-log > div > strong { float: right; font-variant-numeric: tabular-nums; color: #16222f; }
.sup-log em { display: block; color: #94a3b8; font-style: normal; }
.sup-log > div > div { color: #475569; margin-top: 1px; }

/* Prekid rada — obrazac u žutom okviru, ne još jedno dugme u nizu. */
.sup-pause { background: #fffbeb; border: 1px solid #fde68a; border-radius: 11px; padding: 12px 13px; margin-bottom: 12px; }
.sup-pause-h { font-size: 13px; font-weight: 800; color: #92400e; }
.sup-pause-n { font-size: 11.5px; line-height: 1.45; color: #a16207; margin: 3px 0 10px; }
.sup-pause .sup-chips { margin-bottom: 11px; }
.sup-pause-a { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.sup-pause-a .sup-mini { margin-right: auto; }
.sup-pause-a .button--primary { width: auto; max-width: none; margin-bottom: 0; }

/* Hodogram — sistemski zapisi, hronološki; skroluje se u sebi. */
.sup-hist { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.sup-hist > div { border-left: 2px solid #e7ecf3; padding-left: 9px; }
.sup-hist em { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #94a3b8; font-style: normal; }
.sup-hist > div > div { font-size: 12px; line-height: 1.5; color: #475569; margin-top: 2px; white-space: pre-wrap; }

/* ── Nova prijava ── sekcije kao bele kartice na sivoj podlozi. */
.sup-form-sec { background: #fff; border: 1px solid #e6eaf0; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.sup-form-h { font-size: 12px; font-weight: 800; color: #475569; letter-spacing: .3px; margin-bottom: 10px; }
.sup-shot-frame { border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; max-height: 460px; overflow: auto; padding: 12px; }
.sup-shot-frame canvas { width: 100%; display: block; background: #fff; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.sup-context { background: #f8fafc; border-radius: 10px; padding: 10px 14px; font-size: 12px; color: #64748b; margin-bottom: 12px; }
.sup-tips { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 11px 14px; }
.sup-tips b { display: block; font-size: 12px; color: #92400e; margin-bottom: 4px; }
.sup-tips div { font-size: 11px; color: #a16207; line-height: 1.6; }

/* Uvećan prilog (slika / PDF) — iznad prozora prijave, ispod prozora za obrazloženje. */
.sup-viewer { position: fixed; inset: 0; background: rgba(15,23,42,.85); z-index: 9050; display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.sup-viewer-b { max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column; gap: 10px; }
.sup-viewer-h { display: flex; align-items: center; gap: 10px; color: #fff; cursor: default; }
/* Samo prikazana slika (direktno dete) — šire „.sup-viewer img" bi zabelelo i X u dugmetu za zatvaranje. */
.sup-viewer-b > img { max-width: 96vw; max-height: 82vh; object-fit: contain; background: #fff; border-radius: 8px; cursor: default; }
.sup-viewer iframe { width: 92vw; height: 82vh; border: 0; background: #fff; border-radius: 8px; }

/* ── IKONICE NASLOVA SEKCIJA (kao STech `.wo-sec-i`) — linijska SVG u pločici. Boja nosi značenje:
      tirkizna (kućna, u STech-u plava) = čita se i radi, žuta = čeka se tuđa ruka ili odluka,
      zelena = potvrda, siva = istorija. ── */
.sup-sec-i { width: 27px; height: 27px; border-radius: 9px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.sup-sec-i.teal  { background: #e3f4f4; color: #0a6a6d; }
.sup-sec-i.amber { background: #fdf3d8; color: #8a5a00; }
.sup-sec-i.green { background: #e6f6ec; color: #15803d; }
.sup-sec-i.slate { background: #eef2f7; color: #5b6b7b; }
.sup-fold { font-size: 12px; color: #8a93a3; margin-right: 2px; }

/* ── DUGME U REDU TABELE — „··· OPCIJE" kao STech `row-options-btn`: obris, tri tačke, kućna slova. ── */
.sup-row-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #cbd5e1; border-radius: 999px;
               background: #fff; color: #334155; font-size: 11.5px; font-weight: 800; letter-spacing: .3px; cursor: pointer; white-space: nowrap; }
.sup-row-btn:hover { border-color: #069c9e; color: #069c9e; }
.sup-row-btn.decide { border-color: #069c9e; color: #fff; background: #069c9e; }

/* ── NOVA PRIJAVA — centriran prozor kao u STech-u (kućni okvir audit-calendar-picker): fiksno zaglavlje
      i podnožje, sivo telo koje se skroluje. ── */
.sup-new { top: 5vh !important; width: 900px; max-width: 95%; height: 90vh; display: flex; flex-direction: column;
           background-color: #fff !important; border-radius: 14px !important; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.sup-new-head { flex: 0 0 auto; padding: 16px 24px 12px; }
.sup-new-title { font-size: 19px; font-weight: 800; color: #0a6a6d; }
.sup-new-sub { font-size: 12.5px; color: #64748b; margin-top: 3px; }
.sup-new-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; background: #eef2f7; }
.sup-new-foot { flex: 0 0 auto; padding: 12px 24px; border-top: 1px solid #e2e8f0; border-radius: 0 0 14px 14px; }
/* Vrsta prijave — kartice 2×2: ikonica + naziv, objašnjenje sitnije ispod; izabrana u boji vrste. */
.sup-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sup-type { border: 1.5px solid #e2e8f0; border-radius: 10px; background: #fff; color: #1e293b; padding: 13px 12px; font-family: inherit;
            font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.sup-type:hover { border-color: #069c9e; }
.sup-type small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; color: #94a3b8; }
.sup-type.on small { color: rgba(255,255,255,.85); }
/* Izbor iz kataloga (ponavljanje, uticaj) — pilule jednake širine, izabrana u boji vrednosti. */
.sup-choices { display: flex; gap: 8px; }
.sup-choice { flex: 1; border: 1.5px solid #e2e8f0; border-radius: 18px; background: #fff; color: #1e293b; padding: 9px; font-family: inherit;
              font-size: 13px; font-weight: 700; cursor: pointer; }
.sup-choice:hover { border-color: #069c9e; }
/* Prekidač POMERANJE / CRTANJE nad snimkom. */
.sup-toggle { border: 1.5px solid #e2e8f0; border-radius: 16px; background: #fff; color: #1e293b; padding: 7px 16px; font-family: inherit;
              font-size: 12.5px; font-weight: 700; cursor: pointer; }