/* ===== Sentinel UI — clean, theme-aware ===== */ /* 0) Tokens (light by default) */ :root{ --primary:#0d6efd; --primary-hover:#0b5ed7; --danger:#dc3545; --success:#198754; --warning:#ffc107; --bg:#ffffff; /* stranica */ --text:#1f1f1f; /* primarni tekst */ --muted:#6b7280; --surface:#ffffff; /* plohe/kartice/tablice */ --surface-alt:#f6f8fa; /* headeri tablica, trakice */ --border:#e5e7eb; /* linije */ --border-strong:#d0d7de; --row:#ffffff; /* zebra rows */ --row-alt:#fbfcfe; --row-hover:#eef4ff; --radius:10px; --radius-sm:6px; --shadow:0 1px 3px rgba(0,0,0,.08); } /* 0.1) Dark theme override (apply with ) */ body[data-theme="dark"]{ --bg:#0f141a; --text:#e9eef4; --muted:#b6c0ca; --surface:#121a24; --surface-alt:#0f1821; --border:#223041; --border-strong:#2b3a4d; --row:#121a24; --row-alt:#0f141a; --row-hover:#10213a; } /* 1) Base */ html,body{ background:var(--bg); color:var(--text); font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; margin:0; } a{color:var(--primary);text-decoration:none} a:hover{color:var(--primary-hover);text-decoration:underline} h1,h2,h3,h4,h5{color:var(--text);font-weight:600} h1{font-size:30px} h2{font-size:24px} h3{font-size:18px} /* 2) Header + spacing ispod njega */ .app-header{ position:sticky; top:0; z-index:1040; background:linear-gradient(180deg,var(--primary) 0%,var(--primary-hover) 100%); color:#fff; border-bottom:1px solid rgba(255,255,255,.15); box-shadow:var(--shadow); padding:.75rem 1rem; } .app-header .brand{font-weight:700;font-size:1.1rem} .app-header .brand small{opacity:.85;margin-left:.5rem} #content,.content,.container{margin-top:24px} /* 3) Buttons (kontrastni, čitljivi) */ .btn,button,input[type=submit]{ border-radius:var(--radius-sm); padding:.45rem .9rem; font-weight:600; cursor:pointer; } .btn-primary{background:var(--primary);border:1px solid var(--primary);color:#fff} .btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)} .btn-outline-primary{background:transparent;color:var(--primary);border:1px solid var(--primary)} .btn-outline-primary:hover{background:var(--primary-hover);color:#fff;border-color:var(--primary-hover)} .btn-secondary,.btn-outline-secondary{color:#333;border:1px solid #ccc;background:#f8f9fa} .btn-secondary:hover,.btn-outline-secondary:hover{background:#e2e6ea;border-color:#adadad;color:#111} /* 4) Panels / cards */ .panel,.card,.module,.box{ background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:1.25rem; } .panel-header{padding:.75rem 1rem;border-bottom:1px solid var(--border);font-weight:600} .panel-body{padding:1rem} /* 5) Tables — zebra + suptilan hover (radi u obje teme) */ table, .table{ width:100%; border-collapse:collapse; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:1rem; background:var(--surface); color:var(--text); } .table-wrapper { margin: 20px 0; /* prostor gore/dolje */ padding: 10px; /* unutarnji razmak */ background: #fff; /* neutralna pozadina */ border: 1px solid #dee2e6; border-radius: 8px; } th,td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;font-size:15px} th{background:var(--surface-alt);font-weight:600} tbody tr:nth-child(odd) td{background:var(--row-alt)} tbody tr:nth-child(even) td{background:var(--row)} tbody tr:hover td{background:var(--row-hover)} .table-hover tbody tr:hover>*{background:var(--row-hover);color:inherit} /* 6) KPI / stat “pilule” u headeru */ .top-stats{display:flex;gap:10px;flex-wrap:wrap} .kpi,.stat-pill,.stat-box{ display:inline-flex;align-items:center;gap:.45rem; padding:6px 12px;border-radius:20px;font-weight:600;font-size:14px; background:#fff;border:1px solid var(--border-strong);color:#222; box-shadow:0 1px 2px rgba(0,0,0,.05) } /* Dark način za KPI: lagano prozirno na headeru */ body[data-theme="dark"] .kpi, body[data-theme="dark"] .stat-pill, body[data-theme="dark"] .stat-box{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; } .kpi .val,.stat-pill .val,.stat-box .val{font-weight:700;color:var(--primary)} .kpi.success .val,.stat-pill.success .val,.stat-box.success .val{color:var(--success)} .kpi.warn .val,.stat-pill.warn .val,.stat-box.warn .val{color:#8a6d00} .kpi.danger .val,.stat-pill.danger .val,.stat-box.danger .val{color:var(--danger)} /* 7) Toast */ .toast-stack{position:fixed;top:74px;right:16px;z-index:2000;display:flex;flex-direction:column;gap:10px;max-width:420px;width:calc(100vw - 32px);pointer-events:none} .toast-item{pointer-events:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:.75rem 1rem;animation:toast-in .2s ease-out;color:var(--text)} .toast-hide{animation:toast-out .18s ease-in forwards} @keyframes toast-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} @keyframes toast-out{to{opacity:0;transform:translateY(-6px)}} /* --- Light theme fix za tablice koje imaju .table-dark --- */ /* primjeni kad NIJE dark tema */ body:not([data-theme="dark"]) .table.table-dark { background: #fff !important; color: #212529 !important; border-color: var(--border) !important; } body:not([data-theme="dark"]) .table.table-dark thead th { background: #f6f8fa !important; color: #111 !important; } body:not([data-theme="dark"]) .table.table-dark tbody td { background: #fff !important; color: #222 !important; } body:not([data-theme="dark"]) .table.table-dark.table-striped tbody tr:nth-child(odd) td { background: #fbfcfe !important; } body:not([data-theme="dark"]) .table.table-dark tbody tr:hover td { background: #eef4ff !important; color: inherit !important; } /* ─── Tablice ─────────────────────────────── */ /* Tamna tema — linkovi i tekst u tablici */ [data-theme="dark"] .table th, [data-theme="dark"] .table td { color: #f1f1f1 !important; } [data-theme="dark"] .table th a, [data-theme="dark"] .table td a { color: #f1f1f1 !important; text-decoration: none; } [data-theme="dark"] .table th a:hover, [data-theme="dark"] .table td a:hover { color: #66b0ff !important; /* lijepi hover efekt */ } /* === KPI kontrast u tamnoj temi (brojevi/tekst/linkovi da budu bijeli) === */ body[data-theme="dark"] .kpi, body[data-theme="dark"] .stat-pill, body[data-theme="dark"] .stat-box{ background: rgba(255,255,255,.10) !important; /* mrvu jače od .08 */ border-color: rgba(255,255,255,.22) !important; color: #fff !important; } /* brojčane vrijednosti i linkovi unutra */ body[data-theme="dark"] .kpi .val, body[data-theme="dark"] .stat-pill .val, body[data-theme="dark"] .stat-box .val, body[data-theme="dark"] .kpi a, body[data-theme="dark"] .stat-pill a, body[data-theme="dark"] .stat-box a{ color: #fff !important; text-decoration: none; } body[data-theme="dark"] .kpi a:hover, body[data-theme="dark"] .stat-pill a:hover, body[data-theme="dark"] .stat-box a:hover{ color: #cfe5ff !important; /* suptilan hover */ } /* --- LIGHT THEME FIX: prisili “light” paletu ako je na tablici ostala .table-dark --- */ body:not([data-theme="dark"]) .table.table-dark { background-color: #fff !important; color: #212529 !important; border-color: var(--border) !important; } /* Bootstrap koristi duboke selektore za .table-dark; resetiramo sve ćelije i header */ body:not([data-theme="dark"]) .table.table-dark > :not(caption) > * > * { background-color: #fff !important; color: #222 !important; border-color: var(--border) !important; } /* Header */ body:not([data-theme="dark"]) .table.table-dark thead th { background-color: #f6f8fa !important; color: #111 !important; } /* Zebra u svijetloj */ body:not([data-theme="dark"]) .table.table-dark.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #fbfcfe !important; } /* Hover u svijetloj */ body:not([data-theme="dark"]) .table.table-dark tbody tr:hover > * { background-color: #eef4ff !important; color: inherit !important; } /* Linkovi u tablici (svijetla tema) */ body:not([data-theme="dark"]) .table.table-dark a { color: #0d6efd !important; text-decoration: none; } body:not([data-theme="dark"]) .table.table-dark a:hover { color: #0b5ed7 !important; } /* LIGHT THEME: prisili "table-dark" da izgleda kao light (Bootstrap 5 CSS varijable) */ body:not([data-theme="dark"]) .table.table-dark { /* reset Bootstrap table CSS vars */ --bs-table-color: #212529 !important; --bs-table-bg: #ffffff !important; --bs-table-border-color: #e5e7eb !important; --bs-table-striped-color: #212529 !important; --bs-table-striped-bg: #fbfcfe !important; --bs-table-hover-color: #212529 !important; --bs-table-hover-bg: #eef4ff !important; color: var(--bs-table-color) !important; background-color: var(--bs-table-bg) !important; border-color: var(--bs-table-border-color) !important; } /* header ćelije */ body:not([data-theme="dark"]) .table.table-dark thead th { background-color: #f6f8fa !important; color: #111 !important; border-color: #e5e7eb !important; } /* linkovi u tablici */ body:not([data-theme="dark"]) .table.table-dark a { color: #0d6efd !important; text-decoration: none; } body:not([data-theme="dark"]) .table.table-dark a:hover { color: #0b5ed7 !important; } /* ============================ SABIRNICA — toolbar gumbi ============================ */ /* layout */ .sabirnica-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:12px 0 10px; } .sabirnica-toolbar .row { margin:0; } .sabirnica-toolbar .col-md-8, .sabirnica-toolbar .col-md-4 { padding:0; } /* ujednači visinu, padding i radius SVIM kontrolama u toolbaru */ .sabirnica-toolbar .btn, .sabirnica-toolbar .form-control, .sabirnica-toolbar input[type="text"], .sabirnica-toolbar input[type="search"]{ height:36px; line-height:34px; padding:0 12px; border-radius:10px; /* jednake za sve */ font-weight:600; } /* btn-group u bootstrapu “reže” kuteve – mi ih vraćamo i dodamo razmak */ .sabirnica-toolbar .btn-group>.btn { border-radius:10px !important; } .sabirnica-toolbar .btn-group>.btn + .btn { margin-left:6px; /* razmak među gumbima u grupi */ border-left-width:1px; /* da ne izgleda “spojeno” */ } /* opći razmak i ujednačavanje i izvan grupa */ .sabirnica-toolbar .btn + .btn { margin-left:6px; } /* veličina inputa za pretragu */ .sabirnica-toolbar .form-control { width: clamp(260px, 34vw, 540px); } /* pilule (Svi / Duplikati / Tvrdi / Meki) — isti radius/kontrast */ .sabirnica-toolbar .btn-outline-primary, .sabirnica-toolbar .btn-outline-danger, .sabirnica-toolbar .btn-outline-warning { background: var(--surface); border-color: var(--border); color: var(--text); } .sabirnica-toolbar .btn-outline-primary:hover{ background: var(--primary); color:#fff; border-color: var(--primary); } .sabirnica-toolbar .btn-outline-danger:hover{ background: #dc3545; color:#fff; border-color: #dc3545; } .sabirnica-toolbar .btn-outline-warning:hover{ background: #ffc107; color:#000; border-color: #ffc107; } /* brojači pored filtera (Tvrdi: 9, Meki: 0) – ujednačen izgled */ .sabirnica-toolbar .badge { height:20px; line-height:18px; border-radius:999px; padding:0 8px; font-weight:700; } /* tamna tema – bolji kontrast outline gumbima i badgevima */ body[data-theme="dark"] .sabirnica-toolbar .btn-outline-primary, body[data-theme="dark"] .sabirnica-toolbar .btn-outline-danger, body[data-theme="dark"] .sabirnica-toolbar .btn-outline-warning{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color:#fff; } body[data-theme="dark"] .sabirnica-toolbar .badge{ background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); } /* Theme toggle gumb — konzistentan izgled */ #theme-toggle { min-width: 110px; font-weight: 600; border-radius: var(--radius-sm); } /* === Print: izoliraj samo .print-root, sve ostalo sakrij === */ /* prikaži SAMO .print-root i njezin sadržaj */ .print-root, .print-root * { visibility: visible !important; } /* ukloni bilo kakve sticky/transform efekte koji znaju zezati ispis */ .print-root { position: static !important; inset: auto !important; transform: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ========================================= EVIDENCIJSKE LISTE — optimizirano da stane u ekran ========================================= */ .evid-page { width: 100%; max-width: 100%; /* koristi punu širinu prozora */ margin-inline: auto; } .evid-table { width: 100%; table-layout: fixed; /* ravnomjerno prema colgroup */ border-collapse: collapse; } .evid-table th, .evid-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 14px; white-space: normal; /* dozvoli prelamanje teksta */ word-break: break-word; } /* Kolone — sužene tako da sve stane */ .evid-col-sifra { width: 60px; } .evid-col-ime { width: 160px; } /* bilo 210 */ .evid-col-tel { width: 110px; } .evid-col-skupina { width: 100px; } /* bilo 120 */ .evid-col-mj { width: 60px; } /* bilo 72 */ .evid-col-opaske { width: 200px; } /* bilo 360+ */ /* Zadnja kolona neka prima više teksta */ .evid-table th:last-child, .evid-table td:last-child { white-space: normal; } /* Inputi i textarea neka se rastegnu koliko imaju mjesta */ .evid-table .form-control { width: 100%; font-size: 13px; padding: 2px 4px; } .evid-table textarea.form-control { min-height: 28px; resize: vertical; } /* Bojanje redova po statusu */ .evid-table tr.st-ispisan td { background: rgba(220,53,69,.12) !important; } .evid-table tr.st-cekanje td { background: rgba(255,193,7,.12) !important; } .evid-table tr.st-upisan td { background: rgba(25,135,84,.10) !important; } .evid-table tr.st-ispisan td:first-child { border-left: 4px solid #dc3545; } .evid-table tr.st-cekanje td:first-child { border-left: 4px solid #ffc107; } .evid-table tr.st-upisan td:first-child { border-left: 4px solid #198754; }