/* 🌙 Dark Mode Styles */ /* Dark mode is activated when */ /* ===== CORE LAYOUT ===== */ .dark body { background-color: #111827; /* gray-900 */ color: #f3f4f6; /* gray-100 */ } /* Login Section */ .dark #login-section .bg-white { background-color: #1f2937 !important; /* gray-800 */ } .dark #login-section h2 { color: #ffffff !important; } .dark #login-section label { color: #d1d5db !important; /* gray-300 */ } .dark #login-section input[type="email"], .dark #login-section input[type="password"] { background-color: #374151 !important; /* gray-700 */ border-color: #4b5563 !important; /* gray-600 */ color: #ffffff !important; } /* Header */ .dark header { background-color: #1f2937 !important; /* gray-800 */ } .dark header h1 { color: #ffffff !important; } .dark header #user-email-display { color: #d1d5db !important; /* gray-300 */ } /* Navigation */ .dark #main-nav { background-color: #374151 !important; /* gray-700 */ } .dark .nav-link { color: #e5e7eb !important; /* gray-200 */ } .dark .nav-link:hover { background-color: #4b5563 !important; /* gray-600 */ } .dark .nav-link.active { background-color: #1f2937 !important; /* gray-800 */ color: #60a5fa !important; /* blue-400 */ } /* ===== TAB CONTENTS ===== */ .dark .tab-content > div[class*="bg-white"] { background-color: #1f2937 !important; /* gray-800 */ } .dark .bg-white { background-color: #1f2937 !important; /* gray-800 */ } .dark .bg-gray-50 { background-color: #374151 !important; /* gray-700 */ } .dark .bg-gray-100 { background-color: #1f2937 !important; /* gray-800 */ } .dark .bg-gray-200 { background-color: #374151 !important; /* gray-700 */ } /* ===== TEXT COLORS ===== */ .dark .text-gray-700, .dark .text-gray-800, .dark .text-gray-900 { color: #f3f4f6 !important; /* gray-100 */ } .dark .text-gray-500, .dark .text-gray-600 { color: #9ca3af !important; /* gray-400 */ } .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #ffffff !important; } /* ===== BORDERS ===== */ .dark .border, .dark .border-gray-300 { border-color: #4b5563 !important; /* gray-600 */ } .dark .border-b { border-bottom-color: #4b5563 !important; /* gray-600 */ } .dark .border-t { border-top-color: #4b5563 !important; /* gray-600 */ } /* ===== FORMS ===== */ .dark input[type="text"], .dark input[type="email"], .dark input[type="password"], .dark input[type="number"], .dark input[type="date"], .dark input[type="month"], .dark input[type="time"], .dark input[type="tel"], .dark textarea, .dark select { background-color: #374151 !important; /* gray-700 */ border-color: #4b5563 !important; /* gray-600 */ color: #ffffff !important; } .dark input::placeholder, .dark textarea::placeholder { color: #9ca3af !important; /* gray-400 */ } /* ===== TABLES ===== */ .dark table { color: #e5e7eb; /* gray-200 */ } .dark thead { background-color: #374151 !important; /* gray-700 */ } .dark thead th { color: #f3f4f6 !important; /* gray-100 */ } .dark tbody tr { border-bottom-color: #4b5563 !important; /* gray-600 */ } .dark tbody tr:hover { background-color: #374151 !important; /* gray-700 */ } .dark tbody td { color: #d1d5db !important; /* gray-300 */ } .dark tfoot { background-color: #374151 !important; /* gray-700 */ } /* ===== CARDS & CONTAINERS ===== */ .dark .rounded-lg.shadow, .dark .dashboard-card { background-color: #1f2937 !important; /* gray-800 */ border-color: #374151 !important; /* gray-700 */ } /* ===== MODALS ===== */ .dark .modal > div { background-color: #1f2937 !important; /* gray-800 */ } .dark .modal h3, .dark .modal h4 { color: #ffffff !important; } .dark .modal label { color: #d1d5db !important; /* gray-300 */ } /* ===== BUTTONS (Keep original colors, just adjust hover states) ===== */ .dark button:not([class*="bg-"]) { background-color: #374151; /* gray-700 */ color: #ffffff; } /* ===== DROPDOWNS & AUTOCOMPLETE ===== */ .dark #dashboard-autocomplete-list, .dark #invoice-autocomplete-list, .dark .autocomplete-list { background-color: #374151 !important; /* gray-700 */ border-color: #4b5563 !important; /* gray-600 */ } .dark .autocomplete-item { color: #e5e7eb !important; /* gray-200 */ } .dark .autocomplete-item:hover { background-color: #4b5563 !important; /* gray-600 */ } /* ===== SUB-NAVIGATION ===== */ .dark .sub-nav-btn { color: #9ca3af !important; /* gray-400 */ } .dark .sub-nav-btn.active { color: #60a5fa !important; /* blue-400 */ border-bottom-color: #60a5fa !important; } /* ===== SPECIAL CASES ===== */ /* Keep colored backgrounds visible in dark mode */ .dark .bg-green-50, .dark .bg-green-100, .dark .bg-red-50, .dark .bg-red-100, .dark .bg-blue-50, .dark .bg-blue-100, .dark .bg-yellow-50, .dark .bg-indigo-50, .dark .bg-purple-50 { /* Keep colored backgrounds but slightly darker */ filter: brightness(0.7); } /* Print areas should remain white for printing */ @media screen { .dark #quotation-print-area, .dark #quotation-v2-print-area, .dark #invoice-print-area, .dark #quotation-create-view, .dark #invoice { background-color: #ffffff !important; color: #000000 !important; } .dark #quotation-print-area *, .dark #quotation-v2-print-area *, .dark #invoice-print-area *, .dark #quotation-create-view *:not(button):not(input), .dark #invoice *:not(button):not(input) { color: inherit !important; background-color: inherit !important; } /* Keep form inputs dark in quotation/invoice */ .dark #quotation-create-view input:not([type="date"]):not([contenteditable]), .dark #quotation-create-view select, .dark #invoice input:not([type="date"]):not([contenteditable]), .dark #invoice select { background-color: #374151 !important; color: #ffffff !important; border-color: #4b5563 !important; } } /* ===== DASHBOARD WIDGETS ===== */ .dark .stat-card { background-color: #1f2937 !important; border-color: #374151 !important; } .dark .stat-card-label { color: #9ca3af !important; } .dark .stat-card-value { color: #f3f4f6 !important; } /* Dashboard stat cards - Today Orders, Income, Expenses, etc. */ .dark #dashboard-widgets-container .stat-card, .dark #dashboard-widgets-container > div > div { background-color: #1f2937 !important; } .dark #dashboard-widgets-container .stat-card-label, .dark #dashboard-widgets-container .text-gray-600, .dark #dashboard-widgets-container .text-gray-500 { color: #9ca3af !important; } /* ===== ORDER FORM - EDITED ORDERS HIGHLIGHT ===== */ .dark tr[data-edited="true"], .dark .order-edited { background-color: #1e3a5f !important; /* Dark blue instead of yellow */ } .dark tr[data-edited="true"]:hover { background-color: #2d4a6f !important; } /* ===== ORDER FORM - MATERIAL GROUP & SIMPLE ITEM ===== */ .dark .line-item-container, .dark .material-group-container, .dark .simple-item-container { background-color: #1f2937 !important; border-color: #4b5563 !important; } .dark .sub-items-container { background-color: #111827 !important; } /* ===== INCOME - SUB NAVIGATION ===== */ .dark #income-sub-navigation-container, .dark .income-nav-group { background-color: #1f2937 !important; } /* Income summary cards */ .dark #income-summary .bg-green-100 { background-color: #064e3b !important; /* Dark green */ } .dark #income-summary .bg-red-100 { background-color: #7f1d1d !important; /* Dark red */ } .dark #income-summary .bg-blue-100 { background-color: #1e3a8a !important; /* Dark blue */ } .dark #income-summary .text-green-800, .dark #income-summary .text-red-800, .dark #income-summary .text-blue-800 { color: #f3f4f6 !important; } .dark #income-summary .text-green-700, .dark #income-summary .text-red-700, .dark #income-summary .text-blue-700 { color: #ffffff !important; } /* ===== PAYMENT LEDGER - FILTER BY BUTTONS ===== */ .dark #payment-ledger-filters .bg-blue-50 { background-color: #1e3a8a !important; } .dark #payment-ledger-filters .bg-blue-50 label, .dark #payment-ledger-filters .bg-blue-50 input { color: #ffffff !important; } /* ===== STOCK EXPENSES TABLE ===== */ .dark #stock-expenses-view table { background-color: #1f2937 !important; } /* ===== EXPENSES LEDGER - GENERAL EXPENSES HEADER ===== */ .dark #expenses-ledger-view .bg-gray-100, .dark #general-expenses-view .bg-gray-100 { background-color: #374151 !important; } /* ===== STOCK IN FORM - SUMMARY BAR ===== */ .dark #stock-in-summary-bar, .dark .stock-summary { background-color: #1e3a8a !important; color: #ffffff !important; } /* ===== STOCK HISTORY TABLE - FOOTER TEXT ===== */ .dark #stock-history-table tfoot th { color: #f3f4f6 !important; } /* ===== ATTENDANCE - COLOR LEGEND ===== */ .dark #attendance-view .bg-gradient-to-r { background: linear-gradient(to right, #1f2937, #374151) !important; } .dark .color-legend-item { background-color: #1f2937 !important; border-color: #4b5563 !important; } .dark .color-legend-item:hover { background-color: #374151 !important; } .dark .color-legend-item.bg-cyan-50 { background-color: #164e63 !important; border-left-color: #06b6d4 !important; } .dark .color-legend-item.bg-amber-50 { background-color: #78350f !important; border-left-color: #f59e0b !important; } .dark .color-legend-item.bg-green-50 { background-color: #14532d !important; border-left-color: #22c55e !important; } .dark .color-legend-item.bg-purple-50 { background-color: #581c87 !important; } .dark .color-legend-item.bg-indigo-50 { background-color: #312e81 !important; } .dark .color-legend-item.bg-yellow-50 { background-color: #713f12 !important; } /* ===== SETTINGS - EXPORT ALL COLLECTIONS ===== */ .dark .bg-gradient-to-r.from-green-50.to-blue-50 { background: linear-gradient(to right, #064e3b, #1e3a8a) !important; } .dark .border-green-300 { border-color: #059669 !important; } /* Settings - Usage Instructions */ .dark .bg-blue-50.border-l-4 { background-color: #1e3a8a !important; } .dark .border-blue-500 { border-left-color: #3b82f6 !important; } .dark .text-gray-700 { color: #e5e7eb !important; } /* ===== NOTIFICATIONS ===== */ .dark #notification { background-color: #374151 !important; color: #ffffff !important; } /* ===== LOADING OVERLAY ===== */ .dark #loading-overlay > div { background-color: #1f2937 !important; } .dark #loading-message, .dark #loading-submessage { color: #f3f4f6 !important; } /* ===== FILTERS & TOOLBARS ===== */ .dark #orders-filters, .dark #income-filters, .dark #expenses-filters, .dark #attendance-filters { background-color: #1f2937 !important; border-color: #4b5563 !important; } /* ===== SEARCH INPUTS ===== */ .dark #order-search-input, .dark #debtor-search, .dark #paid-off-search, .dark #payment-ledger-search, .dark #quick-invoice-search { background-color: #374151 !important; border-color: #4b5563 !important; color: #ffffff !important; }