/* ═══════════════════════════════════════════════════════════════════════════ * eAdvokat — vizuelni identitet v2.0 * * ZASTO POSEBAN FAJL: `ea-app.css` opisuje KOMPONENTE ove aplikacije. Ovaj fajl * opisuje BOJU, PISMO I RAZMAK — i to tako sto pregazi Bootstrap-ove promenljive, * pa 24 strane koje koriste `templates/layout.php` dobijaju novi izgled bez ijedne * izmene u svom markupu. Ucitava se PRE `ea-app.css` (v. templates/layout.php), * jer `ea-app.css` sme da ima poslednju rec nad selektorima koje vec poseduje. * * TRI CINJENICE O BOOTSTRAP-U 5.3.2 KOJE ODREDJUJU CEO OVAJ FAJL * * 1) `--bs-body-bg` je POVRSINA KARTICE, ne pozadina ekrana. `.card`, `.modal`, * `.dropdown-menu`, `.list-group`, `.table` i `.form-control` svi crtaju sebe * iz njega. Zato je `--bs-body-bg` toplo belo, a bez boja se rucno nanosi na * `body`. Sest komponenti se time resi odjednom. * * 2) Promenljive koje Bootstrap deklarise NA KOMPONENTI (`.btn-primary * { --bs-btn-bg: #0d6efd }`) ne mogu da se dohvate iz `:root`. Zato ispod * postoji odeljak „PONOVNO SIDRENJE KOMPONENTI" — bez njega bi dugmad ostala * plava iako je `--bs-primary` teget. * * 3) `.text-warning` i `.bg-warning` dele JEDAN `--bs-warning-rgb`. U ovoj bazi * koda `text-warning` je ikonica na svetlom (danas 1.63:1 — nevidljiva), a * `bg-warning` je 53 bedza sa tamnim tekstom koji su citljivi. Jedna vrednost * ne moze oboje; zato `.text-warning` i `.text-info` dobijaju svoje pravilo. * * Svi odnosi kontrasta u komentarima su IZRACUNATI (WCAG relativna luminansa), * nisu procenjeni. * ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── SLOJ 1 — sirova paleta ─────────────────────────────────────────────── */ --ea-navy-900: #12283F; --ea-navy-800: #17304D; /* bocna traka */ --ea-navy-700: #1B3A5C; /* gornja traka, primarno dugme */ --ea-navy-600: #24537D; /* aktivna stavka menija */ --ea-navy-hover: #253C58; /* belo @6% preko navy-800, spljosteno */ --ea-navy-pill: #2D4A69; /* belo @8% preko navy-700, spljosteno */ --ea-navy-050: #E2EBF5; --ea-gold-400: #D9B868; --ea-gold-500: #C8A24A; /* samo na tegetu */ --ea-gold-600: #A8842F; /* ukrasne linije — 3.05:1, nikad tekst */ --ea-gold-700: #7A5D1B; /* citljiv mesing na svetlom */ --ea-amber-500: #D9A227; /* pozadinski amber, nosi taman tekst */ --ea-amber-600: #C8912A; /* ispuna KPI kartice */ --ea-teal-600: #12716B; --ea-red-600: #A62B22; --ea-red-700: #B42318; --ea-green-700: #16714A; --ea-blue-700: #1A5FA8; /* ── SLOJ 2 — povrsine ──────────────────────────────────────────────────── */ --ea-canvas: #F4EFE6; /* platno strane */ --ea-canvas-sunken: #EBE3D5; --ea-surface: #FDFBF7; /* kartica */ --ea-surface-2: #F7F1E7; /* zaglavlje tabele, podnozje */ --ea-surface-hover: #F5F1E8; --ea-border: #E7DFD0; --ea-border-strong: #D8CCB5; --ea-border-control: #8E8073; /* 3.70:1 prema povrsini — WCAG 1.4.11 */ /* ── SLOJ 2 — mastilo ───────────────────────────────────────────────────── */ --ea-ink: #1C2A38; /* 12.75:1 na platnu */ --ea-ink-2: #42505E; /* 7.22:1 */ --ea-ink-3: #5A6572; /* 5.18:1 */ --ea-ink-rgb: 28, 42, 56; --ea-link: #1A5FA8; --ea-link-hover: #123F70; --ea-danger-ink: #B42318; --ea-success-ink: #16714A; --ea-teal-ink: #12716B; --ea-brass: #7A5D1B; /* Ispune koje nose TAMAN tekst. Odvojene od mastila iz istog razloga zbog koga postoji `.text-warning` pravilo — bedz i ikonica nisu ista stvar. */ --ea-info-fill: #8FD9D4; /* teget na njoj = 7.22:1 */ /* ── SLOJ 2 — ljuska ────────────────────────────────────────────────────── */ --ea-nav-bg: var(--ea-navy-800); --ea-nav-hover-bg: var(--ea-navy-hover); --ea-nav-active-bg: var(--ea-navy-600); --ea-nav-rail: var(--ea-gold-500); /* 3px sina uz aktivnu stavku */ --ea-nav-item: #C3D2E2; /* 8.71:1 na navy-800 */ --ea-nav-item-active: #FFFFFF; --ea-nav-caption: #93A8BF; /* 5.49:1 */ --ea-nav-icon: var(--ea-gold-500); --ea-nav-width: 15.5rem; --ea-topbar-bg: var(--ea-navy-700); --ea-topbar-ink: #FFFFFF; --ea-topbar-ink-muted: #C3D2E2; --ea-topbar-field-bg: var(--ea-navy-pill); --ea-topbar-field-ink: #FFFFFF; --ea-topbar-field-hint: #B7C8DA; --ea-topbar-h: 56px; /* Kontrole NA TEGETU. `btn-outline-secondary` je na tamnoj traci 3.29:1 — zato traka ima svoje mastilo za dugmad. */ --ea-on-navy-btn: #C3D2E2; /* 7.55:1 */ --ea-on-navy-btn-danger: #F1B0A9; /* 6.38:1 */ --ea-on-navy-btn-warn: #D9B868; /* 6.09:1 */ --ea-on-navy-border: #8293A5; /* 3.69:1 — granica kontrole, 1.4.11 */ /* Mastilo na TAMNOJ povrsini — blok koda u alatima i ceo editor promptova. 12.25:1 na navy-900. Postoji kao token jer ga koriste dva fajla; dok je bio doslovan broj na dva mesta, bio je i dve prilike da se raziđu. */ --ea-on-dark: #E3E9EF; --ea-on-dark-muted: #93A8BF; /* 6.13:1 na navy-900 */ /* ── SLOJ 2 — KPI kartice ───────────────────────────────────────────────── */ --ea-kpi-1-bg: var(--ea-navy-700); --ea-kpi-1-ink: #FFFFFF; /* 11.63:1 */ --ea-kpi-2-bg: var(--ea-teal-600); --ea-kpi-2-ink: #FFFFFF; /* 5.83:1 */ --ea-kpi-3-bg: var(--ea-amber-600); --ea-kpi-3-ink: #231A05; /* 6.17:1 */ --ea-kpi-4-bg: var(--ea-red-600); --ea-kpi-4-ink: #FFFFFF; /* 7.02:1 */ --ea-on-fill-muted: rgba(255, 255, 255, 0.85); --ea-on-fill-muted-dark: rgba(35, 26, 5, 0.85); /* Cip mora da ide U SUPROTNOM SMERU od mastila koje nosi. Prva verzija je imala oba obrnuto: na plocicama sa BELIM tekstom podloga se posvetljavala (belo @18%), pa je cip trenda na tirkiznoj bio 4.07:1 — ispod praga, i to LOSIJE od same plocice (5.83:1). Sada belo mastilo dobija tamniji cip, a tamno mastilo svetliji. */ --ea-on-fill-chip: rgba(0, 0, 0, 0.22); /* uz belo mastilo */ --ea-on-fill-chip-dark: rgba(255, 255, 255, 0.30); /* uz tamno mastilo */ /* ── SLOJ 2 — pilule stanja (dvostruko sluze i kao paleta za `.alert`) ──── */ --ea-pill-danger-bg: #F7E2DF; --ea-pill-danger-ink: #8E1B12; /* 7.30 */ --ea-pill-warn-bg: #F9EEDA; --ea-pill-warn-ink: #6E5416; /* 6.21 */ --ea-pill-ok-bg: #DFEFE7; --ea-pill-ok-ink: #0F5C3D; /* 6.74 */ --ea-pill-info-bg: #E2EBF5; --ea-pill-info-ink: #164E86; /* 7.06 */ --ea-pill-neutral-bg: #EDE8DE; --ea-pill-neutral-ink: #42505E; /* 6.77 */ /* ── SLOJ 2 — pismo ─────────────────────────────────────────────────────── */ --ea-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif; /* Serif SAMO za naslove i logotip (~6 elemenata po strani). Telo ostaje sistemsko pismo — advokat gleda ovaj ekran ceo dan, a webfont u telu je i trosak i rizik za citljivost. */ --ea-font-display: "Source Serif 4", "Source Serif Pro", Cambria, Georgia, "Times New Roman", serif; --ea-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --ea-fs-3xs: 0.6875rem; --ea-fs-2xs: 0.75rem; --ea-fs-xs: 0.8125rem; --ea-fs-sm: 0.875rem; --ea-fs-base: 0.9375rem; --ea-fs-md: 1.0625rem; --ea-fs-lg: 1.25rem; --ea-fs-xl: 1.5rem; --ea-fs-2xl: 1.875rem; --ea-fs-kpi: 2.375rem; --ea-lh-tight: 1.2; --ea-lh-snug: 1.4; --ea-lh-base: 1.55; --ea-fw-normal: 400; --ea-fw-medium: 500; --ea-fw-semibold: 600; --ea-fw-bold: 700; --ea-ls-caps: 0.06em; --ea-ls-tight: -0.01em; /* ── SLOJ 2 — razmak, poluprecnik, senka ────────────────────────────────── */ --ea-gutter: 1.75rem; --ea-card-pad: 1.25rem; --ea-section-gap: 1.75rem; --ea-radius-xs: 0.25rem; --ea-radius-sm: 0.375rem; --ea-radius-md: 0.5rem; --ea-radius-lg: 0.75rem; --ea-radius-xl: 1rem; --ea-radius-pill: 999px; /* Senke su TEGET, nikad crne — crna na bez podlozi izgleda kao prljavstina. */ --ea-shadow-xs: 0 1px 2px rgba(23, 48, 77, 0.06); --ea-shadow-sm: 0 1px 3px rgba(23, 48, 77, 0.07), 0 1px 2px rgba(23, 48, 77, 0.05); --ea-shadow-md: 0 4px 12px rgba(23, 48, 77, 0.08), 0 1px 3px rgba(23, 48, 77, 0.06); --ea-shadow-lg: 0 12px 32px rgba(23, 48, 77, 0.12), 0 2px 8px rgba(23, 48, 77, 0.06); --ea-shadow-nav: 2px 0 12px rgba(18, 40, 63, 0.18); --ea-shadow-kpi: 0 2px 8px rgba(23, 48, 77, 0.14); --ea-focus-ring: 0 0 0 0.25rem rgba(26, 95, 168, 0.28); /* ══ SLOJ 3 — PREGAZENE BOOTSTRAP PROMENLJIVE ═════════════════════════════ * Ove rade iz `:root` jer ih Bootstrap i deklarise na `:root`. Sve sto je * deklarisano na komponenti resava se nize, u odeljku o sidrenju. */ --bs-body-bg: var(--ea-surface); --bs-body-bg-rgb: 253, 251, 247; --bs-body-color: var(--ea-ink); --bs-body-color-rgb: var(--ea-ink-rgb); --bs-emphasis-color: var(--ea-ink); --bs-emphasis-color-rgb: var(--ea-ink-rgb); --bs-heading-color: var(--ea-navy-700); --bs-secondary-color: var(--ea-ink-3); /* `.text-muted` — 497 mesta */ --bs-tertiary-color: var(--ea-ink-3); --bs-secondary-bg: var(--ea-canvas-sunken); --bs-secondary-bg-rgb: 235, 227, 213; --bs-tertiary-bg: var(--ea-surface-2); --bs-tertiary-bg-rgb: 247, 241, 231; --bs-primary: var(--ea-navy-700); --bs-primary-rgb: 27, 58, 92; --bs-secondary: var(--ea-ink-3); --bs-secondary-rgb: 90, 101, 114; --bs-success: var(--ea-success-ink); --bs-success-rgb: 22, 113, 74; --bs-danger: var(--ea-danger-ink); --bs-danger-rgb: 180, 35, 24; --bs-warning: var(--ea-amber-500); --bs-warning-rgb: 217, 162, 39; --bs-info: var(--ea-info-fill); --bs-info-rgb: 143, 217, 212; --bs-light: var(--ea-surface-2); --bs-light-rgb: 247, 241, 231; --bs-dark: var(--ea-navy-700); --bs-dark-rgb: 27, 58, 92; --bs-link-color: var(--ea-link); --bs-link-color-rgb: 26, 95, 168; --bs-link-hover-color: var(--ea-link-hover); --bs-link-hover-color-rgb: 18, 63, 112; /* `--bs-link-decoration` NAMERNO ostaje `underline`: #1A5FA8 prema mastilu tela #1C2A38 je 2.26:1, pa boja sama ne moze da nosi vezu (WCAG 1.4.1). Podvlaka se sklanja tacno tamo gde je veza ocigledno kontrola — v. nize. */ --bs-border-color: var(--ea-border); --bs-border-color-translucent: var(--ea-border); --bs-border-radius: var(--ea-radius-md); --bs-border-radius-sm: var(--ea-radius-sm); --bs-border-radius-lg: var(--ea-radius-lg); --bs-border-radius-xl: var(--ea-radius-xl); --bs-box-shadow: var(--ea-shadow-md); --bs-box-shadow-sm: var(--ea-shadow-sm); /* pretiha 49 `.shadow-sm` mesta */ --bs-box-shadow-lg: var(--ea-shadow-lg); --bs-focus-ring-width: 0.25rem; --bs-focus-ring-opacity: 0.28; --bs-focus-ring-color: rgba(26, 95, 168, 0.28); --bs-body-font-family: var(--ea-font-ui); --bs-body-font-size: var(--ea-fs-base); --bs-body-line-height: var(--ea-lh-base); --bs-font-monospace: var(--ea-font-mono); --bs-highlight-bg: #FBEBC8; --bs-highlight-color: var(--ea-ink); /* 91 `.alert-*` mesta cita ove trojke (ukljucujuci i onu u layout.php). */ --bs-danger-bg-subtle: var(--ea-pill-danger-bg); --bs-danger-text-emphasis: var(--ea-pill-danger-ink); --bs-danger-border-subtle: #E9C0BA; --bs-warning-bg-subtle: var(--ea-pill-warn-bg); --bs-warning-text-emphasis: var(--ea-pill-warn-ink); --bs-warning-border-subtle: #EBD9AE; --bs-success-bg-subtle: var(--ea-pill-ok-bg); --bs-success-text-emphasis: var(--ea-pill-ok-ink); --bs-success-border-subtle: #B6D8C8; --bs-info-bg-subtle: var(--ea-pill-info-bg); --bs-info-text-emphasis: var(--ea-pill-info-ink); --bs-info-border-subtle: #BCD2E8; --bs-primary-bg-subtle: var(--ea-pill-info-bg); --bs-primary-text-emphasis: var(--ea-pill-info-ink); --bs-primary-border-subtle: #BCD2E8; --bs-secondary-bg-subtle: var(--ea-pill-neutral-bg); --bs-secondary-text-emphasis: var(--ea-pill-neutral-ink); --bs-secondary-border-subtle: var(--ea-border-strong); --bs-light-bg-subtle: var(--ea-surface); --bs-light-text-emphasis: var(--ea-ink-2); --bs-dark-bg-subtle: var(--ea-canvas-sunken); --bs-dark-text-emphasis: var(--ea-ink-2); } /* ═══ PLATNO ══════════════════════════════════════════════════════════════ */ body { background-color: var(--ea-canvas); color: var(--ea-ink); font-family: var(--ea-font-ui); font-size: var(--ea-fs-base); line-height: var(--ea-lh-base); -webkit-font-smoothing: antialiased; } h1, h2, h3, .ea-display { font-family: var(--ea-font-display); font-weight: var(--ea-fw-semibold); letter-spacing: var(--ea-ls-tight); color: var(--ea-navy-700); } h4, h5, h6 { font-weight: var(--ea-fw-semibold); color: var(--ea-navy-700); } h1 { font-size: var(--ea-fs-2xl); } h2 { font-size: var(--ea-fs-xl); } h3 { font-size: var(--ea-fs-lg); } /* Brojevi koji se porede u koloni moraju da budu iste sirine. */ .ea-num, .ea-kpi-value, td .text-danger, .table td.text-end { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ═══ PONOVNO SIDRENJE KOMPONENTI ═════════════════════════════════════════ * Sve ispod postoji zato sto Bootstrap deklarise promenljivu NA KOMPONENTI, * pa je `:root` ne dohvata. Nije ukras — bez ovoga kartica ostaje bela na bez * platnu, a dugme plavo pored tegetnog zaglavlja. */ .card { --bs-card-bg: var(--ea-surface); --bs-card-border-color: var(--ea-border); --bs-card-cap-bg: var(--ea-surface-2); --bs-card-cap-color: var(--ea-navy-700); --bs-card-color: var(--ea-ink); --bs-card-border-radius: var(--ea-radius-lg); --bs-card-inner-border-radius: calc(var(--ea-radius-lg) - 1px); } /* `.card-header.bg-white` (12 mesta) je specificnost (0,2,0) i pobedjuje golo `.bg-white` — zato `!important`, a ne jos jedan selektor. */ .card-header.bg-white { background-color: var(--ea-surface) !important; border-bottom-color: var(--ea-border); color: var(--ea-navy-700); font-family: var(--ea-font-display); letter-spacing: var(--ea-ls-tight); } .table { --bs-table-bg: transparent; --bs-table-color: var(--ea-ink); --bs-table-border-color: var(--ea-border); --bs-table-striped-bg: var(--ea-surface-2); --bs-table-hover-bg: var(--ea-surface-hover); --bs-table-hover-color: var(--ea-ink); } .table-light { --bs-table-bg: var(--ea-surface-2); --bs-table-color: var(--ea-ink-2); --bs-table-border-color: var(--ea-border); } /* `thead class="table-dark"` je ostatak stare teme — crna traka preko toplog platna. Stoji na 16 mesta (radnje, klijenti, fakture, troskovnici, korisnici, portal sudova, kartica predmeta, detalj dokumenta i cetiri mesta koja ga postavljaju iz JS-a). Umesto sesnaest izmena, jedno ponovno sidrenje: svako zaglavlje tabele u aplikaciji izgleda isto kao ono na spisku predmeta. Buduci `table-dark` je time resen unapred. */ .table-dark { --bs-table-bg: var(--ea-surface-2); --bs-table-color: var(--ea-ink-2); /* 7.36:1 na toploj povrsini */ --bs-table-border-color: var(--ea-border-strong); --bs-table-striped-bg: var(--ea-surface-hover); --bs-table-striped-color: var(--ea-ink-2); --bs-table-active-bg: var(--ea-canvas-sunken); --bs-table-active-color: var(--ea-ink); --bs-table-hover-bg: var(--ea-surface-hover); --bs-table-hover-color: var(--ea-ink); } .list-group { --bs-list-group-bg: var(--ea-surface); --bs-list-group-color: var(--ea-ink); --bs-list-group-border-color: var(--ea-border); --bs-list-group-action-hover-bg: var(--ea-surface-hover); --bs-list-group-action-hover-color: var(--ea-ink); --bs-list-group-active-bg: var(--ea-navy-600); --bs-list-group-active-border-color: var(--ea-navy-600); } .modal { --bs-modal-bg: var(--ea-surface); --bs-modal-color: var(--ea-ink); --bs-modal-border-color: var(--ea-border); --bs-modal-header-border-color: var(--ea-border); --bs-modal-footer-border-color: var(--ea-border); --bs-modal-border-radius: var(--ea-radius-lg); } .dropdown-menu { --bs-dropdown-bg: var(--ea-surface); --bs-dropdown-color: var(--ea-ink); --bs-dropdown-border-color: var(--ea-border); --bs-dropdown-link-hover-bg: var(--ea-surface-hover); --bs-dropdown-link-active-bg: var(--ea-navy-600); } .progress { --bs-progress-bg: var(--ea-canvas-sunken); --bs-progress-bar-bg: var(--ea-navy-600); --bs-progress-bar-color: #FFFFFF; } .accordion { --bs-accordion-bg: var(--ea-surface); --bs-accordion-border-color: var(--ea-border); --bs-accordion-btn-color: var(--ea-ink); --bs-accordion-btn-bg: var(--ea-surface-2); --bs-accordion-active-bg: var(--ea-navy-050); --bs-accordion-active-color: var(--ea-navy-700); --bs-accordion-btn-focus-box-shadow: var(--ea-focus-ring); } .form-control, .form-select { background-color: var(--ea-surface); border-color: var(--ea-border-control); color: var(--ea-ink); font-size: var(--ea-fs-sm); } .form-control:focus, .form-select:focus { background-color: var(--ea-surface); border-color: var(--ea-link); box-shadow: var(--ea-focus-ring); } .form-control::placeholder { color: var(--ea-ink-3); opacity: 1; } .input-group-text { background-color: var(--ea-surface-2); border-color: var(--ea-border-control); } .form-check-input:checked { background-color: var(--ea-navy-600); border-color: var(--ea-navy-600); } .form-check-input:focus { border-color: var(--ea-link); box-shadow: var(--ea-focus-ring); } .form-label { font-size: var(--ea-fs-sm); font-weight: var(--ea-fw-medium); color: var(--ea-ink-2); } .btn { --bs-btn-font-size: var(--ea-fs-sm); --bs-btn-font-weight: var(--ea-fw-medium); } .btn-primary, .btn-dark { --bs-btn-bg: var(--ea-navy-700); --bs-btn-border-color: var(--ea-navy-700); --bs-btn-hover-bg: var(--ea-navy-800); --bs-btn-hover-border-color: var(--ea-navy-800); --bs-btn-active-bg: var(--ea-navy-900); --bs-btn-active-border-color: var(--ea-navy-900); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } .btn-outline-secondary { --bs-btn-color: var(--ea-ink-2); --bs-btn-border-color: var(--ea-border-control); --bs-btn-hover-bg: var(--ea-navy-700); --bs-btn-hover-border-color: var(--ea-navy-700); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--ea-navy-800); --bs-btn-active-border-color: var(--ea-navy-800); } .btn-warning { --bs-btn-bg: var(--ea-amber-500); --bs-btn-border-color: var(--ea-amber-500); --bs-btn-hover-bg: #C08F1E; --bs-btn-hover-border-color: #C08F1E; --bs-btn-color: #231A05; --bs-btn-hover-color: #231A05; /* 8.05:1 */ } /* SLOJ 3 nije mogao ovo: `.text-*` i `.bg-*` dele isti `-rgb`, a ovde im trebaju razlicite vrednosti (v. cinjenicu 3 u zaglavlju). */ .text-warning { color: var(--ea-brass) !important; } /* bilo 1.63:1 */ .text-info { color: var(--ea-teal-ink) !important; } /* Podvlaka se sklanja samo tamo gde je veza ocigledno kontrola; prozni linkovi je zadrzavaju jer boja sama ne prolazi WCAG 1.4.1. */ .navbar a, .nav-link, .btn, .card-header a, .list-group-item-action, .ea-gsearch-item, .ea-gsearch-all, .ea-card-link, .ea-kpi { text-decoration: none; } /* ═══ LJUSKA: BOCNA TRAKA + GORNJA TRAKA ══════════════════════════════════ * Traka ide punom visinom levo, a gornja traka pocinje DESNO od nje — kao u * makueti. Zato `layout.php` vise nije `container-fluid > row > col`, nego * fleks ljuska; `#ea-main` i `#ea-sidebar` zadrzavaju svoje id-jeve jer su * ugovor prema `ea-timer.js`, `ea-global-search.js` i mobilnom prekidacu. */ .ea-shell { display: flex; align-items: flex-start; min-height: 100vh; } .ea-content { flex: 1 1 auto; /* Bez `min-width:0` fleks stavka ne sme da se stisne ispod prirodne sirine svog sadrzaja — jedna siroka tabela bi tada gurala celu stranu udesno. */ min-width: 0; } /* ── Bocna traka ────────────────────────────────────────────────────────── */ .ea-sidebar { flex: 0 0 var(--ea-nav-width); width: var(--ea-nav-width); position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; background: var(--ea-nav-bg); box-shadow: var(--ea-shadow-nav); z-index: 1035; /* Traka za skrolovanje je bila pregledacka, dakle svetla — bleda greda preko tegetne trake. Ovde se stapa sa podlogom: providna staza, tanak palac u belom pod malim udelom. Ne sakriva se sasvim, jer traka koja se ne vidi ne kaze da ispod ima jos stavki. `scrollbar-*` pokriva Firefox, `::-webkit-*` ostale — obe deklaracije su potrebne, nijedna nije zamena za drugu. */ scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; } .ea-sidebar::-webkit-scrollbar { width: 6px; } .ea-sidebar::-webkit-scrollbar-track { background: transparent; } .ea-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; } .ea-sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); } .ea-sidebar-inner { display: flex; flex-direction: column; min-height: 100%; padding: 1rem 0.75rem 1.5rem; } .ea-sidebar-brand { display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 0.5rem 1rem; color: var(--ea-gold-500); } .ea-sidebar-brand:hover { color: var(--ea-gold-400); } .ea-emblem { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; } .ea-wordmark { font-family: var(--ea-font-display); font-size: var(--ea-fs-md); font-weight: var(--ea-fw-semibold); letter-spacing: 0.01em; color: #FFFFFF; line-height: 1.1; } .ea-wordmark small { display: block; font-family: var(--ea-font-ui); font-size: var(--ea-fs-3xs); font-weight: var(--ea-fw-normal); letter-spacing: var(--ea-ls-caps); text-transform: uppercase; color: var(--ea-nav-caption); } .ea-nav-filter-wrap { position: relative; margin-bottom: 0.85rem; } .ea-nav-filter-icon { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); color: var(--ea-topbar-field-hint); pointer-events: none; font-size: 0.85rem; } .ea-nav-filter { padding-left: 2rem; background: var(--ea-navy-900); border-color: var(--ea-on-navy-border); color: #FFFFFF; font-size: var(--ea-fs-sm); } .ea-nav-filter::placeholder { color: var(--ea-topbar-field-hint); opacity: 1; } .ea-nav-filter:focus { background: var(--ea-navy-900); border-color: var(--ea-gold-500); color: #FFFFFF; box-shadow: 0 0 0 0.2rem rgba(200, 162, 74, 0.28); } /* Nativni „×" u `type=search` je na tamnom skoro nevidljiv. */ .ea-nav-filter::-webkit-search-cancel-button { filter: invert(1) opacity(0.6); } .ea-nav-groups { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.15rem; } .ea-nav-group { list-style: none; } .ea-nav-group-pinned { margin-top: auto; padding-top: 0.75rem; } .ea-nav-items { list-style: none; padding: 0; margin: 0; } .ea-nav-caption { display: flex; align-items: center; width: 100%; border: 0; background: none; text-align: left; font-size: var(--ea-fs-2xs); font-weight: var(--ea-fw-semibold); text-transform: uppercase; letter-spacing: var(--ea-ls-caps); color: var(--ea-nav-caption); /* 5.49:1 na tegetu */ padding: 0.9rem 0.75rem 0.3rem; } .ea-nav-caption:hover { color: #FFFFFF; } .ea-nav-caption:focus-visible { outline: 2px solid var(--ea-gold-400); outline-offset: -2px; } .ea-nav-caret { margin-left: auto; font-size: 0.7em; transition: transform 0.15s ease; } .ea-nav-group[data-collapsed="true"] .ea-nav-caret { transform: rotate(-90deg); } .ea-nav-group[data-collapsed="true"] .ea-nav-items { display: none; } /* Dok se meni filtrira, sklopljena grupa MORA da pokaze pogodak — inace bi pretraga tvrdila da stavke nema, a ona samo stoji iza zatvorene grupe. */ #ea-nav-groups.ea-nav-filtering .ea-nav-group[data-collapsed="true"] .ea-nav-items { display: block; } @media (prefers-reduced-motion: reduce) { .ea-nav-caret { transition: none; } } .ea-sidebar .nav-link { display: flex; align-items: center; gap: 0.6rem; color: var(--ea-nav-item); font-size: var(--ea-fs-sm); font-weight: var(--ea-fw-medium); border-radius: var(--ea-radius-sm); border-left: 3px solid transparent; padding: 0.44rem 0.7rem; margin-bottom: 0.08rem; } .ea-sidebar .nav-link > .bi { color: var(--ea-nav-icon); font-size: 1rem; flex: 0 0 auto; } .ea-sidebar .nav-link:hover { background: var(--ea-nav-hover-bg); color: #FFFFFF; } .ea-sidebar .nav-link.active { background: var(--ea-nav-active-bg); color: var(--ea-nav-item-active); border-left-color: var(--ea-nav-rail); font-weight: var(--ea-fw-semibold); } /* Zlato na aktivnoj podlozi je 3.34:1 — ikonica zato ide u belo, ne u zlato. */ .ea-sidebar .nav-link.active > .bi { color: #FFFFFF; } .ea-sidebar .nav-link:focus-visible { outline: 2px solid var(--ea-gold-400); outline-offset: -2px; } .ea-nav-label { min-width: 0; overflow-wrap: anywhere; } .ea-nav-empty { list-style: none; padding: 0.75rem; font-size: var(--ea-fs-xs); color: var(--ea-nav-caption); } /* ── Gornja traka ───────────────────────────────────────────────────────── */ .ea-topbar { position: sticky; top: 0; z-index: 1030; min-height: var(--ea-topbar-h); background: var(--ea-topbar-bg); color: var(--ea-topbar-ink); padding: 0.4rem var(--ea-gutter); box-shadow: var(--ea-shadow-sm); } .ea-topbar .navbar-nav { align-items: center; } .ea-topbar-user { display: flex; align-items: center; gap: 0.5rem; color: var(--ea-topbar-ink); font-size: var(--ea-fs-sm); } /* Monogram, ne fotografija: `ea_users` nema kolonu za sliku, pa bi avatar znacio i kolonu i otpremanje i vlasnistvo nad fajlom. Inicijali su isti podatak koji vec stoji pored njih. */ .ea-avatar { width: 2rem; height: 2rem; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ea-gold-500); color: var(--ea-navy-900); /* 8.44:1 */ font-size: var(--ea-fs-2xs); font-weight: var(--ea-fw-bold); letter-spacing: 0.02em; } .ea-role-badge { background: var(--ea-navy-pill); color: var(--ea-topbar-ink-muted); border: 1px solid var(--ea-on-navy-border); font-size: var(--ea-fs-3xs); font-weight: var(--ea-fw-semibold); letter-spacing: var(--ea-ls-caps); padding: 0.2rem 0.45rem; border-radius: var(--ea-radius-pill); } .ea-topbar-sep { width: 1px; height: 1.5rem; background: var(--ea-on-navy-border); opacity: 0.5; } /* Kontrole na tegetu: `btn-outline-secondary` je ovde 3.29:1 na sivom mastilu. */ .ea-topbar .btn-outline-secondary { --bs-btn-color: var(--ea-on-navy-btn); --bs-btn-border-color: var(--ea-on-navy-border); --bs-btn-hover-bg: var(--ea-on-navy-btn); --bs-btn-hover-border-color: var(--ea-on-navy-btn); --bs-btn-hover-color: var(--ea-navy-900); --bs-btn-active-bg: var(--ea-on-navy-btn); --bs-btn-active-color: var(--ea-navy-900); } .ea-topbar .btn-outline-danger { --bs-btn-color: var(--ea-on-navy-btn-danger); --bs-btn-border-color: var(--ea-on-navy-btn-danger); --bs-btn-hover-bg: var(--ea-on-navy-btn-danger); --bs-btn-hover-color: var(--ea-navy-900); } .ea-topbar .btn-warning { --bs-btn-bg: var(--ea-on-navy-btn-warn); --bs-btn-border-color: var(--ea-on-navy-btn-warn); --bs-btn-color: var(--ea-navy-900); } .ea-topbar .navbar-toggler { border-color: var(--ea-on-navy-border); } /* ── Glavna kolona ──────────────────────────────────────────────────────── */ #ea-main { padding: var(--ea-section-gap) var(--ea-gutter) 4rem; position: relative; min-height: calc(100vh - var(--ea-topbar-h)); } /* Vodeni zig — cisto ukras, `aria-hidden`, nikad ne nosi znacenje. `position:fixed` da ostane u uglu platna, a ne da odjase sa skrolom. ═══ `z-index: -1`, A NE PODIZANJE SADRZAJA IZNAD NJEGA ═══ Prva verzija je zig ostavljala na `z-index: 0`, a sadrzaj dizala pravilom `#ea-main > * { position: relative; z-index: 1 }`. To pravilo ima specificnost ID-ja (1,0,0) i time NADJACAVA Bootstrap-ov `.modal { position: fixed; z-index: 1055 }` (0,1,0) — pa je svaki modal napisan u telu strane gubio `fixed`, iscrtavao se u toku strane i zavrsavao ISPOD zastora (`.modal-backdrop`, z-index 1050). Izmereno u pregledacu: dugme u dijalogu vise nije bilo klikabilno; `document.elementFromPoint` nad njim vracao je `modal-backdrop`. Pogadjalo je 12 modala na 6 strana (court-notes, judge-notes, dopis-templates, dopis, document-detail, rabos-zadaci) i panel glasovnih komandi na Dashboardu, a najgore je bilo `#modal-ocr-confirm` (`data-bs-backdrop="static"`, `data-bs-keyboard="false"`): bez `fixed` se nije mogao ni zatvoriti. Zig zato ide ISPOD toka strane, umesto da se tok dize iznad njega. Radi jer nijedan predak (`.ea-shell`, `.ea-content`) ne pravi kontekst slaganja. `isolation: isolate` na `#ea-main` NIJE zamena — provereno, zarobi modal isto. */ .ea-watermark { position: fixed; right: -2rem; bottom: -3rem; width: min(26rem, 34vw); color: var(--ea-gold-600); opacity: 0.07; pointer-events: none; z-index: -1; } @media (max-width: 991.98px) { .ea-watermark { display: none; } } /* ═══ MOBILNO ═════════════════════════════════════════════════════════════ * Ispod `md` traka nije kolona nego prekrivac ISPOD gornje trake. Bootstrap * `.collapse` i dalje upravlja prikazom (dugme u traci gadja `#ea-sidebar`), * pa se ovde menja samo polozaj. */ @media (max-width: 767.98px) { .ea-shell { display: block; } .ea-sidebar.show, .ea-sidebar.collapsing { position: fixed; inset: var(--ea-topbar-h) 0 0 0; width: auto; height: auto; flex: none; } .ea-sidebar .nav-link { padding: 0.65rem 0.8rem; font-size: var(--ea-fs-base); } .ea-topbar { padding: 0.4rem 1rem; } #ea-main { padding: 1.25rem 1rem 3rem; } } /* ═══ KPI KARTICE ═════════════════════════════════════════════════════════ */ .ea-kpi { display: block; border: 1px solid var(--ea-kpi-edge); border-radius: var(--ea-radius-lg); box-shadow: var(--ea-shadow-kpi); background: var(--ea-kpi-bg); color: var(--ea-kpi-ink); padding: var(--ea-card-pad); height: 100%; transition: transform 0.15s ease, box-shadow 0.15s ease; } .ea-kpi:hover, .ea-kpi:focus { color: var(--ea-kpi-ink); transform: translateY(-2px); box-shadow: var(--ea-shadow-lg); } /* Prsten fokusa je bio beo, a `outline-offset: 2px` ga iznosi VAN plocice — dakle na bez platno, gde je beo prema bez 1.15:1 i prakticno se ne vidi. Teget prema platnu je 13.4:1 i radi na sve cetiri plocice, jer prsten svejedno stoji na platnu, a ne na ispuni kartice. */ .ea-kpi:focus-visible { outline: 3px solid var(--ea-navy-900); outline-offset: 2px; } /* Ivica u sopstvenoj tamnijoj nijansi: amber ispuna prema bez platnu je samo 2.43:1, pa se bez nje granica plocice ne vidi. */ .ea-kpi--1 { --ea-kpi-bg: var(--ea-kpi-1-bg); --ea-kpi-ink: var(--ea-kpi-1-ink); --ea-kpi-edge: var(--ea-navy-900); --ea-kpi-chip: var(--ea-on-fill-chip); } .ea-kpi--2 { --ea-kpi-bg: var(--ea-kpi-2-bg); --ea-kpi-ink: var(--ea-kpi-2-ink); --ea-kpi-edge: #0C5B56; --ea-kpi-chip: var(--ea-on-fill-chip); } .ea-kpi--3 { --ea-kpi-bg: var(--ea-kpi-3-bg); --ea-kpi-ink: var(--ea-kpi-3-ink); --ea-kpi-edge: #8A6011; --ea-kpi-chip: var(--ea-on-fill-chip-dark); } .ea-kpi--4 { --ea-kpi-bg: var(--ea-kpi-4-bg); --ea-kpi-ink: var(--ea-kpi-4-ink); --ea-kpi-edge: #7E2019; --ea-kpi-chip: var(--ea-on-fill-chip); } .ea-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .ea-kpi-icon { font-size: 1.5rem; opacity: 0.55; line-height: 1; } .ea-kpi-value { font-size: var(--ea-fs-kpi); font-weight: var(--ea-fw-bold); line-height: 1.05; margin-top: 0.4rem; } .ea-kpi-label { font-size: var(--ea-fs-xs); font-weight: var(--ea-fw-medium); opacity: 0.92; } /* Fiksna visina podnozja: dve kartice nemaju cip, pa bi red bez nje poskocio. */ .ea-kpi-foot { min-height: 1.15rem; margin-top: 0.35rem; font-size: var(--ea-fs-3xs); opacity: 0.88; } .ea-kpi-trend { display: inline-flex; align-items: center; gap: 0.15rem; font-size: var(--ea-fs-3xs); background: var(--ea-kpi-chip); border-radius: var(--ea-radius-pill); padding: 0.1rem 0.4rem; font-weight: var(--ea-fw-semibold); } /* Pregledaci po pravilu ne stampaju pozadine — plocica bi izasla belo na belom. */ @media print { .ea-kpi { background: none !important; border: 1px solid #999; box-shadow: none; } .ea-kpi, .ea-kpi-value, .ea-kpi-label, .ea-kpi-foot { color: #000 !important; } } /* ═══ TRAKA DANA (7 dana) ═════════════════════════════════════════════════ */ .ea-daystrip { display: flex; gap: 0.4rem; padding: 0.75rem var(--ea-card-pad); border-bottom: 1px solid var(--ea-border); overflow-x: auto; } .ea-day { flex: 1 1 0; min-width: 4.1rem; border: 1px solid var(--ea-border-strong); border-radius: var(--ea-radius-md); background: var(--ea-surface-2); color: var(--ea-ink-2); padding: 0.35rem 0.3rem; line-height: 1.2; text-align: center; } .ea-day:hover { background: var(--ea-canvas-sunken); } .ea-day-label { display: block; font-size: var(--ea-fs-xs); font-weight: var(--ea-fw-semibold); } .ea-day-date { display: block; font-size: var(--ea-fs-3xs); color: var(--ea-ink-3); } .ea-day-count { display: inline-block; margin-top: 0.15rem; min-width: 1.15rem; border-radius: var(--ea-radius-pill); background: var(--ea-navy-600); color: #FFFFFF; font-size: var(--ea-fs-3xs); font-weight: var(--ea-fw-semibold); padding: 0 0.3rem; } /* „Danas" je trajna oznaka; izabran dan je filter. Dva nezavisna stanja. */ .ea-day--today { border-bottom: 3px solid var(--ea-gold-600); } .ea-day--active { background: var(--ea-navy-700); border-color: var(--ea-navy-900); color: #FFFFFF; } .ea-day--active .ea-day-date { color: rgba(255, 255, 255, 0.8); } .ea-day--active .ea-day-count { background: var(--ea-gold-500); color: var(--ea-navy-900); } .ea-day--empty { opacity: 0.55; cursor: default; } .ea-day--empty .ea-day-count { background: transparent; color: var(--ea-ink-3); } .ea-day:focus-visible { outline: 2px solid var(--ea-link); outline-offset: 1px; } /* ═══ SITNICE KOJE MAKETA TRAZI ═══════════════════════════════════════════ */ .ea-card-link { font-size: var(--ea-fs-xs); font-weight: var(--ea-fw-medium); color: var(--ea-link); } .ea-card-link:hover { text-decoration: underline; } .ea-btn-primary { background: var(--ea-navy-700); border: 1px solid var(--ea-navy-700); color: #FFFFFF; } .ea-btn-primary:hover, .ea-btn-primary:focus { background: var(--ea-navy-800); border-color: var(--ea-navy-800); color: #FFFFFF; } .ea-pill-urgent { background: var(--ea-red-600); color: #FFFFFF; font-size: var(--ea-fs-3xs); font-weight: var(--ea-fw-semibold); border-radius: var(--ea-radius-pill); } /* Ikonica praznog stanja bila je #D1D5DB = 1.48:1 — merljivo jezgro zamerke „bledo i sterilno". Ostaje ukrasna, ali se vidi. */ .ea-empty-icon { color: var(--ea-gold-600); opacity: 0.55; } .ea-page-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: var(--ea-section-gap); } .ea-page-title { display: flex; align-items: center; gap: 0.55rem; margin: 0; } .ea-page-title > .bi { color: var(--ea-gold-600); font-size: 0.9em; } /* ═══ STOPERICA U GORNJOJ TRACI ═══════════════════════════════════════════ */ .ea-timer { display: flex; align-items: center; gap: 0.3rem; background: var(--ea-navy-pill); border: 1px solid var(--ea-on-navy-border); border-radius: var(--ea-radius-pill); padding: 0.15rem 0.5rem; } .ea-timer-icon { color: var(--ea-gold-400); } .ea-timer-clock { color: #FFFFFF; font-variant-numeric: tabular-nums; font-weight: var(--ea-fw-semibold); font-size: var(--ea-fs-sm); min-width: 3.6rem; text-align: center; } .ea-timer-clock:hover { color: var(--ea-gold-400); } .ea-timer-btn { --bs-btn-padding-y: 0.1rem; --bs-btn-padding-x: 0.4rem; --bs-btn-color: var(--ea-on-navy-btn); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--ea-on-navy-btn); --bs-btn-hover-color: var(--ea-navy-900); --bs-btn-font-size: var(--ea-fs-3xs); } /* Pauzirana stoperica mora da izgleda drugacije od one koja radi — inace je „stoji" i „radi" ista slika, a razlika je u dinarima. */ .ea-timer--paused { background: transparent; border-style: dashed; } .ea-timer--paused .ea-timer-clock { color: var(--ea-topbar-ink-muted); } .ea-timer--paused .ea-timer-icon { color: var(--ea-topbar-ink-muted); } .ea-timer-case { max-width: 14rem; font-size: var(--ea-fs-3xs); color: var(--ea-topbar-ink-muted); } /* ═══ KAPIJE: PRIJAVA I PROMENA LOZINKE ═══════════════════════════════════ * * Dve strane pre ulaska u aplikaciju (`login.php`, `change-password.php`) nemaju * ljusku — nemaju ni bocnu ni gornju traku. Da ne bi svaka nosila svoj `