/* Layout Styles - Extracted from _Layout.cshtml */
/* ==========================================================================
CSS CUSTOM PROPERTIES - Z-INDEX MANAGEMENT (Industry Standard)
========================================================================== */
:root {
--bg-noise-opacity: 0.05;
--transition-duration: 300ms;
/* Z-Index Scale - Industry Standard Layering System */
--z-base: 1;
--z-navbar: 100;
--z-topbar: 100;
--z-dropdown: 1000;
--z-overlay: 1000; /* Mobile overlay backdrop - clean architecture */
--z-overlay-panel: 1001; /* Mobile overlay panel - above backdrop */
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
/* Legacy support (to be removed) */
--z-index-base: var(--z-base);
--z-index-dropdown: var(--z-dropdown);
--z-index-mobile-menu: var(--lc-z-mobile-menu, 1080);
--z-index-mobile-menu-dropdown: 10000; /* Dropdowns in mobile menu */
/* Responsive Spacing - Mobile Icon Gaps */
--icon-gap-mobile: 8px;
--icon-gap-mobile-tight: 4px;
--icon-gap-desktop: 12px;
}
/* Noise pattern SVG */
.noise-pattern {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: var(--bg-noise-opacity);
pointer-events: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
/* Base layout styles */
body {
min-height: 100%;
background-color: #f8fafc;
color: #0f172a;
transition: background-color var(--transition-duration), color var(--transition-duration);
position: relative;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #0f172a !important;
color: #f1f5f9 !important;
}
}
/* More specific dark mode rules */
@media (prefers-color-scheme: dark) {
body {
background-color: #0f172a !important;
color: #f1f5f9 !important;
}
}
@media (prefers-color-scheme: dark) {
.navbar {
background-color: #1e293b !important;
border-color: #334155 !important;
}
}
@media (prefers-color-scheme: dark) {
.card {
background-color: #1e293b !important;
color: #f1f5f9 !important;
}
}
/* Gradient overlay */
body::before {
content: '';
position: fixed;
inset: 0;
background: linear-gradient(to bottom, #ffffff, #f1f5f9);
transition: background var(--transition-duration);
z-index: -1;
}
@media (prefers-color-scheme: dark) {
body::before {
background: linear-gradient(to bottom, #0f172a, #020617) !important;
background-image: linear-gradient(to bottom, #0f172a, #020617) !important;
}
}
/* More specific dark mode rules */
@media (prefers-color-scheme: dark) {
body {
background-color: #0f172a !important;
color: #f1f5f9 !important;
}
}
@media (prefers-color-scheme: dark) {
.navbar {
background-color: #1e293b !important;
border-color: #334155 !important;
}
}
@media (prefers-color-scheme: dark) {
.card {
background-color: #1e293b !important;
color: #f1f5f9 !important;
}
}
/* Dark Mode Support for Container */
@media (prefers-color-scheme: dark) {
.container {
background-color: transparent !important;
color: #f1f5f9 !important;
}
}
@media (prefers-color-scheme: dark) {
#profilePage.container {
background-color: transparent !important;
color: #f1f5f9 !important;
}
}
/* Main content area */
main {
position: relative;
z-index: 10;
min-height: calc(100vh - 200px);
padding-bottom: 2rem;
background-color: transparent;
}
@media (prefers-color-scheme: dark) {
main {
background-color: transparent !important;
color: #f1f5f9 !important;
}
}
/* Card and container backgrounds */
.card, .mobile-card, .footer {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
transition: background-color var(--transition-duration);
}
.navbar {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
}
@media (prefers-color-scheme: dark) {
.card, .mobile-card, .footer {
background-color: rgba(30, 41, 59, 0.8);
}
.navbar {
background-color: rgba(30, 41, 59, 0.8);
}
}
/* Navigation styles */
.navbar {
border-color: #e2e8f0;
}
@media (prefers-color-scheme: dark) {
.navbar {
border-color: #334155;
}
}
.navbar-brand, .nav-link {
color: #0f172a;
transition: color var(--transition-duration);
}
@media (prefers-color-scheme: dark) {
.navbar-brand, .nav-link {
color: #f1f5f9;
}
}
/* Footer styles */
.footer {
border-top: 1px solid #e2e8f0;
position: relative;
width: 100%;
padding: 1rem 0;
}
.footer-nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1.25rem;
}
@media (prefers-color-scheme: dark) {
.footer {
border-top-color: #334155 !important;
background-color: rgba(30, 41, 59, 0.8) !important;
color: #e2e8f0 !important;
}
.footer.text-muted,
.footer .text-muted {
color: #94a3b8 !important;
}
.footer p,
.footer p.mb-0 {
color: #94a3b8 !important;
}
}
/* Chat button styles */
.chat-button {
background-color: #2563eb;
color: white;
transition: all var(--transition-duration);
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
z-index: 1000;
cursor: pointer;
}
.chat-button:hover {
background-color: #1d4ed8;
}
@media (prefers-color-scheme: dark) {
.chat-button {
background-color: #3b82f6;
}
}
@media (prefers-color-scheme: dark) {
.chat-button:hover {
background-color: #2563eb;
}
}
/* Message badge styles */
.message-badge {
position: absolute;
top: -5px;
right: -5px;
background-color: #ef4444;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 12px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
@media (prefers-color-scheme: dark) {
.message-badge {
background-color: #dc2626;
border-color: #1f2937;
}
}
/* Navigation bar message badge styles */
#unreadCount {
background-color: #ef4444 !important;
color: white !important;
font-size: 11px !important;
font-weight: bold !important;
padding: 2px 6px !important;
border-radius: 10px !important;
min-width: 18px !important;
height: 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
animation: pulse 2s infinite !important;
}
@media (prefers-color-scheme: dark) {
#unreadCount {
background-color: #dc2626 !important;
}
}
/* Toast styles with dark mode support */
.toast {
background-color: white;
color: #0f172a;
transition: background-color var(--transition-duration), color var(--transition-duration);
}
@media (prefers-color-scheme: dark) {
.toast {
background-color: #1e293b;
color: #f1f5f9;
}
}
.toast-error {
background-color: #ef4444;
color: white;
}
@media (prefers-color-scheme: dark) {
.toast-error {
background-color: #dc2626;
}
}
.toast-success {
background-color: #22c55e;
color: white;
}
@media (prefers-color-scheme: dark) {
.toast-success {
background-color: #16a34a;
}
}
.toast-info {
background-color: #3b82f6;
color: white;
}
@media (prefers-color-scheme: dark) {
.toast-info {
background-color: #2563eb;
}
}
.toast-warning {
background-color: #eab308;
color: #0f172a;
}
@media (prefers-color-scheme: dark) {
.toast-warning {
background-color: #ca8a04;
}
}
/* Form elements with dark mode support */
.form-control, .form-select {
background-color: white;
border-color: #cbd5e1;
color: #0f172a;
transition: background-color var(--transition-duration), border-color var(--transition-duration), color var(--transition-duration);
}
@media (prefers-color-scheme: dark) {
.form-control, .form-select {
background-color: #1e293b !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
.form-control::placeholder,
.form-select::placeholder {
color: #94a3b8 !important;
}
}
.form-control:focus, .form-select:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}
@media (prefers-color-scheme: dark) {
.form-control:focus, .form-select:focus {
border-color: #60a5fa;
box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25);
}
}
/* Modal styles with dark mode support */
.modal-content {
background-color: white;
color: #0f172a;
transition: background-color var(--transition-duration), color var(--transition-duration);
position: relative;
}
@media (prefers-color-scheme: dark) {
.modal-content {
background-color: #1e293b;
color: #f1f5f9;
}
}
.modal-header, .modal-footer {
border-color: #e2e8f0;
}
@media (prefers-color-scheme: dark) {
.modal-header,
.modal-footer {
border-color: #334155;
}
.modal-footer {
background-color: #1e293b !important;
}
/* Modal Body Dark Mode - System Preference Based */
.modal-body,
.edit-review-modal-body,
#editReviewModal .modal-body {
background-color: #1e293b !important;
color: #f1f5f9 !important;
}
/* Modal Content Dark Mode */
.modal-content {
background-color: #1e293b !important;
border-color: #334155 !important;
}
/* Modal Header Dark Mode */
.modal-header {
background-color: #1e293b !important;
border-bottom-color: #334155 !important;
color: #f1f5f9 !important;
}
.modal-title {
color: #f1f5f9 !important;
}
}
/* Review content editable div dark mode support */
.review-content-editable {
transition: background-color var(--transition-duration), border-color var(--transition-duration), color var(--transition-duration);
}
@media (prefers-color-scheme: dark) {
.review-content-editable {
background-color: #1e293b !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
}
@media (prefers-color-scheme: dark) {
.review-content-editable:focus {
border-color: #60a5fa !important;
box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
}
}
.review-content-editable {
transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
/* Enhanced Cart Icon Styles */
.cart-icon-btn {
transition: all 0.3s ease;
border-radius: 8px;
}
.cart-icon-btn:hover {
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}
.cart-icon {
font-size: 1.2rem;
transition: all 0.3s ease;
}
/* Cart Animation Classes */
.cart-shake {
animation: cartShake 0.5s ease-in-out;
}
.cart-fill {
animation: cartFill 0.6s ease-in-out;
}
@keyframes cartShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px) rotate(-2deg); }
75% { transform: translateX(3px) rotate(2deg); }
}
@keyframes cartFill {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* Cart Count Badge Animation */
.cart-count {
transition: all 0.3s ease;
}
.cart-count.show {
animation: countPulse 0.5s ease-in-out;
}
@keyframes countPulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
/* Header z-index + navbar icon shell: see navbar-layout.css */
/* Disable transitions during page load to prevent shifting (language switcher) */
.page-loading .language-switcher button {
transition: none !important;
}
/* Desktop navbar collapse + center icons: see navbar-layout.css */
/* Ensure left and right sections don't interfere with center */
.left-section {
position: relative !important;
z-index: 1040 !important;
}
.right-section {
position: relative !important;
z-index: 1040 !important;
margin-left: auto !important;
}
/* Language switcher text visibility in dark mode */
@media (prefers-color-scheme: dark) {
.language-switcher button {
color: #0d6efd !important;
}
}
@media (prefers-color-scheme: dark) {
.language-switcher button span {
color: #0d6efd !important;
}
}
/* Ensure language switcher text is always visible */
.language-switcher button span {
color: #0d6efd !important;
font-weight: 500 !important;
}
/* Cart Icon Visibility and Animations */
.cart-icon-btn {
transition: all 0.3s ease;
border-radius: 8px;
position: relative;
z-index: 1060 !important;
visibility: visible !important;
opacity: 1 !important;
display: flex !important;
}
.center-icons-section .cart-icon-btn:hover {
background-color: rgba(37, 99, 235, 0.08) !important;
transform: none;
box-shadow: none !important;
}
.cart-icon-btn:hover {
background-color: #f8f9fa;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}
/* Profile Icon Visibility and Animations */
.profile-icon-btn {
transition: all 0.3s ease;
border-radius: 8px;
position: relative;
z-index: 1060 !important;
visibility: visible !important;
opacity: 1 !important;
display: flex !important;
}
.center-icons-section .profile-icon-btn:hover {
background-color: rgba(37, 99, 235, 0.08) !important;
transform: none;
box-shadow: none !important;
}
.profile-icon-btn:hover {
background-color: #f8f9fa;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}
/* Ensure cart icon is always visible */
.cart-icon {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Override any Bootstrap hiding */
.navbar .cart-icon-btn {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.cart-count {
transition: all 0.3s ease;
animation: cartPulse 0.6s ease-in-out;
}
@keyframes cartPulse {
0% { transform: translate(-50%, -50%) scale(0.8); }
50% { transform: translate(-50%, -50%) scale(1.2); }
100% { transform: translate(-50%, -50%) scale(1); }
}
.cart-shake {
animation: cartShake 0.6s ease-in-out;
}
@keyframes cartShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}
.cart-fill {
animation: cartFill 0.6s ease-in-out;
}
@keyframes cartFill {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* Disabled Cart Button Styles */
.cart-icon-btn.disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
pointer-events: none !important;
background-color: #f8f9fa !important;
border-color: #6c757d !important;
}
.cart-icon-btn.disabled .cart-icon {
color: #6c757d !important;
}
.cart-icon-btn.disabled:hover {
transform: none !important;
box-shadow: 0 3px 8px rgba(13, 110, 253, 0.25) !important;
}
/* Coming Soon cart link: clickable but visually inactive (no blue, subtle hover) */
.center-icons-section .cart-coming-soon-link.cart-icon-btn:hover {
transform: none;
box-shadow: none !important;
opacity: 1;
}
.cart-coming-soon-link.cart-icon-btn:hover {
transform: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
opacity: 0.9;
}
.cart-coming-soon-link.cart-icon-btn .cart-icon,
.cart-coming-soon-link.cart-icon-btn .fas,
.cart-coming-soon-link.cart-icon-btn .fa {
color: #6c757d !important;
}
/* ============================================
PROFESSIONAL RESPONSIVE NAVBAR DESIGN
Industry-Standard Mobile-First Approach
============================================ */
/* Touch Target Standards (Apple iOS: 44px, Material: 48dp, Microsoft: 40-48px) */
:root {
--touch-target-min: 44px;
--touch-target-ideal: 48px;
--icon-gap-mobile: 8px;
--icon-gap-desktop: 12px;
--icon-size-mobile: 24px;
--icon-size-desktop: 20px;
}
/* Base: Ensure all icon buttons meet touch target standards */
.language-switcher button,
.cart-icon-btn,
.profile-icon-btn,
.search-icon-btn,
.notification-bell-btn,
#notificationBell {
min-width: var(--touch-target-min) !important;
min-height: var(--touch-target-min) !important;
padding: 8px 12px !important;
cursor: pointer !important;
pointer-events: auto !important;
}
/* Center navbar icons: identical square hit targets on one horizontal row */
.center-icons-section .search-icon-btn,
.center-icons-section .cart-icon-btn,
.center-icons-section .profile-icon-btn,
.center-icons-section .notification-bell-btn,
.center-icons-section #notificationBell {
width: var(--lc-navbar-icon-size) !important;
height: var(--lc-navbar-icon-size) !important;
min-width: var(--lc-navbar-icon-size) !important;
min-height: var(--lc-navbar-icon-size) !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
.center-icons-section .navbar-icon-slot {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0;
height: var(--lc-navbar-icon-size);
}
/* Notification dropdown: above profile modals (1000004) and all content when open (JS moves to body + sets 1000005) */
#notificationDropdown,
.notification-dropdown {
z-index: 1000005 !important;
}
/* Prevent parent from clipping the dropdown */
.center-icons-section:has(#notificationDropdown),
.center-icons-section > div:has(#notificationDropdown) {
overflow: visible !important;
}
/* Icon sizes - shared glyph box for FA icons (incl. navbar bell) */
.center-icons-section .navbar-icon-btn__glyph,
.center-icons-section .notification-icon.navbar-icon-btn__glyph {
width: var(--lc-navbar-glyph-size) !important;
height: var(--lc-navbar-glyph-size) !important;
font-size: var(--lc-navbar-glyph-size) !important;
line-height: 1 !important;
flex-shrink: 0;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* fa-bell strokes are thinner — slight optical scale to match search/cart */
.center-icons-section .fa-bell.navbar-icon-btn__glyph {
font-size: calc(var(--lc-navbar-glyph-size) * 1.15) !important;
width: calc(var(--lc-navbar-glyph-size) * 1.15) !important;
height: calc(var(--lc-navbar-glyph-size) * 1.15) !important;
}
.center-icons-section img.notification-icon {
width: var(--lc-navbar-glyph-size) !important;
height: var(--lc-navbar-glyph-size) !important;
flex-shrink: 0;
object-fit: contain;
object-position: center;
}
/* Navbar shell, center icons, mobile top bar: see navbar-layout.css + mobile-overlay.css */
/* ============================================
TABLET (768px - 1024px): Balanced Display
Show more icons but still prioritize
============================================ */
@media (min-width: 768px) and (max-width: 1024px) {
.notification-bell-btn,
#notificationBell {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.desktop-language-switcher-container,
.desktop-language-switcher-container .language-switcher {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
body.page-home .center-icons-section .desktop-language-switcher-container,
body.page-home .center-icons-section .desktop-language-switcher-container .language-switcher {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
.center-icons-section > div {
margin: 0 var(--icon-gap-desktop) !important;
}
}
/* ============================================
STATE 2: DESKTOP (>= 1025px): Center Icons Only
No hamburger, no overlay, only center icons
============================================ */
@media (min-width: 1025px) {
/* CRITICAL RULE 1 & 2: Hide hamburger button completely on desktop */
.navbar-toggler {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* CRITICAL RULE 1 & 2: Hide mobile overlay completely on desktop */
#mobile-overlay-root .mobile-overlay,
#mobile-overlay-root .mobile-overlay.open {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* CRITICAL RULE 1 & 2: Show center icons on desktop */
.center-icons-section {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Show all icons on desktop EXCEPT theme toggle (using system preference) */
.language-switcher,
.search-icon-btn,
.cart-icon-btn,
.profile-icon-btn,
.notification-bell-btn,
#notificationBell {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Theme toggle removed - using system preference instead */
/* Desktop spacing */
.center-icons-section > div {
margin: 0 var(--icon-gap-desktop) !important;
}
/* Show left navigation on desktop */
.navbar-nav.left-section {
display: flex !important;
}
/* Navbar collapse always visible on desktop */
.navbar-collapse {
display: flex !important;
flex-basis: auto !important;
}
}
/* ============================================
ACCESSIBILITY: Ensure proper touch feedback
============================================ */
@media (hover: none) and (pointer: coarse) {
/* Touch devices - larger touch targets */
.language-switcher button,
.cart-icon-btn,
.profile-icon-btn,
.search-icon-btn,
.notification-bell-btn {
min-width: var(--touch-target-ideal) !important;
min-height: var(--touch-target-ideal) !important;
}
/* Better spacing for touch */
.center-icons-section > div {
margin: 0 12px !important;
}
}
/* ============================================
PREVENT HORIZONTAL SCROLLING (mobile)
============================================ */
@media (max-width: 767.98px) {
.center-icons-section {
max-width: calc(100vw - 120px) !important; /* Leave space for hamburger and login */
/* overflow: visible so notification badge (top-right corner) is not clipped;
horizontal scroll is still limited by max-width and by hiding 5th+ icons below */
overflow: visible !important;
}
/* Never hide search / cart / notification / language by nth-child index */
.center-icons-section > .navbar-icon-slot:has(.search-icon-btn),
.center-icons-section > .navbar-icon-slot:has(.cart-icon-btn),
.center-icons-section > .navbar-icon-slot:has(.notification-bell-btn),
body.page-home .center-icons-section > .desktop-language-switcher-container {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
}
/* Mobile overlay menu styles: see mobile-overlay.css (loaded from _Layout.cshtml) */
/* List group items dark mode support */
@media (prefers-color-scheme: dark) {
.list-group-item {
background-color: #1e293b;
border-color: rgba(255, 255, 255, 0.1);
color: #f1f5f9;
}
.list-group-item-action {
color: #e2e8f0;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
background-color: #334155;
color: #f1f5f9;
}
/* Comment items dark mode support */
.comment-item {
background-color: #1e293b !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
.comment-item strong {
color: #f1f5f9 !important;
}
.comment-item small.text-muted {
color: #94a3b8 !important;
}
.comment-item p,
.comment-item p.mb-0 {
color: #e2e8f0 !important;
}
/* Navbar Center Icons Dark Mode Support */
.center-icons-section .search-icon-btn,
.center-icons-section .profile-icon-btn,
.center-icons-section .notification-bell-btn,
.center-icons-section #notificationBell,
.center-icons-section .cart-icon-btn {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.center-icons-section .search-icon-btn:hover,
.center-icons-section .profile-icon-btn:hover,
.center-icons-section .notification-bell-btn:hover,
.center-icons-section #notificationBell:hover,
.center-icons-section .cart-icon-btn:hover {
background-color: rgba(96, 165, 250, 0.12) !important;
box-shadow: none !important;
transform: none !important;
}
/* Icons in center icons section */
.center-icons-section .search-icon-btn i,
.center-icons-section .profile-icon-btn i,
.center-icons-section .notification-bell-btn i,
.center-icons-section #notificationBell i,
.center-icons-section .cart-icon-btn i,
.search-icon-btn .fas,
.search-icon-btn .fa,
.profile-icon-btn .fas,
.profile-icon-btn .fa,
.notification-bell-btn .fas,
.notification-bell-btn .fa,
#notificationBell .fas,
#notificationBell .fa,
.cart-icon-btn .fas,
.cart-icon-btn .fa {
color: #60a5fa !important;
}
.center-icons-section .search-icon-btn .text-primary,
.center-icons-section .profile-icon-btn .text-primary,
.center-icons-section .notification-bell-btn .text-primary,
.center-icons-section #notificationBell .text-primary,
.center-icons-section .cart-icon-btn .text-primary {
color: #60a5fa !important;
}
/* Coming Soon cart link: keep subdued (gray) in dark mode so it does not look active */
.center-icons-section .cart-coming-soon-link.cart-icon-btn,
.center-icons-section .cart-coming-soon-link.cart-icon-btn:hover {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.cart-coming-soon-link.cart-icon-btn,
.cart-coming-soon-link.cart-icon-btn:hover {
background-color: #334155 !important;
border-color: #64748b !important;
}
.cart-coming-soon-link .cart-icon,
.cart-coming-soon-link .fas,
.cart-coming-soon-link .fa {
color: #94a3b8 !important;
}
/* Notification PNG (non-navbar): match icon color using CSS filter */
img.notification-icon,
#notificationBell img.notification-icon,
.notification-bell-btn img.notification-icon {
filter: brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(1352%) hue-rotate(195deg) brightness(102%) contrast(101%) !important;
/* This filter converts the image to approximately #60a5fa (light blue) */
}
/* Publication Description Content Dark Mode */
.description-content,
.publication-description .description-content,
.publication-main-content .description-content {
background-color: #1e293b !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
/* Text content inside description */
.description-content,
.description-content p,
.description-content div:not([class*="btn"]):not([class*="button"]),
.description-content span:not([class*="badge"]):not([class*="label"]),
.publication-description .description-content,
.publication-main-content .description-content {
color: #f1f5f9 !important;
}
/* Links inside description content */
.description-content a {
color: #60a5fa !important;
}
.description-content a:hover {
color: #93c5fd !important;
}
/* Publication Description Title */
.publication-description h4 {
color: #f1f5f9 !important;
}
/* Publication Header & Title - dark mode for system preference (incl. mobile) */
.publication-header,
.publication-main-content .publication-header {
color: #f1f5f9 !important;
}
.publication-header h1.publication-title,
h1.publication-title,
.publication-main-content .publication-header .publication-title,
.publication-title {
color: #f1f5f9 !important;
}
.publication-header .publication-author,
.publication-header .publication-author strong,
.publication-header .publication-author a,
.publication-header .text-muted {
color: #cbd5e1 !important;
}
.publication-header .publication-author a:hover {
color: #93c5fd !important;
}
/* Publication Stats Section Dark Mode */
.publication-stats {
background-color: #1e293b !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
.publication-stats .stat-item {
color: #f1f5f9 !important;
}
.publication-stats .stat-item span {
color: #f1f5f9 !important;
}
.publication-stats .stat-item .text-muted {
color: #94a3b8 !important;
}
.publication-stats .stat-item i {
color: #60a5fa !important;
}
/* Publication Cover Section */
.publication-cover-section {
background-color: transparent !important;
}
/* Review Comment Card Dark Mode */
.review-comment-card,
#reviewCommentCard {
background-color: #1e293b !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
.review-comment-card-header {
background-color: #0f172a !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
.review-comment-card-header h6,
.review-comment-card-header h6.mb-0 {
color: #f1f5f9 !important;
}
.review-comment-card-body {
background-color: #1e293b !important;
color: #f1f5f9 !important;
}
/* Review Comments List Dark Mode */
.review-comments-list {
background-color: #1e293b !important;
color: #f1f5f9 !important;
}
.review-comments-list::-webkit-scrollbar-track {
background: #1e293b !important;
}
.review-comments-list::-webkit-scrollbar-thumb {
background: #475569 !important;
}
.review-comments-list::-webkit-scrollbar-thumb:hover {
background: #64748b !important;
}
/* Review Section Titles Dark Mode */
.section-title,
.external-work-details-section .section-title,
.review-info-section .section-title {
color: #f1f5f9 !important;
}
/* Review Header Text Dark Mode */
.review-header-card .text-dark,
.review-header-inline .text-dark,
.review-by .text-dark,
.review-by a.text-dark,
.review-by strong a.text-dark {
color: #f1f5f9 !important;
}
.review-header-card .text-dark:hover,
.review-header-inline .text-dark:hover,
.review-by a.text-dark:hover {
color: #60a5fa !important;
}
/* External Work Details Section Dark Mode */
.external-work-details-section {
background-color: #1e293b !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
.external-work-details-section h5,
.external-work-details-section h6,
.external-work-details-section p,
.external-work-details-section strong,
.external-work-details-section span {
color: #f1f5f9 !important;
}
/* Form Controls Dark Mode - Including Focus States */
.form-control,
.form-select,
textarea.form-control,
textarea[id^="commentInput"] {
background-color: #1e293b !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
textarea[id^="commentInput"]:focus,
.form-control:active,
textarea.form-control:active,
textarea[id^="commentInput"]:active {
background-color: #1e293b !important;
border-color: #60a5fa !important;
color: #f1f5f9 !important;
box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
}
.form-control::placeholder,
textarea.form-control::placeholder,
textarea[id^="commentInput"]::placeholder {
color: #94a3b8 !important;
opacity: 1 !important;
}
/* Language Dropdown Menu Dark Mode */
.language-switcher .dropdown-menu,
#languageDropdownMenu {
background-color: #1e293b !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
}
.language-switcher .dropdown-item,
#languageDropdownMenu .dropdown-item {
color: #f1f5f9 !important;
background-color: transparent !important;
}
.language-switcher .dropdown-item:hover,
#languageDropdownMenu .dropdown-item:hover {
background-color: #334155 !important;
color: #f1f5f9 !important;
}
.language-switcher .dropdown-item.active,
#languageDropdownMenu .dropdown-item.active {
background-color: #3b82f6 !important;
color: #ffffff !important;
}
.language-switcher .dropdown-item.active:hover,
#languageDropdownMenu .dropdown-item.active:hover {
background-color: #2563eb !important;
color: #ffffff !important;
}
/* Icons in language dropdown */
.language-switcher .dropdown-item i,
#languageDropdownMenu .dropdown-item i,
.language-switcher .dropdown-item .fas,
#languageDropdownMenu .dropdown-item .fas {
color: inherit !important;
}
/* Text/spans in language dropdown */
.language-switcher .dropdown-item span,
#languageDropdownMenu .dropdown-item span {
color: inherit !important;
}
/* Notification Dropdown Dark Mode */
#notificationDropdown,
.notification-dropdown {
background-color: #1e293b !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
color: #f1f5f9 !important;
}
/* Notification Header */
.notification-header {
background-color: #1e293b !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
.notification-header h6,
.notification-header h6.mb-0 {
color: #f1f5f9 !important;
}
.notification-header .btn,
.notification-header .btn-outline-primary {
color: #60a5fa !important;
border-color: #60a5fa !important;
background-color: transparent !important;
}
.notification-header .btn:hover,
.notification-header .btn-outline-primary:hover {
background-color: #3b82f6 !important;
border-color: #3b82f6 !important;
color: #ffffff !important;
}
/* Notification List */
#notificationList,
.notification-list {
background-color: #1e293b !important;
color: #f1f5f9 !important;
}
/* Notification Items */
.notification-item {
background-color: #1e293b !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
.notification-item:hover {
background-color: #334155 !important;
}
.notification-item.unread {
background-color: #1e3a5f !important;
border-left-color: #60a5fa !important;
}
/* Text elements in notification items */
.notification-item .mb-1,
.notification-item div {
color: #e2e8f0 !important;
}
.notification-item .text-muted,
.notification-item small.text-muted {
color: #94a3b8 !important;
}
/* Icons in notification items */
.notification-item .fas,
.notification-item .fa,
.notification-item i {
color: inherit !important;
}
.notification-item .text-primary,
.notification-item i.text-primary {
color: #60a5fa !important;
}
/* Buttons in notification items */
.notification-item .btn,
.notification-item .mark-read-btn,
.notification-item .btn-outline-danger {
color: #ef4444 !important;
border-color: #ef4444 !important;
background-color: transparent !important;
}
.notification-item .btn:hover,
.notification-item .mark-read-btn:hover,
.notification-item .btn-outline-danger:hover {
background-color: #dc2626 !important;
border-color: #dc2626 !important;
color: #ffffff !important;
}
.notification-item .btn i,
.notification-item .mark-read-btn i,
.notification-item .btn-outline-danger i {
color: inherit !important;
}
/* Notification Footer */
.notification-footer {
background-color: #1e293b !important;
border-top-color: rgba(255, 255, 255, 0.1) !important;
}
.notification-footer .btn-link {
color: #60a5fa !important;
}
.notification-footer .btn-link:hover {
color: #93c5fd !important;
}
/* Photo Upload Container Dark Mode */
.photo-upload-container {
background-color: #1e293b !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
color: #f1f5f9 !important;
}
.photo-upload-container h2,
.photo-upload-container h2.text-center,
.photo-upload-container h2.mb-4 {
color: #f1f5f9 !important;
}
.photo-upload-container h6 {
color: #f1f5f9 !important;
}
.photo-upload-container p {
color: #e2e8f0 !important;
}
/* Form elements in photo upload container */
.photo-upload-container .form-control,
.photo-upload-container input[type="file"],
#photoInput {
background-color: #1e293b !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
.photo-upload-container .form-control:focus,
.photo-upload-container input[type="file"]:focus {
background-color: #1e293b !important;
border-color: #60a5fa !important;
color: #f1f5f9 !important;
box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
}
/* Current photo container */
.current-photo-container {
background-color: transparent !important;
}
.current-photo {
border-color: rgba(255, 255, 255, 0.2) !important;
background-color: #334155 !important;
}
/* Crop area */
.crop-area {
background-color: #1e293b !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
.crop-controls {
background-color: #1e293b !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
.crop-controls h6 {
color: #f1f5f9 !important;
}
/* Cropper container */
.cropper-container,
.image-cropper-container {
background-color: #334155 !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
/* Buttons in photo upload container */
.photo-upload-container .btn {
color: inherit !important;
}
.photo-upload-container .btn-primary {
background-color: #3b82f6 !important;
border-color: #3b82f6 !important;
color: #ffffff !important;
}
.photo-upload-container .btn-primary:hover {
background-color: #2563eb !important;
border-color: #2563eb !important;
}
.photo-upload-container .btn-danger {
background-color: #ef4444 !important;
border-color: #ef4444 !important;
color: #ffffff !important;
}
.photo-upload-container .btn-danger:hover {
background-color: #dc2626 !important;
border-color: #dc2626 !important;
}
.photo-upload-container .btn-secondary {
background-color: #64748b !important;
border-color: #64748b !important;
color: #ffffff !important;
}
.photo-upload-container .btn-secondary:hover {
background-color: #475569 !important;
border-color: #475569 !important;
}
/* Form labels in photo upload container */
.photo-upload-container .form-label,
.photo-upload-container label,
.photo-upload-container label.form-label {
color: #f1f5f9 !important;
}
/* Card Titles Dark Mode */
.card-title,
.card .card-title,
.card-body .card-title,
h6.card-title,
h6.card-title.mb-0 {
color: #f1f5f9 !important;
}
/* Card titles with text-dark class */
.card-title.text-dark,
.card .card-title.text-dark,
.card-body .card-title.text-dark,
a.text-dark .card-title,
a.text-dark h6.card-title {
color: #f1f5f9 !important;
}
/* Links with text-dark containing card titles */
a.text-dark,
a.text-decoration-none.text-dark {
color: #f1f5f9 !important;
}
a.text-dark:hover,
a.text-decoration-none.text-dark:hover {
color: #60a5fa !important;
}
/* Card body text */
.card-body {
color: #f1f5f9 !important;
}
.card-body .text-dark {
color: #f1f5f9 !important;
}
/* Explore feed card body - force dark mode colors */
#exploreFeed .card-body,
#exploreFeed .unified-card .card-body,
#exploreFeed .explore-card .card-body,
#exploreFeed .explore-card-wrapper .card-body {
color: #f1f5f9 !important;
background-color: transparent !important;
}
#exploreFeed .card-body *,
#exploreFeed .unified-card .card-body *,
#exploreFeed .explore-card .card-body *,
#exploreFeed .explore-card-wrapper .card-body * {
color: inherit !important;
}
/* Explore feed card surfaces - force dark background */
#exploreFeed .card.h-100.unified-card,
#exploreFeed .unified-card,
#exploreFeed .explore-card .card.h-100.unified-card {
background-color: #1e293b !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
/* Messaging Container Dark Mode */
.messaging-container {
background-color: #1e293b !important;
color: #f1f5f9 !important;
}
/* Messaging Header */
.messaging-header {
background-color: #1e293b !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
.messaging-header h2 {
color: #f1f5f9 !important;
}
/* Messaging Content */
.messaging-content {
background-color: transparent !important;
color: #f1f5f9 !important;
}
/* Welcome Message */
.welcome-message {
background-color: transparent !important;
color: #e2e8f0 !important;
}
/* Conversations Sidebar */
.conversations-sidebar {
background-color: #1e293b !important;
border-right-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
/* Conversations Header */
.conversations-header {
background-color: #1e293b !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
.conversations-header h3 {
color: #f1f5f9 !important;
}
/* Conversation Items */
.conversation-item {
background-color: #1e293b !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
.conversation-item:hover {
background-color: #334155 !important;
}
.conversation-item.active {
background-color: #1e3a5f !important;
border-left-color: #60a5fa !important;
}
.conversation-item.is-pinned {
background-color: #3d2e1f !important;
border-left-color: #fbbf24 !important;
}
.conversation-item.is-pinned:hover {
background-color: #4a3a2a !important;
}
/* Conversation Content */
.conversation-name {
color: #f1f5f9 !important;
}
.conversation-name.has-unread {
color: #60a5fa !important;
}
.conversation-time {
color: #94a3b8 !important;
}
.last-message {
color: #94a3b8 !important;
}
.last-message-sender {
color: #cbd5e1 !important;
}
.admin-sender-label {
color: #f87171 !important;
}
/* Chat Main Area */
.chat-main {
background-color: #0f172a !important;
color: #f1f5f9 !important;
}
.chat-header {
background-color: #0f172a !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
/* Modal Dark Mode */
.modal-content {
background-color: #1e293b !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
.modal-header {
background-color: #0f172a !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
.modal-header .modal-title,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6 {
color: #f1f5f9 !important;
}
.modal-body {
background-color: #1e293b !important;
color: #f1f5f9 !important;
}
/* Text elements in modal body */
.modal-body p,
.modal-body div,
.modal-body span,
.modal-body label,
.modal-body .form-label {
color: #f1f5f9 !important;
}
.modal-body .text-muted,
.modal-body small.text-muted {
color: #94a3b8 !important;
}
/* Form elements in modal */
.modal-body .form-control,
.modal-body .form-select,
.modal-body input,
.modal-body textarea,
.modal-body select {
background-color: #1e293b !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
.modal-body .form-control:focus,
.modal-body .form-select:focus,
.modal-body input:focus,
.modal-body textarea:focus {
background-color: #1e293b !important;
border-color: #60a5fa !important;
color: #f1f5f9 !important;
box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
}
.modal-body .form-control::placeholder,
.modal-body textarea::placeholder {
color: #94a3b8 !important;
opacity: 1 !important;
}
/* Input Group Text (labels in input groups) */
.modal-body .input-group-text,
.input-group-text {
background-color: #334155 !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
/* File Input Styling */
.modal-body input[type="file"],
.modal-body .form-control[type="file"],
input[type="file"].form-control {
background-color: #1e293b !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
.modal-body input[type="file"]:focus,
.modal-body .form-control[type="file"]:focus {
background-color: #1e293b !important;
border-color: #60a5fa !important;
color: #f1f5f9 !important;
box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
}
/* File Input Button (Choose File button) */
.modal-body input[type="file"]::file-selector-button,
.modal-body .form-control[type="file"]::file-selector-button {
background-color: #3b82f6 !important;
border-color: #3b82f6 !important;
color: #ffffff !important;
padding: 0.375rem 0.75rem !important;
margin-right: 0.5rem !important;
border-radius: 0.375rem !important;
cursor: pointer !important;
}
.modal-body input[type="file"]::file-selector-button:hover,
.modal-body .form-control[type="file"]::file-selector-button:hover {
background-color: #2563eb !important;
border-color: #2563eb !important;
}
/* Custom File Label */
.modal-body .custom-file-label,
.custom-file-label {
background-color: #3b82f6 !important;
border-color: #3b82f6 !important;
color: #ffffff !important;
}
.modal-body .custom-file-label:hover,
.custom-file-label:hover {
background-color: #2563eb !important;
border-color: #2563eb !important;
}
/* Modal footer */
.modal-footer {
background-color: #0f172a !important;
border-top-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
/* Close button */
.modal-header .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* Navbar Dropdown Menu Dark Mode */
.dropdown-menu,
.navbar .dropdown-menu {
background-color: #1e293b !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
}
/* Profile Actions Dropdown - Higher specificity override */
#profileActionsDropdown + .dropdown-menu,
#profileActionsDropdown + .dropdown-menu.show {
background-color: #1e293b !important;
border-color: #60a5fa !important;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
}
.dropdown-item {
color: #f1f5f9 !important;
background-color: transparent !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
background-color: #334155 !important;
color: #f1f5f9 !important;
}
/* Profile Actions Dropdown Items - Higher specificity */
#profileActionsDropdown + .dropdown-menu .dropdown-item {
color: #f1f5f9 !important;
}
#profileActionsDropdown + .dropdown-menu .dropdown-item:hover,
#profileActionsDropdown + .dropdown-menu .dropdown-item:focus {
color: #ffffff !important;
background-color: #334155 !important;
}
.dropdown-item.text-danger,
.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
color: #f87171 !important;
}
.dropdown-item.text-danger:hover {
background-color: #7f1d1d !important;
color: #fca5a5 !important;
}
/* Profile Actions Dropdown Danger Item - Higher specificity */
#profileActionsDropdown + .dropdown-menu .dropdown-item.text-danger {
color: #f87171 !important;
}
#profileActionsDropdown + .dropdown-menu .dropdown-item.text-danger:hover {
background-color: #7f1d1d !important;
color: #fca5a5 !important;
}
/* Dropdown divider */
#profileActionsDropdown + .dropdown-menu .dropdown-divider {
border-top-color: #475569 !important;
}
/* Floating Action Icons Dark Mode */
.floating-action-icon,
.floating-action-icons .floating-action-icon,
button.floating-action-icon,
a.floating-action-icon {
background-color: #1e293b !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
color: #f1f5f9 !important;
}
.floating-action-icon:hover,
.floating-action-icons .floating-action-icon:hover,
button.floating-action-icon:hover,
a.floating-action-icon:hover {
background-color: #334155 !important;
border-color: rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4) !important;
}
/* Icons inside floating action icons */
.floating-action-icon i,
.floating-action-icon .fas,
.floating-action-icon .fa {
color: inherit !important;
}
.floating-action-icon .text-primary,
.floating-action-icon i.text-primary {
color: #60a5fa !important;
}
.floating-action-icon .text-success,
.floating-action-icon i.text-success {
color: #34d399 !important;
}
/* Floating icon images - Make them blue to match text-primary icon color */
.floating-icon-image,
.floating-action-icon img.floating-icon-image,
button.floating-action-icon img.floating-icon-image {
filter: brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(1352%) hue-rotate(195deg) brightness(102%) contrast(101%) !important;
/* This filter converts the image to approximately #60a5fa (light blue) */
opacity: 1 !important;
}
.floating-action-icon:hover .floating-icon-image,
button.floating-action-icon:hover img.floating-icon-image {
filter: brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(1352%) hue-rotate(195deg) brightness(115%) contrast(101%) !important;
/* Slightly brighter blue on hover */
opacity: 1 !important;
}
/* Profile Tabs Icons - Inactive/Not Selected State */
.profile-tabs .nav-link:not(.active) i,
.profile-tabs .nav-link:not(.active) .fas,
.profile-tabs .nav-link:not(.active) .fa,
#profileTabs .nav-link:not(.active) i,
#profileTabs .nav-link:not(.active) .fas,
#profileTabs .nav-link:not(.active) .fa,
button.nav-link:not(.active) i,
button#posts-tab:not(.active) i,
button#publications-tab:not(.active) i,
button#reviews-tab:not(.active) i,
button#studies-tab:not(.active) i {
color: #94a3b8 !important;
}
/* Profile Tabs Icons - Active/Selected State */
.profile-tabs .nav-link.active i,
.profile-tabs .nav-link.active .fas,
.profile-tabs .nav-link.active .fa,
#profileTabs .nav-link.active i,
#profileTabs .nav-link.active .fas,
#profileTabs .nav-link.active .fa,
button.nav-link.active i,
button#posts-tab.active i,
button#publications-tab.active i,
button#reviews-tab.active i,
button#studies-tab.active i {
color: #60a5fa !important;
}
/* Registration Form Dark Mode */
.registration-form-container {
background-color: transparent !important;
}
.registration-form-card {
background-color: #1e293b !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
.registration-form-header {
background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
color: #ffffff !important;
}
.registration-form-header h3 {
color: #ffffff !important;
}
.registration-form-body {
background-color: #1e293b !important;
color: #f1f5f9 !important;
}
/* Form Labels */
.registration-form-body .field-label,
.field-label {
color: #f1f5f9 !important;
}
/* Form Inputs */
.registration-form-body .field-input,
.field-input {
background-color: #1e293b !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
.registration-form-body .field-input:focus,
.field-input:focus {
border-color: #60a5fa !important;
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important;
background-color: #1e293b !important;
color: #f1f5f9 !important;
}
.registration-form-body .field-input::placeholder {
color: #94a3b8 !important;
opacity: 1 !important;
}
/* Field Icon */
.registration-form-body .field-icon,
.field-icon {
background-color: #334155 !important;
border-color: #475569 !important;
color: #94a3b8 !important;
}
/* Form Select */
.registration-form-body select,
.registration-form-body .form-select,
.registration-form-body select.form-control {
background-color: #1e293b !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
.registration-form-body select:focus,
.registration-form-body .form-select:focus {
background-color: #1e293b !important;
border-color: #60a5fa !important;
color: #f1f5f9 !important;
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important;
}
/* Validation States */
.registration-form-body .field-input.is-valid {
border-color: #34d399 !important;
background-color: #064e3b !important;
}
.registration-form-body .field-input.is-invalid {
border-color: #ef4444 !important;
background-color: #7f1d1d !important;
}
/* Required Asterisk */
.registration-form-body .required-asterisk {
color: #f87171 !important;
}
/* Text elements in registration form */
.registration-form-body p,
.registration-form-body div,
.registration-form-body span,
.registration-form-body small {
color: #e2e8f0 !important;
}
.registration-form-body .text-muted {
color: #94a3b8 !important;
}
/* CAPTCHA Section Dark Mode */
.registration-form-body .captcha-section,
.captcha-section {
background-color: #334155 !important;
border-color: #475569 !important;
}
.registration-form-body .captcha-header,
.captcha-header {
color: #f1f5f9 !important;
}
.registration-form-body .captcha-header .required-asterisk,
.captcha-header .required-asterisk {
color: #f87171 !important;
}
.registration-form-body .captcha-hint,
.captcha-hint {
background-color: #1e3a5f !important;
border-color: #3b82f6 !important;
color: #93c5fd !important;
}
.registration-form-body .captcha-hint span,
.captcha-hint span {
color: #93c5fd !important;
}
.registration-form-body .captcha-hint i,
.captcha-hint i {
color: #60a5fa !important;
}
/* CAPTCHA Image Container */
.registration-form-body .captcha-image-container,
.captcha-image-container {
background-color: #1e293b !important;
}
.registration-form-body .captcha-image,
.captcha-image {
border-color: #60a5fa !important;
}
/* CAPTCHA Loading State */
.registration-form-body .captcha-loading,
.captcha-loading {
background-color: #1e293b !important;
border-color: #475569 !important;
color: #94a3b8 !important;
}
/* CAPTCHA Input (if not already covered) */
.registration-form-body .captcha-input,
.captcha-input {
background-color: #1e293b !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
.registration-form-body .captcha-input:focus,
.captcha-input:focus {
border-color: #60a5fa !important;
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important;
background-color: #1e293b !important;
color: #f1f5f9 !important;
}
.registration-form-body .captcha-input::placeholder {
color: #94a3b8 !important;
opacity: 1 !important;
}
/* Terms Section Dark Mode */
.registration-form-body .terms-section,
.terms-section {
background-color: #334155 !important;
border-left-color: #60a5fa !important;
}
.registration-form-body .terms-checkbox,
.terms-checkbox {
color: #f1f5f9 !important;
}
.registration-form-body .terms-text,
.terms-text {
color: #e2e8f0 !important;
}
.registration-form-body .terms-link,
.terms-link {
color: #60a5fa !important;
}
.registration-form-body .terms-link:hover,
.terms-link:hover {
color: #93c5fd !important;
border-bottom-color: #93c5fd !important;
}
.registration-form-body .terms-link:focus,
.terms-link:focus {
outline-color: #60a5fa !important;
}
.registration-form-body .terms-section .required-asterisk,
.terms-section .required-asterisk {
color: #f87171 !important;
}
/* Terms Checkbox Input */
.registration-form-body .terms-checkbox input[type="checkbox"],
.terms-checkbox input[type="checkbox"] {
accent-color: #60a5fa !important;
}
/* Form Container & Form Card Dark Mode (Forgot Password, Reset Password, etc.) */
.form-container {
background-color: transparent !important;
}
.form-card {
background-color: #1e293b !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #f1f5f9 !important;
}
.form-card h2,
.form-card h3,
.form-card h4,
.form-card h5,
.form-card h6 {
color: #f1f5f9 !important;
}
.form-card .form-label,
.form-card label {
color: #f1f5f9 !important;
}
.form-card .form-control,
.form-card .form-select,
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="password"],
.form-card input[type="tel"],
.form-card textarea {
background-color: #1e293b !important;
border-color: #475569 !important;
color: #f1f5f9 !important;
}
.form-card .form-control:focus,
.form-card .form-select:focus,
.form-card input:focus,
.form-card textarea:focus {
border-color: #60a5fa !important;
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25) !important;
background-color: #1e293b !important;
color: #f1f5f9 !important;
}
.form-card .form-control::placeholder,
.form-card input::placeholder,
.form-card textarea::placeholder {
color: #94a3b8 !important;
opacity: 1 !important;
}
.form-card .text-muted,
.form-card small.text-muted {
color: #94a3b8 !important;
}
.form-card p {
color: #e2e8f0 !important;
}
/* Alert Success in Form Card - dark theme contrast (forgot-password-confirmation, etc.) */
.form-card .alert.alert-success,
.form-card .alert-success {
background-color: #14532d !important;
border-color: #22c55e !important;
color: #bbf7d0 !important;
}
.form-card .alert.alert-success p,
.form-card .alert.alert-success .mb-0,
.form-card .alert.alert-success .mb-2,
.form-card .alert-success p,
.form-card .alert-success .mb-0,
.form-card .alert-success .mb-2 {
color: #bbf7d0 !important;
}
/* Alert Info in Form Card */
.form-card .alert.alert-info,
.alert.alert-info {
background-color: #1e3a5f !important;
border-color: #3b82f6 !important;
color: #93c5fd !important;
}
.form-card .alert.alert-info p,
.alert.alert-info p {
color: #93c5fd !important;
}
.form-card .alert.alert-info .mb-0,
.alert.alert-info .mb-0 {
color: #93c5fd !important;
}
.form-card .alert.alert-info .mb-2,
.alert.alert-info .mb-2 {
color: #93c5fd !important;
}
/* Alert Success Dark Mode - System Preference Based (readable in dark theme) */
.alert.alert-success {
background-color: #14532d !important;
border-color: #22c55e !important;
color: #bbf7d0 !important;
}
.alert.alert-success p,
.alert.alert-success .mb-0,
.alert.alert-success .mb-2,
.alert.alert-success span,
.alert.alert-success div {
color: #bbf7d0 !important;
}
/* Alert Warning Dark Mode - System Preference Based */
.alert.alert-warning,
#editLimitReached.alert-warning,
#editReviewLimitReached.alert-warning {
background-color: #78350f !important;
border-color: #f59e0b !important;
color: #fde68a !important;
}
.alert.alert-warning p,
.alert.alert-warning span,
.alert.alert-warning div,
#editLimitReached.alert-warning span,
#editLimitReached.alert-warning div,
#editReviewLimitReached.alert-warning span,
#editReviewLimitReached.alert-warning div {
color: #fde68a !important;
}
/* Alert Info Dark Mode - Enhanced for all contexts */
.alert.alert-info span,
.alert.alert-info div,
#editStatusWarning.alert-info span,
#editStatusWarning.alert-info div {
color: #93c5fd !important;
}
/* Global Text Muted Dark Mode Support */
.text-muted,
small.text-muted,
.alert .text-muted,
.alert small.text-muted,
#editLimitReached .text-muted,
#editLimitReached small.text-muted,
#editReviewLimitReached .text-muted,
#editReviewLimitReached small.text-muted {
color: #94a3b8 !important;
}
}
/* Body background override - system preference only */
@media (prefers-color-scheme: dark) {
body {
background-color: #0f172a !important;
color: #f1f5f9 !important;
}
}
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
body {
background-color: #ffffff !important;
color: #0f172a !important;
}
}
@media (prefers-color-scheme: dark) {
/* Explore feed card body background - enforce dark surface */
#exploreFeed .card-body,
#exploreFeed .unified-card .card-body,
#exploreFeed .explore-card .card-body,
#exploreFeed .explore-card-wrapper .card-body {
background-color: #1e293b !important;
}
}