/* Safari-specific fix for navbar text colors in light mode */ /* Force correct text colors in light mode for Safari */ [data-bs-theme="light"] .offcanvas .nav-link, [data-bs-theme="light"] .offcanvas-body .nav-link, html:not([data-bs-theme="dark"]) .offcanvas .nav-link, html:not([data-bs-theme="dark"]) .offcanvas-body .nav-link { color: var(--bs-gray-700, #495057) !important; } /* Force correct text colors in dark mode for Safari */ [data-bs-theme="dark"] .offcanvas .nav-link, [data-bs-theme="dark"] .offcanvas-body .nav-link { color: var(--bs-gray-100, #f8f9fa) !important; } /* Hover states for Safari */ [data-bs-theme="light"] .offcanvas .nav-link:hover, [data-bs-theme="light"] .offcanvas-body .nav-link:hover, html:not([data-bs-theme="dark"]) .offcanvas .nav-link:hover, html:not([data-bs-theme="dark"]) .offcanvas-body .nav-link:hover { color: var(--bs-primary, #0d6efd) !important; } [data-bs-theme="dark"] .offcanvas .nav-link:hover, [data-bs-theme="dark"] .offcanvas-body .nav-link:hover { color: var(--bs-primary, #6ea8fe) !important; } /* Active states for Safari */ [data-bs-theme="light"] .offcanvas .nav-link.active, [data-bs-theme="light"] .offcanvas-body .nav-link.active, html:not([data-bs-theme="dark"]) .offcanvas .nav-link.active, html:not([data-bs-theme="dark"]) .offcanvas-body .nav-link.active { color: var(--bs-primary, #0d6efd) !important; } [data-bs-theme="dark"] .offcanvas .nav-link.active, [data-bs-theme="dark"] .offcanvas-body .nav-link.active { color: var(--bs-primary, #6ea8fe) !important; } /* Dropdown items for Safari */ [data-bs-theme="light"] .offcanvas .dropdown-item, html:not([data-bs-theme="dark"]) .offcanvas .dropdown-item { color: var(--bs-gray-700, #495057) !important; } [data-bs-theme="dark"] .offcanvas .dropdown-item { color: var(--bs-gray-100, #f8f9fa) !important; } /* Dropdown hover states for Safari */ [data-bs-theme="light"] .offcanvas .dropdown-item:hover, html:not([data-bs-theme="dark"]) .offcanvas .dropdown-item:hover { color: var(--bs-gray-900, #212529) !important; background-color: var(--bs-gray-100, #f8f9fa) !important; } [data-bs-theme="dark"] .offcanvas .dropdown-item:hover { color: var(--bs-gray-100, #f8f9fa) !important; background-color: var(--bs-gray-700, #495057) !important; } /* Safari-specific media query fix */ @supports (-webkit-appearance: none) { /* This targets WebKit browsers (Safari, older Chrome) */ .offcanvas .nav-link { color: inherit; } [data-bs-theme="light"] .offcanvas .nav-link { color: #495057 !important; } [data-bs-theme="dark"] .offcanvas .nav-link { color: #f8f9fa !important; } } /* Fix native select/option dropdown unreadable in dark mode. color-scheme on tells the browser to render ALL native controls (select popups, scrollbars, etc.) with dark chrome. */ html[data-bs-theme="dark"] { color-scheme: dark !important; } html[data-bs-theme="light"], html:not([data-bs-theme]) { color-scheme: light; } /* Force dark background/text on native