/* ============================================================ DARK THEME ============================================================ Activated by data-bs-theme="dark" on or wrapper. Philosophy: - Neutral, cool dark backgrounds (no warm undertone) - Three-layer surface hierarchy: bg -> topbar -> card - Brand azure appears ONLY as accent (active nav, charts, CTAs) -- chrome stays neutral - Lighter brand variant (--brand-light-on-dark) for accents where canonical azure would be too saturated ============================================================ */ [data-bs-theme="dark"] { /* ===== SURFACES ===== */ --surface-base: #15191F; /* main content area */ --surface-raised: #1B2129; /* cards */ --surface-sunken: #0E1116; /* sidebar - deepest layer */ --surface-overlay: #232A33; /* dropdowns, popovers */ --surface-hover: rgba(255, 255, 255, 0.04); --surface-active: rgba(255, 255, 255, 0.08); /* ===== TEXT ===== */ --text-primary: #FAFAFA; --text-secondary: #A0A0A8; --text-muted: #6A6A73; --text-inverse: #FFFFFF; --text-link: var(--brand-light-on-dark); --text-link-hover: var(--brand-300); /* ===== BORDERS ===== */ --border-subtle: rgba(255, 255, 255, 0.05); --border-default: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --border-focus: var(--brand-500); /* ===== SHADOWS - softer in dark mode ===== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.20); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.40), 0 4px 6px rgba(0, 0, 0, 0.20); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.50), 0 10px 10px rgba(0, 0, 0, 0.20); /* ===== SIDEBAR ===== */ --sidebar-bg: var(--surface-sunken); --sidebar-border: var(--border-subtle); --sidebar-logo-color: var(--text-primary); --sidebar-section-label: #8A8A95; --sidebar-item-color: #A0A0A8; --sidebar-item-hover-bg: var(--surface-hover); --sidebar-item-active-bg: rgba(37, 99, 235, 0.20); /* Roomzy blue */ --sidebar-item-active-color: var(--brand-light-on-dark); --sidebar-item-active-border: var(--brand-500); --sidebar-badge-bg: rgba(255, 255, 255, 0.06); --sidebar-badge-color: #A0A0A8; --sidebar-active-badge-bg: rgba(37, 99, 235, 0.28); /* Roomzy blue */ --sidebar-active-badge-color: var(--brand-light-on-dark); /* ===== TOPBAR ===== */ --topbar-bg: var(--surface-base); --topbar-border: var(--border-subtle); --topbar-search-bg: rgba(255, 255, 255, 0.04); --topbar-kbd-bg: rgba(255, 255, 255, 0.06); --topbar-kbd-border: rgba(255, 255, 255, 0.08); --topbar-kbd-color: #A0A0A8; /* ===== TABLE ===== */ --table-row-hover-bg: rgba(255, 255, 255, 0.03); --table-row-inactive-bg: rgba(255, 255, 255, 0.03); /* One step up from a plain row (selected rows, and hovering a row that is already tinted), and one step above that again, so hovering an emphasised row still gives feedback instead of standing still. */ --table-row-emphasis-bg: rgba(255, 255, 255, 0.07); --table-row-emphasis-hover-bg: rgba(255, 255, 255, 0.10); --table-header-color: var(--text-muted); --table-border: var(--border-subtle); /* ===== STATUS BADGES ===== */ --badge-success-bg: rgba(151, 196, 89, 0.18); --badge-success-fg: #97C459; --badge-info-bg: rgba(133, 183, 235, 0.18); --badge-info-fg: #85B7EB; --badge-warning-bg: rgba(245, 147, 13, 0.18); --badge-warning-fg: #f5930d; --badge-danger-bg: rgba(240, 153, 123, 0.18); --badge-danger-fg: #F0997B; --badge-neutral-bg: rgba(255, 255, 255, 0.08); --badge-neutral-fg: #A0A0A8; /* ===== SEMANTIC TEXT ===== */ --color-success: #5DCAA5; --color-danger: #F0997B; --color-warning: #f5930d; --color-info: #85B7EB; /* ===== METRIC ICON TINTS ===== */ --icon-tint-brand-bg: rgba(37, 99, 235, 0.20); /* Roomzy blue */ --icon-tint-brand-fg: var(--brand-light-on-dark); --icon-tint-info-bg: rgba(24, 95, 165, 0.20); --icon-tint-info-fg: #85B7EB; --icon-tint-success-bg: rgba(59, 109, 17, 0.20); --icon-tint-success-fg: #97C459; --icon-tint-warning-bg: rgba(245, 147, 13, 0.18); --icon-tint-warning-fg: #f5930d; /* ===== CHART COLORS ===== */ --chart-grid: rgba(255, 255, 255, 0.05); --chart-area-fill: rgba(37, 99, 235, 0.20); /* Roomzy blue */ --chart-area-line: var(--brand-light-on-dark); --chart-axis-label: var(--text-muted); /* ===== BOOTSTRAP OVERRIDES ===== */ --bs-body-bg: var(--surface-base); --bs-body-color: var(--text-primary); --bs-body-secondary-bg: var(--surface-raised); --bs-body-secondary-color: var(--text-secondary); --bs-body-tertiary-bg: var(--surface-sunken); --bs-body-tertiary-color: var(--text-muted); --bs-emphasis-color: var(--text-primary); --bs-border-color: var(--border-default); --bs-border-color-translucent: var(--border-subtle); --bs-primary: var(--brand-500); --bs-primary-rgb: 37, 99, 235; /* #2563EB - Roomzy blue */ --bs-primary-bg-subtle: rgba(37, 99, 235, 0.20); --bs-primary-border-subtle: rgba(37, 99, 235, 0.35); --bs-primary-text-emphasis: var(--brand-light-on-dark); --bs-link-color: var(--brand-light-on-dark); --bs-link-color-rgb: 96, 165, 250; /* #60A5FA - brand-400 (dark logo R) */ --bs-link-hover-color: var(--brand-300); --bs-link-hover-color-rgb: 147, 197, 253; /* #93C5FD - brand-300 */ --bs-form-control-bg: var(--surface-raised); --bs-form-control-disabled-bg: var(--surface-sunken); --bs-card-bg: var(--surface-raised); --bs-card-border-color: var(--border-subtle); --bs-card-cap-bg: transparent; --bs-table-bg: transparent; --bs-table-hover-bg: rgba(255, 255, 255, 0.03); --bs-table-border-color: var(--border-subtle); --bs-dropdown-bg: var(--surface-overlay); --bs-dropdown-border-color: var(--border-default); --bs-dropdown-link-hover-bg: var(--surface-hover); --bs-dropdown-link-active-bg: rgba(37, 99, 235, 0.20); /* Roomzy blue */ --bs-dropdown-link-active-color: var(--brand-light-on-dark); --bs-modal-bg: var(--surface-overlay); --bs-modal-border-color: var(--border-default); /* Semantic colors (--bs-danger, --bs-success, --bs-warning, --bs-info) are intentionally NOT overridden. Bootstrap 5.3's text-bg-* classes ship with compiled contrast (white/black text) and breaking the backgrounds would break readability. Brand identity lives on --bs-primary only. */ } /* ===== PAGE BUILDER - language tabs (dark theme) ===== */ [data-bs-theme="dark"] .nav-tabs .nav-link.has-translation { color: var(--color-success); border-bottom-color: transparent; } [data-bs-theme="dark"] .nav-tabs .nav-link.has-translation:hover, [data-bs-theme="dark"] .nav-tabs .nav-link.has-translation.active { color: var(--color-success); background-color: var(--surface-active); border-color: var(--border-default) var(--border-default) var(--surface-raised); } [data-bs-theme="dark"] .nav-tabs .nav-link.needs-translation { color: var(--color-warning); border-bottom-color: transparent; } [data-bs-theme="dark"] .nav-tabs .nav-link.needs-translation:hover, [data-bs-theme="dark"] .nav-tabs .nav-link.needs-translation.active { color: var(--color-warning); background-color: var(--surface-active); border-color: var(--border-default) var(--border-default) var(--surface-raised); } [data-bs-theme="dark"] .nav-tabs { border-bottom-color: var(--border-default); } /* Housekeeping Tasks - date group separator row in dark mode */ [data-bs-theme="dark"] .date-group-header td { background-color: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border-top-color: var(--border-default); } /* Invert black PNG icons in dark mode (e.g., amenity icons) */ [data-bs-theme="dark"] .invert-dark { filter: invert(1); } /* Table contextual row variants in dark mode. Each variant needs its HOVER colour overridden as well as its base: Bootstrap gives every variant its own --bs-table-hover-bg from the same fixed light palette, so a row that reads correctly at rest still washes out the instant the pointer lands on it. */ [data-bs-theme="dark"] .table-success, [data-bs-theme="dark"] .table-success > td, [data-bs-theme="dark"] .table-success > th { --bs-table-bg: rgba(25, 135, 84, 0.25); --bs-table-hover-bg: rgba(25, 135, 84, 0.35); --bs-table-hover-color: var(--bs-body-color); --bs-table-border-color: rgba(25, 135, 84, 0.4); color: var(--bs-body-color); } [data-bs-theme="dark"] .table-warning, [data-bs-theme="dark"] .table-warning > td, [data-bs-theme="dark"] .table-warning > th { --bs-table-bg: rgba(255, 193, 7, 0.2); --bs-table-hover-bg: rgba(255, 193, 7, 0.3); --bs-table-hover-color: var(--bs-body-color); --bs-table-border-color: rgba(255, 193, 7, 0.35); color: var(--bs-body-color); } [data-bs-theme="dark"] .table-danger, [data-bs-theme="dark"] .table-danger > td, [data-bs-theme="dark"] .table-danger > th { --bs-table-bg: rgba(220, 53, 69, 0.25); --bs-table-hover-bg: rgba(220, 53, 69, 0.35); --bs-table-hover-color: var(--bs-body-color); --bs-table-border-color: rgba(220, 53, 69, 0.4); color: var(--bs-body-color); } [data-bs-theme="dark"] .table-info, [data-bs-theme="dark"] .table-info > td, [data-bs-theme="dark"] .table-info > th { --bs-table-bg: rgba(13, 202, 240, 0.2); --bs-table-hover-bg: rgba(13, 202, 240, 0.3); --bs-table-hover-color: var(--bs-body-color); --bs-table-border-color: rgba(13, 202, 240, 0.35); color: var(--bs-body-color); } [data-bs-theme="dark"] .table-primary, [data-bs-theme="dark"] .table-primary > td, [data-bs-theme="dark"] .table-primary > th { --bs-table-bg: rgba(13, 110, 253, 0.25); --bs-table-hover-bg: rgba(13, 110, 253, 0.35); --bs-table-hover-color: var(--bs-body-color); --bs-table-border-color: rgba(13, 110, 253, 0.4); color: var(--bs-body-color); } /* The NEUTRAL variants matter more than the coloured ones above, because they carry meaning rather than emphasis: .table-secondary marks an inactive row, .table-light a header/footer band, and .table-active a selected row. Bootstrap 5.3 generates all of them once, from fixed LIGHT colours, and they do not react to data-bs-theme - so in dark mode the cell keeps a pale background while the text inherits the dark theme's near-white, and the row becomes literally unreadable: descriptions, icons and the Inactive badge all vanish into the background. They are driven off the existing tokens rather than new colours so light mode is untouched. Each variant also sets its own --bs-table-hover-bg / -striped-bg / -active-bg, in the same fixed light palette, and those are what .table-hover switches to on pointer-over. Overriding only the base --bs-table-bg therefore fixes the resting row and leaves the HOVERED row just as unreadable, which is exactly what happened - so the state variables have to be overridden too. */ [data-bs-theme="dark"] .table-secondary, [data-bs-theme="dark"] .table-secondary > td, [data-bs-theme="dark"] .table-secondary > th, [data-bs-theme="dark"] .table-light, [data-bs-theme="dark"] .table-light > td, [data-bs-theme="dark"] .table-light > th { --bs-table-bg: var(--table-row-inactive-bg); --bs-table-color: var(--bs-body-color); --bs-table-hover-bg: var(--table-row-emphasis-bg); --bs-table-hover-color: var(--bs-body-color); --bs-table-striped-bg: var(--table-row-emphasis-bg); --bs-table-striped-color: var(--bs-body-color); --bs-table-active-bg: var(--table-row-emphasis-bg); --bs-table-active-color: var(--bs-body-color); --bs-table-border-color: var(--border-subtle); color: var(--bs-body-color); } [data-bs-theme="dark"] .table-active, [data-bs-theme="dark"] .table-active > td, [data-bs-theme="dark"] .table-active > th { --bs-table-bg: var(--table-row-emphasis-bg); --bs-table-color: var(--bs-body-color); --bs-table-hover-bg: var(--table-row-emphasis-hover-bg); --bs-table-hover-color: var(--bs-body-color); --bs-table-striped-bg: var(--table-row-emphasis-hover-bg); --bs-table-striped-color: var(--bs-body-color); --bs-table-active-bg: var(--table-row-emphasis-hover-bg); --bs-table-active-color: var(--bs-body-color); --bs-table-border-color: var(--border-subtle); color: var(--bs-body-color); }