/* ===================================================================== ETIRIS Back-Office — bijelo + zelena (odluka vlasnika, 26.08.2026.). Cisto bijela podloga; Etiris zelena #3F846D kao jedini akcent — i identitet i radnja. Neutrali nisu sivi nego blago zeleno tonirani, pa se bijelo ne ledi. Moderni detalji: punjena polja koja se na fokus izbijele uz mekani zeleni prsten, pilula-bedzevi, kartice s jedva vidljivom sjenom umjesto teskih rubova, mikro-labele s razmakom. Tamno-zeleni sidebar ostaje — vlasnik ga je potvrdio. ===================================================================== */ :root { color-scheme: light; /* Admiro tema (admin.pixelstrap.net/admiro) — vlasnikov izbor 26.08.2026. Tacne vrijednosti iz njihovog CSS-a: --theme-default #308E87 (teal), --theme-secondary #F39159 (narandzasta), tekst #2F2F3B. Bijeli sidebar, soft-teal aktivna stavka, pastelni cipovi, meke kartice. */ --et-bg: #F6F8F9; --et-surface: #FFFFFF; --et-surface-alt: #F2F5F6; --et-border: #E8ECEF; --et-input-bg: #F5F7F8; --et-input-border: #DCE2E6; --et-accent: #308E87; --et-accent-dark: #27756F; --et-accent-glow: #3FA89F; --et-accent-soft: #E3F1F0; --et-accent-soft-fg: #1E5B56; --et-secondary: #F39159; --et-secondary-soft: #FDEEE4; --et-secondary-soft-fg: #B05A28; --et-success: #198754; --et-danger: #DC3545; --et-warning: #D39E00; --et-text: #2F2F3B; --et-muted: #6C757D; --et-faint: #9AA3AB; --et-nav-fg: #565F66; --et-radius: 15px; --et-radius-sm: 10px; --et-gradient: linear-gradient(135deg, #308E87, #3FA89F); --et-shadow: 0 2px 6px rgba(47, 47, 59, .04); --et-shadow-soft: 0 9px 20px rgba(48, 142, 135, .18); /* Tinta koja sjedi NA accent-soft podlozi (bedzevi/alerti/pilule uspjeha). U svijetloj temi doslovno ista vrijednost kao --et-accent-dark. */ --et-on-accent-soft: #27756F; /* Pastelni statusni parovi (podloga + tinta) — dosad rasuti kao goli heksovi po bedzevima, alertima i pilulama; sada imenovani, da tamna tema može zamijeniti cijeli par a svijetla ostane piksel-ista. */ --et-danger-soft: #FBEAE8; --et-danger-soft-fg: #A32F24; --et-warning-soft: #FBF0DE; --et-warning-soft-fg: #8F5206; --et-info-soft: #E6EFF8; --et-info-soft-fg: #1C4E80; /* Statusni čipovi recepcije (zeleno/žuto/crveno iz Tailwind palete koju su stranice Plan soba i Boravci već koristile). */ --et-chip-green-bg: #dcfce7; --et-chip-green-fg: #15803d; --et-chip-amber-bg: #fef3c7; --et-chip-amber-fg: #b45309; --et-chip-red-bg: #fee2e2; --et-chip-red-fg: #b91c1c; /* Žuta bilješka (napomena boravka) i tanke linije unutar tabela. */ --et-note-bg: #fefce8; --et-note-border: #fde68a; --et-table-line: #EFF3F0; --et-split-virman: #CBD5DB; /* Plan soba (tape chart) — pet ispuna trake i ništa više, po specifikaciji docs/reports/2026-09-09-plan-soba-dizajn.md. Ispuna nosi SAMO stanje boravka; novac je narandžasti ugao (--et-plan-neplaceno), a stanje sobe je tačka uz broj sobe (--et-plan-soba-*). Iste vrijednosti idu i na kasu, da se dvije površine više ne razilaze u bojama. */ --et-plan-upit-bg: #FDF4E3; --et-plan-upit-fg: #8F5206; --et-plan-upit-line: #D39E00; --et-plan-potvrdjeno-bg: #308E87; --et-plan-potvrdjeno-fg: #FFFFFF; --et-plan-ukuci-bg: #1B6E45; --et-plan-ukuci-fg: #FFFFFF; --et-plan-zavrseno-bg: #E4E9EC; --et-plan-zavrseno-fg: #5B676F; --et-plan-blokada-bg: #EEF2F4; --et-plan-blokada-fg: #5B676F; --et-plan-blokada-line: #B9C3C9; --et-plan-neplaceno: #F39159; --et-plan-danas: #308E87; --et-plan-danas-fg: #FFFFFF; --et-plan-soba-spremna: #1B6E45; --et-plan-soba-prljava: #B91C1C; --et-plan-soba-ciscenje: #B45309; --et-plan-soba-van-pogona: #6C757D; } /* ===================================================================== Tamna tema — slate familija. Aktivira se atributom data-bs-theme="dark" na (postavlja ga inline skripta u App.razor prije prvog crtanja). Akcent ostaje brend-zelena; sve neutralno prelazi u slate. ===================================================================== */ [data-bs-theme="dark"] { color-scheme: dark; --et-bg: #0F172A; --et-surface: #1E293B; --et-surface-alt: #283548; --et-border: #334155; --et-input-bg: #283548; --et-input-border: #3E4E66; --et-accent-soft: #1D3A37; --et-accent-soft-fg: #7FD1C8; --et-on-accent-soft: #7FD1C8; --et-secondary-soft: #3B2A1D; --et-secondary-soft-fg: #F0A878; --et-text: #E2E8F0; --et-muted: #94A3B8; --et-faint: #64748B; --et-nav-fg: #A6B2C1; --et-shadow: 0 2px 6px rgba(0, 0, 0, .35); --et-shadow-soft: 0 9px 20px rgba(0, 0, 0, .45); --et-danger-soft: #3D2226; --et-danger-soft-fg: #F1948C; --et-warning-soft: #3A2F14; --et-warning-soft-fg: #E8B84B; --et-info-soft: #1D3049; --et-info-soft-fg: #8FBFEA; --et-chip-green-bg: #17362A; --et-chip-green-fg: #5FD695; --et-chip-amber-bg: #3A2F14; --et-chip-amber-fg: #E8B84B; --et-chip-red-bg: #3D2226; --et-chip-red-fg: #F1948C; --et-note-bg: #33301A; --et-note-border: #57501F; --et-table-line: #2C3A4F; --et-split-virman: #475569; /* Plan soba u tamnoj temi: ispune su svjetlije a tinta tamna — puna zasićena boja na slate podlozi gubi kontrast prema bijelom slovu. Ugao za novac i tačke stanja sobe idu na svjetlije parnjake iz iste familije kao čipovi. */ --et-plan-upit-bg: #3A2F14; --et-plan-upit-fg: #E8B84B; --et-plan-upit-line: #E8B84B; --et-plan-potvrdjeno-bg: #3FA89F; --et-plan-potvrdjeno-fg: #06231F; --et-plan-ukuci-bg: #5FD695; --et-plan-ukuci-fg: #052117; --et-plan-zavrseno-bg: #33415A; --et-plan-zavrseno-fg: #A6B2C1; --et-plan-blokada-bg: #253044; --et-plan-blokada-fg: #94A3B8; --et-plan-blokada-line: #46566E; --et-plan-neplaceno: #F0A878; --et-plan-danas: #3FA89F; --et-plan-danas-fg: #06231F; --et-plan-soba-spremna: #5FD695; --et-plan-soba-prljava: #F1948C; --et-plan-soba-ciscenje: #E8B84B; --et-plan-soba-van-pogona: #94A3B8; /* Bootstrapove vlastite tamne vrijednosti poravnate na istu slate skalu, da native 5.3 komponente (tabele, forme, btn-close…) sjednu uz našu paletu. */ --bs-body-bg: #0F172A; --bs-body-bg-rgb: 15, 23, 42; --bs-body-color: #E2E8F0; --bs-body-color-rgb: 226, 232, 240; --bs-emphasis-color: #F1F5F9; --bs-emphasis-color-rgb: 241, 245, 249; --bs-secondary-color: #94A3B8; --bs-secondary-color-rgb: 148, 163, 184; --bs-secondary-bg: #1E293B; --bs-secondary-bg-rgb: 30, 41, 59; --bs-tertiary-color: rgba(148, 163, 184, .5); --bs-tertiary-bg: #283548; --bs-tertiary-bg-rgb: 40, 53, 72; --bs-border-color: #334155; --bs-border-color-translucent: rgba(255, 255, 255, .12); --bs-heading-color: #F1F5F9; --bs-link-color: #3FA89F; --bs-link-hover-color: #5BBFB6; } html, body { font-family: 'Rubik', 'Segoe UI', system-ui, sans-serif; background: var(--et-bg); color: var(--et-text); } /* ---- dugmad: zelena, 600, s mikro-tranzicijom ---- */ .btn { border-radius: var(--et-radius-sm); font-weight: 600; transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease; } .btn-primary { color: #fff; background-color: var(--et-accent); border-color: var(--et-accent); box-shadow: 0 1px 2px rgba(48, 142, 135, .3); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--et-accent-dark) !important; border-color: var(--et-accent-dark) !important; box-shadow: 0 2px 6px rgba(48, 142, 135, .35); } .btn-success { background-color: var(--et-success); border-color: var(--et-success); } .btn-success:hover { background-color: #15803D; border-color: #15803D; } .btn-danger { background-color: var(--et-danger); border-color: var(--et-danger); } .btn-outline-primary { color: var(--et-accent); border-color: var(--et-input-border); } .btn-outline-primary:hover { background-color: var(--et-accent-soft); border-color: var(--et-accent); color: var(--et-on-accent-soft); } .btn-outline-secondary { color: var(--et-muted); border-color: var(--et-input-border); } .btn-outline-secondary:hover { background-color: var(--et-surface-alt); border-color: var(--et-input-border); color: var(--et-text); } /* btn-outline-dark Bootstrap 5.3 NE mijenja u tamnoj temi — i tinta i rub ostanu #212529, pa je dugme „− platforma" (Korisnici) bilo crno na slate podlozi, dakle nevidljivo. Vezano na token teksta: u svijetloj temi i dalje najtamnije od outline dugmadi, u tamnoj najsvjetlije — u oba slučaja jače od btn-outline-secondary, što je i bila poenta. */ .btn-outline-dark { --bs-btn-color: var(--et-text); --bs-btn-border-color: var(--et-text); --bs-btn-hover-color: var(--et-surface); --bs-btn-hover-bg: var(--et-text); --bs-btn-hover-border-color: var(--et-text); --bs-btn-active-color: var(--et-surface); --bs-btn-active-bg: var(--et-text); --bs-btn-active-border-color: var(--et-text); --bs-btn-disabled-color: var(--et-muted); --bs-btn-disabled-border-color: var(--et-input-border); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--et-accent); box-shadow: 0 0 0 4px rgba(48, 142, 135, .16); } a, .btn-link { color: var(--et-accent); text-underline-offset: 2px; } a:hover, .btn-link:hover { color: var(--et-accent-dark); } /* Na tamnoj podlozi linkovi idu na svjetliju nijansu akcenta — tamnozeleni hover bi se utopio u pozadinu. */ [data-bs-theme="dark"] a, [data-bs-theme="dark"] .btn-link { color: var(--et-accent-glow); } [data-bs-theme="dark"] a:hover, [data-bs-theme="dark"] .btn-link:hover { color: #5BBFB6; } /* Naslijeđeni placeholder (#64748B) na slate polju pada ispod čitljivog — muted nijansa. */ [data-bs-theme="dark"] .form-control::placeholder { color: var(--et-muted); } /* ---- kartice: sjena umjesto teskog ruba ---- */ /* Bootstrap 5.3 karticu boji preko --bs-card-bg (podrazumijevano = body bg); vežemo je na našu površinu — u svijetloj temi identično bijeloj, u tamnoj slate. */ .card { --bs-card-bg: var(--et-surface); border: 1px solid var(--et-border); border-radius: var(--et-radius); box-shadow: var(--et-shadow); } .modal-content { background-color: var(--et-surface); } .dropdown-menu { --bs-dropdown-bg: var(--et-surface); } .list-group { --bs-list-group-bg: var(--et-surface); } .card-header { background: var(--et-surface); border-bottom: 1px solid var(--et-border); font-weight: 600; color: var(--et-text); border-radius: var(--et-radius) var(--et-radius) 0 0 !important; } /* ---- tabele: mikro-naslovi, tihi hover ---- */ /* Bootstrap 5.3 ćelije boji NEPROZIRNO preko --bs-table-bg (5.1 ih je ostavljao prozirnim). Vraćamo prozirnost, pa redovna pravila na (hover, table-active, table-light ispod) opet vrijede — i podloga kartice se vidi kroz tabelu kao prije. */ .table { --bs-table-bg: transparent; --bs-table-color: var(--et-text); --bs-table-hover-bg: var(--et-surface-alt); --bs-table-hover-color: var(--et-text); --bs-table-active-bg: var(--et-accent-soft); --bs-table-active-color: var(--et-text); color: var(--et-text); } .table thead th { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--et-faint); border-bottom: 1px solid var(--et-border); } .table > :not(caption) > * > * { padding: .6rem .75rem; } .table td, .table th { border-color: var(--et-table-line); } .table td { font-variant-numeric: tabular-nums; } .table-hover tbody tr:hover { background-color: var(--et-surface-alt); } .table-active, .table-active > td { background-color: var(--et-accent-soft) !important; } .table-light, .table-light > td { background-color: var(--et-surface-alt); color: var(--et-muted); } /* 5.3 varijanta table-light nosi vlastite (svijetle) --bs-table-* boje i tamnu tintu; preusmjereno na paletu da red ne ostane bijel u tamnoj temi. */ .table-light { --bs-table-bg: var(--et-surface-alt); --bs-table-color: var(--et-muted); --bs-table-border-color: var(--et-table-line); } /* Isti problem kao kod table-light: Bootstrap za table-danger drži #f8d7da podlogu i crnu tintu i u tamnoj temi, pa je red „prekoračen rok" (Potraživanja) svijetloroza traka usred slate tabele. Na pastelni par koji obje teme već imaju. */ .table-danger { --bs-table-bg: var(--et-danger-soft); --bs-table-color: var(--et-danger-soft-fg); --bs-table-border-color: var(--et-table-line); --bs-table-hover-bg: var(--et-danger-soft); --bs-table-hover-color: var(--et-danger-soft-fg); } /* ---- širina tabela s podacima ---- */ /* Vlasnik, 10.09.2026., uz snimak: „raspored mora zauzimati čitavu širinu ekrana da se prilagođava po dimenzijama ekrana, logično." Rekao je to za plan soba, ali isto je stajalo na 24 tabele izvještaja: svaka je nosila zakucan max-width u pikselima (360–960px). „Po danima" je na 1920 ostavljala 1094px prazno desno, a zaglavlja „Prometa po konobaru" su se pritom lomila u dva reda — praznina i tijesno u istoj tabeli. Odgovor je dvodijelan i oba dijela stoje na jednom mjestu, umjesto 24 inline stila: 1) Puna širina + klizač: omotač
. To je Bootstrapov vlastiti razred (display:block; overflow-x:auto) i već ga koriste Home i Kanali. Tabela unutra ostaje width:100%, pa popuni omotač kad stane, a kad joj min-content prijeđe raspoloživo — klizač. Tako nijedna kolona ne može tiho ispasti izvan kartice. 2) Izuzetak za sitne rekapitulacije: .tabela-usko. Tabela od dvije-tri kolone razvučena preko 1600px izgleda praznije nego prije, a ne punije — datum i dva broja razmaknuti na po pola metra. Domet je u ch, dakle u širini cifre: prati veličinu slova i zumiranje, a ne piksele ekrana. Razred se dodaje UZ table-responsive, pa i takva tabela zadrži klizač. Ide samo na tabele s dvije kolone i na one s tri koje stoje u punoj širini stranice — tabela koja već sjedi u col-* koloni ograničena je svojom kolonom i mora je popuniti. */ .tabela-usko > .table { max-width: 56ch; } /* ===================================================================== TABELE KAD SE PROZOR SUZI (01.10.2026.) — jedno mjesto za sve tabele Vlasnik, uz snimak ekrana: „aj pregledaj sve ove tabele napravi ih da su responsive — kad smanjim ekran sve se pomjeri i usere." ŠTA SE ZAPRAVO DEŠAVALO. Vlasnik radi u Chromeu na suženom prozoru laptopa, oko 950–1000 px. Sidebar uzme 250 px, članak još 56 px razmaka (MainLayout.razor.css), pa tabeli ostane oko 690 px. Tabela od osam kolona se u 690 px ne SKUPI — ona se PRELOMI: „PDV 17 (17%)" padne u tri reda, značka „Neaktivan" sklizne ispod imena, red naraste na tri visine. Spisak od dvadeset artikala postane spisak od šezdeset redova. ODLUKA: tabela se ne lomi. Ili klizi, ili se (na telefonu) raspadne u kartice. Tri pojasa: 1) Ima mjesta — ništa se ne mijenja. Tabela je width:100%, kao i do sada. 2) Nema mjesta — tabela KLIZI u svom omotaču. Ćelije koje se ne smiju prelomiti (brojevi, datumi, značke, dugmad, kratka zaglavlja) drže se u jednom redu, a na ivici se pojavi sjena koja kaže da ima još desno. 3) Ispod 641 px (telefon) — red postane kartica: zaglavlje se sakrije, a svaka ćelija ispiše svoj naslov uz podatak. ZAŠTO SAMO JEDAN @media UPIT, A NE TRI. Medijski upit mjeri PROZOR, a tabela živi u članku koji je 306 px uži od prozora (250 sidebar + 56 razmak), pa još i u koloni (col-lg-7 ≈ 58 % od toga). Upit „do 992 px" promašio bi baš ono što vlasnik gleda: na prozoru od 1000 px tabeli je već tijesno, a upit se ne bi upalio. Zato pojas 2 NEMA upit — nosi ga `overflow-x:auto` omotača, koji se sam upali tačno kad tabela ne stane, ma koliki prozor bio. Isto pravilo čuva i pojas 1: kad mjesta ima, nema ni klizanja ni sjene, pa se na punom ekranu vizuelno ne mijenja ništa. Jedini stvarni prekid je 641 px, i to je isti prekid koji MainLayout.razor.css već koristi — ispod njega sidebar prestaje biti kolona, pa je i tabela sama na ekranu. UGOVOR — ovo se piše u stranicama, ništa drugo: omotač
oko SVAKE tabele tabela donja širina tabele tabela-klizi podrazumijevano (tabela preko cijele stranice) tabela-klizi-uska OBAVEZNO za tabelu u col-* koloni (col-lg-5 … col-lg-9) i za 3–4 uske kolone: pod od 44 rem bi u koloni tjerao klizanje i kad bi sadržaj stao (col-lg-5 na 1366 px ima 434 px, col-lg-8 oko 700 px — izmjereno 01.10.2026.) tabela-klizi-siroka sedam i više širokih kolona, preko cijele stranice tabela-kartice dozvoli raspad u kartice ispod 641 px (bira se TAČNO JEDNA od tri `tabela-klizi*`; čuvar: TabeleNaUskomEkranuTests) ćelija klasa ide I NA u petlji sa širinama u rem i pod tabele = zbir tih širina — vidi „GRUPISANE TABELE" ispod. Ako ti za neku tabelu zatreba izuzetak, napiši ga ovdje i reci zašto — ne u stranici. ===================================================================== */ /* Podloga ispod tabele. Koriste je sjena klizanja (odmah ispod) i zalijepljena kolona radnji: pokrivači i ćelija moraju biti iste boje kao ono na čemu tabela stoji, inače ostave svijetlu mrlju na ivici. Zato se nasljeđuje — tabela u kartici dobije boju kartice, tabela na goloj stranici boju stranice — i nijedna stranica ne mora ništa dopisivati. .stay-card je vlastita kartica Boravaka (Boravci.razor.css): njena podloga se kaže OVDJE, a ne tamo, da sloj ostane na jednom mjestu. Sjena u svijetloj temi je .32, ne .16 kao prvog dana: na snimku ispita od 01.10.2026. se na bijeloj kartici jedva vidjela. */ :root { --et-tabela-pod: var(--et-bg); --et-tabela-sjena: rgba(47, 47, 59, .32); } .card, .modal-content, .stay-card { --et-tabela-pod: var(--et-surface); } [data-bs-theme="dark"] { --et-tabela-sjena: rgba(0, 0, 0, .6); } /* Znak da desno ima još. Na Macu je klizač nevidljiv dok se ne pomjeri, pa bez ovoga čovjek ne zna da kolona „Vrijednost" uopšte postoji. Četiri sloja, bez ijedne linije JavaScripta. Dva unutrašnja (`local`) klize ZAJEDNO sa sadržajem i to su pokrivači u boji podloge; dva vanjska (`scroll`) stoje prikovana uz lijevu i desnu ivicu okvira i to su sjene. Kad se tabela dokliza do kraja, pokrivač dođe tačno preko sjene i sjena nestane. Kad nema šta da se kliza, oba pokrivača stoje preko obje sjene — zato se na širokom ekranu ne vidi baš ništa i pojas 1 ostaje nedirnut. */ .table-responsive { background-image: linear-gradient(to right, var(--et-tabela-pod) 70%, transparent), linear-gradient(to left, var(--et-tabela-pod) 70%, transparent), linear-gradient(to right, var(--et-tabela-sjena), transparent), linear-gradient(to left, var(--et-tabela-sjena), transparent); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 28px 100%, 28px 100%, 16px 100%, 16px 100%; background-attachment: local, local, scroll, scroll; } /* ---- dugmad uvijek pri ruci: kolona radnji zalijepljena uz desni rub ---- Izmjereno 01.10.2026. prije ovoga (ispit s pravim app.css i Bootstrapom): Artikli u col-lg-5 na 1366 px — omotač 434 px, tabela 799 px, „Uredi" 353 px iza desnog ruba; na 1920 px još uvijek 122 px iza ruba. Računi u col-lg-7 na 1440 px: „Detalji" 235 px iza ruba. Uža donja širina tu ne pomaže (iste brojke s tabela-klizi-uska) — tabelu širi sadržaj koji se ne smije lomiti, i to je namjerno. Zato se kolona s dugmadima lijepi uz desni rub omotača i vidi se ma koliko tabela klizila. Ćelija mora biti NEPROZIRNA, inače se kroz nju vidi sadržaj koji prolazi ispod; boja je podloga tabele (ista kao oko nje, pa se na širokom ekranu ne vidi nikakva promjena). Redovi s vlastitom bojom je preboje: table-active nosi !important, hover ide Bootstrapovom unutrašnjom sjenom ćelije, a table-light i table-danger dobiju svoje boje ispod. */ .table-responsive .cel-radnje { position: sticky; right: 0; z-index: 1; background-color: var(--et-tabela-pod); } .table-responsive .table-light > .cel-radnje { background-color: var(--et-surface-alt); } .table-responsive .table-danger > .cel-radnje { background-color: var(--et-danger-soft); } /* ---- sjena IZNAD redova (Chrome 115+, Safari 26+; stariji ostaju na podlozi iznad) ---- Podloga omotača (gore) stoji ISPOD tabele, pa je svaki red s vlastitom bojom prekine: izabrani (table-active) i hover red su u sjeni ostavljali rupu na obje ivice (snimak ispita 01.10.2026.). Ovdje su sjene dva pokrivača — ::before uz lijevi, ::after uz desni rub — koji lebde iznad redova (position: sticky unutar flex omotača) i propuštaju klikove. Vide se samo dok ima kuda: animacija vezana za klizanje (scroll-driven) gasi lijevu na samom početku i desnu na samom kraju, a kad nema šta da se kliza, vremenska linija je neaktivna i ostaje osnovno stanje — nevidljivo. Nijedne linije JavaScripta. Tabela s kolonom radnji nema desni pokrivač: pao bi preko zalijepljene ćelije; umjesto njega sjenu nosi sama ćelija uz svoj lijevi rub, jer ispod nje prolazi sadržaj. */ @supports (animation-timeline: scroll()) { .table-responsive { display: flex; background-image: none; } .table-responsive::before, .table-responsive::after, .table-responsive .cel-radnje::before { content: ""; pointer-events: none; opacity: 0; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(nearest inline); } .table-responsive::before, .table-responsive::after { flex: 0 0 20px; position: sticky; z-index: 2; } .table-responsive::before { left: 0; margin-right: -20px; background: linear-gradient(to right, var(--et-tabela-sjena), transparent); animation-name: et-tabela-sjena-lijevo; } .table-responsive::after { right: 0; margin-left: -20px; background: linear-gradient(to left, var(--et-tabela-sjena), transparent); animation-name: et-tabela-sjena-desno; } .table-responsive:has(.cel-radnje)::after { display: none; } .table-responsive .cel-radnje::before { position: absolute; top: 0; bottom: 0; right: 100%; width: 20px; background: linear-gradient(to left, var(--et-tabela-sjena), transparent); animation-name: et-tabela-sjena-desno; } @keyframes et-tabela-sjena-lijevo { 0% { opacity: 0; } 4%, 100% { opacity: 1; } } @keyframes et-tabela-sjena-desno { 0%, 96% { opacity: 1; } 100% { opacity: 0; } } } /* Donja širina tabele: radije neka klizi nego da se zgnječi. Mjera je u rem, a ne u pikselima, iz istog razloga iz kojeg je `.tabela-usko` u ch — prati veličinu slova i zumiranje preglednika, a ne tačke ekrana. Ovo je POD, ne širina: kad u omotaču ima mjesta, tabela je i dalje width:100%. */ .tabela-klizi { min-width: 44rem; } .tabela-klizi-uska { min-width: 22rem; } .tabela-klizi-siroka { min-width: 58rem; } /* Ćelije koje se ne smiju prelomiti. Klasa stoji na : svaka kolona svoju širinu u rem, odmjerenu po sadržaju (tabela ostaje u običnom, auto rasporedu). Kad u kartici ima mjesta, višak se dijeli srazmjerno tim širinama — isto u svakoj tabeli grupe, jer su sve iste širine. 2) Pod tabele (inline min-width na
I NA SVAKI te kolone: cel-broj broj, iznos, količina (tabularne cifre, bez loma; desno samo ispod 641 px — od 641 px po sredini, vidi „PORAVNANJE" ispod) cel-datum datum i vrijeme (bez loma) cel-kratko šifra, jedinica, uloga, kratka riječ (bez loma) cel-znacka ćelija sa značkama (značke u jednom redu, bez loma) cel-radnje dugmad (bez loma, ne dobija naslov u kartici; desno samo ispod 641 px; ZALIJEPLJENA uz desni rub — vidi se i kad tabela klizi) cel-naziv kolone slobodnog teksta koje SMIJU u dva reda: ime, razlog, adresa, spisak modula, verzija sa značkom, dug ključ (uz text-break) poravnanje NIJE odluka stranice: na / (i na u ćeliji) ne stoji `text-end`, `text-start` ni inline `text-align` — čuvar: PoravnanjeTabelaTests. kartice doslovan tekst iz te kolone; ćelija bez `data-naslov` u kartici ide puna širina, bez naslova. grupa više tabela ISTIH kolona jedna ispod druge (Platforma → Izdanja, tabela po aplikaciji): omotač .grupa-tabela,
i na iste kolone, pa zaglavlje i podatak uvijek dijele istu odluku. */ .cel-broj { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; } .cel-datum { white-space: nowrap; font-variant-numeric: tabular-nums; } .cel-kratko { white-space: nowrap; } .cel-znacka { white-space: nowrap; } .cel-znacka .badge { white-space: nowrap; } .cel-radnje { white-space: nowrap; text-align: right; } /* Kolone slobodnog teksta koje smiju u dva reda (ime, adresa, razlog, spisak modula) — ali ne na jednu riječ po redu. Mjera je izmjerena, ne pogođena: „Vino Emporija 0.75" je 18 znakova i staje u 11rem s razmakom ćelije, a baš se to ime vlasniku lomilo na snimku. Duže ime (recimo „Espresso zrno Lavazza Crema e Gusto") i dalje ide u dva reda — to je u redu, jer je sada JEDINO ono što se lomi, pa red ostane visok dva reda umjesto tri. */ .cel-naziv { min-width: 11rem; } /* Broj u polju za unos stoji kao broj u ćeliji iste kolone. Do 22.10.2026. je to svaka stranica pisala sama (`text-end` na ), i to na pola mjesta — u istoj koloni „Količina" jedno polje desno, drugo lijevo. Uže polje (max-width, npr. „Kopija" na Etiketama) ide uz desni rub ćelije. Ovo važi ispod 641 px; od 641 px ga nadjača PORAVNANJE odmah ispod. */ .cel-broj .form-control { text-align: right; margin-left: auto; } /* ---- PORAVNANJE: od 641 px zaglavlje i podatak iste kolone stoje ISTO — po sredini ---- Vlasnik, 22.10.2026., uz snimak Platforma → Izdanja: „moraš proći sve tabele moguće u back officeu i centrirati header i sadržaj tabela … header lijevo sadržaj desno i obrnuto. Sve centriraj." JEDNO pravilo za svaku tabelu (.table, i .stay-table Boravaka), a ne stranicu po stranicu: svaka ćelija koja pripada koloni ide vodoravno i uspravno po sredini, zaglavlje isto kao podatak. Nadjača i cel-broj / cel-radnje (desno), i Bootstrapov (lijevo). ZAŠTO OD 641 px. Ispod toga tabela s karticama postane niz kartica (naslov lijevo, podatak desno — kao na računu), a klizna tabela na telefonu ostaje kakva je bila. Prekid je isti kao kod kartica i u MainLayout.razor.css. Upit nije vezan za `screen`: na papiru A4 (718 px) je tabela ista kao na ekranu, pa i izvod koji ide firmi izgleda kao ono što vlasnik vidi. Ćelija preko više kolona (colspan) ne pripada nijednoj koloni. I ona ide po sredini kad nosi tekst — prazno stanje („Nema …"), naslov grupe redova, rečenicu ispod reda — ali uz dva izuzetka koja ostaju kako su bila: - natpis zbira s `text-end` („Ukupno", „Nabavna vrijednost"): stoji uz broj koji zbraja; - red s obrascem (potvrda puštanja, storno s razlogom, pretplata, spisak činjenica): čita se slijeva, a na sredini bi se raspao — kvačica pliva lijevo, njen natpis ode na sredinu. To je zasebno pravilo s :has(), jer preglednik koji :has() ne zna odbaci CIJELO pravilo u kojem ga nađe — tada samo ti redovi ostanu lijevo, ostalo je i dalje po sredini. Unutar ćelije: polje za unos dobije broj po sredini (a uže polje stane na sredinu ćelije), prekidač (form-check — kvačica pliva lijevo od natpisa) ide na sredinu cijeli, a spisak u ćeliji drži tačku uz tekst, ne na lijevom rubu kolone. */ @media (min-width: 641px) { .table > :not(caption) > tr > th:not([colspan]), .table > :not(caption) > tr > td:not([colspan]), .stay-table > :not(caption) > tr > th:not([colspan]), .stay-table > :not(caption) > tr > td:not([colspan]) { text-align: center; vertical-align: middle; } .table > :not(caption) > tr > [colspan]:not(:has(form, fieldset, .form-control, .form-select, .form-check, .input-group, .alert, dl, ul, ol, table)) { text-align: center; vertical-align: middle; } .table > :not(caption) > tr > td:not([colspan]) .form-control { text-align: center; margin-left: auto; margin-right: auto; } .table > :not(caption) > tr > td:not([colspan]) > .form-check { display: inline-block; } .table > :not(caption) > tr > td:not([colspan]) ul, .table > :not(caption) > tr > td:not([colspan]) ol { list-style-position: inside; padding-left: 0; } } /* ---- GRUPISANE TABELE: više tabela istih kolona jedna ispod druge ---- Platforma → Izdanja (21.10.2026.) ima tabelu po aplikaciji — Kasa, Kuhinjski ekran, Konobar, Vlasnik — jednu ispod druge. Svaka je sama računala širine kolona iz svog sadržaja, pa „Verzija", „Objavljeno" i „SHA-256" nisu stajali jedni ispod drugih (vlasnik 22.10.2026.: „izgleda razbacano"). Odluka, u tri dijela (sve izmjereno 22.10.2026. u ispitu s ovim app.css i Bootstrapom): 1) Tabele u petlji nose ISTI
) je ZBIR tih širina. Bez njega Chrome na užem prozoru stišće kolone svake tabele po njenom sadržaju i rubovi se opet razilaze (1280 px: 1–9 px); s njim tabela tad klizi, a kolone ostaju tačno jedna ispod druge. 3) Omotač grupe nosi .grupa-tabela, i u njemu podatak SMIJE u dva reda kad je duži od svoje kolone. Bez toga jedna duža ćelija raširi svoju kolonu samo u svojoj tabeli i pomjeri sve ostale: pilot-izdanje kase nosi četiri veze („preuzmi", „proširi na objekte pilota", „proširi na sve", „povuci") i pomjeralo je kolone Kase 8–35 px na 1920 px, a rečenica „Niža od već puštene …" umjesto dugmeta imala je u jednom redu 650 px. Širine su odmjerene tako da uobičajen sadržaj („Konobar (mobilna)", „1.0.2+10 zadnja", „22.10.2026 14:30") stane u jedan red, a zbir 63,25 rem (1012 px) u karticu na 1366 px. Zaglavlja ostaju bez loma. Čuvar: PoravnanjeTabelaTests. */ .grupa-tabela td, .grupa-tabela td .badge { white-space: normal; } /* ---- ispod 641 px: red postaje kartica ---- Prekid je isti kao u MainLayout.razor.css, gdje sidebar prestaje biti kolona. Upit je vezan za `screen` namjerno: na papiru je tabela tabela, a blok za štampu na dnu ovog fajla već ima svoja pravila. */ @media screen and (max-width: 640.98px) { /* Donja širina ovdje smeta — kartica ne klizi, kartica se slaže. Pravilo stoji iza sva tri `tabela-klizi*`, pa ih pri istoj težini nadjačava. */ .tabela-kartice { min-width: 0; } .tabela-kartice thead { display: none; } .tabela-kartice, .tabela-kartice > tbody, .tabela-kartice > tfoot, .tabela-kartice > tbody > tr, .tabela-kartice > tfoot > tr { display: block; width: 100%; } /* Kartica je uvijek na površini, a ne na podlozi stranice: tako se i tabela koja stoji na goloj stranici (Korisnici) na telefonu vidi kao niz kartica, a ne kao niz okvira u vazduhu. Unutar .card je ista boja kao i kartica, pa je ondje kartica ocrtana samo rubom — isto kao i do sada. */ .tabela-kartice > tbody > tr, .tabela-kartice > tfoot > tr { background: var(--et-surface); border: 1px solid var(--et-border); border-radius: var(--et-radius-sm); margin-bottom: .6rem; padding: .35rem .15rem; } /* Naslov lijevo, podatak desno — kao na računu. Naslov je plivajuća (float) oznaka, a NE flex-stavka. Razlog je izmjeren: ćelija „Artikal" na Računima ne nosi samo ime nego i podred „· sto 4 · Amela" i napomenu u svom
-u. Kao flex, svako od toga postane zasebna stavka i poređaju se JEDNO UZ DRUGO u jedan red — ime i napomena rame uz rame. S plivajućom oznakom sadržaj ćelije ostaje običan tok: prvi red se skrati za širinu naslova, a podred i napomena padnu ispod, kao i na širokom ekranu. `flow-root` je tu da ćelija obuhvati taj float i ne prelije ga u sljedeću. */ .tabela-kartice > tbody > tr > td, .tabela-kartice > tbody > tr > th, .tabela-kartice > tfoot > tr > td, .tabela-kartice > tfoot > tr > th { display: flow-root; border: 0; padding: .3rem .7rem; text-align: right; white-space: normal; } /* Kartica ne klizi, pa se kolona radnji odlijepi i ostane prozirna kao svaka druga ćelija (zalijepljena nosi neprozirnu podlogu — u kartici bi bila druge boje od kartice). */ .table-responsive .tabela-kartice .cel-radnje { position: static; background-color: transparent; } .table-responsive .tabela-kartice .cel-radnje::before { display: none; } .tabela-kartice [data-naslov]::before { content: attr(data-naslov); float: left; margin-right: 1rem; max-width: 45%; text-align: left; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--et-faint); } /* Ćelija bez naslova (red dugmadi, ili „nema podataka" preko svih kolona) nema šta da obuhvati — ostaje običan blok uz desnu ivicu kartice. */ .tabela-kartice > tbody > tr > td:not([data-naslov]) { display: block; } } /* ---- forme: punjena polja koja se na fokus izbijele ---- */ .form-control, .form-select { background-color: var(--et-input-bg); border-color: transparent; border-radius: var(--et-radius-sm); color: var(--et-text); transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease; } .form-control:hover, .form-select:hover { border-color: var(--et-input-border); } .form-control:focus, .form-select:focus { background-color: var(--et-surface); } .form-control::placeholder { color: var(--et-faint); } .form-label { font-size: .8rem; font-weight: 600; color: var(--et-text); margin-bottom: .3rem; } .form-text { color: var(--et-faint); } .form-check-input { border-color: var(--et-input-border); } .form-check-input:checked { background-color: var(--et-accent); border-color: var(--et-accent); } .text-muted { color: var(--et-muted) !important; } /* ---- bedzevi: pilule, tinta na pastelu ---- */ .badge { border-radius: 999px; font-weight: 500; padding: .38em .75em; letter-spacing: .01em; } .badge.bg-success { background-color: var(--et-accent-soft) !important; color: var(--et-on-accent-soft) !important; } .badge.bg-danger { background-color: var(--et-danger-soft) !important; color: var(--et-danger-soft-fg) !important; } .badge.bg-warning { background-color: var(--et-warning-soft) !important; color: var(--et-warning-soft-fg) !important; } .badge.bg-info { background-color: var(--et-info-soft) !important; color: var(--et-info-soft-fg) !important; } .badge.bg-secondary { background-color: var(--et-surface-alt) !important; color: var(--et-muted) !important; } /* bg-dark i bg-light bedzevi u tamnoj temi ne smiju ostati doslovno tamni/bijeli. */ [data-bs-theme="dark"] .badge.bg-dark { background-color: var(--et-surface-alt) !important; color: var(--et-text) !important; } [data-bs-theme="dark"] .badge.bg-light { background-color: var(--et-surface-alt) !important; color: var(--et-text) !important; } .alert { border-radius: var(--et-radius-sm); border: 0; } .alert-success { background: var(--et-accent-soft); color: var(--et-on-accent-soft); } .alert-danger { background: var(--et-danger-soft); color: var(--et-danger-soft-fg); } .alert-warning { background: var(--et-warning-soft); color: var(--et-warning-soft-fg); } .alert-info { background: var(--et-info-soft); color: var(--et-info-soft-fg); } .list-group-item { border-color: var(--et-border); } .list-group-item-action:hover { background: var(--et-surface-alt); } /* ---- zaglavlje stranice ---- */ .pg-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.25rem; } .pg-title { font-size: 1.45rem; font-weight: 600; margin: 0; color: var(--et-text); letter-spacing: -.01em; } .pg-sub { color: var(--et-muted); font-size: .9rem; } h1, .h3 { color: var(--et-text); font-weight: 600; letter-spacing: -.01em; } .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--et-bg); padding: 1rem; } .login-card { width: 100%; max-width: 380px; background: var(--et-surface); border-radius: 14px; padding: 2rem; box-shadow: 0 10px 40px rgba(0,0,0,.08); } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "Došlo je do greške." } .darker-border-checkbox.form-check-input { border-color: #929292; } /* Reconnect: mala trakica umjesto zamagljenog ekrana. Stilovi vise NE zive na pomocnoj klasi: Blazor pri prvoj promjeni stanja ZAMIJENI cijeli class na elementu (className = "components-reconnect-show"), pa je klasa .reconnect-toast nestala i ostao je goli, uvijek vidljiv tekst na dnu stranice. ID prezivi svaku zamjenu. */ #components-reconnect-modal { display: none; position: fixed; right: 16px; bottom: 16px; z-index: 2000; align-items: center; gap: .5rem; padding: .55rem .9rem; background: #1f2937; color: #f9fafb; font-size: .85rem; border-radius: .5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); } #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected { display: flex; } #components-reconnect-modal.components-reconnect-hide { display: none; } #components-reconnect-modal .reconnect-dot { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; animation: reconnect-pulse 1s ease-in-out infinite; } @keyframes reconnect-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } /* ---- Dashboard (po referenci koju je vlasnik izabrao 26.08.2026.) ---- */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; margin-bottom: 20px; } .kpi { background: var(--et-surface); border: 1px solid var(--et-border); border-radius: var(--et-radius); box-shadow: var(--et-shadow); padding: 18px; display: flex; flex-direction: column; gap: 2px; } .kpi-l { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--et-faint); } .kpi-v { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--et-text); } .kpi-v small { font-size: 15px; font-weight: 600; opacity: .65; margin-left: 2px; } .kpi-s { font-size: 12px; color: var(--et-muted); font-variant-numeric: tabular-nums; } .kpi { transition: box-shadow .15s ease; } .kpi:hover { box-shadow: var(--et-shadow-soft); } .kpi[role="button"] { cursor: pointer; } /* Hero: dnevni promet kao puna zelena kartica — jedna, i zato radi. */ .kpi-hero { background: var(--et-gradient); border-color: transparent; box-shadow: var(--et-shadow-soft); } .kpi-hero .kpi-l { color: rgba(255, 255, 255, .75); } .kpi-hero .kpi-v { color: #fff; } .kpi-hero .kpi-s { color: rgba(255, 255, 255, .8); } .kpi-warn .kpi-v { color: var(--et-warning); } .kpi-danger .kpi-v { color: var(--et-danger); } /* Podjela plaćanja: stvarni omjeri, ne ukras. */ .split-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 8px; background: var(--et-surface-alt); } .split-cash { background: var(--et-accent); } .split-card { background: var(--et-secondary); } .split-virman { background: var(--et-split-virman); } .split-legend { display: flex; gap: 14px; margin-top: 6px; font-size: 11px; color: var(--et-muted); } .split-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; font-style: normal; vertical-align: baseline; } .unit { color: var(--et-faint); font-weight: 400; } /* ---- StatCard detalji iz Lovable dizajna ---- */ .kpi-top { display: flex; align-items: flex-start; justify-content: space-between; } .kpi-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--et-accent-soft); color: var(--et-accent-soft-fg); flex: 0 0 auto; } .kpi-icon--orange { background: var(--et-secondary-soft); color: var(--et-secondary-soft-fg); } .kpi-icon--red { background: #FCE9EB; color: #A32734; } [data-bs-theme="dark"] .kpi-icon--red { background: var(--et-danger-soft); color: var(--et-danger-soft-fg); } .kpi-icon svg { width: 16px; height: 16px; } .kpi-hero .kpi-icon { background: rgba(255, 255, 255, .18); color: #fff; } /* ---- graf prometa: cisti SVG, bez biblioteka ---- */ .chart-wrap { padding: 4px 6px 0; } .chart-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--et-faint); padding: 4px 2px 0; font-variant-numeric: tabular-nums; } /* ---- niske zalihe: traka napunjenosti prema minimumu ---- */ .stock-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--et-surface-alt); } .stock-row:last-child { border-bottom: 0; } .stock-name { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; } .stock-name small { display: block; color: var(--et-faint); font-weight: 400; font-variant-numeric: tabular-nums; } .stock-track { flex: 0 0 90px; height: 6px; border-radius: 3px; background: var(--et-surface-alt); overflow: hidden; } .stock-fill { height: 100%; border-radius: 3px; background: var(--et-warning); } .stock-fill.critical { background: var(--et-danger); } /* „powered by ETIRIS" na prijavi — isti potpis kao u sidebaru. */ .login-powered { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--et-accent); margin-bottom: .75rem; } [data-bs-theme="dark"] .login-powered { color: var(--et-accent-glow); } /* ---- QR za instalaciju mobilne aplikacije (Platforma → Izdanja, 22.10.2026.) ---- Kod se skenira kamerom telefona S EKRANA računara. Zato: - crno na BIJELOM i u tamnoj temi (boja je ovdje namjerno upečena, ne token): kamere najbolje čitaju taman kod na svijetlom, a dio telefona obrnut kod i ne prepozna; - bijeli rub od četiri modula (quiet zone) je dio samog SVG-a, kutija ga još malo proširi i odvoji od tamne podloge prozora; - veličina: do 312 px kutije — kod od 294 px, tj. tačno 6 px po modulu za vezu iz kante (~100 znakova = verzija 6: 41 modul + 2 × 4 ruba = 49), dovoljno za skeniranje s pola metra. Na telefonu se skupi na širinu prozora (max-width, ne width: ništa ne gura stranicu u širinu). */ .qr-instalacija-kod { width: 100%; max-width: 312px; margin: 0 auto; padding: 8px; background: #fff; border: 1px solid var(--et-border); border-radius: 8px; } .qr-instalacija-kod svg { display: block; width: 100%; height: auto; } .qr-instalacija-koraci { padding-left: 1.25rem; } .qr-instalacija-koraci li + li { margin-top: .25rem; } /* ===================================================================== TELEFON (22.10.2026.) — stranica na 360–430 px, uspravno Vlasnik: „morat ćeš prilagoditi ovaj back office za mobitele kad uđem." Tabele su na telefonu kartice od 01.10.2026. (odjeljak „TABELE KAD SE PROZOR SUZI"); ovo je ostatak stranice. Meni i gornja traka su u MainLayout.razor.css i NavMenu.razor.css (odjeljci „TELEFON"). Prekid je ISTI kao kod kartica i rasporeda: 641 px. Tablet (≥ 641 px) i desktop ovaj blok ne vide — ni piksel se tamo ne mijenja. Upit nije vezan za `screen` jer ga ni papir (A4 = 718 px) ne dosegne; upit „screen and" s gornjom granicom čuvar drži jedinim — to je blok kartica tabela. Šta se ovdje odlučuje, jednom za sve stranice: 1) ništa ne gura stranicu u širinu — redovi s naslovom i dugmadima se lome u više redova, grupe dugmadi isto; 2) dugme, polje i tab su visoki bar 44 px (prst), polje ima 16 px slova (iOS Safari inače zumira cijelu stranicu čim se polje dodirne); 3) polje u obrascu (kolona s natpisom .form-label) ide cijelom širinom, jedno ispod drugog; 4) tabovi (kartica objekta, Platforma) klize vodoravno SAMI ZA SEBE; 5) klizna tabela nema zalijepljenu kolonu radnji: na 343 px bi ta kolona pokrila podatke (Kvarovi, Platforma → Svi klijenti) — dugme je na kraju reda, do njega se klizne; 6) donja širina tabela (44 / 22 / 58 rem) otpada: tabela od četiri kolone staje u ekran umjesto da klizi 9 px; šira i dalje klizi; 7) detalj koji se otvori ispod dugog spiska (račun, artikal, kvar) nosi data-telefon-fokus — App.razor ga na telefonu dovede na ekran, a ovdje mu se ostavi mjesta ispod gornje trake. ===================================================================== */ @media (max-width: 640.98px) { /* --- 1) ništa ne gura stranicu u širinu --- */ .content { overflow-wrap: break-word; } .content img { max-width: 100%; height: auto; } .pg-head { flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-start; } .content .d-flex:not(.flex-nowrap):not(.flex-column), .content .d-inline-flex:not(.flex-nowrap):not(.flex-column) { flex-wrap: wrap; row-gap: .5rem; } .content .btn-group, .content .btn-toolbar { flex-wrap: wrap; } /* --- 2) za prst: 44 px, a polje 16 px slova --- */ .content .btn:not(.btn-link), .modal .btn:not(.btn-link) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Veza-dugme u rečenici ostaje veza; ona u koloni radnji („povuci", „proširi na sve") je dugme za prst. */ .content .cel-radnje .btn-link { min-height: 44px; display: inline-flex; align-items: center; } .btn-close { box-sizing: content-box; width: 16px; height: 16px; padding: 14px; } .form-control, .form-select { font-size: 16px; min-height: 44px; max-width: 100%; } .form-check-input { width: 1.25em; height: 1.25em; margin-top: .125em; } .form-check { min-height: 1.75rem; } /* --- 3) polje u obrascu: cijelom širinom, jedno ispod drugog --- */ .content .row > [class*="col-"]:has(> .form-label) { flex: 0 0 auto; width: 100%; } /* --- 4) tabovi klize sami za sebe --- Linija ispod tabova je sjena UNUTAR liste, a ne njen rub: lista sad klizi (overflow), pa bi aktivni tab koji Bootstrap spušta 1 px preko ruba bio odsječen i ispod njega bi ostala crta. */ .nav-tabs, .nav-pills { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; } .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; } .nav-tabs { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--bs-border-color); } /* Znak da desno (ili lijevo) ima još tabova — ista četiri sloja kao sjena klizne tabele gore (pokrivači u boji podloge klize s tabovima, sjene stoje uz rub; kad nema kuda, ne vidi se ništa). */ .nav-tabs, .nav-pills { background-image: linear-gradient(to right, var(--et-tabela-pod) 70%, transparent), linear-gradient(to left, var(--et-tabela-pod) 70%, transparent), linear-gradient(to right, var(--et-tabela-sjena), transparent), linear-gradient(to left, var(--et-tabela-sjena), transparent); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .nav-tabs .nav-item, .nav-pills .nav-item { flex: 0 0 auto; } .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; min-height: 44px; } .nav-tabs .nav-link { margin-bottom: 0; } /* --- 5) klizna tabela: kolona radnji se odlijepi --- */ .table-responsive .cel-radnje { position: static; background-color: transparent; } .table-responsive .cel-radnje::before { display: none; } @supports (animation-timeline: scroll()) { .table-responsive:has(.cel-radnje)::after { display: block; } } /* --- 6) donja širina tabela otpada --- */ .tabela-klizi, .tabela-klizi-uska, .tabela-klizi-siroka { min-width: 0; } /* Grupisane tabele (Platforma → Izdanja) nose pod kao inline stil (zbir
-a, 63,25 rem); kao kartice na telefonu ga ne smiju imati — inače bi i potvrda „Pusti svima" bila široka 1012 px. */ .tabela-kartice[style*="min-width"] { min-width: 0 !important; } /* U kartici je podatak desno, i kad ćelija nosi Bootstrapov text-center (dugmad modula na Platformi). */ .tabela-kartice > tbody > tr > td.text-center { text-align: right !important; } /* Red s obrascem (urednik pretplate, potvrda puštanja, storno s razlogom) u kartici se čita slijeva — desno poravnat bi se raspao isto kao na sredini (vidi „PORAVNANJE"). Zasebno pravilo zbog :has(). */ .tabela-kartice > tbody > tr > td[colspan]:has(form, fieldset, .form-control, .form-select, .form-check, .input-group, .alert, dl, ul, ol, table) { text-align: left; } /* --- 7) detalj ispod spiska: mjesto ispod gornje trake (56 px) --- */ [data-telefon-fokus] { scroll-margin-top: 68px; } /* Dok je ladica menija otvorena, stranica ispod ne klizi (preglednik bez :has() je samo pusti). */ body:has(#meni-prekidac:checked) { overflow: hidden; } } /* ===================================================================== IZVOD POTROŠNJE — list A4 (NF-2, 08.10.2026.) Stranica partners/izvod je dokument koji ide firmi, pa na ekranu izgleda kao list papira širine A4: ono što vlasnik vidi je ono što izađe iz štampača, ili u PDF iz prozora za štampu. PDF biblioteke nema — papir pravi preglednik. BEZ medijskog upita: jedini prekid u ovom fajlu je 641 px (kartice tabela, poravnanje, TELEFON) i čuvar ga drži jedinim. List se na telefonu suzi sam — razmak je clamp(), a strane zaglavlja slaže Bootstrapov col-sm-6. ===================================================================== */ .izvod-papir { position: relative; max-width: 210mm; margin: .75rem 0 1.5rem; padding: clamp(.9rem, 4vw, 12mm) clamp(.9rem, 3.5vw, 10mm); background: var(--et-surface); border: 1px solid var(--et-border); border-radius: var(--et-radius-sm); box-shadow: var(--et-shadow); overflow: hidden; font-size: .9rem; /* Tabele leže na listu, ne na podlozi stranice — sjena klizanja i zalijepljena kolona to moraju znati. */ --et-tabela-pod: var(--et-surface); } /* „IZVOD POTROŠNJE — nije porezna faktura ni fiskalni račun": u okviru, da se ne previdi. */ .izvod-natpis { border: 1.5px solid currentColor; padding: .45rem .7rem; margin-bottom: 1rem; text-align: center; font-weight: 700; letter-spacing: .02em; } .izvod-oznaka { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--et-faint); } .izvod-placanje { margin-top: 1rem; padding: .6rem .8rem; border: 1px solid var(--et-border); border-radius: var(--et-radius-sm); break-inside: avoid; } /* Vodeni natpis NACRT / POVUČEN preko lista. Leži IZNAD sadržaja (i iznad zalijepljenih ćelija, koje su z-index 1 i 2) i propušta klikove; proziran toliko da se brojevi ispod čitaju. */ .izvod-vodeni { position: absolute; top: 11rem; left: 50%; transform: translateX(-50%) rotate(-24deg); z-index: 3; font-size: clamp(3.2rem, 15vw, 8rem); font-weight: 800; letter-spacing: .14em; line-height: 1; white-space: nowrap; color: var(--et-danger); opacity: .14; pointer-events: none; user-select: none; } /* ===================================================================== ŠTAMPA IZVJEŠTAJA (15.09.2026.) Do ovoga se nijedan izvještaj nije mogao odštampati — Ctrl+P je dao stranicu s menijem, sidebarom i dugmadima, a tabela je ispadala izvan papira. Ovdje se stranica pretvara u dokument: ostaju naslov, period i brojevi, sve ostalo ode. Boje se na papiru gase namjerno. Tamna tema odštampana kakva jeste potroši toner na crnu podlogu i ostavi sivo slovo na sivom. ===================================================================== */ @media print { /* Sve što je alat, a ne sadržaj. */ .sidebar, .sidebar-toggle, #blazor-error-ui, #components-reconnect-modal, .reconnect-toast, .izvjestaj-akcije, .btn, .btn-close, .pagination, .form-control, .form-select, .form-label, .nav-tabs .nav-link:not(.active) { display: none !important; } /* Artikli (01.10.2026.): pregled slike od 96 px, uputa „Prvo sačuvaj…" i otvoren modal biblioteke su alat za ekran, ne sadržaj za papir. (Sličice u spisku više nema — vlasnik ju je istog dana izbacio: slika se vidi tek kad se artikal otvori.) Jedno pravilo, ovdje — print pravila ne idu u .razor.css. (.modal.d-block iz Bootstrapa je ista specifičnost; app.css se učitava poslije njega, pa ovo važi.) */ .slika-blok, .slika-prvo-sacuvaj, .modal { display: none !important; } /* Zaglavlje koje na ekranu ne postoji: šta je izvještaj, za koji period, kad je štampan. */ .izvjestaj-zaglavlje { display: block !important; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1.5px solid #000; } /* Logo firme iznad naslova. Visina u milimetrima, a ne u tačkama: papir ima mjeru, ekran nema, i 12 mm je taman toliko da se znak pročita a da ne pojede vrh prve strane. */ .izvjestaj-zaglavlje .iz-logo { display: block; height: 12mm; width: auto; max-width: 60mm; margin: 0 0 6px; } .izvjestaj-zaglavlje .iz-naslov { font-size: 15pt; font-weight: 700; } .izvjestaj-zaglavlje .iz-period { font-size: 10pt; margin-top: 2px; } .izvjestaj-zaglavlje .iz-stampano { font-size: 8pt; color: #444; margin-top: 2px; } /* Papir je uži od ekrana: sadržaj ide cijelom širinom, bez lijeve kolone. */ html, body { background: #fff !important; color: #000 !important; } .page { display: block !important; } main { margin: 0 !important; padding: 0 !important; width: 100% !important; } .content, article.content { padding: 0 !important; margin: 0 !important; } .container, .container-fluid { max-width: none !important; padding: 0 !important; } /* Bootstrapov .row ima -12 px margine koje na ekranu upija razmak članka; bez razmaka (gore) bi virile 12 px preko papira i Chrome bi i za to smanjio stranicu (izmjereno 01.10.2026.). */ .row { margin-left: 0 !important; margin-right: 0 !important; } /* Kartica na papiru je samo okvir; sjena i zaobljenje su za ekran. */ .card { border: 1px solid #999 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; break-inside: avoid; margin-bottom: 10px !important; } .card-header { background: #fff !important; border-bottom: 1px solid #999 !important; } /* Tabela: zaglavlje se ponavlja na svakoj strani, red se ne prelama napola. Sjena klizanja na papiru nema smisla (papir se ne kliza) i štampač bi je povukao kao sivu traku uz ivicu — gasi se. */ .table-responsive { overflow: visible !important; background-image: none !important; display: block !important; } .table-responsive::before, .table-responsive::after, .cel-radnje::before { display: none !important; } .tabela-klizi, .tabela-klizi-uska, .tabela-klizi-siroka { min-width: 0 !important; } /* Papir se ne kliza: ćelije koje na ekranu ne smiju u dva reda na papiru SMIJU — inače bi Chrome cijeli izvještaj smanjio da mu stane najšira tabela (izmjereno 01.10.2026.: jedanaest kolona bez loma = 1132 px na papiru širokom 718 px). Kolona radnji se odlijepi; dugmad u njoj ionako nestaju (.btn gore), a tekst koji ponegdje nosi ostaje. */ .cel-broj, .cel-datum, .cel-kratko, .cel-znacka, .cel-radnje, .cel-znacka .badge { white-space: normal !important; } .cel-naziv { min-width: 0 !important; } .cel-radnje { position: static !important; background-color: transparent !important; } table { width: 100% !important; border-collapse: collapse !important; font-size: 9pt; } thead { display: table-header-group; } tfoot { display: table-footer-group; } tr { break-inside: avoid; page-break-inside: avoid; } th, td { border: 1px solid #999 !important; padding: 3px 5px !important; color: #000 !important; background: #fff !important; } th { background: #eee !important; font-weight: 700; } /* Bedževi i prigušen tekst ostaju čitljivi kad izgube boju. */ .badge { border: 1px solid #666 !important; color: #000 !important; background: #fff !important; } .text-muted, .text-secondary { color: #333 !important; } /* Bez adrese iza svakog linka i bez praznog prvog lista. */ a, a:visited { color: #000 !important; text-decoration: none !important; } a[href]::after { content: "" !important; } h1, h2, h3 { break-after: avoid; } /* Izvod potrošnje (08.10.2026.): list je na papiru sam papir — okvir, sjena i razmak lista su za ekran. Vodeni natpis se lijepi za stranicu (position: fixed se u štampi ponavlja na SVAKOM listu) i ostaje IZNAD ćelija: pravilo gore boji ćelije u bijelo, pa bi ispod njih nestao. */ .izvod-papir { max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; overflow: visible !important; font-size: 10pt; } /* 72pt, ne više: „POVUČEN" je sedam slova i sa 96pt mu je zadnje slovo ostajalo izvan lista (izmjereno 08.10.2026. na probnom PDF-u). Neprozirnost .18, ne .1: sa deset posto ga štampač u štednji tonera zna izgubiti. Natpis je i dalje samo DODATAK — status piše običnim crnim slovima u zaglavlju lista (#izvod-status), jer se position: fixed ne ponavlja na svakom listu u svakom pregledniku. */ .izvod-vodeni { position: fixed !important; top: 40% !important; font-size: 72pt !important; color: #000 !important; opacity: .18 !important; } /* Opšte pravilo gore ponavlja na dnu SVAKOG lista. Na izvodu bi to značilo „Ukupno firma 40,00" ispod prve polovine računa jednog radnika — zbir koji izgleda kao međuzbir. Ovdje zbir stoji jednom, na kraju tabele. Zaglavlje kolona se i dalje ponavlja. */ .izvod-papir tfoot { display: table-row-group; } /* Šifra radnika je Bootstrapov (ružičast): na papiru koji ide firmi je crna. */ .izvod-papir code { color: #000 !important; } .izvod-natpis { border: 1.5px solid #000 !important; } .izvod-oznaka { color: #333 !important; } .izvod-placanje { border: 1px solid #999 !important; border-radius: 0 !important; } @page { margin: 12mm 10mm; } } /* ---------------------------------------------------------------- Cjenovne etikete (MP-4, 20.10.2026.) List A4 je u milimetrima i na ekranu: pregled je tačno ono što ide na papir. Mjere lista (margine, kolone, redovi, razmaci) dolaze kao inline stil iz EtiketeEkran.StilLista — ovdje je samo izgled jedne etikete. Etiketa je uvijek bijela s crnim slovima, i u tamnoj temi: to je papir. */ .etikete-pregled { overflow-x: auto; padding-bottom: 8px; } .etikete-list { box-sizing: border-box; display: grid; width: 210mm; height: 297mm; margin: 0 0 12px; background: #fff; color: #000; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); overflow: hidden; } .etiketa { box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 2mm 2.5mm 1.5mm; overflow: hidden; font-family: Arial, Helvetica, sans-serif; color: #000; background: #fff; } .etikete-s-okvirom .etiketa { outline: .2mm dashed #888; outline-offset: -.1mm; } .etiketa-naziv { font-size: 9.5pt; font-weight: 700; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .etiketa-cijena-red { display: flex; align-items: baseline; gap: 1.5mm; margin-top: .5mm; white-space: nowrap; } .etiketa-cijena { font-size: 22pt; font-weight: 800; line-height: 1; letter-spacing: -.02em; } .etiketa-valuta { font-size: 9pt; font-weight: 700; } .etiketa-jedinicna { font-size: 6.5pt; line-height: 1.2; margin-top: .3mm; } /* Lanac L-4: etiketa akcije — oznaka AKCIJA i precrtana redovna cijena ispod akcijske. */ .etiketa-akcija { font-size: 7pt; line-height: 1.2; margin-top: .3mm; white-space: nowrap; } .etiketa-akcija-oznaka { font-weight: 800; letter-spacing: .03em; } .etiketa-akcija s { text-decoration: line-through; } /* Lanac L-6: najniža cijena u 30 dana prije akcije (samo uz kvačicu na kartici „Akcije"). */ .etiketa-najniza30 { font-size: 5.5pt; line-height: 1.15; margin-top: .2mm; } .etiketa-dno { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5mm; margin-top: auto; } .etiketa-barkod { min-width: 0; } .etiketa-barkod svg { display: block; height: 10mm; width: auto; max-width: 100%; } .etiketa-sifra { font-size: 8pt; font-weight: 600; } .etiketa-datum { font-size: 6pt; line-height: 1.15; text-align: right; white-space: nowrap; } /* 4 × 10 (52,5 × 29,7 mm): ista etiketa, sitnija slova i niži barkod. */ .etikete-format-4x10 .etiketa { padding: 1.5mm 2mm 1mm; } .etikete-format-4x10 .etiketa-naziv { font-size: 8pt; line-height: 1.1; } .etikete-format-4x10 .etiketa-cijena { font-size: 17pt; } .etikete-format-4x10 .etiketa-valuta { font-size: 7.5pt; } .etikete-format-4x10 .etiketa-jedinicna { font-size: 5.5pt; } .etikete-format-4x10 .etiketa-akcija { font-size: 6pt; } .etikete-format-4x10 .etiketa-najniza30 { font-size: 5pt; } .etikete-format-4x10 .etiketa-barkod svg { height: 8mm; } .etikete-format-4x10 .etiketa-datum { font-size: 5.5pt; } @media print { /* Etikete idu na list BEZ margina preglednika: margine lista naljepnica nosi sam list (padding). Imenovana stranica, da ostali papiri (zapisnici, izvodi) zadrže svojih 12 × 10 mm. */ @page etikete { size: A4; margin: 0; } .etikete-pregled { overflow: visible !important; padding: 0 !important; } .etikete-list { page: etikete; margin: 0 !important; box-shadow: none !important; break-after: page; page-break-after: always; break-inside: avoid; } .etikete-list:last-child { break-after: auto; page-break-after: auto; } .etiketa, .etiketa * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }