/* ==================================================================================== NIT Software Solutions © 2026 — Sva prava zadržana. Projekat: NITErp Fajl: NITErp.Client/wwwroot/css/erp-grid.css Modul: UI / Grid Opis: Izgled Syncfusion gridova po UI standardu (faza 3). Gustinu vozi korisnikov izbor iz panela personalizacije — tokeni --row-py/--cell-px/--grid-fs iz erp-tema.css (atribut data-erp-gustina na ). Promena deluje ODMAH, bez ponovnog iscrtavanja: menja se vrednost promenljive, ne komponenta. ⚠️ RowHeight na SfGrid namerno NIJE korišćen: fiksira visinu reda pa seče ćelije sa dva reda teksta — padding iz tokena isti posao radi bez sečenja. Nastalo: 20.08.2026, faza 3 UI standarda. ==================================================================================== */ /* ------------------------------------------------------------------------------------ GUSTINA — redovi, zaglavlje kolona i filter red prate tokene. !important je nužan: Syncfusion tema piše padding direktno na iste selektore. Lokalni izuzeci (npr. .slajder-prava-pristupa u app.css) i dalje pobeđuju, jer se app.css učitava POSLE ovog fajla. ------------------------------------------------------------------------------------ */ .e-grid .e-rowcell, .e-treegrid .e-rowcell { padding: var(--row-py) var(--cell-px) !important; font-size: var(--grid-fs) !important; line-height: 1.4 !important; } .e-grid .e-headercell, .e-treegrid .e-headercell { padding-left: var(--cell-px) !important; padding-right: var(--cell-px) !important; } .e-grid .e-headercelldiv, .e-treegrid .e-headercelldiv { font-size: var(--grid-fs) !important; } /* Red sa filterima ispod zaglavlja — zbijen, da ne troši visinu reda i po. */ .e-grid .e-filterbarcell, .e-treegrid .e-filterbarcell { padding: 2px var(--cell-px) !important; } /* ------------------------------------------------------------------------------------ TELEFON — vertikalni (kartični) red (MojDataGrid postavlja RowRenderingMode=Vertical ispod 768px). Syncfusion tada naziv kolone upisuje u ćeliju kroz ::before (position:absolute, levo, širine 45%), a VREDNOST gura desno sa padding-left:55% (pravilo „…td[data-cell]" u bootstrap5.3 temi). Pravilo gustine iznad je taj padding gazilo svojim !important-om, pa su se naziv i vrednost ispisivali JEDNO PREKO DRUGOG — prijavljeno sa testiranja 21.08.2026. Ovde se leva rezerva vraća selektorom jačim od pravila gustine; gornji/donji padding i dalje vozi token gustine, pa personalizacija važi i na telefonu. ------------------------------------------------------------------------------------ */ .e-grid.e-row-responsive .e-gridcontent td.e-rowcell[data-cell], .e-treegrid.e-row-responsive .e-gridcontent td.e-rowcell[data-cell] { padding: var(--row-py) var(--cell-px) var(--row-py) 55% !important; position: relative; } /* ------------------------------------------------------------------------------------ SAKRIVEN FILTER RED (21.08.2026) — čisto vizuelno: modul filtriranja u gridu OSTAJE uključen (AllowFiltering se više ne gasi sa redom), inače se zapamćeni filteri pri ulasku u aplikaciju uopšte ne primene na upit — čip kaže jedno, spisak drugo. ------------------------------------------------------------------------------------ */ .erp-grid-bez-filterreda .e-grid .e-filterbar { display: none; } /* ------------------------------------------------------------------------------------ IMENOVANI POGLEDI — meni ispod ikonice obeleživača (21.08.2026). Otvaranje se vodi u C#-u, pa Bootstrap-ov popper ne pozicionira ništa: bez ovoga je meni iskakao van desne ivice ekrana (prijava sa testiranja 21.08). Sidri se uz DESNU ivicu dugmeta i raste ulevo; na uskim ekranima širinu ograničava viewport. ------------------------------------------------------------------------------------ */ .erp-pogledi { position: relative; display: inline-flex; } .erp-pogledi .erp-pogledi-meni { position: absolute; top: calc(100% + 4px); right: 0; left: auto; min-width: 270px; max-width: min(340px, calc(100vw - 24px)); } /* Brojač sačuvanih pogleda u uglu ikonice — isti jezik kao bedževi obaveštenja. */ .erp-pogledi .erp-pogledi-broj { position: absolute; top: -5px; right: -5px; min-width: 15px; padding: 1px 4px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 600; line-height: 13px; text-align: center; pointer-events: none; } /* ------------------------------------------------------------------------------------ BROJEVI — cifre iste širine, da kolone iznosa stoje u ravnini (standard §5). Desno poravnanje i dalje određuje kolona (TextAlign), ovde samo oblik cifara. ------------------------------------------------------------------------------------ */ .e-grid .e-rowcell, .e-treegrid .e-rowcell { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------------------------ ZAGLAVLJE GRIDA (varijanta A + statusni pogledi, 20.08.2026) — zamena za Syncfusion toolbar: naslov + broj levo, pogledi u sredini, alati kao ikonice, „Novo" naglašeno. ------------------------------------------------------------------------------------ */ .erp-grid-zaglavlje { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; flex-wrap: wrap; } .erp-grid-naslov { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .erp-grid-naslov b { font-size: 13.5px; white-space: nowrap; } .erp-grid-naslov small { color: var(--muted); font-size: 11.5px; white-space: nowrap; } /* Statusni pogledi i pill prekidači (mockup v2 .pill): aktivan je PUN akcenat, da se ne utapa u grid. Iste klase (.erp-pil-grupa/.erp-pil) koriste i prekidači u FilterTraci — jedan izgled za sve prekidače. */ .erp-grid-pogledi, .erp-pil-grupa { display: inline-flex; gap: 6px; flex-wrap: wrap; } .erp-grid-pogledi button, .erp-pil { border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; padding: 4px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: all .12s ease; } .erp-grid-pogledi button:hover, .erp-pil:hover { color: var(--primary); border-color: var(--primary); } .erp-grid-pogledi button.on, .erp-pil.on { background: var(--primary); border-color: var(--primary); color: #fff; } .erp-grid-alati { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .erp-grid-trazi { position: relative; display: inline-flex; align-items: center; } .erp-grid-trazi i { position: absolute; left: 8px; color: var(--muted); font-size: 12px; pointer-events: none; } .erp-grid-trazi input { height: calc(var(--ctrl-h) - 4px); border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 12px; padding: 0 8px 0 26px; width: 170px; outline: none; } .erp-grid-trazi input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); } /* Ikonica-dugme u zaglavlju grida. */ .erp-grid-ikb { width: calc(var(--ctrl-h) - 4px); height: calc(var(--ctrl-h) - 4px); display: grid; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 13px; padding: 0; } .erp-grid-ikb:hover { color: var(--primary); border-color: var(--primary); } .erp-grid-ikb.on { color: var(--primary); background: var(--primary-soft); border-color: transparent; } /* Jedino naglašeno dugme. */ .erp-grid-novo { display: inline-flex; align-items: center; gap: 6px; height: calc(var(--ctrl-h) - 4px); padding: 0 12px; border: 0; border-radius: 7px; background: var(--primary); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .erp-grid-novo:hover { background: var(--primary-hover); } /* Grid se vizuelno nastavlja na zaglavlje. */ .erp-grid-zaglavlje + .e-grid, .erp-grid-filtri + .e-grid { border-top-left-radius: 0; border-top-right-radius: 0; } /* Traka filtera stranice — drugi red zaglavlja, isto mesto na svim listama. */ .erp-grid-filtri { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-top: 1px dashed var(--border); border-bottom: 0; } .erp-grid-filtri .form-label { margin-bottom: 2px; } /* ------------------------------------------------------------------------------------ AKCIJE REDA NA HOVER (varijanta C) — nevidljive dok se ne pređe mišem preko reda. ------------------------------------------------------------------------------------ */ .erp-red-akcije { display: inline-flex; gap: 4px; opacity: 0; transition: opacity .12s ease; } .e-grid .e-row:hover .erp-red-akcije { opacity: 1; } .erp-red-akcije button { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 12px; padding: 0; } .erp-red-akcije button:hover { color: var(--primary); border-color: var(--primary); } .erp-red-akcije button.opasno:hover { color: var(--err); border-color: var(--err); background: var(--err-soft); } /* ------------------------------------------------------------------------------------ PILL BEDŽ SA TAČKOM (standard §5, mockup v2) — statusi i enumi u gridu. Boja iz tokena statusa, pa bedž prati temu i tamni režim; tačka je currentColor. Klasu bira ErpBedz.Klasa (Helpers) iz Bootstrap oznake sa DTO-a. ------------------------------------------------------------------------------------ */ .erp-bedz { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 9px; font-size: calc(var(--grid-fs) - 1px); font-weight: 600; line-height: 1.5; white-space: nowrap; } .erp-bedz::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .erp-bedz-ok { background: var(--ok-soft); color: var(--ok); } .erp-bedz-warn { background: var(--warn-soft); color: var(--warn); } .erp-bedz-err { background: var(--err-soft); color: var(--err); } .erp-bedz-info { background: var(--info-soft); color: var(--info); } .erp-bedz-primary { background: var(--primary-soft); color: var(--primary-soft-text); } .erp-bedz-neutral { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); } /* ------------------------------------------------------------------------------------ FILTER-ČIPOVI (standard §5, mockup v2) — aktivni filteri iznad grida, isprekidana ivica, X za uklanjanje. Crta ih MojDataGrid kad ima aktivnih filtera. ------------------------------------------------------------------------------------ */ .erp-filter-cipovi { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; } .erp-filter-cipovi-naslov { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: calc(var(--grid-fs) - .5px); font-weight: 600; } .erp-filter-cip { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--border-strong); background: var(--surface); color: var(--text); border-radius: 999px; padding: 2px 6px 2px 11px; font-size: calc(var(--grid-fs) - .5px); white-space: nowrap; } .erp-filter-cip b { font-weight: 600; color: var(--muted); } .erp-filter-cip .x { border: 0; background: transparent; color: var(--muted); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; } .erp-filter-cip .x:hover { color: var(--err); background: var(--err-soft); } /* Dugme „Ukloni sve" — isti oblik, malo naglašenije. */ .erp-filter-cip-sve { cursor: pointer; color: var(--primary); border-style: dashed; padding: 2px 11px; font-weight: 600; } .erp-filter-cip-sve:hover { border-color: var(--primary); } /* ------------------------------------------------------------------------------------ DOK-PANEL PREGLEDA (standard §5, mockup v2) — detalji izabranog reda desno od grida. Zatvoren zauzima 0 širine; otvoren klizi na 330px i gura grid, ne prekriva ga. ------------------------------------------------------------------------------------ */ .erp-dok-raspored { display: flex; align-items: stretch; min-width: 0; } .erp-dok-raspored .erp-dok-grid { flex: 1; min-width: 0; } .erp-dok { width: 0; min-width: 0; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; transition: width .18s ease, min-width .18s ease; border: 0 solid var(--border); border-radius: var(--radius); align-self: flex-start; max-height: 100%; } .erp-dok.otvoren { width: 330px; min-width: 330px; margin-left: 10px; border-width: 1px; box-shadow: var(--shadow-sm); } /* Panel sa LEVE strane grida (maketa FT3, filteri spiska). Redosled u DOM-u odlucuje ko je levo; ovde se samo okrece razmak, da ne ostane praznina sa pogresne strane. */ .erp-dok.levo.otvoren { margin-left: 0; margin-right: 10px; } /* ---- Sklopljen panel koji ostaje uz ivicu kao uska traka (FT3, izbor vlasnika 06.09) ---- Panel filtera nema okidac koji bi ga vratio (dok-panel pregleda ima izbor reda), pa zatvoren ne sme da nestane bez traga. */ .erp-dok.traka { width: 44px; min-width: 44px; overflow: visible; border-width: 1px; align-items: center; gap: 9px; padding: 10px 0; box-shadow: var(--shadow-sm); } .erp-dok.traka.levo { margin-right: 10px; } .erp-dok.traka .tr-kv { width: 28px; height: 28px; border: 0; border-radius: 8px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-soft-text); font-size: 13px; cursor: pointer; } .erp-dok.traka .tr-broj { font-size: 9.6px; font-weight: 800; background: var(--primary); color: var(--surface); border-radius: 999px; padding: 0 5px; } /* Uspravan natpis — traka je uska, a bez imena je samo ikonica koja nista ne obecava. */ .erp-dok.traka .tr-natpis { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .erp-dok .dok-h { padding: 11px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 9px; } .erp-dok .dok-h .ik { width: 32px; height: 32px; min-width: 32px; border-radius: 9px; background: var(--primary-soft); color: var(--primary-soft-text); display: grid; place-items: center; font-size: 14px; } .erp-dok .dok-h .dok-naslovi { min-width: 0; } .erp-dok .dok-h .dok-naslovi b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .erp-dok .dok-h .dok-naslovi small { color: var(--muted); font-size: 11px; } .erp-dok .dok-h .alat { margin-left: auto; display: flex; gap: 5px; } .erp-dok .dok-h .alat button { border: 1px solid var(--border); background: var(--surface); color: var(--muted); width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 11px; display: grid; place-items: center; } .erp-dok .dok-h .alat button.pin.on { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); } .erp-dok .dok-telo { flex: 1; overflow-y: auto; padding: 10px 14px; } .erp-dok .dok-foot { border-top: 1px solid var(--border); padding: 10px 14px; display: flex; gap: 8px; } /* Red podatka u podrazumevanom sadržaju: labela levo, vrednost desno. */ .erp-dok .dok-red { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: var(--grid-fs); } .erp-dok .dok-red:last-child { border-bottom: 0; } .erp-dok .dok-labela { color: var(--muted); font-size: calc(var(--grid-fs) - 1px); white-space: nowrap; } .erp-dok .dok-vrednost { text-align: right; word-break: break-word; font-variant-numeric: tabular-nums; } .erp-dok .dok-prazno { color: var(--muted); font-size: var(--grid-fs); margin: 8px 0; } /* Na telefonu panel ne staje pored tabele — mobilni pregled rešava faza sa karticama. */ @media (max-width: 767.98px) { .erp-dok.otvoren { display: none; } } /* ------------------------------------------------------------------------------------ PAGINACIJA — visina ☠️ Vlasnik 10.09.2026: „jedina stvar koja mi bode oči je ova prevelika visina od MojDataGrida za paginaciju". Syncfusion podnožju daje visinu za dodir (48 px reda + dugmad 32 px + razmaci), a ceo ostatak grida vozi našu gustinu iz `--row-py`. Na ekranu dokumenta, koji je zakovan za visinu prozora, ta traka jede prostor tabeli — dakle ono jedino što tu sme da raste. ⚠️ Vrednosti su vezane za `--row-py`, a ne fiksne: gustina „kompaktno / udobno" iz panela personalizacije mora da vozi i paginaciju, inače se u udobnom režimu podnožje stisne uz redove koji su porasli. ⛔ `!important` je nužan iz istog razloga kao gore: Syncfusion tema piše iste selektore. ------------------------------------------------------------------------------------ */ /* ☠️ IZBOR BROJA REDOVA PO STRANI JE PADAO U DRUGI RED (vlasnik 10.09.2026: „štrči mi ovaj broj po stranici"). Syncfusion ga postavlja apsolutno, računajući na podnožje visoko za dodir; kad je podnožje snižено, za njega nije ostalo mesta pa je ispao ispod dugmadi i traka je opet bila u dva reda — dakle popravka koja vraća isti problem na druga vrata. ⚠️ Zato podnožje postaje običan REDNI raspored (flex): dugmad, izbor broja redova i natpis stoje u istoj liniji i sami se poravnaju, bez ijedne računate pozicije. */ .e-grid .e-gridpager { display: flex !important; align-items: center; gap: 4px; padding: calc(var(--row-py) + 1px) 8px !important; min-height: 0 !important; } .e-grid .e-gridpager .e-pagercontainer { margin: 0 !important; min-height: 0 !important; } /* Brojevi strana i strelice: kvadratić umesto dugmeta za dodir. */ .e-grid .e-gridpager .e-numericitem, .e-grid .e-gridpager .e-icons { height: 22px !important; min-height: 22px !important; line-height: 22px !important; padding: 0 6px !important; font-size: calc(var(--grid-fs) - .5px) !important; } /* „1 od 1 stranica (2 stavki)" i izbor veličine strane. */ .e-grid .e-gridpager .e-parentmsgbar { padding: 0 !important; margin: 0 !important; font-size: calc(var(--grid-fs) - .5px) !important; } /* ⛔ `position: static` je ovde ključ: Syncfusion ga drži apsolutno pozicioniranim. */ .e-grid .e-gridpager .e-pagerdropdown { position: static !important; top: auto !important; left: auto !important; right: auto !important; height: 24px !important; margin: 0 4px !important; display: flex !important; align-items: center; } .e-grid .e-gridpager .e-pagesizes .e-input-group, .e-grid .e-gridpager .e-pagerdropdown .e-input-group { height: 24px !important; min-height: 24px !important; margin: 0 !important; } .e-grid .e-gridpager .e-pagerdropdown .e-input-group input { height: 22px !important; line-height: 22px !important; font-size: calc(var(--grid-fs) - .5px) !important; } .e-grid .e-gridpager .e-pagerconstant { position: static !important; margin: 0 4px !important; } /* ☠️ REDOSLED SE MORA ZADATI (vlasnik 10.09.2026: „sada štrči na desnoj strani"). U DOM-u izbor broja redova stoji POSLE natpisa, a natpis gura sve do desne ivice — pa je izbor završio zalepljen skroz desno, preko ivice. Dok je bio apsolutno pozicioniran to se nije videlo; čim je ušao u red, videlo se gde zaista stoji. ⚠️ `order` je jedini način da se to ispravi bez diranja Syncfusion markupa: dugmad, pa izbor broja redova uz njih (tu se i gleda), pa natpis koji jedini ide na desnu ivicu. */ .e-grid .e-gridpager .e-pagercontainer { order: 1; flex: none; } /* ☠️ PRAVI KRIVAC ZA VISINU (izmereno u pregledaču 10.09.2026, dok je vlasnik gledao): omotač `.e-pagesizes` je bio visok 45 px iako mu je sadržaj 24 px — Syncfusion mu zadaje visinu za dodir. Podnožje je zbog njega ostajalo 58 px ma koliko se stezalo sve ostalo, a i izbor je zbog te razlike plivao gore-dole. Sa ovim je podnožje 38 px. ⚠️ `order: 2` stoji OVDE, na omotaču — dete (`.e-pagerdropdown`) nije direktan potomak podnožja, pa njegov `order` ne znači ništa. To je i bio razlog zašto je izbor i dalje bežao na kraj reda. */ .e-grid .e-gridpager .e-pagesizes { order: 2; flex: none; display: flex !important; align-items: center; height: 24px !important; min-height: 0 !important; } .e-grid .e-gridpager .e-pagerdropdown { flex: none; align-self: center; } .e-grid .e-gridpager .e-pagerconstant { order: 3; flex: none; align-self: center; } /* Natpis „1 od 1 stranica (2 stavki)" ide na desnu ivicu, kao i do sada. */ .e-grid .e-gridpager .e-parentmsgbar { order: 4; flex: none; align-self: center; margin-left: auto !important; }