/* Povezana preduzeća — osnovni stil (bela pozadina, tirkizni akcenti). * * PRAVILO: nijedno pravilo niže NE SME imati boju upisanu brojem — sve boje se uzimaju * iz promenljivih ispod. Samo tako tamna tema može da ih zameni na jednom mestu. * (Izuzetak je odeljak za štampu: papir je uvek beo, pa su tamo boje namerno fiksne.) * * Svetla tema je podrazumevana. Tamnu uključuje `data-tema="tamna"` na , koje * postavlja `js/tema.js` — „automatski" se tamo prevodi u svetlu ili tamnu po sistemu, * pa CSS zna samo za dva stanja. */ :root { color-scheme: light; /* Akcenat (tirkiz) */ --tirkiz: #0d9488; /* okviri, fokus, naglašena linija */ --tirkiz-tamni: #115e59; /* akcentni TEKST: naslovi, linkovi, badge */ --tirkiz-svetli: #ccfbf1; /* akcentna PODLOGA: zaglavlje tabele, badge */ --akcenat-blago: #f0fdfa; /* najblaža akcentna podloga (MF strana, nov komentar) */ /* Trake: zaglavlje i futer */ --traka-akcenat: #0d9488; --na-traci: #ffffff; --traka-tag-bg: #ccfbf1; --traka-tag-tekst: #115e59; --traka-hover: rgba(255, 255, 255, 0.16); --traka-aktivno: rgba(255, 255, 255, 0.26); --traka-ivica: rgba(255, 255, 255, 0.5); /* Tekst i površine */ --tekst: #0f172a; --tekst-slab: #475569; --ivica: #cbd5e1; --ivica-blaga: #eef2f7; --pozadina: #ffffff; --panel-bg: #ffffff; /* paneli, kartice, tabele, modali */ --polje-bg: #ffffff; /* polja za unos */ --traka-bg: #f1f5f9; /* navigacija, red filtera, red sume */ --zebra: #f8fafc; /* parni redovi tabele */ --povrsina-2: #e2e8f0; /* neutralna podloga: red grupe, ugašen badge */ --red-neaktivan: #eef2f7; --nivo-1: #eef2f7; /* nivoi grupisanja u pivotu */ --nivo-2: #f4f7fa; /* Dugmad */ --dugme-bg: #0d9488; --dugme-bg-hover: #115e59; --dugme-tekst: #ffffff; --dugme-ivica: #115e59; --dugme2-bg: #ffffff; --dugme2-tekst: #115e59; --dugme2-hover: #ccfbf1; /* Stanja */ --greska: #b91c1c; --greska-jaka: #991b1b; /* hover na crvenom tekstu */ --greska-bg: #fef2f2; --greska-ivica: #fecaca; --danger-bg: #b91c1c; --danger-hover: #991b1b; --danger-ivica: #991b1b; --ok-ivica: #99f6e4; --upozorenje-bg: #fff7ed; --upozorenje-ivica: #fed7aa; --upozorenje-tekst: #9a3412; --baner-bg: #fffbeb; --baner-ivica: #fcd34d; --baner-tekst: #92400e; --info-bg: #eef2ff; --info-tekst: #3730a3; --kontrola-bg: #fffbeb; /* red „za kontrolu" */ --kontrola-bg2: #fef6e0; --grupa-kontrola-bg: #fde9c8; /* Strane MF / PP */ --mf-bg: #f0fdfa; --pp-bg: #fefce8; --pp-badge-bg: #fef3c7; --pp-badge-tekst: #854d0e; --overlay: rgba(15, 23, 42, 0.5); --senka: 0 1px 3px rgba(15, 23, 42, 0.12); --senka-modal: 0 10px 40px rgba(15, 23, 42, 0.35); --senka-futer: 0 -1px 4px rgba(15, 23, 42, 0.15); --senka-baner: 0 2px 10px rgba(15, 23, 42, 0.15); --radijus: 6px; } /* Tamna tema važi SAMO na ekranu (`@media screen`). Papir je uvek beo, pa se pri štampi * ceo blok ne primenjuje i vrednosti se vraćaju na svetle iz `:root` — bez ijednog * dodatnog pravila za štampu i bez opasnosti da se svetli tekst odštampa na belom. */ @media screen { :root[data-tema="tamna"] { color-scheme: dark; --tirkiz: #2dd4bf; --tirkiz-tamni: #5eead4; --tirkiz-svetli: #134e4a; --akcenat-blago: #12332f; /* Traka je tamnija od oznake uloge na njoj, da se „administrator" i dalje vidi kao * zasebna pločica (u svetloj temi tu razliku pravi svetla pločica na tirkiznoj traci). */ --traka-akcenat: #0f3d3a; --na-traci: #e6fffb; --traka-tag-bg: #0f766e; --traka-tag-tekst: #ccfbf1; --tekst: #e2e8f0; --tekst-slab: #94a3b8; --ivica: #334155; --ivica-blaga: #263344; --pozadina: #0f172a; --panel-bg: #1e293b; --polje-bg: #0f172a; --traka-bg: #172033; --zebra: #1a2537; --povrsina-2: #334155; --red-neaktivan: #1a2334; --nivo-1: #24314a; --nivo-2: #1f2b41; --dugme-bg: #0f766e; --dugme-bg-hover: #0d9488; --dugme-tekst: #f0fdfa; --dugme-ivica: #14b8a6; --dugme2-bg: #1e293b; --dugme2-tekst: #5eead4; --dugme2-hover: #134e4a; --greska: #fca5a5; --greska-jaka: #fecaca; --greska-bg: #3f1d1d; --greska-ivica: #7f1d1d; --danger-bg: #b91c1c; --danger-hover: #dc2626; --danger-ivica: #7f1d1d; --ok-ivica: #0f766e; --upozorenje-bg: #3a2a12; --upozorenje-ivica: #78460f; --upozorenje-tekst: #fcd9a5; --baner-bg: #3a2f12; --baner-ivica: #a16207; --baner-tekst: #fde68a; --info-bg: #232a4d; --info-tekst: #c7d2fe; --kontrola-bg: #33290f; --kontrola-bg2: #3b2f12; --grupa-kontrola-bg: #4a3a14; --mf-bg: #14302e; --pp-bg: #2e2a12; --pp-badge-bg: #4a3a14; --pp-badge-tekst: #fde68a; --overlay: rgba(2, 6, 23, 0.7); --senka: 0 1px 3px rgba(0, 0, 0, 0.5); --senka-modal: 0 10px 40px rgba(0, 0, 0, 0.6); --senka-futer: 0 -1px 4px rgba(0, 0, 0, 0.5); --senka-baner: 0 2px 10px rgba(0, 0, 0, 0.5); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: "Segoe UI", system-ui, sans-serif; color: var(--tekst); background: var(--pozadina); font-size: 15px; line-height: 1.45; } #app { min-height: 100vh; display: flex; flex-direction: column; } /* ---- Zaglavlje aplikacije ---- */ .app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 20px; background: var(--traka-akcenat); color: var(--na-traci); } .app-header .brand { font-weight: 600; font-size: 16px; letter-spacing: 0.2px; } .app-header .user-box { display: flex; align-items: center; gap: 12px; font-size: 14px; white-space: nowrap; } /* ---- Izbor aktivnog dosijea u zaglavlju ---- */ .dosije-box { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; flex: 1; justify-content: center; } .dosije-labela { opacity: 0.85; } .dosije-prazan { opacity: 0.75; font-style: italic; } .dosije-select { max-width: 520px; padding: 3px 8px; border: 1px solid var(--tirkiz-tamni); border-radius: var(--radijus); background: var(--polje-bg); color: var(--tekst); font: inherit; font-size: 13px; } .app-header .role-tag { background: var(--traka-tag-bg); color: var(--traka-tag-tekst); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; } .app-main { flex: 1; padding: 24px 20px; padding-bottom: 56px; /* prostor za fiksni futer (da ne pokrije sadržaj) */ max-width: 1400px; /* širi radni prostor za tabele sa puno kolona */ width: 100%; margin: 0 auto; } /* ---- Futer ---- */ .app-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; /* ispod modala (100) i banera (200), iznad sadržaja */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 8px 20px; background: var(--traka-akcenat); color: var(--na-traci); font-size: 13px; box-shadow: var(--senka-futer); } .app-footer .foot-left { justify-self: start; } .app-footer .foot-center { justify-self: center; } .app-footer .foot-right { justify-self: end; font-variant-numeric: tabular-nums; white-space: nowrap; } .app-footer .version-btn { background: none; border: none; color: var(--na-traci); cursor: pointer; font: inherit; padding: 0; text-decoration: underline dotted; } .app-footer .version-btn:hover { text-decoration: underline; } .app-footer .by-link { color: var(--na-traci); font-weight: 600; text-decoration: none; } .app-footer .by-link:hover { text-decoration: underline; } /* ---- Izbor izgleda (svetla / tamna / automatski) ---- */ /* Ikonice, bez teksta; stoje u zaglavlju uz „Odjava". */ .tema-izbor { display: inline-flex; align-items: center; gap: 2px; } .tema-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; background: none; border: 1px solid transparent; border-radius: var(--radijus); color: var(--na-traci); opacity: 0.75; cursor: pointer; } .tema-btn:hover { opacity: 1; background: var(--traka-hover); } .tema-btn.active { opacity: 1; background: var(--traka-aktivno); border-color: var(--traka-ivica); } .tema-btn svg { display: block; } /* ---- Prijava ---- */ .login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; } .card { background: var(--panel-bg); border: 1px solid var(--ivica); border-radius: var(--radijus); box-shadow: var(--senka); padding: 24px; width: 100%; max-width: 360px; } .card h1 { margin: 0 0 4px; font-size: 20px; color: var(--tirkiz-tamni); } .card .sub { margin: 0 0 20px; color: var(--tekst-slab); font-size: 13px; } /* ---- Forme ---- */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--tekst-slab); } .field input { width: 100%; padding: 8px 10px; border: 1px solid var(--ivica); border-radius: var(--radijus); font: inherit; background: var(--polje-bg); color: var(--tekst); } .field input:focus { outline: 2px solid var(--tirkiz); outline-offset: 0; border-color: var(--tirkiz); } .btn { display: inline-block; padding: 8px 16px; border: 1px solid var(--dugme-ivica); border-radius: var(--radijus); background: var(--dugme-bg); color: var(--dugme-tekst); font: inherit; font-weight: 600; cursor: pointer; } .btn:hover { background: var(--dugme-bg-hover); } .btn:disabled { opacity: 0.6; cursor: default; } .btn-secondary { background: var(--dugme2-bg); color: var(--dugme2-tekst); } .btn-secondary:hover { background: var(--dugme2-hover); } .btn-danger { background: var(--danger-bg); border-color: var(--danger-ivica); color: var(--dugme-tekst); } .btn-danger:hover { background: var(--danger-hover); } /* `flex-wrap` je obavezan: bez njega red dugmadi ne staje u panel, pa dugmad izlaze iz okvira podloge (ideja 24). `row-gap` drži razmak kad se red prelomi. */ .btn-row { display: flex; gap: 10px; row-gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .btn-sm { padding: 4px 12px; font-size: 13px; } /* ---- Poruke ---- */ .msg { padding: 8px 12px; border-radius: var(--radijus); font-size: 13px; margin-bottom: 12px; } .msg.error { background: var(--greska-bg); color: var(--greska); border: 1px solid var(--greska-ivica); } .msg.ok { background: var(--tirkiz-svetli); color: var(--tirkiz-tamni); border: 1px solid var(--ok-ivica); } .notice { background: var(--upozorenje-bg); border: 1px solid var(--upozorenje-ivica); color: var(--upozorenje-tekst); padding: 8px 12px; border-radius: var(--radijus); font-size: 13px; margin-bottom: 16px; } .muted { color: var(--tekst-slab); } section.panel { background: var(--panel-bg); border: 1px solid var(--ivica); border-radius: var(--radijus); padding: 20px; margin-bottom: 20px; max-width: 460px; } section.panel h2 { margin: 0 0 12px; font-size: 16px; color: var(--tirkiz-tamni); } /* ---- Navigacija ---- */ .app-nav { display: flex; gap: 2px; padding: 0 12px; background: var(--traka-bg); border-bottom: 1px solid var(--ivica); flex-wrap: wrap; } .app-nav button { background: none; border: none; padding: 10px 14px; cursor: pointer; font: inherit; color: var(--tekst-slab); border-bottom: 3px solid transparent; } .app-nav button:hover { color: var(--tirkiz-tamni); } .app-nav button.active { color: var(--tirkiz-tamni); border-bottom-color: var(--tirkiz); font-weight: 600; } .app-nav button.nav-primary { font-weight: 600; color: var(--tirkiz-tamni); } .app-nav button:disabled { color: var(--tekst-slab); opacity: 0.6; cursor: default; } .app-nav .spacer { flex: 1; } .app-nav .nav-sep { width: 1px; align-self: stretch; margin: 6px 8px; background: var(--ivica); } .view-title { margin: 0 0 12px; font-size: 20px; color: var(--tirkiz-tamni); } .view-msg:not(:empty) { margin-bottom: 12px; } /* ---- Početna (vodič kroz rad) ---- */ /* Paneli na početnoj su širi od podrazumevanih 460px — u njima stoji red od sedam dugmadi i opisi koraka, koji se u uskom panelu lome uz samu ivicu (ideja 24). */ .pocetna-panel { max-width: 860px; } .pocetna-panel .btn-row { margin-top: 12px; } .koraci-lista { margin: 8px 0 0; padding-left: 24px; } .koraci-lista li { margin-bottom: 12px; } .koraci-lista li::marker { color: var(--tirkiz-tamni); font-weight: 700; } .korak-naslov { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .korak-ime { color: var(--tirkiz-tamni); font-weight: 600; } .korak-opis { margin: 2px 0 0; color: var(--tekst-slab); } /* ---- Baner „nova verzija" ---- */ .version-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 16px; background: var(--baner-bg); border-bottom: 1px solid var(--baner-ivica); color: var(--baner-tekst); font-size: 14px; box-shadow: var(--senka-baner); } .version-banner .vb-text { font-weight: 600; } .version-banner .vb-actions { display: flex; gap: 8px; } /* ---- Modal („Šta je novo", potvrde) ---- */ .modal-overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 100; } .modal-card { background: var(--panel-bg); border-radius: 10px; box-shadow: var(--senka-modal); width: 100%; max-width: 640px; max-height: 85vh; display: flex; flex-direction: column; } .modal-sm { max-width: 420px; } .modal-sm .modal-body { padding-top: 20px; } .modal-head { padding: 20px 24px 8px; } .modal-head h2 { margin: 0; font-size: 20px; color: var(--tekst); } .modal-body { padding: 8px 24px; overflow-y: auto; } .modal-foot { padding: 12px 24px 20px; display: flex; justify-content: flex-end; gap: 10px; } .cl-ver { color: var(--tirkiz); font-size: 15px; margin: 16px 0 6px; } .modal-body > .cl-ver:first-child { margin-top: 4px; } .cl-list { margin: 0 0 8px; padding-left: 20px; } .cl-list li { margin-bottom: 8px; } .cl-note { color: var(--tekst-slab); font-style: italic; margin: 8px 0 0; } /* ---- Tabela (Excel izgled) — osnova za kasnije faze ---- */ .table-wrap { overflow-x: auto; } .data-table { border-collapse: collapse; width: 100%; background: var(--panel-bg); font-size: 14px; } .data-table th, .data-table td { border: 1px solid var(--ivica); padding: 6px 10px; text-align: left; vertical-align: middle; } .data-table th { background: var(--tirkiz-svetli); color: var(--tirkiz-tamni); font-weight: 600; position: sticky; top: 0; } .data-table th.center, .data-table td.center { text-align: center; } .data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .data-table tbody tr:nth-child(even) td { background: var(--zebra); } .data-table tr.row-inactive td { color: var(--tekst-slab); background: var(--red-neaktivan) !important; } .badge { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; } .badge-on { background: var(--tirkiz-svetli); color: var(--tirkiz-tamni); } .badge-off { background: var(--povrsina-2); color: var(--tekst-slab); } /* Zaključan dosije (ideja 6) — oznaka u zaglavlju i u spisku dosijea. */ .badge-zakljucan { background: var(--upozorenje-bg); color: var(--upozorenje-tekst); } td.actions { white-space: nowrap; } .link-btn { background: none; border: none; color: var(--tirkiz-tamni); cursor: pointer; font: inherit; padding: 2px 6px; text-decoration: underline; } .link-btn:hover { color: var(--tirkiz); } .link-btn.danger { color: var(--greska); } .link-btn.danger:hover { color: var(--greska-jaka); } .link-btn:disabled { color: var(--tekst-slab); text-decoration: none; cursor: default; opacity: 0.6; } /* ---- Široki paneli (tabele, uvoz) ---- */ section.panel.panel-wide { max-width: none; } .polja-red { display: flex; gap: 16px; flex-wrap: wrap; } .polja-red .field { flex: 1; min-width: 150px; } .field-inline { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 13px; } .field-inline label { font-weight: 600; color: var(--tekst-slab); } .hint { font-size: 12px; color: var(--tekst-slab); margin: -4px 0 8px; } .select { padding: 6px 8px; border: 1px solid var(--ivica); border-radius: var(--radijus); background: var(--polje-bg); color: var(--tekst); font: inherit; font-size: 13px; } .datum-input { max-width: 160px; } .datum-input.nevalidan { border-color: var(--greska); background: var(--greska-bg); } .data-table tr.red-aktivan td { background: var(--tirkiz-svetli) !important; } /* ---- Uvoz ---- */ .uvoz-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; } .uvoz-kartica { border: 1px solid var(--ivica); border-radius: var(--radijus); padding: 14px 16px; background: var(--panel-bg); } .uvoz-kartica.uvezena { border-left: 4px solid var(--tirkiz); } .uvoz-kartica h3 { margin: 0 0 8px; font-size: 14px; color: var(--tirkiz-tamni); } .uvoz-radnje { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .fajl-input { font-size: 12px; max-width: 230px; } .rezime { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: 13px; } .rezime dt { color: var(--tekst-slab); font-weight: 600; } .rezime dd { margin: 0; } .rezime dd.upozorenje { color: var(--upozorenje-tekst); font-weight: 600; } .pregled-okvir:not(:empty) { margin-top: 12px; border-top: 1px dashed var(--ivica); padding-top: 12px; } .pregled h4 { margin: 14px 0 6px; font-size: 13px; color: var(--tirkiz-tamni); } .pregled-brojke { margin: 0 0 4px; font-size: 13px; } .mapiranje { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 6px 16px; } .mapiranje-red { display: flex; align-items: center; gap: 8px; font-size: 13px; } .mapiranje-naziv { flex: 0 0 130px; color: var(--tekst-slab); font-weight: 600; } .mapiranje-naziv.obavezno::after { content: ' *'; color: var(--greska); } .mapiranje-red .select { flex: 1; min-width: 0; } .tabela-primera { font-size: 12px; } .tabela-primera th, .tabela-primera td { padding: 4px 8px; white-space: nowrap; } /* ---- Šifarnici ---- */ .sif-zaglavlje { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .sif-labela { font-size: 13px; font-weight: 600; color: var(--tekst-slab); } .sif-napomena { font-size: 12px; } .sif-tabovi { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--ivica); } .sif-tab { background: none; border: 1px solid transparent; border-bottom: none; border-radius: var(--radijus) var(--radijus) 0 0; padding: 7px 14px; margin-bottom: -1px; cursor: pointer; font: inherit; font-size: 13px; color: var(--tekst-slab); } .sif-tab:hover { color: var(--tirkiz-tamni); } .sif-tab.active { background: var(--panel-bg); border-color: var(--ivica); border-bottom: 1px solid var(--panel-bg); color: var(--tirkiz-tamni); font-weight: 600; } .sif-filter { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; } .sif-filter .field-inline { margin: 0; } .sif-pretraga { padding: 6px 10px; border: 1px solid var(--ivica); border-radius: var(--radijus); font: inherit; font-size: 13px; min-width: 280px; } .sif-pretraga:focus { outline: 2px solid var(--tirkiz); border-color: var(--tirkiz); } .sif-tabela { font-size: 13px; } .sif-tabela th, .sif-tabela td { padding: 3px 8px; } .sif-tabela td.konto-cel { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .sif-tabela .select { padding: 3px 6px; font-size: 12px; } .cel-input { width: 100%; min-width: 90px; padding: 3px 6px; border: 1px solid transparent; border-radius: 3px; background: transparent; font: inherit; font-size: 13px; color: var(--tekst); } .cel-input:hover:not(:disabled) { border-color: var(--ivica); background: var(--polje-bg); } .cel-input:focus { outline: none; border-color: var(--tirkiz); background: var(--polje-bg); } .cel-input:disabled { color: var(--tekst-slab); } .cel-usko { min-width: 60px; max-width: 90px; } .sif-forma { margin-top: 18px; border-top: 1px dashed var(--ivica); padding-top: 14px; } .sif-forma h3 { margin: 0 0 10px; font-size: 14px; color: var(--tirkiz-tamni); } /* ---- Uparivanje i kontrola „provera" ---- */ .tol-input { width: 90px; padding: 4px 8px; border: 1px solid var(--ivica); border-radius: var(--radijus); font: inherit; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; } .tol-input:focus { outline: 2px solid var(--tirkiz); border-color: var(--tirkiz); } .rezime dd.dobro { color: var(--tirkiz-tamni); font-weight: 600; } /* Priložen izvorni fajl uz uvezenu listu (ideja 5). */ .uvoz-prilog { margin: 4px 0 0; font-size: 13px; } /* Snimljena podešavanja izveštaja (ideja 10) i naziv pod kojim se snimaju. */ .izv-layout-red { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .izv-layout-ime { padding: 5px 8px; border: 1px solid var(--ivica); border-radius: var(--radijus); font: inherit; background: var(--polje-bg); color: var(--tekst); min-width: 180px; } /* Broj dokumenta u izveštaju je link do stavke (ideja 9) — na papiru je običan tekst. */ .print-sheet .link-btn { color: inherit; text-decoration: none; padding: 0; } /* Kvačica sa natpisom u jednom redu (prozor „Nova ručna stavka"). */ .kvacica-red { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tekst-slab); margin-bottom: 14px; } .kvacica-red input { width: auto; } /* Vrste stavki tabele (ideje 16 i 17) — neupareno i ručno uneto nisu ishodi kontrole. */ .badge.status-neuparen { background: var(--upozorenje-bg); color: var(--upozorenje-tekst); } .badge.status-rucno { background: var(--info-bg); color: var(--info-tekst); } .badge.tip-par { background: var(--povrsina-2); color: var(--tekst-slab); } .badge.tip-neuparen { background: var(--upozorenje-bg); color: var(--upozorenje-tekst); } .badge.tip-rucno { background: var(--info-bg); color: var(--info-tekst); } .badge.status-proveren { background: var(--tirkiz-svetli); color: var(--tirkiz-tamni); } .badge.status-za_kontrolu { background: var(--upozorenje-bg); color: var(--upozorenje-tekst); } .badge.status-prihvacen { background: var(--info-bg); color: var(--info-tekst); } .data-table tr.red-kontrola td { background: var(--kontrola-bg); } .data-table tr.red-kontrola:nth-child(even) td { background: var(--kontrola-bg2); } .razlog { margin-left: 6px; cursor: help; } .modal-wide { max-width: 900px; } /* ---- Zajedničko za faze 5 i 6 ---- */ .strong { font-weight: 700; } .chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; } .panel-glava { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .panel-glava h2 { margin: 0; } .rezime-sirok { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* Zbirovi u EUR imaju svoj red ispod rezimea (ideja 14) — da ne završe „gde stignu" u mreži koja se prelama po širini prozora. */ .rezime-zbir { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ivica); font-size: 13px; } .rezime-zbir-labela { color: var(--tekst-slab); font-weight: 600; } .rezime-zbir-par { display: flex; align-items: baseline; gap: 8px; } .rezime-zbir .rz-ime { color: var(--tekst-slab); } .rezime-zbir .rz-iznos { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; color: var(--tirkiz-tamni); } /* ---- Tabela povezanih preduzeća (Faza 5) ---- */ .tbl-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; } /* Brojač aktivnih filtera — jedini trag da sakrivena kolona i dalje filtrira tabelu. */ .tbl-filter-brojac { display: inline-flex; align-items: center; gap: 6px; } .tbl-filter-brojac .upozorenje { color: var(--upozorenje-tekst); font-weight: 600; } .tbl-wrap { max-height: 70vh; overflow: auto; } .tbl-tabela { font-size: 12px; } .tbl-tabela th, .tbl-tabela td { padding: 3px 6px; white-space: nowrap; } /* Zaglavlje i red filtera ostaju vidljivi pri skrolovanju; filter stoji tačno ispod * naslova kolona, pa naslovni red mora imati fiksnu visinu. */ .tbl-tabela thead tr:first-child th { position: sticky; top: 0; z-index: 3; height: 26px; } .tbl-tabela thead tr.tbl-filter-red td { position: sticky; top: 26px; z-index: 2; } .th-sort { padding: 0 !important; } .th-sort-btn { width: 100%; background: none; border: 0; padding: 5px 6px; font: inherit; font-weight: 600; color: inherit; text-align: inherit; cursor: pointer; } .th-sort-btn:hover { color: var(--tirkiz-tamni); } .th-sort.aktivna .th-sort-btn { color: var(--tirkiz-tamni); } .tbl-filter-red td { background: var(--traka-bg) !important; padding: 2px 4px !important; } .tbl-f { width: 100%; min-width: 60px; padding: 2px 4px; border: 1px solid var(--ivica); border-radius: 4px; font: inherit; font-size: 11px; } .tbl-f:focus { outline: 1px solid var(--tirkiz); border-color: var(--tirkiz); } .tbl-f-sel { min-width: 80px; } .tbl-f-opseg { display: flex; gap: 3px; } .tbl-f-usko { min-width: 48px; } .tbl-toggle { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--tirkiz-tamni); cursor: pointer; } .tbl-komentar { background: none; border: 0; padding: 0 2px; font: inherit; cursor: pointer; } .tbl-komentar.novo { color: var(--greska); font-weight: 700; } /* Ručno uneta dodatna polja: u tabeli se vidi početak teksta, ceo je u „title". */ .tbl-dodatno-cel { max-width: 160px; } .tbl-dodatno { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } /* Grupa je vizuelno krov nad svojim redovima; MF i PP deo su u različitoj nijansi. */ .data-table tr.tbl-grupa td { background: var(--povrsina-2) !important; font-weight: 600; border-top: 2px solid var(--tirkiz); } .data-table tr.tbl-grupa.red-kontrola td { background: var(--grupa-kontrola-bg) !important; } .data-table tr.tbl-detalj td { font-weight: 400; } .data-table tr.tbl-mf td { background: var(--mf-bg) !important; } .data-table tr.tbl-pp td { background: var(--pp-bg) !important; } .data-table tr.van-provere td { color: var(--tekst-slab); font-style: italic; } .badge.poreklo-mf { background: var(--tirkiz-svetli); color: var(--tirkiz-tamni); } .badge.poreklo-pp { background: var(--pp-badge-bg); color: var(--pp-badge-tekst); } .pager { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; } .neup-strane { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; margin-top: 12px; } .neup-strana h3 { margin: 0 0 6px; font-size: 14px; color: var(--tirkiz-tamni); } .neup-strana .table-wrap { max-height: 340px; overflow: auto; } /* ---- Detalji grupe: dodatna polja i komentari ---- */ .modal-sekcija { margin-top: 16px; border-top: 1px dashed var(--ivica); padding-top: 12px; } .modal-sekcija h3 { margin: 0 0 8px; font-size: 14px; color: var(--tirkiz-tamni); } .dodatno-red { display: flex; align-items: center; gap: 10px; padding: 3px 0; border-bottom: 1px solid var(--ivica-blaga); font-size: 13px; } .dodatno-naziv { font-weight: 600; min-width: 140px; } .dodatno-vrednost { flex: 1; } .dodatno-forma { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .dodatno-inp { padding: 5px 8px; border: 1px solid var(--ivica); border-radius: var(--radijus); font: inherit; font-size: 13px; } .kom-spisak { max-height: 300px; overflow: auto; } .kom { border-left: 3px solid var(--ivica); padding: 4px 0 4px 10px; margin-bottom: 8px; } .kom.novo { border-left-color: var(--tirkiz); background: var(--akcenat-blago); } .kom-glava { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--tekst-slab); } .kom-autor { font-weight: 600; color: var(--tekst); } .kom-tekst { white-space: pre-wrap; font-size: 13px; } .kom-forma { margin-top: 10px; } .kom-unos { width: 100%; padding: 6px 8px; border: 1px solid var(--ivica); border-radius: var(--radijus); font: inherit; font-size: 13px; resize: vertical; } /* ---- Izveštaji (Faza 6) ---- */ .izv-sekcija { margin-top: 14px; border-top: 1px dashed var(--ivica); padding-top: 10px; } .izv-sekcija h3 { margin: 0 0 8px; font-size: 14px; color: var(--tirkiz-tamni); } .izv-naslov-sel { min-width: 380px; max-width: 100%; } .izv-filter-red { display: flex; gap: 14px; flex-wrap: wrap; } .izv-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--tekst-slab); } .izv-f span { font-weight: 600; } /* Red sa ručno ispravljenim kursom (ideja 25) — oznaka mora da se vidi, kao i kod prihvaćene razlike, da ne izgleda da je grupa „sama od sebe" tačna. */ .tbl-kurs-ispravljen { background: var(--info-bg); } .tbl-kurs-znak { color: var(--info-tekst); font-weight: 700; } /* Spisak kolona tabele u prozoru „Kolone": kvačica + strelice za redosled (ideja 13). */ .tbl-kolone-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2px 16px; margin-bottom: 10px; font-size: 13px; } .tbl-kolone-stavka { display: flex; align-items: center; gap: 6px; padding: 2px 0; } .tbl-kolone-stavka .tk-broj { min-width: 26px; text-align: right; color: var(--tekst-slab); font-variant-numeric: tabular-nums; } .tbl-kolone-stavka .tk-ime { flex: 1; } .izv-kolone-radnje { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; } .izv-kolone-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px 12px; margin-bottom: 10px; } .izv-izbor-lista { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; } .izv-izbor-stavka { display: flex; align-items: center; gap: 6px; background: var(--traka-bg); border: 1px solid var(--ivica); border-radius: var(--radijus); padding: 2px 8px; } .izv-nivo { font-weight: 700; color: var(--tirkiz-tamni); } .izv-out-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; } .izv-out-hint { font-size: 12px; } .izv-head { margin-bottom: 8px; } .izv-firma { font-weight: 700; font-size: 14px; } .izv-naslov { font-weight: 600; font-size: 14px; color: var(--tirkiz-tamni); } .izv-meta { font-size: 11px; color: var(--tekst-slab); } .izv-table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--panel-bg); box-shadow: var(--senka); } .izv-table th, .izv-table td { border: 1px solid var(--ivica); padding: 3px 6px; text-align: left; white-space: nowrap; } .izv-table th { background: var(--tirkiz-svetli); color: var(--tirkiz-tamni); font-weight: 600; } .izv-table td.num, .izv-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .izv-table tr.izv-grp td { background: var(--povrsina-2); font-weight: 600; } .izv-table tr.izv-grp-1 td { background: var(--nivo-1); padding-left: 18px; } .izv-table tr.izv-grp-2 td { background: var(--nivo-2); padding-left: 30px; } .izv-table tr.izv-grp-3 td { background: var(--zebra); padding-left: 42px; } .izv-table tr.izv-suma td { background: var(--traka-bg); font-weight: 600; } .izv-table tr.izv-ukupno td { background: var(--traka-akcenat); color: var(--na-traci); font-weight: 700; } .izv-grp-count { color: var(--tekst-slab); font-weight: 400; } .izv-podnozje { margin-top: 8px; font-size: 12px; } /* Štampa: paginirane strane sa brojem strane (Strana X od Y). * izvestaji.js pakuje sadržaj u listove veličine A4 sadržaja — uspravno 186×263 mm, * položeno 273×186 mm — i svakom dodaje futer. Merenje ide u istim stilovima kao štampa, * pa prelom odgovara štampi. Na ekranu su listovi sakriveni (osim tokom .measuring). */ .print-pages { display: none; } .print-pages.measuring { display: block; position: absolute; left: -10000px; top: 0; width: 186mm; } .print-sheet { width: 186mm; box-sizing: border-box; background: #fff; color: #000; } .print-pages.measuring .print-sheet { min-height: 263mm; } /* Položena strana (ideja 12): isti mehanizam, druga mera lista. Širina/visina moraju biti usklađene sa `@page` marginama ispod i sa `IZV_LISTOVI` u `public/js/izvestaji.js`. */ .print-pages.polozeno.measuring { width: 273mm; } .print-pages.polozeno .print-sheet { width: 273mm; } .print-pages.polozeno.measuring .print-sheet { min-height: 186mm; } .ps-header { border-bottom: 1.5px solid #000; padding-bottom: 4px; margin-bottom: 8px; } .ps-firma { font-weight: 700; font-size: 13px; } .ps-naslov { font-weight: 600; font-size: 13px; } .ps-meta { font-size: 10px; color: #333; } .ps-footer { border-top: 0.75px solid #666; padding-top: 3px; margin-top: 8px; font-size: 10px; color: #333; display: flex; justify-content: space-between; } .ps-foot-r { font-weight: 600; } /* Tabela u štampi se PRILAGOĐAVA širini lista (ideja 12 — „štampa seče podatke"): * - `width: 100%` + `table-layout: fixed` drže je unutar lista, koliko god kolona bilo; * - `overflow-wrap: anywhere` prelama dug tekst umesto da ga gura preko ivice; * - `--izv-print-font` postavlja `izvestaji.js` posle merenja: koliko slovo mora da se * smanji da bi izabrane kolone stale (najmanje 7px, inače se ne bi moglo pročitati). * Bez ovoga je tabela šira od lista, a list ima `overflow: hidden` — pa se sadržaj seče. */ .print-pages .izv-table { box-shadow: none; width: 100%; table-layout: fixed; font-size: var(--izv-print-font, 11px); } .print-pages .izv-table th, .print-pages .izv-table td { overflow-wrap: anywhere; } .print-pages .izv-table th, .print-pages .izv-table td { border: 0.5px solid #999; padding: 2px 4px; } /* Merna kopija — širina koju bi tabela SAMA htela, da se izračuna potrebno smanjenje. */ .print-pages .izv-proba { position: absolute; visibility: hidden; width: auto; table-layout: auto; } .print-pages .izv-table th { background: #eee; color: #000; } .print-pages .izv-table tr.izv-grp td { background: #f0f0f0; } .print-pages .izv-table tr.izv-suma td { background: #eee; } .print-pages .izv-table tr.izv-ukupno td { background: #ddd; color: #000; } .print-pages .table-wrap { overflow: visible; box-shadow: none; max-height: none; } /* ---- Štampa (A4) ---- */ @media print { @page { size: A4 portrait; margin: 18mm 12mm 16mm; } /* Imenovana strana — jedini način da se orijentacija bira, jer `@page` ne sme da stoji pod selektorom. List je nosi preko `page: polozeno` (ideja 12). */ @page polozeno { size: A4 landscape; margin: 12mm; } body.print-paged #app { display: none !important; } body.print-paged .print-pages { display: block !important; } body.print-paged .print-sheet { height: 263mm; overflow: hidden; page-break-after: always; } body.print-paged .print-sheet:last-child { page-break-after: auto; } body.print-paged .print-pages.polozeno .print-sheet { page: polozeno; height: 186mm; } .app-header, .app-nav, .app-footer, .view-title, .view-msg, .izv-builder, .pager, .tbl-toolbar, .izv-out-toolbar, .version-banner { display: none !important; } html, body { background: #fff !important; color: #000; font-size: 12px; } #app { display: block; min-height: 0; } .app-main { padding: 0 !important; margin: 0 !important; max-width: none !important; } .izv-rezultat { margin: 0; } .table-wrap { overflow: visible !important; box-shadow: none !important; max-height: none !important; } .izv-table { box-shadow: none; } .izv-table th, .izv-table td { border: 0.5px solid #999; padding: 2px 5px; } .izv-table thead { display: table-header-group; } .izv-table tr { page-break-inside: avoid; } .izv-table tr.izv-ukupno td, .izv-table tr.izv-suma td { background: #eee !important; color: #000 !important; } .panel { box-shadow: none !important; border: none !important; padding: 0 !important; } .badge { border: 0.5px solid #999; padding: 0 3px; } }