/** * NILPIS Shared Dark Mode Styles * Include this file in all standalone pages to support dark mode * * Usage: * 1. Add in * 2. Add the dark mode init script before */ /* ======================================== Dark Mode - Base Styles ======================================== */ body.dark-mode { background: linear-gradient(135deg, #0f172a 0%, #16213e 100%) !important; color: #e0e0e0 !important; } /* Fix for pages with solid background */ body.dark-mode[style*="background: #f"] { background: linear-gradient(135deg, #0f172a 0%, #16213e 100%) !important; } /* ======================================== Dark Mode - Scrollbar ======================================== */ body.dark-mode ::-webkit-scrollbar-track { background: #2a2a2a; } body.dark-mode ::-webkit-scrollbar-thumb { background: #4a4a4a; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #5a5a5a; } /* ======================================== Dark Mode - Containers & Cards ======================================== */ body.dark-mode .container { background: #1e293b !important; color: #e0e0e0 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important; } body.dark-mode .card, body.dark-mode .stat-card, body.dark-mode .info-card, body.dark-mode .settings-card, body.dark-mode .feature-card, body.dark-mode .stats-card, body.dark-mode .status-card, body.dark-mode .config-card, body.dark-mode .webhook-card, body.dark-mode .log-card { background: linear-gradient(135deg, #2a2a2a 0%, #252525 100%) !important; border-color: #3a3a3a !important; box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important; color: #e0e0e0 !important; } body.dark-mode .card:hover, body.dark-mode .stat-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; } /* Grid containers */ body.dark-mode .grid { color: #e0e0e0; } /* ======================================== Dark Mode - Headers ======================================== */ body.dark-mode .header { background: linear-gradient(135deg, #1a4a1e 0%, #059669 100%) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; } body.dark-mode .page-header, body.dark-mode .section-header { background: linear-gradient(135deg, #2a2a2a 0%, #252525 100%) !important; border-color: #3a3a3a !important; } body.dark-mode .header h1, body.dark-mode .header-title, body.dark-mode .page-title { color: #ffffff !important; } body.dark-mode .sub-header { background: #2a2a2a !important; border-color: #3a3a3a !important; } /* ======================================== Dark Mode - Typography ======================================== */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #e0e0e0 !important; } body.dark-mode .section-title, body.dark-mode .card-title { color: #10b981 !important; } body.dark-mode p, body.dark-mode span, body.dark-mode label, body.dark-mode .text-muted, body.dark-mode .description, body.dark-mode .subtitle { color: #b0b0b0 !important; } body.dark-mode a:not(.btn):not(.back-btn):not(.action-btn) { color: #6ab377 !important; } body.dark-mode a:not(.btn):not(.back-btn):not(.action-btn):hover { color: #8bc99a !important; } /* Desktop sidebar navigation - white text in dark mode (higher specificity to override above) */ body.dark-mode .desktop-layout .desktop-sidebar .desktop-nav li a, html.dark-mode .desktop-layout .desktop-sidebar .desktop-nav li a, body.dark-mode ul.desktop-nav li a, html.dark-mode ul.desktop-nav li a { color: #ffffff !important; } body.dark-mode .desktop-layout .desktop-sidebar .desktop-nav li a:hover, html.dark-mode .desktop-layout .desktop-sidebar .desktop-nav li a:hover, body.dark-mode ul.desktop-nav li a:hover, html.dark-mode ul.desktop-nav li a:hover { color: #8bc99a !important; background: #1e2a4a !important; } body.dark-mode .desktop-layout .desktop-sidebar .desktop-nav li a.active, html.dark-mode .desktop-layout .desktop-sidebar .desktop-nav li a.active, body.dark-mode ul.desktop-nav li a.active, html.dark-mode ul.desktop-nav li a.active { color: #10b981 !important; background: rgba(16, 185, 129, 0.1) !important; border-left-color: #10b981 !important; } /* Sidebar header text - white in dark mode */ body.dark-mode .desktop-layout .sidebar-header h3, html.dark-mode .desktop-layout .sidebar-header h3, body.dark-mode .desktop-sidebar .sidebar-header h3, html.dark-mode .desktop-sidebar .sidebar-header h3 { color: #ffffff !important; } body.dark-mode .desktop-layout .sidebar-header p, html.dark-mode .desktop-layout .sidebar-header p, body.dark-mode .desktop-sidebar .sidebar-header p, html.dark-mode .desktop-sidebar .sidebar-header p { color: #e0e0e0 !important; } /* ======================================== Dark Mode - Forms ======================================== */ body.dark-mode .form-input, body.dark-mode input[type="text"], body.dark-mode input[type="email"], body.dark-mode input[type="password"], body.dark-mode input[type="number"], body.dark-mode input[type="search"], body.dark-mode input[type="tel"], body.dark-mode input[type="url"], body.dark-mode textarea, body.dark-mode select { background: #1a1a1a !important; border-color: #3a3a3a !important; color: #e0e0e0 !important; } body.dark-mode .form-input:focus, body.dark-mode input:focus, body.dark-mode textarea:focus, body.dark-mode select:focus { border-color: #10b981 !important; box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.2) !important; } body.dark-mode .form-input::placeholder, body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: #666 !important; } body.dark-mode .form-label, body.dark-mode label { color: #b0b0b0 !important; } body.dark-mode .form-group { background: transparent !important; } body.dark-mode .form-section { background: #2a2a2a !important; border-color: #3a3a3a !important; } /* ======================================== Dark Mode - Tables ======================================== */ body.dark-mode table { background: #2a2a2a !important; border-color: #3a3a3a !important; } body.dark-mode th { background: #1a1a1a !important; color: #e0e0e0 !important; border-color: #3a3a3a !important; } body.dark-mode td { background: #2a2a2a !important; color: #e0e0e0 !important; border-color: #3a3a3a !important; } body.dark-mode tr:hover td { background: #333 !important; } body.dark-mode .table-container { background: #2a2a2a !important; border-color: #3a3a3a !important; } /* ======================================== Dark Mode - Buttons ======================================== */ body.dark-mode .btn-secondary, body.dark-mode .btn-outline { background: #2a2a2a !important; border-color: #4a4a4a !important; color: #e0e0e0 !important; } body.dark-mode .btn-secondary:hover, body.dark-mode .btn-outline:hover { background: #3a3a3a !important; border-color: #5a5a5a !important; } body.dark-mode .back-btn, body.dark-mode .back-link { background: rgba(255,255,255,0.1) !important; color: #e0e0e0 !important; } body.dark-mode .back-btn:hover, body.dark-mode .back-link:hover { background: rgba(255,255,255,0.2) !important; } /* ======================================== Dark Mode - Alerts & Messages ======================================== */ body.dark-mode .alert { border-width: 1px !important; } body.dark-mode .alert-success { background: rgba(40, 167, 69, 0.15) !important; color: #6ab377 !important; border-color: rgba(40, 167, 69, 0.3) !important; } body.dark-mode .alert-error, body.dark-mode .alert-danger { background: rgba(220, 53, 69, 0.15) !important; color: #e57373 !important; border-color: rgba(220, 53, 69, 0.3) !important; } body.dark-mode .alert-warning { background: rgba(255, 193, 7, 0.15) !important; color: #ffd54f !important; border-color: rgba(255, 193, 7, 0.3) !important; } body.dark-mode .alert-info { background: rgba(23, 162, 184, 0.15) !important; color: #4dd0e1 !important; border-color: rgba(23, 162, 184, 0.3) !important; } /* ======================================== Dark Mode - Modals ======================================== */ body.dark-mode .modal, body.dark-mode .modal-content { background: #2a2a2a !important; border-color: #3a3a3a !important; color: #e0e0e0 !important; } body.dark-mode .modal-overlay { background: rgba(0, 0, 0, 0.7) !important; } body.dark-mode .modal h3, body.dark-mode .modal-title { color: #10b981 !important; } body.dark-mode .modal p { color: #b0b0b0 !important; } body.dark-mode .modal-header { background: #1a1a1a !important; border-color: #3a3a3a !important; } body.dark-mode .modal-footer { background: #1a1a1a !important; border-color: #3a3a3a !important; } /* ======================================== Dark Mode - Settings Items ======================================== */ body.dark-mode .settings-item { background: linear-gradient(135deg, #2a2a2a 0%, #252525 100%) !important; border-color: #3a3a3a !important; } body.dark-mode .settings-title { color: #10b981 !important; } body.dark-mode .settings-desc { color: #b0b0b0 !important; } /* ======================================== Dark Mode - Feature Flags & Toggles ======================================== */ body.dark-mode .feature-flag-item, body.dark-mode .flag-card, body.dark-mode .industry-card { background: linear-gradient(135deg, #2a2a2a 0%, #252525 100%) !important; border-color: #3a3a3a !important; } body.dark-mode .flag-name, body.dark-mode .feature-name { color: #e0e0e0 !important; } body.dark-mode .flag-description, body.dark-mode .feature-description { color: #b0b0b0 !important; } body.dark-mode .category-header, body.dark-mode .category-section h2, body.dark-mode .section-heading { color: #10b981 !important; } /* ======================================== Dark Mode - Notifications List ======================================== */ body.dark-mode .notifications-list { background: #1e293b !important; } body.dark-mode .notification-item { background: #2a2a2a !important; border-color: #3a3a3a !important; } body.dark-mode .notification-item:hover { background: #333 !important; } body.dark-mode .notification-item.unread { background: rgba(5, 150, 105, 0.1) !important; } body.dark-mode .notification-message { color: #e0e0e0 !important; } body.dark-mode .notification-time { color: #888 !important; } body.dark-mode .notification-icon { background: #3a3a3a !important; } body.dark-mode .notification-icon.hold { background: rgba(25, 118, 210, 0.2) !important; color: #64b5f6 !important; } body.dark-mode .notification-icon.invoice, body.dark-mode .notification-icon.quote { background: rgba(245, 124, 0, 0.2) !important; color: #ffb74d !important; } body.dark-mode .notification-icon.pickup, body.dark-mode .notification-icon.order { background: rgba(56, 142, 60, 0.2) !important; color: #81c784 !important; } body.dark-mode .notification-icon.payment { background: rgba(123, 31, 162, 0.2) !important; color: #ba68c8 !important; } body.dark-mode .notification-icon.urgent { background: rgba(211, 47, 47, 0.2) !important; color: #e57373 !important; } /* ======================================== Dark Mode - Status Badges ======================================== */ body.dark-mode .badge, body.dark-mode .status-badge { opacity: 0.9; } body.dark-mode .badge-success { background: rgba(40, 167, 69, 0.2) !important; color: #6ab377 !important; } body.dark-mode .badge-warning { background: rgba(255, 193, 7, 0.2) !important; color: #ffd54f !important; } body.dark-mode .badge-danger { background: rgba(220, 53, 69, 0.2) !important; color: #e57373 !important; } body.dark-mode .badge-info { background: rgba(23, 162, 184, 0.2) !important; color: #4dd0e1 !important; } /* ======================================== Dark Mode - Statistics & Metrics ======================================== */ body.dark-mode .stat-number, body.dark-mode .metric-value, body.dark-mode .count { color: #10b981 !important; } body.dark-mode .stat-label, body.dark-mode .metric-label { color: #b0b0b0 !important; } body.dark-mode .stats-container, body.dark-mode .metrics-grid { background: transparent !important; } /* ======================================== Dark Mode - Logs & Code Blocks ======================================== */ body.dark-mode .log-entry, body.dark-mode .webhook-log, body.dark-mode pre, body.dark-mode code { background: #1a1a1a !important; border-color: #3a3a3a !important; color: #e0e0e0 !important; } body.dark-mode .log-time { color: #888 !important; } body.dark-mode .log-message { color: #e0e0e0 !important; } /* ======================================== Dark Mode - Empty States ======================================== */ body.dark-mode .empty-state, body.dark-mode .no-data { background: #2a2a2a !important; color: #888 !important; } body.dark-mode .empty-state i { color: #4a4a4a !important; } /* ======================================== Dark Mode - Progress & Loading ======================================== */ body.dark-mode .progress-bar { background: #3a3a3a !important; } body.dark-mode .progress-fill { background: linear-gradient(135deg, #10b981, #059669) !important; } body.dark-mode .loading, body.dark-mode .spinner { border-color: #3a3a3a !important; border-top-color: #10b981 !important; } /* ======================================== Dark Mode - Borders & Dividers ======================================== */ body.dark-mode hr { border-color: #3a3a3a !important; } body.dark-mode .divider { background: #3a3a3a !important; } body.dark-mode [class*="border"] { border-color: #3a3a3a !important; } /* ======================================== Dark Mode - Action Buttons in Cards ======================================== */ body.dark-mode .action-btn { background: #3a3a3a !important; color: #e0e0e0 !important; border-color: #4a4a4a !important; } body.dark-mode .action-btn:hover { background: #4a4a4a !important; } body.dark-mode .action-btn.primary { background: linear-gradient(135deg, #10b981, #059669) !important; color: white !important; border-color: #10b981 !important; } /* ======================================== Dark Mode - Radio & Checkbox ======================================== */ body.dark-mode input[type="radio"], body.dark-mode input[type="checkbox"] { accent-color: #10b981 !important; } /* ======================================== Dark Mode - Tabs ======================================== */ body.dark-mode .tabs, body.dark-mode .tab-container { background: #2a2a2a !important; border-color: #3a3a3a !important; } body.dark-mode .tab { color: #b0b0b0 !important; } body.dark-mode .tab.active, body.dark-mode .tab:hover { color: #10b981 !important; background: #333 !important; } /* ======================================== Dark Mode - Dropdown Menus ======================================== */ body.dark-mode .dropdown-menu, body.dark-mode .menu-dropdown { background: #2a2a2a !important; border-color: #3a3a3a !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; } body.dark-mode .dropdown-item { color: #e0e0e0 !important; } body.dark-mode .dropdown-item:hover { background: #3a3a3a !important; } /* ======================================== Dark Mode - Tooltips ======================================== */ body.dark-mode .tooltip { background: #1a1a1a !important; color: #e0e0e0 !important; border-color: #3a3a3a !important; } /* ======================================== Dark Mode - Navigation ======================================== */ body.dark-mode .nav, body.dark-mode .navigation { background: #2a2a2a !important; } body.dark-mode .nav-item, body.dark-mode .nav-link { color: #b0b0b0 !important; } body.dark-mode .nav-item:hover, body.dark-mode .nav-link:hover, body.dark-mode .nav-item.active, body.dark-mode .nav-link.active { color: #10b981 !important; background: rgba(5, 150, 105, 0.1) !important; } /* ======================================== Dark Mode - Filter Buttons ======================================== */ body.dark-mode .filter-btn, body.dark-mode .filter-tab { background: #2a2a2a !important; color: #b0b0b0 !important; border-color: #3a3a3a !important; } body.dark-mode .filter-btn.active, body.dark-mode .filter-tab.active, body.dark-mode .filter-btn:hover, body.dark-mode .filter-tab:hover { background: #10b981 !important; color: white !important; } /* ======================================== Dark Mode - Search Box ======================================== */ body.dark-mode .search-box, body.dark-mode .search-container { background: #1a1a1a !important; border-color: #3a3a3a !important; } body.dark-mode .search-icon { color: #666 !important; } /* ======================================== Dark Mode - Universal Inline Style Overrides These catch elements with inline style="background: white" ======================================== */ body.dark-mode [style*="background: white"], body.dark-mode [style*="background:white"], body.dark-mode [style*="background: #fff"], body.dark-mode [style*="background:#fff"], body.dark-mode [style*="background: #FFF"], body.dark-mode [style*="background:#FFF"] { background: #2a2a2a !important; color: #e0e0e0 !important; } body.dark-mode [style*="background: #f8f9fa"], body.dark-mode [style*="background:#f8f9fa"], body.dark-mode [style*="background: #f9fafb"], body.dark-mode [style*="background:#f9fafb"], body.dark-mode [style*="background: #f3f4f6"], body.dark-mode [style*="background:#f3f4f6"], body.dark-mode [style*="background: #f5f5f5"], body.dark-mode [style*="background:#f5f5f5"], body.dark-mode [style*="background: #fafafa"], body.dark-mode [style*="background:#fafafa"] { background: #1e1e1e !important; color: #e0e0e0 !important; } body.dark-mode [style*="background: #f0fdf4"], body.dark-mode [style*="background:#f0fdf4"] { background: rgba(5, 150, 105, 0.15) !important; color: #6ab377 !important; } body.dark-mode [style*="background: #fffbeb"], body.dark-mode [style*="background:#fffbeb"], body.dark-mode [style*="background: #fff8e1"], body.dark-mode [style*="background:#fff8e1"] { background: rgba(255, 193, 7, 0.15) !important; color: #ffd54f !important; } body.dark-mode [style*="background: #fef2f2"], body.dark-mode [style*="background:#fef2f2"], body.dark-mode [style*="background: #ffebee"], body.dark-mode [style*="background:#ffebee"] { background: rgba(220, 53, 69, 0.15) !important; color: #e57373 !important; } body.dark-mode [style*="background: #e0e7ff"], body.dark-mode [style*="background:#e0e7ff"], body.dark-mode [style*="background: #ede9fe"], body.dark-mode [style*="background:#ede9fe"] { background: rgba(99, 102, 241, 0.2) !important; color: #a5b4fc !important; } /* ======================================== Dark Mode - Enhanced Modal Overrides ======================================== */ body.dark-mode .enhanced-hold-modal, body.dark-mode .cancel-modal-content, body.dark-mode .quote-summary-modal, body.dark-mode .store-products-modal, body.dark-mode .hold-info-modal, body.dark-mode .qr-modal, body.dark-mode .product-details-modal, body.dark-mode .inventory-details-modal, body.dark-mode #holdRequestModalContent, body.dark-mode #holdInfoModalContent, body.dark-mode #qrModalContent, body.dark-mode #cancelModalContent, body.dark-mode #productDetailsContent, body.dark-mode #inventoryDetailsContent, body.dark-mode #storeProductsContainer { background: #2a2a2a !important; color: #e0e0e0 !important; border-color: #3a3a3a !important; } body.dark-mode .modal-close-btn, body.dark-mode [onclick*="close"][onclick*="Modal"] { background: #3a3a3a !important; color: #e0e0e0 !important; } body.dark-mode .modal-close-btn:hover { background: #4a4a4a !important; } /* ======================================== Dark Mode - Desktop Inventory Sections ======================================== */ body.dark-mode .desktop-inventory-section, body.dark-mode .desktop-right-sidebar, body.dark-mode .desktop-left-sidebar, body.dark-mode .desktop-statistics, body.dark-mode .desktop-section, body.dark-mode .content-section, body.dark-mode .section-container { background: #2a2a2a !important; border-color: #3a3a3a !important; color: #e0e0e0 !important; } body.dark-mode .inventory-item, body.dark-mode .inventory-card, body.dark-mode .product-card-mobile { background: #2a2a2a !important; border-color: #3a3a3a !important; color: #e0e0e0 !important; } body.dark-mode .inventory-item:hover, body.dark-mode .inventory-card:hover { background: #333333 !important; } body.dark-mode .item-details, body.dark-mode .item-name, body.dark-mode .item-brand { color: #e0e0e0 !important; } body.dark-mode .item-price { color: #10b981 !important; } body.dark-mode .item-stock { color: #6ab377 !important; } /* ======================================== Dark Mode - Category Gallery & Cards ======================================== */ body.dark-mode .category-gallery-card, body.dark-mode .category-card, body.dark-mode .shop-card, body.dark-mode .store-card, body.dark-mode .business-card { background: #2a2a2a !important; border-color: #3a3a3a !important; } body.dark-mode .category-gallery-overlay, body.dark-mode .category-gallery-name { color: #ffffff !important; } body.dark-mode .category-gallery-count { background: rgba(0, 0, 0, 0.6) !important; color: #e0e0e0 !important; } /* ======================================== Dark Mode - Product & Item Cards ======================================== */ body.dark-mode .held-item-card, body.dark-mode .quote-item-card, body.dark-mode .order-item-card, body.dark-mode .cart-item-card, body.dark-mode .request-card, body.dark-mode .notification-card, body.dark-mode .profile-card { background: #2a2a2a !important; border-color: #3a3a3a !important; color: #e0e0e0 !important; } body.dark-mode .held-item-card:hover, body.dark-mode .quote-item-card:hover, body.dark-mode .request-card:hover { background: #333333 !important; } /* ======================================== Dark Mode - Tabs & Tab Buttons ======================================== */ body.dark-mode .tab-btn, body.dark-mode .tab-button, body.dark-mode .filter-pill, body.dark-mode .category-pill, body.dark-mode .brand-pill { background: #2a2a2a !important; color: #b0b0b0 !important; border-color: #3a3a3a !important; } body.dark-mode .tab-btn.active, body.dark-mode .tab-button.active, body.dark-mode .filter-pill.active, body.dark-mode .category-pill.active, body.dark-mode .brand-pill.active { background: #10b981 !important; color: white !important; border-color: #10b981 !important; } body.dark-mode .tab-btn:hover, body.dark-mode .tab-button:hover, body.dark-mode .filter-pill:hover, body.dark-mode .category-pill:hover, body.dark-mode .brand-pill:hover { background: #3a3a3a !important; color: #e0e0e0 !important; } /* ======================================== Dark Mode - Quantity Controls ======================================== */ body.dark-mode .qty-btn, body.dark-mode .quantity-btn, body.dark-mode [onclick*="Quantity"], body.dark-mode .increment-btn, body.dark-mode .decrement-btn { background: #3a3a3a !important; color: #e0e0e0 !important; border-color: #4a4a4a !important; } body.dark-mode .qty-btn:hover, body.dark-mode .quantity-btn:hover { background: #4a4a4a !important; } body.dark-mode .qty-input, body.dark-mode .quantity-input { background: #1a1a1a !important; color: #e0e0e0 !important; border-color: #3a3a3a !important; } /* ======================================== Dark Mode - Info Boxes & Panels ======================================== */ body.dark-mode .info-box, body.dark-mode .info-panel, body.dark-mode .help-box, body.dark-mode .tip-box, body.dark-mode .notice-box { background: #2a2a2a !important; border-color: #3a3a3a !important; color: #e0e0e0 !important; } body.dark-mode .info-icon { color: #4dd0e1 !important; } /* ======================================== Dark Mode - Action Rows & Button Groups ======================================== */ body.dark-mode .action-row, body.dark-mode .button-group, body.dark-mode .btn-group { background: transparent !important; } body.dark-mode .action-row button:not(.btn-primary):not(.btn-success):not(.btn-danger), body.dark-mode .secondary-action { background: #3a3a3a !important; color: #e0e0e0 !important; border-color: #4a4a4a !important; } /* ======================================== Dark Mode - Mobile Navigation & Menus ======================================== */ body.dark-mode .mobile-menu, body.dark-mode .mobile-nav, body.dark-mode .bottom-nav, body.dark-mode .mobile-header, body.dark-mode .hamburger-menu { background: #1e293b !important; border-color: #3a3a3a !important; } body.dark-mode .menu-overlay.active { background: rgba(0, 0, 0, 0.8) !important; } body.dark-mode .menu-item, body.dark-mode .nav-menu-item { color: #e0e0e0 !important; } body.dark-mode .menu-item:hover, body.dark-mode .nav-menu-item:hover { background: #3a3a3a !important; } /* ======================================== Dark Mode - Sidebars & Panels ======================================== */ body.dark-mode .sidebar, body.dark-mode .side-panel, body.dark-mode .left-panel, body.dark-mode .right-panel { background: #1e293b !important; border-color: #3a3a3a !important; } body.dark-mode .sidebar-item, body.dark-mode .panel-item { color: #e0e0e0 !important; } body.dark-mode .sidebar-item:hover, body.dark-mode .panel-item:hover { background: #2a2a2a !important; } body.dark-mode .sidebar-item.active { background: rgba(5, 150, 105, 0.2) !important; color: #10b981 !important; } /* ======================================== Dark Mode - Section Titles & Headers ======================================== */ body.dark-mode .section-title, body.dark-mode .section-header, body.dark-mode .panel-header, body.dark-mode .card-header { background: #1e1e1e !important; border-color: #3a3a3a !important; color: #e0e0e0 !important; } /* ======================================== Dark Mode - Lists & List Items ======================================== */ body.dark-mode .list-item, body.dark-mode .item-row, body.dark-mode li { border-color: #3a3a3a !important; } body.dark-mode .list-item:hover, body.dark-mode .item-row:hover { background: #333333 !important; } /* ======================================== Dark Mode - Accordion & Collapsibles ======================================== */ body.dark-mode .accordion, body.dark-mode .collapsible, body.dark-mode .expandable { background: #2a2a2a !important; border-color: #3a3a3a !important; } body.dark-mode .accordion-header, body.dark-mode .collapsible-header { background: #1e1e1e !important; color: #e0e0e0 !important; } body.dark-mode .accordion-content, body.dark-mode .collapsible-content { background: #2a2a2a !important; color: #e0e0e0 !important; } /* ======================================== Dark Mode - Summary & Stats Cards ======================================== */ body.dark-mode .summary-card, body.dark-mode .stats-summary, body.dark-mode .overview-card { background: #2a2a2a !important; border-color: #3a3a3a !important; } body.dark-mode .summary-value, body.dark-mode .stat-value { color: #10b981 !important; } body.dark-mode .summary-label, body.dark-mode .stat-description { color: #b0b0b0 !important; } /* ======================================== Dark Mode - Sticky Headers ======================================== */ body.dark-mode .sticky-header, body.dark-mode .products-sticky-header, body.dark-mode .fixed-header { background: #1e293b !important; border-color: #3a3a3a !important; } /* ======================================== Dark Mode - Date/Time Inputs ======================================== */ body.dark-mode input[type="date"], body.dark-mode input[type="time"], body.dark-mode input[type="datetime-local"] { background: #1a1a1a !important; color: #e0e0e0 !important; border-color: #3a3a3a !important; color-scheme: dark !important; } /* ======================================== Dark Mode - Toggle Switches ======================================== */ body.dark-mode .toggle-switch .toggle-slider { background: #3a3a3a !important; } body.dark-mode .toggle-switch input:checked + .toggle-slider { background: #10b981 !important; } /* ======================================== Dark Mode - QR Code Container ======================================== */ body.dark-mode .qr-container, body.dark-mode .qr-code-wrapper { background: white !important; /* QR codes need white background to scan */ padding: 15px !important; border-radius: 8px !important; } /* ======================================== Dark Mode - Text Color Overrides ======================================== */ body.dark-mode [style*="color: #333"], body.dark-mode [style*="color:#333"], body.dark-mode [style*="color: #1f2937"], body.dark-mode [style*="color:#1f2937"], body.dark-mode [style*="color: #374151"], body.dark-mode [style*="color:#374151"] { color: #e0e0e0 !important; } body.dark-mode [style*="color: #666"], body.dark-mode [style*="color:#666"], body.dark-mode [style*="color: #6b7280"], body.dark-mode [style*="color:#6b7280"], body.dark-mode [style*="color: #4b5563"], body.dark-mode [style*="color:#4b5563"] { color: #b0b0b0 !important; } /* ======================================== Dark Mode - Border Overrides ======================================== */ body.dark-mode [style*="border: 1px solid #e"], body.dark-mode [style*="border:1px solid #e"], body.dark-mode [style*="border-color: #e"], body.dark-mode [style*="border-color:#e"] { border-color: #3a3a3a !important; } /* ======================================== Dark Mode - Box Shadows ======================================== */ body.dark-mode [style*="box-shadow"] { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; } /* ======================================== Dark Mode - Special Component Overrides ======================================== */ /* Store Products Modal */ body.dark-mode #storeProductsModal { background: rgba(0, 0, 0, 0.8) !important; } body.dark-mode #storeProductsContainer { background: #1e293b !important; } /* Products View Header */ body.dark-mode .products-view-header, body.dark-mode .gallery-header { background: #1e293b !important; border-color: #3a3a3a !important; } body.dark-mode .products-back-btn, body.dark-mode .gallery-full-view-btn { background: #3a3a3a !important; color: #e0e0e0 !important; } body.dark-mode .products-back-btn:hover, body.dark-mode .gallery-full-view-btn:hover { background: #4a4a4a !important; } /* Brand Filter Container */ body.dark-mode .brand-filter-container, body.dark-mode .category-filter-container { background: #1e293b !important; border-color: #3a3a3a !important; } /* Empty States */ body.dark-mode .empty-state-container, body.dark-mode .no-results { background: #2a2a2a !important; color: #888888 !important; } /* Toast Notifications in Dark Mode */ body.dark-mode .toast { background: #2a2a2a !important; color: #e0e0e0 !important; border-color: #3a3a3a !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important; } /* Image Placeholders */ body.dark-mode .image-placeholder, body.dark-mode .no-image { background: #3a3a3a !important; color: #888888 !important; } /* ======================================== Dark Mode - Admin Specific ======================================== */ body.dark-mode .admin-panel, body.dark-mode .admin-section, body.dark-mode .admin-card { background: #2a2a2a !important; border-color: #3a3a3a !important; } body.dark-mode .user-row, body.dark-mode .registration-row { background: #2a2a2a !important; border-color: #3a3a3a !important; } body.dark-mode .user-row:hover, body.dark-mode .registration-row:hover { background: #333333 !important; } /* ======================================== Dark Mode - Worker Login Pages ======================================== */ body.dark-mode .login-container, body.dark-mode .pin-container, body.dark-mode .worker-container { background: #2a2a2a !important; border-color: #3a3a3a !important; } body.dark-mode .pin-input, body.dark-mode .pin-digit { background: #1a1a1a !important; color: #e0e0e0 !important; border-color: #3a3a3a !important; } /* ======================================== Dark Mode - Business Intelligence ======================================== */ body.dark-mode .chart-container, body.dark-mode .graph-container { background: #2a2a2a !important; border-color: #3a3a3a !important; } body.dark-mode .metric-card, body.dark-mode .kpi-card { background: #2a2a2a !important; border-color: #3a3a3a !important; } /* ======================================== Dark Mode - Invoice & Payment Pages ======================================== */ body.dark-mode .invoice-container, body.dark-mode .payment-container, body.dark-mode .invoice-card, body.dark-mode .payment-card { background: #2a2a2a !important; border-color: #3a3a3a !important; } body.dark-mode .invoice-header, body.dark-mode .payment-header { background: #1e1e1e !important; border-color: #3a3a3a !important; } body.dark-mode .invoice-item, body.dark-mode .payment-item, body.dark-mode .line-item { background: #2a2a2a !important; border-color: #3a3a3a !important; } /* ======================================== Dark Mode - Booking & Service Pages ======================================== */ body.dark-mode .booking-card, body.dark-mode .service-card, body.dark-mode .appointment-card { background: #2a2a2a !important; border-color: #3a3a3a !important; } body.dark-mode .time-slot, body.dark-mode .date-slot { background: #2a2a2a !important; border-color: #3a3a3a !important; color: #e0e0e0 !important; } body.dark-mode .time-slot.selected, body.dark-mode .date-slot.selected { background: #10b981 !important; color: white !important; } body.dark-mode .time-slot:hover, body.dark-mode .date-slot:hover { background: #3a3a3a !important; } /* ======================================== Dark Mode - Worker Filter Buttons ======================================== */ body.dark-mode .worker-filter-btn, body.dark-mode [class*="filter-btn"] { background: #2a2a2a !important; color: #b0b0b0 !important; border-color: #3a3a3a !important; } body.dark-mode .worker-filter-btn.active, body.dark-mode .worker-filter-btn:hover { background: #10b981 !important; color: white !important; border-color: #10b981 !important; } /* ======================================== Dark Mode - Settings Tabs & Navigation ======================================== */ body.dark-mode .settings-nav, body.dark-mode .settings-tabs { background: #2a2a2a !important; border-color: #3a3a3a !important; } body.dark-mode .settings-nav button, body.dark-mode .settings-tab { background: transparent !important; color: #b0b0b0 !important; } body.dark-mode .settings-nav button.active, body.dark-mode .settings-tab.active { background: rgba(5, 150, 105, 0.2) !important; color: #10b981 !important; } body.dark-mode .settings-item { background: #2a2a2a !important; border-color: #3a3a3a !important; } body.dark-mode .settings-title { color: #e0e0e0 !important; } body.dark-mode .settings-desc { color: #888888 !important; } /* ======================================== Dark Mode - Category Section ======================================== */ body.dark-mode .category-section, body.dark-mode .brands-section, body.dark-mode .product-section { background: #2a2a2a !important; border-color: #3a3a3a !important; } /* ======================================== Dark Mode - Fuel Price Cards ======================================== */ body.dark-mode .fuel-price-card { background: #2a2a2a !important; border-color: #3a3a3a !important; } /* ======================================== Dark Mode - Scanner & Camera ======================================== */ body.dark-mode .scanned-item { background: #2a2a2a !important; } body.dark-mode #secureQRCameraSelect { background: #1a1a1a !important; color: #e0e0e0 !important; border-color: #3a3a3a !important; } /* ======================================== Dark Mode - Quote & Invoice Content ======================================== */ body.dark-mode #quoteContent { background: white !important; /* Quotes need to stay white for printing */ } /* ======================================== Dark Mode - Additional Button Styles ======================================== */ body.dark-mode button[style*="background: white"], body.dark-mode button[style*="background:white"] { background: #2a2a2a !important; color: #e0e0e0 !important; border-color: #3a3a3a !important; } /* ======================================== Dark Mode - Certificate & Document Cards ======================================== */ body.dark-mode .certificate-card, body.dark-mode .document-card { background: #2a2a2a !important; border-color: #3a3a3a !important; } /* ======================================== Dark Mode - PIN Entry & Security ======================================== */ body.dark-mode .pin-keypad button { background: #3a3a3a !important; color: #e0e0e0 !important; border-color: #4a4a4a !important; } body.dark-mode .pin-keypad button:hover { background: #4a4a4a !important; } /* ======================================== Dark Mode - Alert & Warning Boxes ======================================== */ body.dark-mode [style*="background: #fff3cd"], body.dark-mode [style*="background:#fff3cd"], body.dark-mode [style*="background: #fff4e6"], body.dark-mode [style*="background:#fff4e6"] { background: rgba(255, 193, 7, 0.15) !important; color: #ffd54f !important; } body.dark-mode [style*="background: #fff5f5"], body.dark-mode [style*="background:#fff5f5"] { background: rgba(220, 53, 69, 0.15) !important; } /* ======================================== Dark Mode - Comprehensive Inline Fixes ======================================== */ body.dark-mode div[style*="background: white"], body.dark-mode div[style*="background:white"], body.dark-mode span[style*="background: white"], body.dark-mode span[style*="background:white"] { background: #2a2a2a !important; } body.dark-mode [style*="border: 2px solid #e5e7eb"], body.dark-mode [style*="border:2px solid #e5e7eb"], body.dark-mode [style*="border: 1px solid #e5e7eb"], body.dark-mode [style*="border:1px solid #e5e7eb"], body.dark-mode [style*="border: 2px solid #e1e8ed"], body.dark-mode [style*="border:2px solid #e1e8ed"] { border-color: #3a3a3a !important; } body.dark-mode [style*="border-left: 4px solid #ff9800"] { border-left-color: #ff9800 !important; } body.dark-mode [style*="border-left: 4px solid #ffc107"] { border-left-color: #ffc107 !important; }