/* ======================================================= BASE STYLES (Default = Light Mode) Using CSS variables ======================================================= */ :root { /* Global */ --bg-color: #ffffff; --text-color: #212529; /* Navbar / Footer */ --nav-bg: #f8f9fa; --nav-text: #212529; --footer-bg: #f8f9fa; --footer-text: #6c757d; /* Surfaces */ --card-bg: #ffffff; --border-color: #dee2e6; /* Text & Links */ --muted-text: #6c757d; --link-color: #0d6efd; /* Buttons */ --btn-bg: #ffffff; --btn-text: #212529; /* Tables */ --table-header-bg: #f1f3f5; --table-cell-bg: #ffffff; /* Fieldset / panel */ --fieldset-bg: #ffffff; /* Inputs */ --input-bg: #ffffff; --input-text: #212529; --input-border: #ced4da; /* Messages */ --msg-admin-bg: #e9f5ff; --msg-admin-text: #064663; --msg-cust-bg: #f3f4f6; --msg-cust-text: #111827; } /* ------------------ Global ------------------ */ body { background-color: var(--bg-color); color: var(--text-color); } /* Containers / cards */ .card, .container, .main-content { background-color: var(--card-bg); } /* Navbar */ .navbar { background-color: var(--nav-bg) !important; color: var(--nav-text); } .navbar .nav-link { color: var(--nav-text) !important; } .navbar .nav-link:hover { color: var(--link-color) !important; } /* Footer (use .footer class or footer tag) */ .footer, footer { background-color: var(--footer-bg); color: var(--footer-text); } /* Links */ a { color: var(--link-color); } /* Muted text */ .text-muted { color: var(--muted-text) !important; } /* Toggle button */ .ts-theme-btn { border: 1px solid var(--border-color); background-color: var(--btn-bg); color: var(--btn-text); } /* Tables */ table { color: var(--text-color); } table thead tr { background-color: var(--table-header-bg); } table td, table th { background-color: var(--table-cell-bg); border-color: var(--border-color); } /* Fieldsets / sections */ fieldset { background-color: var(--fieldset-bg); border: 1px solid var(--border-color); color: var(--text-color); } fieldset legend { font-weight: bold; } /* Inputs / textareas / selects */ input, textarea, select { background-color: var(--input-bg); color: var(--input-text); border: 1px solid var(--input-border); } input:focus, textarea:focus, select:focus { border-color: #60a5fa; box-shadow: 0 0 0 0.15rem rgba(96, 165, 250, 0.35); outline: none; } /* Message bubbles (for admin/customer messages) */ .message-bubble { border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 0.9rem; } .message-admin { background-color: var(--msg-admin-bg); color: var(--msg-admin-text); } .message-customer { background-color: var(--msg-cust-bg); color: var(--msg-cust-text); } /* Borders */ .border { border-color: var(--border-color) !important; } /* ======================================================= DARK MODE (Activated by adding .dark-mode to ) ======================================================= */ .dark-mode { /* Global */ --bg-color: #121212; --text-color: #e4e4e4; /* Navbar / Footer */ --nav-bg: #1e1e1e; --nav-text: #e4e4e4; --footer-bg: #1e1e1e; --footer-text: #cccccc; /* Surfaces */ --card-bg: #1a1a1a; --border-color: #444444; /* Text & Links */ --muted-text: #9ca3af; --link-color: #4dabff; /* Buttons */ --btn-bg: #1e1e1e; --btn-text: #e4e4e4; /* Tables */ --table-header-bg: #1f2937; --table-cell-bg: #111827; /* Fieldset / panel */ --fieldset-bg: #111827; /* Inputs */ --input-bg: #0f172a; --input-text: #e5e7eb; --input-border: #374151; /* Messages */ --msg-admin-bg: #0f172a; --msg-admin-text: #bfdbfe; --msg-cust-bg: #020617; --msg-cust-text: #e5e7eb; } /* Extra dark-mode visual tweaks */ .dark-mode img { filter: brightness(0.92); } .dark-mode .navbar { border-bottom: 1px solid var(--border-color); } .dark-mode .footer, .dark-mode footer { border-top: 1px solid #333; } /* Optional: nicer outline for theme button in dark mode */ .dark-mode .ts-theme-btn { box-shadow: 0 0 0 0.15rem rgba(148, 163, 184, 0.35); } /* ----- TABLE SUPPORT FOR DARK MODE ----- */ .dark-mode table, .dark-mode .table { background-color: #1a1a1a; color: #e4e4e4; } .dark-mode .table td, .dark-mode .table th { background-color: #1a1a1a !important; color: #e4e4e4 !important; border-color: #444 !important; } .dark-mode .table-bordered { border-color: #444 !important; } .dark-mode .table > :not(caption) > * > * { background-color: #1a1a1a !important; color: #e4e4e4 !important; border-color: #444 !important; } .dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background-color: #222 !important; } .dark-mode .table-hover tbody tr:hover { background-color: #333 !important; } .dark-mode .list-group-item { background-color: #1e1e1e !important; color: #e4e4e4 !important; border-color: #333 !important; } .dark-mode .badge.bg-primary { background-color: #3d6bff !important; } .dark-mode .badge.bg-success { background-color: #1fa463 !important; } .dark-mode .text-muted { color: #aaaaaa !important; } td.ts-checkin { background-color: #0d6efd !important; /* bootstrap primary */ color: #fff !important; border-radius: 50%; } td.ts-checkout { background-color: #0d6efd !important; color: #fff !important; border-radius: 50%; } td.ts-inrange { background-color: #cfe2ff !important; /* light blue */ } td.selectable-date { cursor: pointer; }