/* ══ DOKUMENT PREDMETA ══════════════════════════════════════════════════════════════
   Zajednički izgled „jedan predmet = jedan dokument": sadržaj sa strane koji prati
   skrolovanje, sekcije, traka akcija sa obrascem ispod nje, sitna dugmad u sekcijama.
   Koriste ga radni nalog (WorkOrder-Workspace) i prijava kvara (Request-Triage-Panel).
   Ranije je stajao u <style> bloku naloga — prijava bi tada morala da ga prepisuje.
   ══════════════════════════════════════════════════════════════════════════════════ */
/* Radni prostor naloga — sekcije unutar popup--big obrasca (isti kao AddEdit forme). */
    .wo-drawer-head { flex:0 0 auto; padding:8px 14px; background:#fff; border-bottom:1px solid #e2e8f0; border-radius:10px 10px 0 0; }
    .wo-drawer-actions { flex:0 0 auto; padding:10px 14px; background:#fff; border-bottom:1px solid #e2e8f0; display:flex; flex-wrap:wrap; gap:8px; }
    .wo-drawer-body { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
    .wo-act { border:none; border-radius:10px; padding:8px 13px; font-weight:700; font-size:13px; color:#fff; cursor:pointer; line-height:1.1; }
    .wo-act:hover { filter:brightness(1.06); }
    /* Preduslovi završetka — traka između akcija i sadržaja; uvek vidljiva dok nalog nije zatvoren. */
    .wo-precond { flex:0 0 auto; background:#fffbeb; border-bottom:1px solid #fde68a; padding:8px 14px; }
    .wo-precond.ok { background:#f0fdf4; border-bottom-color:#bbf7d0; }
    .wo-precond-head { display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:12.5px; color:#334155; }
    .wo-precond-badge { font-size:10.5px; font-weight:800; border-radius:999px; padding:2px 9px; background:#fbefd9; color:#854f0b; }
    .wo-precond-badge.ok { background:#dcfce7; color:#166534; }
    .wo-precond-badge.info { background:#f3e8ff; color:#6b21a8; }
    .wo-precond-toggle { margin-left:auto; font-size:11.5px; font-weight:700; color:#185FA5; cursor:pointer; }
    .wo-precond-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
    .wo-precond-item { display:flex; align-items:flex-start; gap:7px; font-size:12px; border-radius:9px; padding:5px 10px; flex:1 1 260px; }
    .wo-precond-item .ico { font-weight:900; }
    .wo-precond-item small { display:block; font-weight:400; opacity:.85; }
    .wo-precond-item.met { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
    .wo-precond-item.missing { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
    .wo-precond-item.soft { background:#f8fafc; border:1px solid #e2e8f0; color:#475569; }
    .assist-type { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:#5b6b7b; background:#fff;
                   border:1.5px solid #d7dde3; border-radius:10px; padding:8px 12px; cursor:pointer; }
    .assist-type.on { border-color:#185FA5; background:#e7eff8; color:#185FA5; }

    /* ── DETALJ NALOGA KAO DOKUMENT ──────────────────────────────────────────────────
       Sve na jednom mestu i u jednom skrolu: levo „sadržaj" koji prati skrolovanje,
       desno sekcije. Cilj je da se ništa ne traži po tabovima i prozorima. */
    .wo-title-ico { width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#14b8a6,#0d9488);
                    display:flex; align-items:center; justify-content:center; font-size:17px; flex:0 0 auto; }
    .wo-title { font-size:17px; font-weight:800; color:#16222f; line-height:1.25; }
    .wo-subtitle { font-size:11.5px; color:#8a93a3; }

    .wo-doc { flex:1 1 auto; min-height:0; display:flex; gap:12px; padding:10px 4px 4px; }
    .wo-toc { flex:0 0 186px; align-self:flex-start; position:sticky; top:0; padding:4px 0; }
    .wo-toc-t { font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:#94a3b8; padding:0 10px 6px; }
    .wo-toc-link { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:9px; cursor:pointer;
                   font-size:12.5px; font-weight:600; color:#5b6b7b; border-left:3px solid transparent; }
    .wo-toc-link:hover { background:#f1f5f9; color:#185FA5; }
    .wo-toc-link.on { background:#e7eff8; color:#185FA5; font-weight:800; border-left-color:#185FA5; }
    .wo-toc-link .ic { width:16px; text-align:center; }
    .wo-toc-link .tx { flex:1 1 auto; }
    .wo-toc-link .bg { font-size:10px; font-weight:800; background:#fff; border:1px solid #d7dde3; border-radius:999px; padding:0 6px; color:#64748b; }
    .wo-toc-link.on .bg { border-color:#185FA5; color:#185FA5; }

    .wo-scroll { flex:1 1 auto; min-width:0; overflow-y:auto; padding-right:8px; scroll-behavior:smooth; }
    .wo-sec { background:#fff; border:1px solid #e6eaf0; border-radius:12px; padding:13px 15px; margin-bottom:11px; }
    .wo-sec-t { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:800; color:#16222f; margin:0 0 10px; }
    .wo-sec-c { font-size:11px; font-weight:800; background:#f1f5f9; color:#64748b; border-radius:999px; padding:2px 9px; }
    .wo-sec-c.warn { background:#fbefd9; color:#854f0b; }
    .wo-empty { font-size:12.5px; color:#8a93a3; margin:0; }

    .wo-desc { background:#fef9c3; border:1px solid #fde68a; border-left:4px solid #f59e0b; border-radius:10px; padding:10px 14px; margin-bottom:11px; }
    .wo-desc-l { font-size:11px; font-weight:800; letter-spacing:.6px; color:#92400e; margin-bottom:5px; }
    .wo-desc-x { font-size:16px; font-weight:700; color:#1e293b; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
    .wo-solution { background:#f0fdf4; border:1px solid #bbf7d0; border-left:4px solid #16a34a; border-radius:10px; padding:10px 14px; margin-top:11px; }

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

    .wo-people { display:flex; flex-direction:column; gap:7px; }
    .wo-person { display:flex; align-items:center; gap:10px; padding:8px 11px; background:#f8fafc; border:1px solid #eef2f6; border-radius:10px; }
    .wo-person .av { width:32px; height:32px; border-radius:50%; background:#185FA5; color:#fff; font-size:12px; font-weight:800;
                     display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
    .wo-person .sub { font-size:11px; color:#8a93a3; }
    .wo-tag { font-size:9.5px; font-weight:800; border-radius:999px; padding:1px 7px; margin-left:5px; }
    .wo-tag.blue { background:#e7eff8; color:#185FA5; }
    .wo-tag.green { background:#dcfce7; color:#166534; }
    .wo-add { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-top:11px; padding-top:11px; border-top:1px dashed #e2e8f0; }
    .wo-mini { font-size:11px; font-weight:800; border-radius:8px; padding:5px 11px; cursor:pointer; background:#fff; border:1.5px solid #d7dde3; color:#5b6b7b; }
    .wo-mini:hover { border-color:#185FA5; color:#185FA5; }
    .wo-mini.red { border-color:#fecaca; color:#991b1b; }
    .wo-mini.green { background:#16a34a; border-color:#16a34a; color:#fff; }
    .wo-mini.blue { background:#185FA5; border-color:#185FA5; color:#fff; }

    .wo-chat { display:flex; flex-direction:column; gap:8px; max-height:320px; overflow-y:auto; padding-right:4px; }
    .wo-msg { background:#eef4fb; border-radius:12px; padding:8px 12px; }
    .wo-msg .who { font-size:11px; font-weight:800; color:#185FA5; display:flex; gap:8px; }
    .wo-msg .who span { font-weight:400; color:#94a3b8; }
    .wo-msg .tx { font-size:13px; color:#1e293b; white-space:pre-wrap; margin-top:2px; }
    .wo-chat-in { display:flex; gap:9px; align-items:flex-end; margin-top:10px; }
    .wo-times { background:#f8fafc; border:1px solid #eef2f6; border-radius:10px; padding:10px 12px; margin-bottom:11px; }

    /* Forma akcije ispod trake dugmadi + obrasci unutar sekcija — nijedan bočni prozor. */
    .wo-actionform { flex:0 0 auto; background:#f8fafc; border-bottom:1px solid #e2e8f0; padding:11px 14px; }
    .wo-af-head { display:flex; align-items:center; gap:10px; font-size:13.5px; color:#16222f; margin-bottom:8px; }
    .wo-af-x { margin-left:auto; font-size:11.5px; font-weight:700; color:#94a3b8; cursor:pointer; }
    .wo-af-x:hover { color:#C0392B; }
    .wo-af-hint { font-size:12px; color:#64748b; margin:0 0 9px; }
    .wo-af-row { display:inline-flex; flex-direction:column; gap:3px; margin:0 12px 9px 0; min-width:280px; }
    .wo-af-row.full { display:flex; width:100%; }
    .wo-af-row label, .wo-af-l { font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#94a3b8; }
    .wo-af-l { display:block; margin-bottom:4px; }
    .wo-af-go { display:block; padding:9px 22px; text-align:center; max-width:320px; }
    .wo-inline-form { background:#f8fafc; border:1px dashed #cbd5e1; border-radius:11px; padding:12px 14px; margin-bottom:11px; }

    /* ── Checklista (PM) ── stavka je red-kartica; odgovor je jedan segmentni prekidač, ne dva šarena dugmeta. */
    .pm-bar { height:6px; border-radius:999px; background:#e9eef4; overflow:hidden; margin:0 0 11px; }
    .pm-bar span { display:block; height:100%; background:linear-gradient(90deg,#16a34a,#22c55e); border-radius:999px; transition:width .25s; }
    .pm-item { display:flex; gap:11px; align-items:flex-start; background:#fff; border:1px solid #e6eaf0; border-left:4px solid #cbd5e1;
               border-radius:12px; padding:10px 12px; margin-bottom:7px; }
    .pm-item.ok { border-left-color:#16a34a; }
    .pm-item.bad { border-left-color:#C0392B; background:#fffafa; }
    .pm-item.todo { border-left-color:#EF9F27; }
    .pm-num { flex:0 0 24px; height:24px; border-radius:50%; background:#f1f5f9; color:#64748b;
              font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
    .pm-body { flex:1 1 auto; min-width:0; }
    .pm-name { font-size:13px; font-weight:700; color:#16222f; }
    .pm-req { font-size:9.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#92400e;
              background:#fef3c7; border-radius:999px; padding:2px 7px; margin-left:7px; vertical-align:1px; }
    .pm-desc { font-size:11.5px; color:#8a93a3; margin-top:2px; }
    .pm-note { font-size:12px; color:#475569; background:#f8fafc; border-radius:8px; padding:5px 9px; margin-top:6px; }
    .pm-note-edit { display:flex; gap:7px; align-items:center; margin-top:7px; }
    .pm-actions { flex:0 0 auto; display:flex; gap:6px; align-items:center; }
    .pm-seg { display:inline-flex; border:1.5px solid #dbe2ea; border-radius:10px; overflow:hidden; background:#fff; }
    .pm-seg a { font-size:11.5px; font-weight:700; color:#8a93a3; padding:6px 13px; cursor:pointer; white-space:nowrap; }
    .pm-seg a + a { border-left:1.5px solid #dbe2ea; }
    .pm-seg a:hover { background:#f4f7fa; color:#475569; }
    .pm-seg a.on.ok { background:#16a34a; color:#fff; }
    .pm-seg a.on.bad { background:#C0392B; color:#fff; }
    .pm-icon { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:9px;
               border:1.5px solid #dbe2ea; background:#fff; font-size:13px; cursor:pointer; }
    .pm-icon:hover { background:#f4f7fa; }
    .pm-icon.on { border-color:#185FA5; background:#e7eff8; }
    .pm-answer { font-size:11.5px; font-weight:800; white-space:nowrap; }

    /* ── Delovi ── jedna tabela: šta je traženo i dokle je stiglo. */
    .part-state { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.3px;
                  text-transform:uppercase; border-radius:999px; padding:3px 10px; white-space:nowrap; }
    .part-state.wait { background:#fef3c7; color:#92400e; }
    .part-state.order { background:#e0e7ff; color:#3730a3; }
    .part-state.ready { background:#dbeafe; color:#1e40af; }
    .part-state.done { background:#dcfce7; color:#166534; }
    .part-hint { font-size:11.5px; color:#8a93a3; margin-top:2px; }
    /* Rešen zahtev ostaje u tabeli, ali prigušen — otvoreni traže pažnju, rešeni su samo evidencija. */
    .wo-row-done td { opacity:.62; }

    @media (max-width: 1100px) { .wo-toc { display:none; } }

    /* ── DOKUMENT SA STUBOM ODLUKA DESNO (prijava kvara) ──────────────────────────────
       Predmet (pregled, slike, razgovor, prosleđivanje) se čita u glavnoj koloni, a odluke
       (odbij, spoljni servis, duplikat, hodogram) stoje desno i vide se odmah — ne traže se
       skrolovanjem do dna. Skrol je JEDAN, zajednički za obe kolone.
       Podloga je siva, kartice bele: tako se sekcije vide kao zasebne celine bez debelih
       okvira i bojenih traka sa strane. */
    .wo-doc--split { flex-direction:column; gap:0; background:#f3f6fa; padding:14px 12px 4px; }
    /* U koloni flex-stavka po podrazumevanom `min-height:auto` ne ume da se skupi — bez ovoga
       bi sadržaj probio dno prozora umesto da se skroluje. */
    .wo-doc--split .wo-scroll { min-height:0; padding-right:6px; }
    .wo-doc--split .wo-sec { border-color:#e7ecf3; border-radius:14px; padding:15px 17px; margin-bottom:12px;
                            box-shadow:0 1px 2px rgba(16,24,40,.05); }
    /* Opis kvara — blaži papir nego u nalogu; ovde je jedini istaknuti blok pa ne sme da viče. */
    .wo-doc--split .wo-desc { background:#fffbeb; border-color:#fde9b5; border-left-color:#f0b429; }
    .wo-doc--split .wo-desc-x { font-size:15px; }
    .wo-doc--split .wo-facts > div { border:1px solid #eef2f7; }
    .wo-doc--split .wo-facts > div.hot { background:#fef2f2; border-color:#fbdada; }
    .wo-doc--split .wo-facts > div.hot strong { color:#c0392b; }

    /* ── Zaglavlje dokumenta ── naziv i stanje levo, radnja desno. Deljeno: prijava i nalog. */
    .doc-head-band { padding:13px 16px 14px; }
    .doc-head { display:flex; align-items:flex-start; gap:12px; }
    .doc-head-l { flex:1 1 auto; min-width:0; }
    .doc-head-a { flex:0 0 auto; display:flex; flex-wrap:wrap; gap:8px;
                  margin-right:54px;   /* mesto za crveni „zatvori" u ćošku popupa */ }
    .doc-head-a .wo-act { border-radius:999px; padding:9px 18px; font-size:13px;
                          box-shadow:0 2px 6px rgba(16,24,40,.14); }
    .doc-title { font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.2; color:#0f172a; }
    .doc-title .code { color:#64748b; }
    .doc-sub { font-size:12px; color:#94a3b8; margin-top:2px; }
    /* Pločice stanja — jedan oblik za sve, bez ikonica: boja i reč su dovoljne. */
    .doc-pills { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:9px; }
    .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; }
    .doc-pill.soft { background:#fff; border:1px solid #e2e8f0; color:#5b6b7b; }
    .doc-pill.warn { background:#fdf3d8; color:#8a5a00; }

    /* Traka prelaza stanja naloga (spremno / start / pauza / završi…) — nalog je mašina stanja,
       pa dugmad imaju svoj pojas; prijava ima jednu radnju i drži je uz naslov. */
    .wo-drawer-actions .wo-act { border-radius:999px; padding:9px 17px; font-size:12.5px;
                                 box-shadow:0 2px 6px rgba(16,24,40,.13); }

    /* ── Dve kolone ── */
    .wo-cols { display:grid; grid-template-columns:minmax(0,1fr) 404px; gap:14px; align-items:start; }
    .wo-main { min-width:0; }
    .wo-rail { min-width:0; display:flex; flex-direction:column; gap:12px; }
    .wo-doc--split .wo-rail .wo-sec { margin-bottom:0; }
    /* Stub je uži od predmeta — polja i dugmad u njemu idu preko cele širine (inline max-width
       iz sekcija je pisan za široku kolonu, pa se ovde gasi). */
    .wo-rail .input { max-width:none !important; width:100%; }
    .wo-rail .button { display:flex !important; width:100% !important; max-width:none !important;
                       justify-content:center; padding:11px 16px !important; }
    .wo-rail .task-field-hint { font-size:12px; line-height:1.45; }
    /* Redovi „oznaka levo (150px, desno poravnata) · polje desno" su pisani za široku kolonu;
       u stubu bi polju ostalo dvestotinak piksela. Ovde oznaka ide IZNAD polja, a uvučeni
       objašnjavajući tekst ispod nje se poravna uz levu ivicu. */
    .wo-rail .input-box { flex-direction:column; align-items:stretch !important; }
    .wo-rail .input-box > p { min-width:0 !important; width:100%; text-align:left !important;
                              margin:0 0 4px !important; font-size:12px; font-weight:600; }
    .wo-rail .task-field-hint[style*="margin-left"] { margin-left:0 !important; }

    /* Revers alata: dve kolone su pisane za širok ekran; u stubu bi svako polje dobilo ~180px.
       Ovde ide jedno polje po redu — svako preko cele širine stuba. */
    .wo-rail .rv-grid { grid-template-columns:1fr; gap:11px; }

    /* Izbor datuma je IZUZETAK od pravila iznad: dan · mesec · godina · dugme kalendara moraju
       da ostanu U JEDNOM REDU. Uspravno slaganje ih razbije na tri reda i polje postane nečitljivo. */
    .wo-rail .input-box.date-select-box { flex-direction:row; align-items:center !important;
                                          gap:6px; flex-wrap:nowrap; }
    /* Polja dele raspoloživu širinu (flex-basis 0), umesto da svako uzme 100% od pravila
       `.wo-rail .input` iznad — zbog toga su ranije izlazila iz kartice i pravila skrol. */
    .wo-rail .input-box.date-select-box .form-input { flex:1 1 auto; min-width:0;
                                                      margin-right:0 !important; gap:2px; }
    .wo-rail .input-box.date-select-box .input { flex:1 1 0; width:auto !important;
                                                 min-width:0 !important; text-align:center; }
    .wo-rail .input-box.date-select-box .form-input > p { margin:0 !important; flex:0 0 auto; }
    .wo-rail .input-box.date-select-box > a.button { width:34px !important; min-width:34px; flex:0 0 auto;
                                                     padding:0 !important; margin:0 !important;
                                                     display:flex !important; align-items:center; justify-content:center; }
    .wo-rail .input-box.date-select-box > a.button img { width:18px; height:18px; }
    /* Naslov sekcije u stubu sme u dva reda — inače ga dugme uz desnu ivicu (npr. „Štampaj ceo
       nalog") istisne iz kartice. */
    .wo-rail .wo-sec-t { flex-wrap:wrap; }

    /* ── Radnje naloga u stubu ── prelazi stanja jedan ispod drugog, preko cele širine kartice:
       u koloni je „šta mogu da uradim" spisak, a ne traka po kojoj se traži pravo dugme. */
    .wo-acts { display:flex; flex-direction:column; gap:8px; }
    .wo-acts .wo-act { width:100%; display:flex; align-items:center; justify-content:center; gap:7px;
                       border-radius:10px; padding:11px 14px; font-size:13px;
                       box-shadow:0 2px 6px rgba(16,24,40,.13); }
    .wo-acts > span { text-align:center; }
    /* Obrazac izabrane radnje stoji u istoj kartici, odmah ispod dugmadi. */
    .wo-rail .wo-actionform { background:#f8fafc; border:1px solid #e2e8f0; border-radius:11px;
                              padding:11px 12px; margin-top:11px; }
    .wo-rail .wo-af-row { display:flex; width:100%; min-width:0; margin:0 0 9px; }
    /* Evidencija vremena: tri kolone (naziv 150px · traka · izvršilac 130px) ne staju u stub,
       pa red postaje dva — naziv i vreme gore, traka i izvršilac ispod. */
    .wo-rail .wo-times .o-flex { flex-wrap:wrap; }
    .wo-rail .wo-times .o-flex > div:first-child { width:100% !important; }
    .wo-rail .wo-times .o-flex > div:nth-child(3) { width:auto !important; flex:1 1 auto; }

    /* Na užem prozoru stub pada ispod predmeta — isti redosled kao „Opcije" na mobilnoj. */
    @media (max-width: 1240px) { .wo-cols { grid-template-columns:minmax(0,1fr); } }

    /* Galerija slika je deljena komponenta i sama je „card" — unutar sekcije dokumenta to je
       kartica u kartici sa dva naslova. Ovde se unutrašnja ljuska poravna sa sekcijom, a njen
       naslov spusti na sitnu oznaku (broj slika + dugmad ostaju). */
    .wo-doc--split .wo-sec > .card { border:none; box-shadow:none; background:transparent;
                                     padding:0 !important; margin:0 !important; }
    /* Kad galerija nosi naslov sekcije, njeno zaglavlje JE zaglavlje sekcije: naslov + broj slika
       levo, „+ Dodaj sliku" i osveži desno, pa hairline kao pod naslovom svake druge sekcije. */
    .wo-doc--split .wo-sec > .card > .card-heading { margin-bottom:11px !important;
                                                     padding-bottom:10px; border-bottom:1px solid #eef2f7; }
    .wo-doc--split .wo-sec > .card > .card-heading h3 { display:flex; align-items:center; gap:10px;
                                                        font-size:15px; font-weight:800; color:#16222f; }
    .ph-count { font-size:12.5px; font-weight:600; color:#94a3b8; }

    /* Zaglavlje sekcije koja ima svoju radnju (npr. „Alati" → „UZMI ALAT") — isti red kao kod
       galerije slika i zadataka: naslov i brojač levo, dugme desno, hairline ispod. */
    .wo-sec-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
                   padding-bottom:10px; margin-bottom:11px; border-bottom:1px solid #eef2f7; }
    .wo-sec-head .wo-sec-t { margin:0; flex:1 1 auto; min-width:0; }

    /* Ikonica naslova sekcije. Boja NIJE ukras — u dokumentu se koriste samo tri: plava je
       podrazumevana (sve što se čita i radi), žuta znači „čeka se tuđa ruka" (zahtevi za pomoć,
       spoljni servis), crvena znači „gasi predmet" (odbijanje). Zelena, ljubičasta i siva su
       namerno izbačene iz upotrebe — šarenilo je gutalo značenje ono malo boja koje ga nose. */
    .wo-sec-i { width:27px; height:27px; border-radius:9px; flex:0 0 auto;
                display:inline-flex; align-items:center; justify-content:center; }
    .wo-sec-i.blue   { background:#e8f0fb; color:#1d63b0; }
    .wo-sec-i.amber  { background:#fdf3d8; color:#8a5a00; }
    .wo-sec-i.red    { background:#fdeceb; color:#c0392b; }
    .wo-sec-i.green  { background:#e6f6ec; color:#15803d; }
    .wo-sec-i.violet { background:#f2ebfc; color:#6d3bbf; }
    .wo-sec-i.slate  { background:#eef2f7; color:#5b6b7b; }
    .wo-doc--split .wo-sec-t { gap:10px; font-size:15px; }

/* Sekcija koja se otvara na klik (hodogram) — strelica levo od naslova. */
.wo-fold { font-size:12px; color:#8a93a3; margin-right:2px; }
.wo-sec-t.cursor-pointer:hover { color:#185FA5; }

/* Izabrana master prijava u sekciji „Duplikat". */
.dup-pick { background:#f8fafc; border:1px solid #e6eaf0; border-left:4px solid #8E44AD; border-radius:11px; padding:10px 13px; }
.dup-pick-x { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:13px; color:#16222f; }
.dup-pick-l { font-size:10px; font-weight:800; letter-spacing:.5px; color:#8E44AD; }

/* Čip radnje u sekciji dokumenta (izbor operacije: knjiženje dela, stanje opreme/alata,
   brzi izbori u izborniku duplikata). Deljen jer isti obrazac koriste četiri ekrana. */
.dp-chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:#5b6b7b;
           background:#fff; border:1.5px solid #d7dde3; border-radius:999px; padding:6px 13px; cursor:pointer; white-space:nowrap; }
.dp-chip:hover { background:#f4f7fa; }
.dp-chip.on { background:#185FA5; border-color:#185FA5; color:#fff; }
.dp-chip.clear { border-style:dashed; color:#94a3b8; }

/* „Opcije" po redu tabele — tihi ghost pill umesto punog dugmeta: tabela diše, a dugme dobija
   naglasak (brand plava) tek na hover/focus. Deljeno: prijave i nalozi, oprema, alati, delovi —
   ranije je stajalo u <style> blokovima dve stranice, pa je drugde ostajao go link. */
.row-options-btn { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px;
                   border:1.5px solid #d7dde3; background:#fff; color:#5b6b7b; font-size:12px; font-weight:700;
                   cursor:pointer; white-space:nowrap; transition:all .13s ease; }
.row-options-btn:hover, .row-options-btn:focus { border-color:#185FA5; background:#185FA5; color:#fff; box-shadow:0 3px 10px rgba(24,95,165,.25); }
tr.blue-row .row-options-btn { border-color:#185FA5; color:#185FA5; }
tr.blue-row .row-options-btn:hover { background:#185FA5; color:#fff; }

/* Selektovan red (klik na red) — CRNI okvir, isti obrazac kao Komandni centar (inset box-shadow → ne pomera raspored). */
.table.table--vessels tbody tr.blue-row > td { box-shadow: inset 0 2px 0 #111827, inset 0 -2px 0 #111827; }
.table.table--vessels tbody tr.blue-row > td:first-child { box-shadow: inset 0 2px 0 #111827, inset 0 -2px 0 #111827, inset 2px 0 0 #111827; }
.table.table--vessels tbody tr.blue-row > td:last-child { box-shadow: inset 0 2px 0 #111827, inset 0 -2px 0 #111827, inset -2px 0 0 #111827; }

/* Revers alata — TAČNO dve kolone (auto-fit je na širokom ekranu pravio četiri sitna polja),
   a na užem prozoru se spušta na jednu. */
.rv-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 22px; margin-bottom:12px; max-width:1100px; }
@media (max-width: 900px) { .rv-grid { grid-template-columns:1fr; } }
.rv-f { display:flex; flex-direction:column; gap:3px; min-width:0; }
.rv-f .input-box { margin-bottom:0 !important; }
.rv-hint { font-size:11.5px; color:#8a93a3; }
.rv-go { display:block; width:100%; max-width:420px; padding:12px; text-align:center; font-size:14px; letter-spacing:.3px; }
.rv-open { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:#334155;
           background:#fff7ed; border:1px solid #fed7aa; border-left:4px solid #EF9F27; border-radius:10px; padding:8px 12px; margin-bottom:11px; }
.rv-open-l { font-size:10px; font-weight:800; letter-spacing:.5px; color:#92400e; }

/* Dugme uz naslov dokumenta (štampa barkoda) — tiho, da ne troši traku radnji. */
.wo-title-btn { margin-left:auto; margin-right:54px;   /* mesto za crveni „zatvori" u ćošku popupa */
                display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
                color:#5b6b7b; background:#fff; border:1.5px solid #d7dde3; border-radius:999px; padding:5px 13px;
                cursor:pointer; white-space:nowrap; transition:all .13s ease; }
.wo-title-btn:hover { border-color:#185FA5; background:#185FA5; color:#fff; box-shadow:0 3px 10px rgba(24,95,165,.25); }

/* ── TABELA KOJA SE DRŽI ŠIRINE EKRANA ───────────────────────────────────────────────
   Registri u aplikaciji su namerno „nowrap" (kolona se skupi na svoj sadržaj, tabela ide u
   horizontalni skrol). Tamo gde kolona nosi slobodan tekst — opis kvara, imena izvršilaca —
   to znači da jedan dug opis razvuče celu tabelu. Ova klasa vraća lomljenje i deli širinu po
   zadatim `width` vrednostima iz zaglavlja. */
.mg-table--fit { table-layout:fixed; width:100%; }
.mg-table--fit th, .mg-table--fit td { white-space:normal; overflow-wrap:anywhere; }
/* Pilule i datumi se ne lome smisleno — njima inline `white-space:nowrap` i dalje važi. */
.mg-table--fit td [style*="nowrap"] { white-space:nowrap; }
/* Globalno pravilo gasi prelom u flex ćelijama; u ovoj tabeli badge-evi smeju u dva reda. */
.mg-table--fit td [style*="flex-wrap"] { flex-wrap:wrap !important; }

/* ── GRUPISANJE PO KOLONI ────────────────────────────────────────────────────────────
   Dugme u zaglavlju kolone uključuje nivo grupisanja (badge = redni broj nivoa), a red
   grupe se otvara/zatvara klikom. Deljeno: „Prijave i nalozi" i „Komandni centar". */
.mg-gbtn { margin-left:4px; cursor:pointer; color:#9aa7b4; white-space:nowrap; }
.mg-gbtn:hover { color:#185FA5; }
.mg-gbtn.mg-gact { color:#185FA5; }
.mg-glvl { background:#185FA5; 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; }
.mg-group td { background:#eef3f8; border-top:2px solid #cfd9e3; padding:7px 10px; font-size:13px; cursor:pointer; }
.mg-group:hover td { background:#e2ecf5; }
.mg-group2 td { background:#f6f9fc; border-top:1px solid #dde3ea; }
.mg-group2 td:first-child { padding-left:36px; }
.mg-arrow { display:inline-block; width:14px; font-weight:900; color:#185FA5; }
.mg-cnt { 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; }
.mg-sub { font-size:11px; font-weight:700; border-radius:999px; padding:1px 8px; margin-left:6px; }
.mg-sub.req { color:#92400e; background:#fef3c7; }
.mg-sub.wo { color:#185FA5; background:#e7eff8; }
.mg-sub.stop { color:#fff; background:#C0392B; }
/* Nivo grupe daje uvlačenje i sve svetliju podlogu — dubina se vidi bez brojanja. */
.mg-group.lvl1 td { background:#f3f7fb; border-top:1px solid #dde3ea; }
.mg-group.lvl2 td { background:#f7fafd; border-top:1px solid #e6ecf2; }
.mg-group.lvl3 td { background:#fbfdff; border-top:1px solid #eef2f6; }

/* „✕ GRUPISANJE" — poništavanje grupisanja; crveni X nosi značenje, reč samo imenuje šta se gasi. */
.mg-clear { display:inline-flex; align-items:center; gap:7px; margin:0 10px; padding:6px 14px; height:33px;
            border:1.5px solid #f0c4c0; background:#fff; color:#5b6b7b; border-radius:999px;
            font-size:11.5px; font-weight:800; letter-spacing:.3px; cursor:pointer; white-space:nowrap; }
.mg-clear:hover { border-color:#C0392B; background:#fff5f4; }
.mg-clear .x { color:#C0392B; font-size:14px; font-weight:900; line-height:1; }

/* Traka iznad grupisane tabele: pretraga levo, poništavanje grupisanja, uputstvo desno. */
.mg-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.mg-tools .mg-search { flex:1 1 360px; max-width:460px; }
/* Puna širina: pretraga uzima ceo red, a grupisanje i uputstvo padaju u red ispod. */
.mg-tools .mg-search--full { flex:1 1 100%; max-width:none; }
.mg-tools .input-box { margin-bottom:0; }
/* Lupa/✕ iz Basic_Search_Component-a stoji U polju — van „action-box" konteksta to nije zadato. */
.mg-tools .input-box svg { position:absolute; right:10px; top:50%; transform:translate(0,-50%); }
.mg-tools .mg-hint { font-size:11.5px; color:#8a93a3; margin-left:auto; }

/* ── POPUNJENOST DOSIJEA ─────────────────────────────────────────────────────────────
   Traka popunjenosti, red slota (šta šablon traži) i red dokumenta. Deljeno: tabela u
   Komandnom centru i dokument dosijea (Case-Document-Panel). */
.cc-bar { height:9px; border-radius:5px; background:#eef0f4; overflow:hidden; }
.cc-bar i { display:block; height:100%; }
.cc-bar i.ok { background:#27AE60; }
.cc-bar i.no { background:#EF9F27; }
.cc-slot { display:flex; align-items:center; gap:8px; font-size:12px; color:#334155; padding:5px 8px;
           border-radius:8px; background:#fff; border:1px solid #e6ebf1; margin-bottom:5px; }
.cc-slot.ok { border-color:#bbf7d0; background:#f6fefa; }
.cc-slot.bad { border-color:#f0c4c0; background:#fff7f6; }
.cc-slot .i { font-weight:900; }
.cc-slot.ok .i { color:#166534; }
.cc-slot.bad .i { color:#C0392B; }
.cc-slot .t { font-weight:700; }
.cc-slot .ty { font-size:11px; color:#8a93a3; }
.cc-slot .c { margin-left:auto; font-weight:800; font-family:ui-monospace, Consolas, monospace; }
.cc-slot .opt { font-size:10.5px; color:#94a3b8; }
.cc-doc { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:#334155;
          padding:5px 8px; border-radius:8px; background:#fff; border:1px solid #e6ebf1; margin-bottom:5px; }
.cc-doc .ty { font-size:10.5px; font-weight:800; color:#185FA5; background:#e7eff8; border-radius:999px; padding:1px 8px; }
.cc-doc .t { color:#64748b; }
.cc-doc .a { font-size:11px; color:#8a93a3; }
.cc-doc .st { font-size:10.5px; font-weight:700; color:#475569; background:#eef2f7; border-radius:999px; padding:1px 8px; }
.cc-doc .dt { margin-left:auto; font-size:11px; color:#94a3b8; }

/* == TABLA (TRELLO) ================================================================
   Kolone i kartice objedinjene table. Deljeno: Prijave i nalozi + Spoljasnji servis —
   jedna tabla, jedan izgled. Ranije je stajalo u <style> bloku jedne stranice, pa je
   druga tabla morala da izmislja svoje klase. ==================================== */
/* ── Objedinjena tabla (Trello): prijave + nalozi ──
   Širina kolone stoji kao promenljiva na :root — jedno mesto za CELU aplikaciju, pa svaka
   tabla (prijave/nalozi i svaka buduća) menja širinu jednim brojem. Podignuta sa 306px na
   383px (+25%) da red „Kreiran R.N.: 06.08.2026 16:36 (posle 80h)" stane u JEDAN red;
   prelamanje je od kartice pravilo zid teksta. */
:root { --fb-col-w: 383px; }
.view-toggle { display:inline-flex; gap:2px; background:#eef2f7; border:1px solid #d7dde3; border-radius:9px; padding:3px; }
.view-toggle a { font-size:13px; font-weight:700; color:#5b6b7b; padding:5px 12px; border-radius:7px; }
.view-toggle a.on { background:#fff; color:#185FA5; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.mine-toggle { font-size:13px; font-weight:800; color:#8a6d00; background:#fff; border:1px solid #ffd766; border-radius:9px; padding:6px 12px; white-space:nowrap; }
.mine-toggle.on { background:#f6b73c; color:#3a2c00; border-color:#f6b73c; }
.fb-mine { font-size:9px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:#8a6d00; background:#fff3cd; border:1px solid #ffe08a; border-radius:999px; padding:2px 7px; white-space:nowrap; }
.board-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 2px 12px; }
.board-hint { font-size:12px; color:#64748b; }
.main-content { min-width: 0; } /* dozvoli skupljanje sadržaja → horizontalni scroll table umesto rasta stranice */
/* `contain: inline-size` je OBAVEZAN, nije ukras: `.main-content` je flex stavka bez `min-width:0`,
   pa joj je najmanja širina jednaka najsirem sadržaju. Tabla je `width:max-content`, tako da bi ta
   širina putovala nagore i RAZVUKLA CELU STRANU — zaglavlje i pretraga izlaze van ekrana, a tabla
   ne skroluje nego raste. Ovim okvir dobija širinu od roditelja, a sadržaj prelazi u skrol. */
.fault-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; }
.fault-board { display:flex; gap:12px; padding-bottom:10px; align-items:stretch; width:max-content; height:100%; }
/* ── Kolona ──
   Boja kolone stoji kao tanka traka na vrhu (kao na mobilnoj tabli), a ne kao šarena
   pozadina: tabla ima pet kolona i svaka bi inače vukla pogled na sebe. */
.fb-col { flex:0 0 var(--fb-col-w); background:#f6f8fb; border:1px solid #e3e9f0; border-radius:14px;
          display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.fb-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; }
.fb-col-head strong { font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Skupljena kolona (Trello obrazac) ──
   Kolona ostaje na tabli kao uska traka: broj kartica + naslov uspravno (writing-mode),
   pa se vidi šta je sakriveno, a mesto zauzima 40px umesto 300px. */
.fb-fold-btn { margin-left:2px; flex:0 0 auto; cursor:pointer; color:#94a3b8; font-size:13px; font-weight:900; line-height:1; padding:2px 5px; border-radius:6px; }
.fb-fold-btn:hover { background:#e2e8f0; color:#334155; }
.fb-col.folded { flex:0 0 40px; width:40px; cursor:pointer; }
.fb-col.folded:hover { background:#e9eff7; }
.fb-fold-bar { display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 0 14px; height:100%; min-height:0; }
.fb-fold-ico { color:#94a3b8; font-size:13px; font-weight:900; line-height:1; }
.fb-fold-cnt { background:#fff; border:1px solid #dbe2ec; border-radius:999px; padding:1px 7px; font-size:11px; font-weight:800; color:#64748b; }
.fb-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; }
.fb-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.fb-cnt { margin-left:auto; background:#fff; border:1px solid #e3e9f0; border-radius:999px; padding:2px 9px; font-weight:800; color:#64748b; }
.fb-subnote { padding:0 14px 8px; font-size:11px; color:#9aa7b6; font-weight:600; }
.fb-cards { flex:1 1 auto; min-height:0; overflow-y:auto; padding:2px 11px 14px; display:flex; flex-direction:column; gap:10px; }
.fb-empty { text-align:center; color:#b6c0cc; padding:18px 14px; font-size:12px; }
.fb-card { flex:0 0 auto; background:#fff; border:1px solid #e6ebf1; border-radius:12px;
           padding:0; overflow:hidden; cursor:pointer; box-shadow:0 1px 2px rgba(20,34,47,.05); transition:box-shadow .14s, transform .14s; }
.fb-card:hover { box-shadow:0 6px 18px rgba(20,34,47,.12); transform:translateY(-1px); }
/* Slika kvara na kartici — prva priložena fotografija, umanjena (thumb) verzija. */
.fb-photo { display:block; width:100%; height:120px; object-fit:cover; background:#eef2f7; }

/* Kartica prijave — blago žućkasta podloga da se na prvi pogled razlikuje od naloga. */
.fb-card--req { background:#fffdf6; }
.fb-card.muted { opacity:.72; }
/* IZABRANA KARTICA — pandan `blue-row` u tabeli. Bez ovoga se na tabli nije videlo NAD ČIM rade
   dugmad iz trake (Izmeni/Obriši): izbor se postavljao, ali ga ništa nije prikazivalo, pa je moglo
   da se obriše nešto što korisnik ne vidi da je označeno. Važi za SVE table (Board_Card već dodaje
   klasu `sel`, a ovde dobija izgled). */
.fb-card.sel { border-color:#185FA5; box-shadow:0 0 0 2px rgba(24,95,165,.28), 0 2px 8px rgba(20,34,47,.10); }
.fb-card.sel::after { content:"✓ IZABRANO"; display:block; background:#185FA5; color:#fff;
                      font-size:9.5px; font-weight:800; letter-spacing:.5px; text-align:center; padding:2px 0; }
/* Statusna traka je tanja: boja treba da se PRIMETI, ne da vlada karticom. */
.fb-head { display:flex; align-items:center; gap:6px; padding:5px 11px; color:#fff; }
.fb-head-status { font-size:9.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fb-head-stop { font-size:11px; line-height:1; }
.fb-head-age { margin-left:auto; font-size:9.5px; font-weight:700; opacity:.92; white-space:nowrap; }
.fb-body { padding:11px 13px 12px; }
/* Šifra je sitna oznaka, MAŠINA je naslov — po njoj se kvar prepoznaje na tabli. */
.fb-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.fb-code { font-size:10.5px; font-weight:700; color:#7c8a99; background:transparent; padding:0;
           font-family:"Cascadia Mono", Consolas, ui-monospace, monospace; letter-spacing:.2px; }
/* Kritičnost: tačka u boji + reč, umesto punog obojenog badža — traka gore već nosi boju. */
.fb-pill { margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
           border-radius:999px; padding:2px 9px 2px 7px; white-space:nowrap;
           display:inline-flex; align-items:center; gap:5px; }
.fb-pill .pill-dot { width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
.fb-machine { font-size:14.5px; font-weight:800; line-height:1.3; color:#132132; letter-spacing:-0.01em; }
.fb-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; }
.fb-reporter { font-size:11.5px; color:#475569; margin-top:7px; }
.fb-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.fb-chip { font-size:10.5px; font-weight:700; color:#64748b; background:#f1f5f9; border-radius:999px; padding:2px 8px; }
.fb-chip.team { color:#185FA5; background:#e7eff8; }
.fb-chip.photo { color:#3730a3; background:#eef2ff; }
/* Ljudi i datumi u jednom mirnom bloku — sitnije od naslova, sa svetlom podlogom,
   da ne takmiče sa nazivom mašine. */
.fb-people { margin-top:9px; display:flex; flex-direction:column; gap:3px;
             background:#f8fafc; border-radius:9px; padding:8px 10px; }
.fb-person { font-size:11.5px; color:#334155; line-height:1.4; }
.fb-person-lbl { color:#8896a5; font-weight:600; }
.fb-person strong { color:#1e2c3b; font-weight:700; }
.fb-self { color:#0d9488; font-weight:800; font-size:10.5px; }
.fb-unassigned { color:#b45309; font-style:italic; }
.fb-worktime { margin-top:6px; font-size:11px; color:#185FA5; background:#eef4fb; border-radius:7px; padding:4px 8px; font-weight:600; }
.fb-foot { display:flex; align-items:center; gap:7px; margin-top:11px; padding-top:9px; border-top:1px solid #eef2f6; flex-wrap:wrap; }
.fb-btn { font-size:11.5px; font-weight:700; letter-spacing:.2px; border-radius:9px; padding:7px 13px; cursor:pointer; transition:background .12s, border-color .12s, color .12s; }
/* Jedno dugme nosi boju (glavna radnja), ostala su tiha — inače kartica izgleda kao semafor. */
.fb-btn.go { background:#185FA5; color:#fff; }
.fb-btn.go:hover { background:#134b83; }
.fb-btn.ghost { color:#5b6b7b; border:1px solid #dde3ea; background:#fff; }
.fb-btn.ghost:hover { border-color:#185FA5; color:#185FA5; }
.fb-btn.req { color:#92400e; background:#fff; border:1px solid #f0d59a; font-weight:700; }
.fb-btn.req:hover { background:#fef3c7; }
.fb-btn.pin { margin-left:auto; padding:5px 8px; font-size:13px; line-height:1; opacity:.25; filter:grayscale(1); }
.fb-btn.pin:hover { opacity:.75; filter:grayscale(0); }
.fb-btn.pin.on { opacity:1; filter:none; background:#fff3cd; border:1px solid #ffe08a; }
/* Rotira se samo ikonica (📌), da se ne iskrivi žuta pozadina/okvir dugmeta. */
.fb-btn.pin .pin-ico { display:inline-block; transition:transform .12s; }
.fb-btn.pin.on .pin-ico { transform:rotate(-45deg); }
.fb-card.is-pinned { border-color:#f6b73c; box-shadow:0 0 0 1px #f6b73c inset, 0 1px 3px rgba(20,34,47,.06); }
.fb-head-pin { font-size:11px; line-height:1; filter:drop-shadow(0 0 1px rgba(0,0,0,.3)); }
.fb-progress { height:6px; background:#eef2f6; border-radius:4px; overflow:hidden; margin-top:9px; }
.fb-progress-fill { height:100%; border-radius:4px; transition:width .2s; }

/* Mreza kolona za table koje NEMAJU horizontalni skrol (Spoljasnji servis ima 3 kolone).
   Tabla naloga koristi svoj .fb-scroll jer ima 5 kolona i skroluje se bocno. */

/* ══ DOKUMENT PRIJAVE IT PODRŠKE ══════════════════════════════════════════════════
   Prijava podrške koristi ISTU školjku kao prijava kvara i nalog (.popup--big, .doc-head,
   .wo-doc--split, .wo-sec, .wo-facts, .wo-desc). Ovde je samo ono čega u toj školjci nema:
   greška iz koda, mreža priloga, polje za komentar i pilule faza/prioriteta u stubu. */

/* Greška uhvaćena neposredno pre prijave — mora da ostane monospace i da se skroluje
   umesto da razvuče kolonu; poruke iz .NET-a znaju biti duge i bez razmaka. */
.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; }

/* Polje za komentar — jedna celina sa dugmetom; odvojeni su izgledali kao dva nepovezana
   elementa nabačena na dno sekcije. */
.sup-say { background:#f8fafc; border:1px solid #e7ecf3; border-radius:11px; padding:10px 12px; margin-top:10px; }

/* Faze i prioritet u stubu. `.wo-rail .button` razvlači dugmad preko cele širine — pilule
   to NISU, pa se to pravilo ovde gasi i one se lome u red. */
.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; width:auto !important;
            display:inline-flex !important; max-width:none; }
.sup-chip:disabled { opacity:.55; cursor:default; }

/* Interna faza „urađeno, čeka dizanje" — vidi je samo razvoj. */
.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; }

/* Ishodi se odvajaju od faza tankom linijom — faza je „gde smo", ishod je „gotovo je". */
.sup-rail-sep { border-top:1px solid #e7ecf3; padding-top:11px; margin-top:2px; }

/* Faza prijave podrške — ime, šta faza NOSI i šta prijavilac u njoj vidi. Sama pilula sa imenom
   nije govorila ništa: „Poslato" i „Pregleda se" izgledaju isto dok ne pročitaš čime se razlikuju. */
.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; }

/* Sat rada — isto pitanje kao na nalogu: ko je počeo, kada, i koliko je STVARNO rađeno.
   Zeleno dok kuca, sivo kad je pauzirano; boja je jedina razlika koja se vidi iz daljine. */
.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; }

/* Prekid rada uz tip i razlog — okvir da se vidi da je to obrazac, ne još jedno dugme u nizu. */
.sup-pause { background:#fffbeb; border:1px solid #fde68a; border-radius:10px; padding:10px 12px; }

/* Razlaganje vremena po tipu — na šta je posao otišao. Tačkica u boji tipa je jedino
   što se vidi iz daljine; brojevi se čitaju kad zatreba. */
.sup-split { display:flex; flex-direction:column; gap:4px; }
.sup-split > div { display:flex; align-items:center; gap:7px; font-size:12px; line-height:1.4; color:#475569; }
.sup-split > div > span { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.sup-split strong { margin-left:auto; font-variant-numeric:tabular-nums; color:#16222f; }

/* Puna evidencija — od najnovijeg. Skroluje se u sebi da stub ne naraste preko ekrana. */
.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; }
.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; }

/* Put prijave — ceo niz faza, SAMO prikaz. Ranije je ovde bio red pilula po kojem se moglo
   skočiti sa „Poslato" pravo na „Testira se": izgledao je kao prekidači, a bio je mašina stanja.
   Prošlo je prigušeno i sa kvačicom, tekuće uokvireno bojom svoje faze, buduće bledo. */
.sup-flow { display:flex; flex-wrap:wrap; gap:4px; }
.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; }

/* Hodogram prijave podrške — sistemski zapisi, hronološki. Skroluje se u sebi da stub ne
   naraste preko ekrana kad prijava ima dugu istoriju. */
.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; }

/* „Neko upravo radi" na kartici IT podrške. Zelena tačka koja pulsira je jedino što se vidi iz
   daljine — po njoj se u koloni „U radu" razlikuje prijava na kojoj se sedi od one koja stoji. */
.fb-work { 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; }
.fb-work.wait { background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.fb-work-d { width:7px; height:7px; border-radius:50%; background:#16a34a; flex:0 0 auto;
             animation:fbWorkPulse 1.6s ease-in-out infinite; }
.fb-work.wait .fb-work-d { background:#ea580c; animation:none; }
@keyframes fbWorkPulse { 0%,100% { opacity:1; } 50% { opacity:.25; } }
/* Pokret ume da smeta — ko ga je isključio u sistemu, tačka mu prosto stoji. */
@media (prefers-reduced-motion: reduce) { .fb-work-d { animation:none; } }

/* Prekid rada — poseban obrazac, ne nabacana polja među dugmadima. Žuti okvir kaže „ovo je
   forma koja čeka unos", a ne još jedna radnja 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 .wo-af-l { margin-bottom:4px; }
/* Potvrda desno, odustajanje levo i tiho — obrnut redosled bi „odustani" stavio pod prst. */
.sup-pause-a { display:flex; align-items:center; gap:10px; margin-top:11px; }
.sup-pause-a .wo-mini { margin-right:auto; }
.sup-pause-a .button { width:auto !important; max-width:none; padding:9px 20px !important; }

/* Prekidači „Radi se" i „U pauzi" na Prijavama i nalozima — isti oblik kao „★ Moji", samo u boji
   stanja: zeleno kad se radi, narandžasto kad stoji. Ne nov obrazac, samo druga boja. */
.mine-toggle.work-toggle { color:#166534; border-color:#bbf7d0; }
.mine-toggle.work-toggle.on { background:#16a34a; color:#fff; border-color:#16a34a; }
.mine-toggle.pause-toggle { color:#9a3412; border-color:#fed7aa; }
.mine-toggle.pause-toggle.on { background:#ea580c; color:#fff; border-color:#ea580c; }

/* Spojene prijave (duplikati) na master prijavi/nalogu. Svaka je svoj blok — vidi se ko je šta
   rekao i slikao; sadržaj se namerno NE prepisuje u master.
   Sekcija stoji u GLAVNOJ koloni, odmah ispod slika kvara: tu ima širine za veće sličice, a u
   desnom stubu se lako promašivala — iako je tuđa fotografija često jedina koja postoji. */
.mreq { border:1px solid #f0dca8; border-left:4px solid #f0b429; border-radius:11px;
        padding:12px 14px; margin-bottom:10px; background:#fffdf7; }
.mreq-h { display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:13.5px; color:#16222f; }
.mreq-code { font-family:monospace; font-size:12px; font-weight:700; color:#8a5a00; background:#fdf3d8;
             border-radius:6px; padding:2px 8px; }
.mreq-when { color:#94a3b8; font-size:12px; }
.mreq-h .wo-mini { margin-left:auto; }
.mreq-x { font-size:13.5px; line-height:1.55; color:#1e293b; margin-top:7px; white-space:pre-wrap; }
.mreq-fotos { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.mreq-fotos img { width:132px; height:132px; object-fit:cover; border-radius:9px; cursor:zoom-in;
                  border:1px solid #e7ecf3; box-shadow:0 1px 3px rgba(16,24,40,.08); }
.mreq-fotos img:hover { border-color:#f0b429; }