/* ============================================================================= INGAL — glavni stilski fajl Dense, utilitarian, dashboard-like. Bez "marketing pamphlet" estetike. Light/Dark tema kroz CSS varijable + data-theme atribut na . ============================================================================= */ /* ----------------------------------------------------------------------------- 0) Broadway font (zastitni znak INGAL) — lokalni fajlovi u public/fonts/. Opseg font-weight 100..900 namerno: Broadway ima samo jedan rez, pa ovako svaki trazeni weight (npr. 700) mapira na isti fajl bez "faux bold" izoblicenja dekorativnog fonta. Ako fajlovi nisu prisutni -> fallback serif. ----------------------------------------------------------------------------- */ @font-face { font-family: 'Broadway'; src: url('/public/fonts/Broadway.woff2') format('woff2'), url('/public/fonts/Broadway.woff') format('woff'); font-weight: 100 900; font-style: normal; font-display: swap; } /* Wordmark "INGAL" (logo firme — pravi logo ne postoji). Gde god se "INGAL" ispise korisniku, prikazuje se ovom klasom: Broadway, velikim slovima. NAMERNO bez font-size — velicina se nasledjuje od konteksta (tekst ostaje svoje velicine). Konteksti koji zele svoju velicinu je override-uju (npr. navbar nize). */ .ingal-wordmark { font-family: 'Broadway', 'Times New Roman', Georgia, serif; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } /* ----------------------------------------------------------------------------- 1) Tema — varijable ----------------------------------------------------------------------------- */ :root { --bg: #ffffff; --bg-panel: #fafafa; --bg-table: #ffffff; --bg-row-alt: #f4f4f5; --bg-row-hover: #eef2ff; --fg: #1a1a1a; --fg-muted: #6b7280; --border: #d4d4d8; --border-strong: #a1a1aa; --accent: #2563eb; --accent-fg: #ffffff; --danger: #dc2626; --success: #16a34a; --warning: #ca8a04; --info: #0891b2; } [data-theme="dark"] { --bg: #18181b; --bg-panel: #1f1f23; --bg-table: #18181b; --bg-row-alt: #232328; --bg-row-hover: #2a2a30; --fg: #e4e4e7; --fg-muted: #a1a1aa; --border: #3f3f46; --border-strong: #52525b; --accent: #60a5fa; --accent-fg: #18181b; --danger: #f87171; --success: #4ade80; --warning: #facc15; --info: #22d3ee; } /* ----------------------------------------------------------------------------- 2) Base ----------------------------------------------------------------------------- */ html, body { background: var(--bg); color: var(--fg); font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; color: var(--accent); } .container, .container-fluid { padding-left: 12px; padding-right: 12px; } /* ----------------------------------------------------------------------------- 3) Navbar — dense, sober ----------------------------------------------------------------------------- */ .navbar-ingal { position: sticky; /* uvek vidljiv pri skrolovanju nadole */ top: 0; z-index: 900; /* iznad sadrzaja, ispod modala (1050) */ background: var(--bg-panel); border-bottom: 1px solid var(--border); padding: 6px 12px; display: flex; align-items: center; gap: 12px; font-size: 13px; } .navbar-ingal .brand { font-weight: 600; color: var(--fg); font-size: 14px; margin-right: 12px; } /* INGAL wordmark u navbaru: fiksna velicina (16px osnovno +25% = 20px). */ .navbar-ingal .ingal-wordmark { font-size: 20px; } /* INGAL wordmark je link na pocetnu, ali ne sme da izgleda kao link (bez podvlacenja/plave boje/hover pozadine) — samo pointer kurzor. */ .navbar-ingal .brand-link { color: inherit; text-decoration: none; padding: 0; border-radius: 0; cursor: pointer; } .navbar-ingal .brand-link:hover { background: transparent; } .navbar-ingal a { color: var(--fg); padding: 4px 10px; border-radius: 3px; } .navbar-ingal a:hover { background: var(--bg-row-hover); text-decoration: none; } .navbar-ingal a.aktivna { background: var(--accent); color: var(--accent-fg); } /* Dropdown meni — pokazuje se na hover */ .meni-dropdown { position: relative; display: inline-block; } .meni-dropdown-sadrzaj { display: none; position: absolute; top: 100%; left: 0; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 3px; min-width: 180px; z-index: 1000; padding: 4px 0; } .meni-dropdown:hover .meni-dropdown-sadrzaj { display: block; } .meni-dropdown-sadrzaj a { display: block; padding: 5px 12px; color: var(--fg); font-size: 12px; white-space: nowrap; } .meni-dropdown-sadrzaj a:hover { background: var(--bg-row-hover); } /* Draft badge u navbar-u */ .draft-badge { display: inline-block; background: var(--warning); color: #18181b; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 8px; margin-left: 4px; } .navbar-ingal .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); padding: 3px 10px; font-size: 13px; border-radius: 3px; } .navbar-ingal .spacer { flex: 1; } .navbar-ingal .tema-toggle, .navbar-ingal .draft-indikator { border: 1px solid var(--border); padding: 3px 8px; border-radius: 3px; cursor: pointer; background: var(--bg); color: var(--fg); } /* ----------------------------------------------------------------------------- 4) Tabele — primary UI element ----------------------------------------------------------------------------- */ .table { background: var(--bg-table); color: var(--fg); border-color: var(--border); margin-bottom: 0; font-size: 12px; } .table > :not(caption) > * > * { background: transparent; color: var(--fg); border-color: var(--border); padding: 4px 8px; } .table thead th { background: var(--bg-panel); color: var(--fg-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; border-bottom: 1px solid var(--border-strong); white-space: nowrap; } .table tbody tr:nth-of-type(odd) > * { background: var(--bg-row-alt); } .table tbody tr:hover > * { background: var(--bg-row-hover); } .table-sm > :not(caption) > * > * { padding: 3px 6px; } /* Brojcane kolone */ .num, td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } /* Semanticke boje brojeva. Bare klasa pokriva tekst van tabela (npr. u zaglavljima/sumama). td./th. varijanta podize specificnost na (0,1,1) da nadjaca genericku celiju `.table > :not(caption) > * > *` koja postavlja color:var(--fg) — ista specificnost, ali ova pravila dolaze kasnije u fajlu pa pobedjuju. Bez ovoga boje se ne vide unutar tabela. */ td.num-pos, th.num-pos, .num-pos { color: var(--success); } td.num-neg, th.num-neg, .num-neg { color: var(--danger); } td.num-zero, th.num-zero, .num-zero { color: var(--fg-muted); } /* Redovi sa semantickim stanjem (tabele/pregledi/modali). Konvencija za celu aplikaciju: - .red-nula stanje 0 -> crveni tekst (vizuelno upozorenje da je prazno) - .red-arhiviran arhiviran entitet -> italic + prigaseno (kao disabled) Kada se obe poklope (arhiviran + nula), italic/prigaseno ostaje vidljivo a boju nosi .red-nula (specificnija namera: "prazno"). */ tr.red-nula > td { color: var(--danger); } tr.red-arhiviran > td { font-style: italic; opacity: 0.55; } /* Celija koja se skracuje sa "..." i puni hover-tooltip (title atribut nosi pun tekst). Radi samo u tabeli sa table-layout:fixed (vidi .table-fiksna). */ .cell-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-fiksna { table-layout: fixed; width: 100%; } /* ----------------------------------------------------------------------------- 5) Forme ----------------------------------------------------------------------------- */ .form-control, .form-select { background: var(--bg); color: var(--fg); border: 1px solid var(--border); font-size: 13px; padding: 4px 8px; border-radius: 3px; } /* Placeholder (hint) tekst. Bootstrap-ov default je fiksna siva koja ne prati nasu data-theme temu -> u dark temi ispadne pretaman i jedva vidljiv (npr. "Pretraga..." na Stanju magacina). Vezujemo za --fg-muted da hint bude citljiv u obe teme. */ .form-control::placeholder, .form-select::placeholder { color: var(--fg-muted); opacity: 1; /* Firefox podrazumevano stisava placeholder opacity-jem */ } .form-control:focus, .form-select:focus { background: var(--bg); color: var(--fg); border-color: var(--accent); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); } /* Disabled / readonly polja (npr. sva polja na knjizenom dokumentu). Bootstrap-ov podrazumevani :disabled background je svetao jer njegove --bs- varijable ne prate nasu data-theme temu; bez ovoga bi u dark temi ispao svetao bg + svetao tekst = nevidljivo. Vezujemo za nase varijable. -webkit-text-fill-color: Chromium/Edge gasi boju teksta disabled polja. */ .form-control:disabled, .form-select:disabled, .form-control[readonly], .form-select[readonly] { background: var(--bg-panel); color: var(--fg); opacity: 1; -webkit-text-fill-color: var(--fg); } /* --------------------------------------------------------------------------- Needitabilni (knjizen) dokument: polja zaglavlja su samo tekst — bez okvira i pozadine, poravnata sa labelom — da prate izgled stavki. Klasa .dok-knjizen se stavlja na .panel kad je dokument knjizen (forma, izvod, popis, korekcija). --------------------------------------------------------------------------- */ .dok-knjizen .form-control, .dok-knjizen .form-select { border-color: transparent !important; background: transparent !important; padding-left: 0; } .dok-knjizen .form-control:disabled, .dok-knjizen .form-select:disabled, .dok-knjizen .form-control[readonly] { color: var(--fg); -webkit-text-fill-color: var(--fg); opacity: 1; } .dok-knjizen textarea.form-control { resize: none; } /* Prazna polja: prigusena labela + neutralni "—" (vidi obeleziKnjizenaPrazna u public/js/ingal.js koja dodaje .knj-prazno na prazno polje). */ .dok-knjizen .knj-prazno .form-label { opacity: .55; } .dok-knjizen .knj-prazno .form-control:disabled { color: var(--fg-muted); -webkit-text-fill-color: var(--fg-muted); } .dok-knjizen .knj-prazno .form-control::placeholder { color: var(--fg-muted); opacity: 1; } /* Naslov dokumenta (npr. "Prijemnica br. 15/26"). Status-badge (knjizen/draft) i dugme "Lista" imaju svoju, manju velicinu pa ostaju nepromenjeni. */ .dok-naslov { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; } .form-label { font-size: 12px; color: var(--fg-muted); margin-bottom: 2px; font-weight: 500; } .form-text { color: var(--fg-muted); font-size: 11px; } /* Dugmici */ .btn { font-size: 13px; padding: 4px 10px; border-radius: 3px; } .btn-sm { font-size: 12px; padding: 2px 8px; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .btn-primary:hover { filter: brightness(0.92); } .btn-secondary { background: var(--bg-panel); border-color: var(--border); color: var(--fg); } .btn-success { background: var(--success); border-color: var(--success); color: #ffffff; } .btn-danger { background: var(--danger); border-color: var(--danger); color: #ffffff; } .btn-warning { background: var(--warning); border-color: var(--warning); color: #18181b; } /* ----------------------------------------------------------------------------- 6) Kartice / Paneli ----------------------------------------------------------------------------- */ .panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 3px; padding: 10px 12px; margin-bottom: 12px; } .panel-naslov { font-weight: 600; font-size: 13px; color: var(--fg-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.03em; padding-bottom: 4px; border-bottom: 1px solid var(--border); } /* Status pilule */ .status-draft { background: var(--warning); color: #18181b; padding: 1px 6px; border-radius: 2px; font-size: 11px; font-weight: 600; } .status-knjizen { background: var(--success); color: #ffffff; padding: 1px 6px; border-radius: 2px; font-size: 11px; font-weight: 600; } .status-storno { background: var(--danger); color: #ffffff; padding: 1px 6px; border-radius: 2px; font-size: 11px; font-weight: 600; } /* Upozorenje (poslovno obavezno polje nije popunjeno) */ .upozorenje { color: var(--danger); font-size: 11px; } .polje-prazno { border-color: var(--danger); } /* Alert boxovi */ .alert { font-size: 13px; padding: 8px 12px; border-radius: 3px; border-width: 1px; } .alert-info { background: rgba(8, 145, 178, 0.12); border-color: var(--info); color: var(--fg); } .alert-success { background: rgba(22, 163, 74, 0.12); border-color: var(--success); color: var(--fg); } .alert-warning { background: rgba(202, 138, 4, 0.12); border-color: var(--warning); color: var(--fg); } .alert-danger { background: rgba(220, 38, 38, 0.12); border-color: var(--danger); color: var(--fg); } /* ----------------------------------------------------------------------------- 7) Modal — custom display (ne koristimo Bootstrap data-bs-toggle, vec raw) ----------------------------------------------------------------------------- */ .modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1050; overflow-y: auto; } .modal[style*="display: block"] { display: flex !important; align-items: flex-start; justify-content: center; padding: 40px 16px; /* Blago blurovanje sadrzaja iza modala (overlay pokriva ceo ekran) */ backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .modal-dialog { margin: 0; max-width: 800px; width: 100%; } .modal-content { border-radius: 4px; } .modal-header, .modal-footer { background: var(--bg-panel); } /* Mali dijalog (potvrda / info) — uzi od forme */ .modal-dialog.modal-dijalog { max-width: 440px; } /* Disabled "Obrisi" izgleda onemoguceno, ali wrapper i dalje hvata klik */ .btn-disabled-stil { opacity: 0.5; cursor: not-allowed; } .btn-wrap-obrisi { display: inline-block; } .btn-wrap-obrisi[data-onemoguceno="1"] { cursor: not-allowed; } /* ----------------------------------------------------------------------------- Custom polje za datum (text + ikonica kalendara + skriveni native picker) ----------------------------------------------------------------------------- */ .datum-wrap { display: inline-flex; align-items: center; gap: 2px; position: relative; } .datum-wrap .datum-polje { font-variant-numeric: tabular-nums; } .datum-wrap .datum-pick-btn { padding: 2px 6px; line-height: 1; font-size: 13px; } .datum-wrap .datum-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; } /* Autocomplete lista (renderuje se inside .position-relative kontejnera) */ .autocomplete-lista { background: var(--bg); color: var(--fg); } .position-relative { position: relative; } /* ----------------------------------------------------------------------------- Otpremnica — zaglavlje u 2 kolone sa poravnatim labelama (prikaz/unos, ne stampa) ----------------------------------------------------------------------------- */ .otp-zaglavlje { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; align-items: start; margin-bottom: 10px; max-width: 940px; --otp-lbl: max-content; /* JS prepravi na sirinu najsire labele (vidi forma.ejs) */ } .otp-kolona { display: flex; flex-direction: column; gap: 6px; } .otp-polje { display: grid; grid-template-columns: var(--otp-lbl) minmax(0, 1fr); align-items: center; column-gap: 8px; } .otp-polje > .form-label { margin-bottom: 0; white-space: nowrap; } .otp-polje--top { align-items: start; } .otp-polje--top > .form-label { margin-top: 4px; } /* Partner: kada je izabran -> znacajno veci, boldiran font (labela ostaje ista) */ .otp-zaglavlje #h_partner_text.otp-partner--sel { font-size: 18px; font-weight: 700; height: auto; padding-top: 2px; padding-bottom: 2px; } /* ----------------------------------------------------------------------------- 9) Uputstvo (markdown -> HTML kroz marked) ----------------------------------------------------------------------------- */ .uputstvo { max-width: 860px; line-height: 1.5; } .uputstvo h1 { font-size: 20px; margin: 0 0 12px; } .uputstvo h2 { font-size: 16px; margin: 22px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); } .uputstvo h3 { font-size: 14px; margin: 16px 0 4px; } .uputstvo p, .uputstvo li { font-size: 13px; } .uputstvo ul, .uputstvo ol { padding-left: 20px; } .uputstvo code { background: var(--bg-row-alt); padding: 1px 4px; border-radius: 2px; font-size: 12px; } .uputstvo hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; } .uputstvo img { display: block; max-width: 60%; height: auto; border: 1px solid var(--border); border-radius: 3px; margin: 8px auto; background: #fff; } .uputstvo table { width: auto; border-collapse: collapse; margin: 8px 0; font-size: 12px; } .uputstvo th, .uputstvo td { border: 1px solid var(--border); padding: 3px 8px; } .uputstvo th { background: var(--bg-panel); } .uputstvo blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--accent); color: var(--fg-muted); } /* ----------------------------------------------------------------------------- 8) Print — uvek light tema, prilagodjen layout ----------------------------------------------------------------------------- */ @media print { :root { --bg: #ffffff; --bg-panel: #ffffff; --bg-table: #ffffff; --bg-row-alt: #ffffff; --bg-row-hover: #ffffff; --fg: #000000; --fg-muted: #444444; --border: #000000; } body { font-size: 11pt; } .no-print { display: none !important; } .table thead th { color: #000000; text-transform: none; } .zapis-nav { display: none !important; } } /* ----------------------------------------------------------------------------- 9) Record-navigacija: strelice prethodni/sledeci + osvetljenje reda po povratku ----------------------------------------------------------------------------- */ .zapis-nav-btn { line-height: 1; white-space: nowrap; } .zapis-nav-btn.disabled { opacity: 0.35; pointer-events: none; } .zapis-nav-poz { font-size: 11px; color: var(--fg-muted); font-variant-numeric: tabular-nums; padding: 0 4px; } /* Red na koji se vraca iz pojedinacnog prikaza (?fokus=) — kratko osvetljenje */ @keyframes redFokusFlash { 0% { background: var(--accent); } 100% { background: transparent; } } tr.red-fokus > td { animation: redFokusFlash 2.2s ease-out; }