/* ===== DARK MODE THEME ===== */ /* Applied via [data-theme="dark"] on */ [data-theme="dark"] { --ivory: #0f1117; --white: #1a1d27; --dark: #e4e6ef; --light-grey: #22252f; --midnight: #7eb8ff; --sky: #1a2332; --mint: #0d2e25; --soft-red: #2e1517; --soft-gold: #2e2610; --soft-green: #0d2e25; --shadow-sm: 0 2px 8px rgba(0,0,0,.25); --shadow-md: 0 8px 32px rgba(0,0,0,.35); --shadow-lg: 0 20px 60px rgba(0,0,0,.45); } /* Body */ [data-theme="dark"] body { background: #0f1117; color: #e4e6ef; } /* Sidebar — keep dark (already dark in light mode) */ [data-theme="dark"] .sidebar { background: #0a0d14; border-right: 1px solid #1e2230; } [data-theme="dark"] .sidebar-logo { border-bottom-color: rgba(255,255,255,.06); } /* Topbar */ [data-theme="dark"] .topbar { background: #1a1d27; border-bottom-color: #2d3140; box-shadow: 0 2px 8px rgba(0,0,0,.3); } [data-theme="dark"] .topbar-left h2 { color: #e4e6ef; } [data-theme="dark"] .topbar-time { color: #8b8fa3; } /* Cards */ [data-theme="dark"] .card, [data-theme="dark"] .card-sm { background: #1a1d27; box-shadow: 0 2px 8px rgba(0,0,0,.25); } /* Metric cards */ [data-theme="dark"] .metric-card { background: #1a1d27; box-shadow: 0 2px 8px rgba(0,0,0,.25); } [data-theme="dark"] .metric-val { color: #e4e6ef; } [data-theme="dark"] .metric-label { color: #8b8fa3; } [data-theme="dark"] .metric-sub { color: #6b6f80; } [data-theme="dark"] .metric-progress { background: #22252f; } [data-theme="dark"] .metric-icon.blue { background: rgba(126, 184, 255, 0.12); } [data-theme="dark"] .metric-icon.green { background: rgba(0, 184, 148, 0.12); } [data-theme="dark"] .metric-icon.gold { background: rgba(244, 180, 0, 0.12); } [data-theme="dark"] .metric-icon.red { background: rgba(231, 76, 60, 0.12); } /* Action buttons */ [data-theme="dark"] .action-btn { background: #1a1d27; border-color: #2d3140; } [data-theme="dark"] .action-btn:hover { border-color: var(--emerald); background: #22252f; } [data-theme="dark"] .action-btn .action-label { color: #e4e6ef; } [data-theme="dark"] .action-btn .action-sub { color: #6b6f80; } /* Section headers */ [data-theme="dark"] .section-hdr h3 { color: #e4e6ef; } [data-theme="dark"] .section-hdr p { color: #6b6f80; } /* Tables */ [data-theme="dark"] thead th { background: #12141c; color: #6b6f80; border-bottom-color: #2d3140; } [data-theme="dark"] tbody td { border-bottom-color: #1e2230; color: #d0d3e0; } [data-theme="dark"] tbody tr:hover { background: #22252f !important; } /* Forms */ [data-theme="dark"] .form-input, [data-theme="dark"] .filter-select { background: #12141c; border-color: #2d3140; color: #e4e6ef; } [data-theme="dark"] .form-input:focus, [data-theme="dark"] .filter-select:focus { border-color: var(--emerald); background: #1a1d27; } [data-theme="dark"] .form-group label { color: #8b8fa3; } /* Search bar */ [data-theme="dark"] .search-bar { background: #22252f; } [data-theme="dark"] .search-bar input { color: #e4e6ef; } [data-theme="dark"] .search-bar input::placeholder { color: #6b6f80; } /* Modals */ [data-theme="dark"] .modal-overlay { background: rgba(0,0,0,.6); } [data-theme="dark"] .modal { background: #1a1d27; box-shadow: 0 20px 60px rgba(0,0,0,.5); } [data-theme="dark"] .modal-header { background: #1a1d27; border-bottom-color: #2d3140; } [data-theme="dark"] .modal-header h3 { color: #e4e6ef; } [data-theme="dark"] .modal-footer { border-top-color: #2d3140; } [data-theme="dark"] .modal-close { background: #22252f; color: #8b8fa3; } [data-theme="dark"] .modal-close:hover { background: #2d3140; } /* Badges */ [data-theme="dark"] .badge-active { background: rgba(0,184,148,.15); color: #00e6b8; } [data-theme="dark"] .badge-enquiry { background: rgba(126,184,255,.12); color: #7eb8ff; } [data-theme="dark"] .badge-paid { background: rgba(0,184,148,.15); color: #00e6b8; } [data-theme="dark"] .badge-due { background: rgba(231,76,60,.15); color: #ff6b5a; } [data-theme="dark"] .badge-open { background: rgba(231,76,60,.15); color: #ff6b5a; } [data-theme="dark"] .badge-progress{ background: rgba(244,180,0,.15); color: #ffc940; } [data-theme="dark"] .badge-resolved{ background: rgba(0,184,148,.15); color: #00e6b8; } [data-theme="dark"] .badge-pending { background: rgba(244,180,0,.15); color: #ffc940; } [data-theme="dark"] .badge-vacating{ background: rgba(244,180,0,.15); color: #ffc940; } [data-theme="dark"] .badge-vacated { background: rgba(255,255,255,.06); color: #6b6f80; } /* Buttons */ [data-theme="dark"] .btn-outline { border-color: #2d3140; color: #d0d3e0; } [data-theme="dark"] .btn-outline:hover { background: #22252f; } /* Room cards */ [data-theme="dark"] .room-card.occupied { background: rgba(0,184,148,.1); border-color: #00B894; } [data-theme="dark"] .room-card.partial { background: rgba(244,180,0,.1); border-color: #F4B400; } [data-theme="dark"] .room-card.vacant { background: rgba(231,76,60,.08); border-color: #E74C3C; } [data-theme="dark"] .room-card.reserved { background: rgba(59,130,246,.1); border-color: #3B82F6; } [data-theme="dark"] .room-card.vacating { background: rgba(230,126,34,.1); border-color: #E67E22; } [data-theme="dark"] .room-num { color: #e4e6ef; } [data-theme="dark"] .room-beds { color: #6b6f80; } /* Room popover */ [data-theme="dark"] .room-popover { background: #1a1d27; border-color: #2d3140; box-shadow: 0 12px 40px rgba(0,0,0,.5); } [data-theme="dark"] .room-popover .pop-name { color: #e4e6ef; } [data-theme="dark"] .room-popover .pop-phone { color: #8b8fa3; } /* Room legend */ [data-theme="dark"] .room-legend-item { color: #8b8fa3; } /* Toast */ [data-theme="dark"] .toast { background: #22252f; box-shadow: 0 8px 32px rgba(0,0,0,.5); } /* Notification panel */ [data-theme="dark"] .notif-panel { background: #1a1d27; box-shadow: -8px 0 40px rgba(0,0,0,.4); } [data-theme="dark"] .notif-panel-header { border-bottom-color: #2d3140; } [data-theme="dark"] .notif-panel-header h3 { color: #e4e6ef; } [data-theme="dark"] .notif-item:hover { background: #22252f; } [data-theme="dark"] .notif-item.unread { background: rgba(59,130,246,.08); } /* Command palette */ [data-theme="dark"] .cmd-box { background: #1a1d27; box-shadow: 0 20px 60px rgba(0,0,0,.5); } [data-theme="dark"] .cmd-input-wrap { border-bottom-color: #2d3140; } [data-theme="dark"] .cmd-input { color: #e4e6ef; } [data-theme="dark"] .cmd-input::placeholder { color: #6b6f80; } [data-theme="dark"] .cmd-result:hover, [data-theme="dark"] .cmd-result.selected { background: #22252f; } [data-theme="dark"] .cmd-result-text { color: #d0d3e0; } [data-theme="dark"] .cmd-footer { border-top-color: #2d3140; } /* Confirm dialog */ [data-theme="dark"] .confirm-box { background: #1a1d27; box-shadow: 0 20px 60px rgba(0,0,0,.5); } [data-theme="dark"] .confirm-title { color: #e4e6ef; } [data-theme="dark"] .confirm-msg { color: #8b8fa3; } /* Settings */ [data-theme="dark"] .settings-section h4 { color: #e4e6ef; } [data-theme="dark"] .toggle-row { border-bottom-color: #1e2230; } [data-theme="dark"] .toggle-slider { background: #2d3140; } /* WA Financial */ [data-theme="dark"] .wa-financial { background: linear-gradient(135deg, #0a0d14 0%, #12182a 100%); } [data-theme="dark"] .wa-example { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); } /* Activity */ [data-theme="dark"] .activity-item { border-bottom-color: #1e2230; } [data-theme="dark"] .activity-text { color: #d0d3e0; } [data-theme="dark"] .activity-time { color: #6b6f80; } /* Setup wizard */ [data-theme="dark"] .setup-wizard { background: linear-gradient(135deg, #12182a 0%, #0d1f2d 100%); border-color: rgba(126,184,255,.15); } [data-theme="dark"] .setup-step { background: #1a1d27; border-color: #2d3140; } [data-theme="dark"] .setup-step:hover { border-color: var(--emerald); } /* Kitchen note */ [data-theme="dark"] .kitchen-note-card { background: #1a1d27; } [data-theme="dark"] .kitchen-note-display { background: rgba(244,180,0,.08); color: #d0d3e0; } [data-theme="dark"] .kitchen-note-edit { background: #12141c; border-color: #2d3140; color: #e4e6ef; } /* Month selector */ [data-theme="dark"] .month-selector { background: #22252f; } [data-theme="dark"] .month-selector button { background: #1a1d27; color: #d0d3e0; } [data-theme="dark"] .month-selector span { color: #e4e6ef; } /* Detail tabs */ [data-theme="dark"] .detail-tabs { background: #22252f; } [data-theme="dark"] .detail-tab { color: #6b6f80; } [data-theme="dark"] .detail-tab.active { background: #1a1d27; color: #e4e6ef; } [data-theme="dark"] .info-item label { color: #6b6f80; } [data-theme="dark"] .info-item p { color: #d0d3e0; } /* Stats */ [data-theme="dark"] .stat-label { color: #6b6f80; } [data-theme="dark"] .stat-bar { background: #22252f; } [data-theme="dark"] .stat-val { color: #e4e6ef; } /* Happiness chart */ [data-theme="dark"] .happiness-chart { border-bottom-color: #2d3140; } /* Scrollbar */ [data-theme="dark"] ::-webkit-scrollbar-track { background: #0f1117; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2d3140; } /* Selection */ [data-theme="dark"] ::selection { background: var(--gold); color: #0f1117; } /* Mobile nav */ [data-theme="dark"] .mobile-nav { background: #0a0d14; } /* Login overlay — stays dark regardless */ /* ===== THEME TOGGLE BUTTON ===== */ .theme-toggle { width: 40px; height: 40px; border-radius: 12px; border: none; background: #f2f4f7; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; position: relative; } .theme-toggle:hover { background: #e0e2e8; transform: scale(1.05); } [data-theme="dark"] .theme-toggle { background: #22252f; } [data-theme="dark"] .theme-toggle:hover { background: #2d3140; } .theme-icon { transition: transform 0.3s ease; } [data-theme="dark"] .theme-icon { transform: rotate(180deg); } /* ===== LANGUAGE SELECTOR ===== */ .lang-selector { padding: 6px 10px; border-radius: 8px; border: 1.5px solid #eee; background: white; font-size: 12px; font-weight: 600; color: #333; cursor: pointer; transition: all 0.2s; font-family: inherit; } .lang-selector:focus { border-color: var(--emerald); outline: none; } [data-theme="dark"] .lang-selector { background: #22252f; border-color: #2d3140; color: #e4e6ef; } /* Smooth transition for all theme-affected elements */ body, .sidebar, .topbar, .card, .card-sm, .metric-card, .modal, .toast, .notif-panel, .cmd-box, .confirm-box, .form-input, .filter-select, .search-bar, thead th, tbody td, .btn-outline, .room-card, .room-popover { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }