/* * BH IZLOG — Light mode CSS * Aktivira se kad . * Kombinacija: attribute selektori za inline stilove + direktni CSS za elemente. */ /* ══════════════════════════════════════════════════════════════ 1. BODY & OSNOVA ══════════════════════════════════════════════════════════════ */ html[data-theme="light"] body { background: #f1f5f9 !important; color: #0f172a !important; } /* ══════════════════════════════════════════════════════════════ 2. BACKGROUNDS — inline style attribute selektori ══════════════════════════════════════════════════════════════ */ /* Najdublji tamni (#0d0f14, #080a0e, #0b0c10) → najsvjetlija površina */ html[data-theme="light"] [style*="background:#0d0f14"], html[data-theme="light"] [style*="background: #0d0f14"], html[data-theme="light"] [style*="background:#0d1017"], html[data-theme="light"] [style*="background:#080a0e"], html[data-theme="light"] [style*="background:#0b0c10"], html[data-theme="light"] [style*="background:#0B0C10"], html[data-theme="light"] [style*="background:#111318"], html[data-theme="light"] [style*="background: #111318"], html[data-theme="light"] [style*="background:#111520"], html[data-theme="light"] [style*="background:#0f1014"], html[data-theme="light"] [style*="background:#13151e"] { background: #f1f5f9 !important; } /* Površinski tamni (#1a1c24, #1e2028, #1e2035) → bijela površina */ html[data-theme="light"] [style*="background:#1a1c24"], html[data-theme="light"] [style*="background: #1a1c24"], html[data-theme="light"] [style*="background:#1e2028"], html[data-theme="light"] [style*="background:#1e2035"] { background: #ffffff !important; } /* Srednji tamni (#2a2d38, #242630) */ html[data-theme="light"] [style*="background:#2a2d38"], html[data-theme="light"] [style*="background: #2a2d38"], html[data-theme="light"] [style*="background:#242630"], html[data-theme="light"] [style*="background: #242630"], html[data-theme="light"] [style*="background: rgb(36, 38, 48)"] { background: #e2e8f0 !important; } /* rgba bijele (overlay efekti na tamnoj pozadini) → ekvivalent na svjetloj */ html[data-theme="light"] [style*="rgba(255,255,255,.03)"] { background: rgba(0,0,0,.03) !important; } html[data-theme="light"] [style*="rgba(255,255,255,.04)"] { background: rgba(0,0,0,.04) !important; } html[data-theme="light"] [style*="rgba(255,255,255,.05)"] { background: rgba(0,0,0,.04) !important; } html[data-theme="light"] [style*="rgba(255,255,255,.06)"] { background: rgba(0,0,0,.05) !important; } html[data-theme="light"] [style*="rgba(255,255,255,.07)"] { background: rgba(0,0,0,.05) !important; } html[data-theme="light"] [style*="rgba(255,255,255,.08)"] { background: rgba(0,0,0,.06) !important; } /* ══════════════════════════════════════════════════════════════ 3. TEXT COLORS — inline style selektori ══════════════════════════════════════════════════════════════ */ /* Bijeli tekst → tamni */ html[data-theme="light"] [style*="color:white"], html[data-theme="light"] [style*="color: white"], html[data-theme="light"] [style*="color:#fff"], html[data-theme="light"] [style*="color: #fff"], html[data-theme="light"] [style*="color:#ffffff"], html[data-theme="light"] [style*="color: #ffffff"], html[data-theme="light"] [style*="color:#f5f5f4"], html[data-theme="light"] [style*="color: #f5f5f4"], html[data-theme="light"] [style*="color:#f9fafb"], html[data-theme="light"] [style*="color: #f9fafb"], html[data-theme="light"] [style*="color:#e5e7eb"], html[data-theme="light"] [style*="color: #e5e7eb"], html[data-theme="light"] [style*="color:#e8e6e3"], html[data-theme="light"] [style*="color: #e8e6e3"], html[data-theme="light"] [style*="color:#d6d3d1"], html[data-theme="light"] [style*="color: #d6d3d1"], html[data-theme="light"] [style*="color:#e2e0dc"], html[data-theme="light"] [style*="color: #e2e0dc"], html[data-theme="light"] [style*="color:#fafaf9"], html[data-theme="light"] [style*="color: #fafaf9"] { color: #0f172a !important; } /* Sivi tekst - srednji tonovi */ html[data-theme="light"] [style*="color:#9ca3af"], html[data-theme="light"] [style*="color: #9ca3af"] { color: #475569 !important; } html[data-theme="light"] [style*="color:#6b7280"], html[data-theme="light"] [style*="color: #6b7280"] { color: #4b5563 !important; } html[data-theme="light"] [style*="color:#4b5563"], html[data-theme="light"] [style*="color: #4b5563"] { color: #64748b !important; } html[data-theme="light"] [style*="color:#374151"], html[data-theme="light"] [style*="color: #374151"] { color: #94a3b8 !important; } html[data-theme="light"] [style*="color:#d1d5db"], html[data-theme="light"] [style*="color: #d1d5db"] { color: #475569 !important; } /* Svijetli amber akcent (na tamnoj pozadini čitljiv, na svijetloj slab kontrast) -> tamniji amber */ html[data-theme="light"] [style*="color:#fbbf24"], html[data-theme="light"] [style*="color: #fbbf24"] { color: #b45309 !important; } /* ══════════════════════════════════════════════════════════════ 4. BORDERS — inline style selektori ══════════════════════════════════════════════════════════════ */ html[data-theme="light"] [style*="border:1px solid #2a2d38"], html[data-theme="light"] [style*="border: 1px solid #2a2d38"], html[data-theme="light"] [style*="border-top:1px solid #2a2d38"], html[data-theme="light"] [style*="border-bottom:1px solid #2a2d38"], html[data-theme="light"] [style*="border-left:1px solid #2a2d38"], html[data-theme="light"] [style*="border-right:1px solid #2a2d38"], html[data-theme="light"] [style*="border:1px solid #1f2129"], html[data-theme="light"] [style*="border-top:1px solid #1f2129"], html[data-theme="light"] [style*="border-bottom:1px solid #1f2129"] { border-color: #e2e8f0 !important; } html[data-theme="light"] [style*="border:1.5px dashed #2a2d38"] { border-color: #cbd5e1 !important; } /* rgba(255,255,255,...) borders */ html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.06)"], html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.07)"], html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.08)"] { border-color: rgba(0,0,0,.08) !important; } /* ══════════════════════════════════════════════════════════════ 5. NAVIGACIJA — direktni CSS (override i onmouseover stilove) ══════════════════════════════════════════════════════════════ */ html[data-theme="light"] nav { background: #ffffff !important; border-bottom-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.08) !important; } html[data-theme="light"] nav a { color: #374151 !important; } html[data-theme="light"] nav a:hover { color: #0f172a !important; background: rgba(0,0,0,.05) !important; } /* Active nav link */ html[data-theme="light"] nav a[style*="color:#f59e0b"] { color: #d97706 !important; background: rgba(245,158,11,.1) !important; } /* Logo tekst */ html[data-theme="light"] nav a span[style*="color:#f5f5f4"] { color: #0f172a !important; } /* Hamburger dugme */ html[data-theme="light"] #navToggle { border-color: #e2e8f0 !important; background: #f8fafc !important; } html[data-theme="light"] #navToggle svg { stroke: #374151 !important; } /* Mobile meni */ html[data-theme="light"] #mobileMenu { border-top-color: #e2e8f0 !important; } html[data-theme="light"] #mobileMenu a { color: #374151 !important; } /* Nav search input */ html[data-theme="light"] #navSearchInput { background: #f1f5f9 !important; color: #0f172a !important; border-color: #e2e8f0 !important; } html[data-theme="light"] #navSearchInput::placeholder { color: #94a3b8 !important; } /* Autocomplete dropdown */ html[data-theme="light"] #navDrop { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 8px 32px rgba(0,0,0,.12) !important; } html[data-theme="light"] #navDrop a { border-bottom-color: #f1f5f9 !important; color: #0f172a !important; } html[data-theme="light"] #navDrop a:hover, html[data-theme="light"] #navDrop a[style*="background:#0d0f14"], html[data-theme="light"] #navDrop a[style*="background:#111318"] { background: #f8fafc !important; } /* Theme toggle dugme */ html[data-theme="light"] [data-theme-toggle] { border-color: #e2e8f0 !important; background: #f8fafc !important; } html[data-theme="light"] [data-theme-toggle]:hover { border-color: rgba(217,119,6,.4) !important; background: rgba(245,158,11,.08) !important; } /* Prijava dugme u navbaru */ html[data-theme="light"] nav a[href*="login.php"] { color: #374151 !important; border-color: #e2e8f0 !important; background: #f8fafc !important; } html[data-theme="light"] nav a[href*="login.php"]:hover { color: #0f172a !important; border-color: rgba(217,119,6,.4) !important; } /* ══════════════════════════════════════════════════════════════ 6. FOOTER ══════════════════════════════════════════════════════════════ */ html[data-theme="light"] footer { background: #e8edf5 !important; border-top-color: #dde3ed !important; } html[data-theme="light"] footer h4 { color: #1e293b !important; } html[data-theme="light"] footer a { color: #64748b !important; } html[data-theme="light"] footer a:hover { color: #d97706 !important; } html[data-theme="light"] footer p { color: #64748b !important; } /* Bottom bar footera */ html[data-theme="light"] footer [style*="border-top:1px solid #2a2d38"] { border-top-color: #dde3ed !important; } /* Pre-footer banner zona */ html[data-theme="light"] [style*="background:#111318"][style*="border-top"] { background: #edf0f5 !important; border-top-color: #dde3ed !important; } /* ══════════════════════════════════════════════════════════════ 7. FORME I INPUTI ══════════════════════════════════════════════════════════════ */ html[data-theme="light"] input:not([type=color]):not([type=checkbox]):not([type=radio]):not([type=range]), html[data-theme="light"] select, html[data-theme="light"] textarea { background: #f1f5f9 !important; color: #0f172a !important; border-color: #e2e8f0 !important; } html[data-theme="light"] input:focus:not([type=color]):not([type=checkbox]):not([type=radio]), html[data-theme="light"] select:focus, html[data-theme="light"] textarea:focus { border-color: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245,158,11,.12) !important; background: #ffffff !important; } html[data-theme="light"] ::placeholder { color: #94a3b8 !important; } /* ══════════════════════════════════════════════════════════════ 8. TAILWIND UTILITY KLASE ══════════════════════════════════════════════════════════════ */ html[data-theme="light"] .bg-\[\#111318\] { background: #f1f5f9 !important; } html[data-theme="light"] .bg-\[\#1a1c24\] { background: #ffffff !important; } html[data-theme="light"] .bg-\[\#1A1C24\] { background: #ffffff !important; } html[data-theme="light"] .bg-\[\#1e2028\] { background: #ffffff !important; } html[data-theme="light"] .bg-\[\#1E2028\] { background: #ffffff !important; } html[data-theme="light"] .bg-\[\#0d0f14\] { background: #e8edf5 !important; } html[data-theme="light"] .bg-\[\#0b0c10\] { background: #e8edf5 !important; } html[data-theme="light"] .text-white { color: #0f172a !important; } html[data-theme="light"] .text-gray-100 { color: #1e293b !important; } html[data-theme="light"] .text-gray-200 { color: #334155 !important; } html[data-theme="light"] .text-gray-300 { color: #475569 !important; } html[data-theme="light"] .text-gray-400 { color: #475569 !important; } html[data-theme="light"] .text-gray-500 { color: #64748b !important; } html[data-theme="light"] .text-gray-600 { color: #64748b !important; } html[data-theme="light"] .text-gray-700 { color: #94a3b8 !important; } html[data-theme="light"] .border-gray-700, html[data-theme="light"] .border-gray-800, html[data-theme="light"] .border-gray-900 { border-color: #e2e8f0 !important; } html[data-theme="light"] .divide-gray-800 > * + * { border-color: #e2e8f0 !important; } /* Tailwind bg-gray classes */ html[data-theme="light"] .bg-gray-800 { background: #f1f5f9 !important; } html[data-theme="light"] .bg-gray-700 { background: #e2e8f0 !important; } html[data-theme="light"] .bg-gray-900 { background: #e8edf5 !important; } /* ══════════════════════════════════════════════════════════════ 9. KARTICE / SURFACE ELEMENTI ══════════════════════════════════════════════════════════════ */ /* Box-shadow prilagodba (tamni shadow se loše vidi na tamnoj podlozi, na svjetloj je ok) */ html[data-theme="light"] [style*="box-shadow:0 "] { box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06) !important; } /* rgba(0,0,0,...) shadows — ostaviti nepromijenjene, izgledaju dobro na light */ /* ══════════════════════════════════════════════════════════════ 10. LEAFLET MAPA ══════════════════════════════════════════════════════════════ */ html[data-theme="light"] .leaflet-container { background: #e8edf5 !important; } html[data-theme="light"] .leaflet-tile-pane { filter: none !important; } html[data-theme="light"] .leaflet-popup-content-wrapper { background: #ffffff !important; color: #0f172a !important; box-shadow: 0 4px 20px rgba(0,0,0,.15) !important; } html[data-theme="light"] .leaflet-popup-tip { background: #ffffff !important; } html[data-theme="light"] .leaflet-popup-content small, html[data-theme="light"] .leaflet-popup-close-button { color: #475569 !important; } html[data-theme="light"] .leaflet-control-zoom a { background: #ffffff !important; color: #374151 !important; border-color: #e2e8f0 !important; } html[data-theme="light"] #firma-mapa * { transition: none !important; } /* ══════════════════════════════════════════════════════════════ 11. SCROLLBAR ══════════════════════════════════════════════════════════════ */ html[data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ══════════════════════════════════════════════════════════════ 12. SPECIFIČNI KOMPONENTI ══════════════════════════════════════════════════════════════ */ /* Kartica firme (.firma-card) - definisana kao PRAVA CSS klasa u