/* * YET Dark Mode – CSS Design Token System * ======================================== * STEP 1 OF 3: Add this file to your (before styles.css and all other CSS). * * This file defines every color used in the YET app as a CSS custom property. * Light mode (default) matches the existing look exactly. * Dark mode activates when is set. * * STEP 2: Replace hardcoded colors throughout your CSS files with var(--color-*). * See the substitution reference at the bottom of this file. * * STEP 3: Add the JS toggle (see yet-dark-mode-toggle.js). */ /* ===================================================================== LIGHT MODE (DEFAULT) — matches current YET appearance exactly ===================================================================== */ :root { /* --- Brand / Accent --- */ --color-brand: #FF5667; /* primary red; buttons, active states, borders */ --color-brand-light: #FF8995; /* lighter red; close buttons, hover states */ --color-brand-lighter: #FF9AA5; /* even lighter; top-close hover */ --color-brand-pale: #FFEBEE; /* very pale red; error row backgrounds */ /* --- Dark Navy (primary text / headings / dark UI chrome) --- */ --color-navy: #2A3246; /* h1, h2, h3, primary text, overlay bg */ --color-navy-mid: #343A40; /* membership details member name */ /* --- Mid Grays (secondary text, borders, UI elements) --- */ --color-gray-dark: #7E8593; /* table td text, label text, secondary text */ --color-gray-mid: #9AA2B5; /* inactive nav, button text, scrollbar thumb */ --color-gray-cool: #7B8290; /* floating labels, menu item text */ --color-gray-text: #707070; /* dropdown list items, link text */ --color-gray-muted: #516269; /* copyright text, pagination */ --color-gray-soft: #535860; /* tab panel h2 */ /* --- Borders --- */ --color-border-strong: #9AA2B5; /* table td borders, sub-table borders */ --color-border-mid: #C4CAD9; /* content header bottom, dropdown border */ --color-border-light: #D5DBEB; /* accordion rows, tabs nav border */ --color-border-xlight: #CED3DD; /* form inputs, item borders */ --color-border-ui: #7E8593; /* account menu dd, utility menu */ --color-border-faint: #BEC2C9; /* h3 underline, bottom-menu top border */ --color-border-table: #B8BCC4; /* calendar grid, report boxes */ --color-border-gray: #B1B8C9; /* hr, simplebar scrollbar */ /* --- Backgrounds (surfaces) --- */ --color-bg-page: rgba(216, 220, 230, 0.506); /* body page background */ --color-bg-content: #FFFFFF; /* .content card, popups, modals */ --color-bg-sidebar: #E1E4EB; /* sidebar */ --color-bg-light: #EFF1F5; /* popup content areas, accordion extra row */ --color-bg-lighter: #F8F9FB; /* event summary, dashboard reminder items */ --color-bg-xlight: #F9FAFC; /* form inputs, checkbox rows, group items */ --color-bg-tabs: #F1F2F6; /* inactive tabs2 state */ --color-bg-detail: #F1F3F6; /* detail th, accordion extra th, doc preview */ --color-bg-subtable: #F7F8FB; /* sub-table even rows, expanded thread */ --color-bg-calendar: #EFF1F5; /* calendar container background */ --color-bg-summary: #F4F6FA; /* dashboard summary bg, yet-pay summary */ --color-bg-totals: #D6DAE0; /* allocation_totals, button-header rows */ --color-bg-button: #D8DCE6; /* standard .button, done/add buttons */ --color-bg-loading: #FFFFFF; /* loading overlay */ --color-bg-lookup-hdr: #ECEEF2; /* lookup/popup header */ --color-bg-menu-hdr: #EAECF1; /* menu-counter header, activity summary header */ --color-bg-error: #F2BFBF; /* error field background */ --color-bg-disabled: #EEEEEE; /* disabled inputs */ --color-bg-input-right: #EFF0F3; /* dropdown input right zone */ --color-bg-input-sep: #C9CDD8; /* dropdown input right separator */ --color-bg-draggable: #EBEDF2; /* draggable field items */ --color-bg-stripe-even: rgba(216, 220, 230, 0.506); /* report table even rows */ --color-bg-white: #FFFFFF; /* --- Scrollbar --- */ --color-scrollbar-track: #EDF0F5; --color-scrollbar-thumb: #B1B8C9; /* --- Status / Semantic --- */ --color-error: #C90000; /* validation errors */ --color-error-alt: #F44336; /* sequence failed status */ --color-success: #7EC9A5; /* lifecycle completed step */ --color-warning: #CCCC00; /* lifecycle skipped */ --color-warning-orange: #FF9800; /* sequence stopped */ --color-info-blue: #4A90E2; /* location-active checkbox */ /* --- Text on dark bg --- */ --color-text-on-dark: #FFFFFF; --color-text-primary: #2A3246; /* default body text */ --color-text-secondary: #7E8593; /* labels, secondary */ --color-text-label: #7B8290; /* floating form labels */ } /* ===================================================================== DARK MODE — activated via ===================================================================== */ [data-theme="dark"] { /* --- Brand / Accent --- unchanged, brand stays red in dark mode --- */ --color-brand: #FF5667; --color-brand-light: #FF7080; --color-brand-lighter: #FF8090; --color-brand-pale: #3D1A1E; /* --- Dark Navy → becomes light in dark mode --- */ --color-navy: #E0E4EF; /* was dark, now light text */ --color-navy-mid: #D0D4DF; /* --- Mid Grays --- */ --color-gray-dark: #A0A8B8; --color-gray-mid: #6E7689; --color-gray-cool: #9098A8; --color-gray-text: #A0A8B8; --color-gray-muted: #7888A0; --color-gray-soft: #8890A0; /* --- Borders --- */ --color-border-strong: #3A4258; --color-border-mid: #303848; --color-border-light: #2A3248; --color-border-xlight: #333D55; --color-border-ui: #404860; --color-border-faint: #2E3650; --color-border-table: #2E3650; --color-border-gray: #3A4258; /* --- Backgrounds (surfaces) --- */ --color-bg-page: #1A1F30; /* page/body bg */ --color-bg-content: #1C2235; /* main content card */ --color-bg-sidebar: #151A28; /* sidebar */ --color-bg-light: #1E2438; /* popup areas, accordion extra */ --color-bg-lighter: #1A1F30; /* dashboard items */ --color-bg-xlight: #1C2235; /* form inputs */ --color-bg-tabs: #181D2C; /* inactive tabs */ --color-bg-detail: #202840; /* detail th */ --color-bg-subtable: #1A1F30; /* sub-table even rows */ --color-bg-calendar: #161B2A; /* calendar bg */ --color-bg-summary: #1A1F30; /* summary panels */ --color-bg-totals: #252D45; /* totals rows */ --color-bg-button: #3D4A6B; /* standard buttons */ --color-bg-loading: #1C2235; --color-bg-lookup-hdr: #252D45; --color-bg-menu-hdr: #252D45; --color-bg-error: #3D1A1A; --color-bg-disabled: #2A2A2A; --color-bg-input-right: #232B40; --color-bg-input-sep: #3A4258; --color-bg-draggable: #202840; --color-bg-stripe-even: rgba(42, 50, 70, 0.4); --color-bg-white: #1C2235; /* --- Scrollbar --- */ --color-scrollbar-track: #1A1F30; --color-scrollbar-thumb: #3A4258; /* --- Status / Semantic --- same intent, slightly adjusted --- */ --color-error: #FF6B6B; --color-error-alt: #FF5252; --color-success: #5CB98C; --color-warning: #C8C800; --color-warning-orange: #E08000; --color-info-blue: #5AA0E8; /* --- Text --- */ --color-text-on-dark: #FFFFFF; --color-text-primary: #E0E4EF; /* was #2A3246, now light */ --color-text-secondary: #A0A8B8; --color-text-label: #8898B0; } /* ===================================================================== OS-LEVEL AUTO DARK MODE (optional) If you want dark mode to follow the OS setting automatically (without a manual toggle), uncomment this block. Remove [data-theme="dark"] above if you use this exclusively. @media (prefers-color-scheme: dark) { :root { ... (copy [data-theme="dark"] token values here) ... } } ===================================================================== */ /* ===================================================================== QUICK SUBSTITUTION REFERENCE ===================================================================== Replace these hardcoded hex values in styles.css / view_styles.css / etc. with the corresponding CSS variable. HARDCODED VALUE → CSS VARIABLE ----------------------------------------------------------------- #FF5667 → var(--color-brand) #FF8995 → var(--color-brand-light) #FF9AA5 → var(--color-brand-lighter) #2A3246 → var(--color-navy) (or --color-text-primary) #7E8593 → var(--color-gray-dark) (or --color-text-secondary) #9AA2B5 → var(--color-gray-mid) #7B8290 → var(--color-gray-cool) (or --color-text-label) #707070 → var(--color-gray-text) #516269 → var(--color-gray-muted) white / #FFFFFF → var(--color-bg-content) (surface) var(--color-text-on-dark) (text on dark bg) rgba(216,220,230,.506) → var(--color-bg-page) #E1E4EB → var(--color-bg-sidebar) #EFF1F5 → var(--color-bg-light) #F8F9FB → var(--color-bg-lighter) #F9FAFC → var(--color-bg-xlight) #F1F2F6 → var(--color-bg-tabs) #F1F3F6 → var(--color-bg-detail) #F7F8FB → var(--color-bg-subtable) #EFF1F5 (calendar) → var(--color-bg-calendar) #F4F6FA → var(--color-bg-summary) #D6DAE0 → var(--color-bg-totals) #D8DCE6 → var(--color-bg-button) #ECEEF2 → var(--color-bg-lookup-hdr) #EAECF1 → var(--color-bg-menu-hdr) #F2BFBF → var(--color-bg-error) #EEEEEE → var(--color-bg-disabled) #EFF0F3 → var(--color-bg-input-right) #C9CDD8 → var(--color-bg-input-sep) #EBEDF2 → var(--color-bg-draggable) #9AA2B5 (border) → var(--color-border-strong) #C4CAD9 → var(--color-border-mid) #D5DBEB → var(--color-border-light) #CED3DD → var(--color-border-xlight) #7E8593 (border) → var(--color-border-ui) #BEC2C9 → var(--color-border-faint) #B8BCC4 → var(--color-border-table) #B1B8C9 → var(--color-border-gray) #EDF0F5 (scrollbar) → var(--color-scrollbar-track) #B1B8C9 (scrollbar) → var(--color-scrollbar-thumb) #C90000 → var(--color-error) #7EC9A5 → var(--color-success) #F44336 → var(--color-error-alt) ===================================================================== */ /* ===================================================================== DARK MODE OVERRIDES FOR SECONDARY CSS FILES Covers calendar_styles.css, view_styles.css, dayview_styles.css, report_styles.css and any remaining hardcoded colors. ===================================================================== */ /* --- Header bar --- */ [data-theme="dark"] .header { background-color: #151A28 !important; } /* --- Event location / account name visibility --- */ [data-theme="dark"] .event-location-menu .selected, [data-theme="dark"] .reservation-location-menu .selected, [data-theme="dark"] .account-menu .selected { color: #FFFFFF !important; } /* --- New Event / New Party buttons: icon color fix --- */ [data-theme="dark"] .top-menu .button.add-event img, [data-theme="dark"] .top-menu .button.add-reservation img, [data-theme="dark"] .top-menu .button.add-package img { filter: brightness(0) invert(0.3); } [data-theme="dark"] .top-menu .button.add-event:hover img, [data-theme="dark"] .top-menu .button.add-reservation:hover img, [data-theme="dark"] .top-menu .button.add-package:hover img { filter: brightness(0) invert(1); } /* --- Dashboard boxes --- */ [data-theme="dark"] .dashboard-row .dashboard-box { background-color: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .dashboard-row .dashboard-box .reminder-detail ul li { background-color: #1A1F30 !important; } [data-theme="dark"] .dashboard-row h2 span { border-bottom-color: #1C2235 !important; } /* --- List view rows --- */ [data-theme="dark"] .list tr, [data-theme="dark"] .list td { background-color: #1C2235 !important; border-color: #303848 !important; color: #E0E4EF !important; } [data-theme="dark"] .list th { color: #E0E4EF !important; } /* --- Accordion/details rows --- */ [data-theme="dark"] .accordion.extra .row { background-color: #1E2438 !important; border-color: #2A3248 !important; } [data-theme="dark"] .accordion.extra .row td, [data-theme="dark"] .accordion.extra .row th, [data-theme="dark"] .edit-sub-table td, [data-theme="dark"] .edit-sub-table th { background-color: #1C2235 !important; color: #E0E4EF !important; border-color: #303848 !important; } [data-theme="dark"] .accordion.extra .row tr:nth-child(even) td, [data-theme="dark"] .edit-sub-table tr:nth-child(even) td { background-color: #1A1F30 !important; } /* --- Form inputs --- */ [data-theme="dark"] .item input[type=text], [data-theme="dark"] .item input[type=email], [data-theme="dark"] .item input[type=password], [data-theme="dark"] .item input[type=date], [data-theme="dark"] .item textarea, [data-theme="dark"] .item.dropdown-item, [data-theme="dark"] .item .lookup, [data-theme="dark"] .item.checkbox, [data-theme="dark"] .item.radio .selection, [data-theme="dark"] .item.group ul li { background-color: #1C2235 !important; color: #E0E4EF !important; border-color: #333D55 !important; } [data-theme="dark"] .item label { color: #9098A8 !important; } [data-theme="dark"] .item.filled label { background-image: linear-gradient(to top, #1C2235, #1C2235 8px, transparent 8px, transparent 100%) !important; } /* --- Details page field text --- */ [data-theme="dark"] .item-edit, [data-theme="dark"] .item-view { color: #C8CDD8 !important; } [data-theme="dark"] .item label, [data-theme="dark"] .item .label { color: #7B8499 !important; } [data-theme="dark"] .item .value, [data-theme="dark"] .item input[type=text], [data-theme="dark"] .item input[type=date], [data-theme="dark"] .item input[type=time], [data-theme="dark"] .item input[type=email], [data-theme="dark"] .item input[type=number], [data-theme="dark"] .item textarea, [data-theme="dark"] .item select { color: #E0E4EF !important; background-color: #1C2235 !important; border-color: #333D55 !important; } [data-theme="dark"] .item p, [data-theme="dark"] .item span.value { color: #E0E4EF !important; } [data-theme="dark"] .item-row, [data-theme="dark"] .section-row, [data-theme="dark"] .details-section { color: #C8CDD8 !important; } [data-theme="dark"] .content-body { color: #C8CDD8 !important; } [data-theme="dark"] .content-body p, [data-theme="dark"] .content-body span, [data-theme="dark"] .content-body div { color: inherit; } /* --- Dash page list rows (waivers, gift cards, memberships) --- */ [data-theme="dark"] .list-item, [data-theme="dark"] .list-row, [data-theme="dark"] .waiver-row, [data-theme="dark"] .accordion.extra .row td, [data-theme="dark"] .accordion.extra .row, [data-theme="dark"] .waivers-list .row, [data-theme="dark"] .gift-cards-list .row, [data-theme="dark"] .memberships-list .row { background-color: #1C2235 !important; border-color: #303848 !important; color: #C8CDD8 !important; } [data-theme="dark"] .waivers-dash-td, [data-theme="dark"] tr.click-go td.waivers-dash-td { background-color: #1C2235 !important; border-color: #303848 !important; color: #C8CDD8 !important; } [data-theme="dark"] .gift-cards-dash-td, [data-theme="dark"] tr.click-go td.gift-cards-dash-td { background-color: #1C2235 !important; border-color: #303848 !important; color: #C8CDD8 !important; } [data-theme="dark"] .memberships-dash-td, [data-theme="dark"] tr.click-go td.memberships-dash-td { background-color: #1C2235 !important; border-color: #303848 !important; color: #C8CDD8 !important; } [data-theme="dark"] tr.click-go:hover td { background-color: #252D45 !important; } /* --- Alert popups (gift card, balance check, etc.) --- */ [data-theme="dark"] .alert_popup-content { background-color: #1C2235 !important; color: #C8CDD8 !important; } [data-theme="dark"] .alert_popup-header { background-color: #252D45 !important; color: #E0E4EF !important; border-color: #303848 !important; } [data-theme="dark"] .alert_popup-body { background-color: #1C2235 !important; color: #C8CDD8 !important; } [data-theme="dark"] .alert_popup-footer { background-color: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .gc-step-body, [data-theme="dark"] .gc-step-body * { color: #C8CDD8 !important; } [data-theme="dark"] .alert_popup .form-step { background-color: #1C2235 !important; } [data-theme="dark"] .alert_popup .form-step * { color: #C8CDD8 !important; } [data-theme="dark"] .alert_popup .form-step strong, [data-theme="dark"] .alert_popup .form-step b { color: #E0E4EF !important; } [data-theme="dark"] .alert_popup-body .grey-bg, [data-theme="dark"] .alert_popup .grey-bg { background-color: #1C2235 !important; } [data-theme="dark"] .alert_popup-footer { background-color: #1C2235 !important; border-top: 1px solid #303848 !important; } /* --- Gift card popup (overrides inline styles in gift-cards-dash.php) --- */ [data-theme="dark"] #new_gift_card_popup .alert_popup-body, [data-theme="dark"] #new_gift_card_popup .gc-step-body { background-color: #1C2235 !important; color: #C8CDD8 !important; } [data-theme="dark"] #new_gift_card_popup .alert_popup-footer { background-color: #1C2235 !important; border-top: 1px solid #303848 !important; } [data-theme="dark"] #new_gift_card_popup .alert_popup-footer .button { background-color: #252D45 !important; color: #C8CDD8 !important; border-color: #4A5470 !important; } [data-theme="dark"] #new_gift_card_popup .alert_popup-footer .button.next { background-color: #303848 !important; color: #E0E4EF !important; border-color: #4A5470 !important; } [data-theme="dark"] #new_gift_card_popup .alert_popup-footer .button:hover { background-color: var(--color-brand) !important; color: #FFFFFF !important; border-color: var(--color-brand) !important; } [data-theme="dark"] #check_balance_popup .alert_popup-body, [data-theme="dark"] #manual_redemption_popup .alert_popup-body { background-color: #1C2235 !important; color: #C8CDD8 !important; } [data-theme="dark"] .gc-step-body input[type=text], [data-theme="dark"] .gc-step-body input[type=email], [data-theme="dark"] .gc-step-body input[type=number], [data-theme="dark"] .gc-step-body select { background-color: #252D45 !important; border-color: #4A5470 !important; color: #E0E4EF !important; } /* --- Event financials page --- */ [data-theme="dark"] .event-charges, [data-theme="dark"] .event-charges table, [data-theme="dark"] .event-charges td, [data-theme="dark"] .event-charges th { color: #C8CDD8 !important; background-color: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .event-charges .accordion-totals td, [data-theme="dark"] .event-charges tfoot td { background-color: #252D45 !important; color: #FFFFFF !important; } [data-theme="dark"] .calculation-chart, [data-theme="dark"] .calculation-chart table, [data-theme="dark"] .calculation-chart td, [data-theme="dark"] .calculation-chart th { color: #C8CDD8 !important; background-color: #1C2235 !important; border-color: #303848 !important; } /* --- New Reservation popup --- */ [data-theme="dark"] .popup.add-reservation, [data-theme="dark"] .popup.reservation-popup, [data-theme="dark"] .add-reservation-content { background-color: #1C2235 !important; color: #C8CDD8 !important; } [data-theme="dark"] .add-reservation-content .row.grey-bg, [data-theme="dark"] .add-reservation-content .grey-bg { background-color: #181D2C !important; } [data-theme="dark"] .add-reservation-content .form-step { background-color: #1C2235 !important; color: #C8CDD8 !important; } [data-theme="dark"] .add-reservation-content .form-step * { color: #C8CDD8 !important; } [data-theme="dark"] .add-reservation-content .reservation-add-buttons .cancel-button { border-color: #4A5470 !important; color: #C8CDD8 !important; background-color: transparent !important; } [data-theme="dark"] .add-reservation-header { background-color: #252D45 !important; } [data-theme="dark"] .reservation-add-buttons, [data-theme="dark"] .add-reservation-buttons { background-color: #1C2235 !important; border-color: #303848 !important; border-top: 1px solid #303848 !important; } [data-theme="dark"] .reservation-content, [data-theme="dark"] .package-content, [data-theme="dark"] .add-membership-content, [data-theme="dark"] .membership-content { background-color: #1C2235 !important; } [data-theme="dark"] .package-content .grey-bg, [data-theme="dark"] .form-step .grey-bg, [data-theme="dark"] .grey-bg { background-color: #181D2C !important; } [data-theme="dark"] .package-add-buttons { background-color: #1C2235 !important; border-top: 1px solid #303848 !important; } /* --- Package/activity type cards in reservation popup --- */ [data-theme="dark"] .step-2 .activity-type .rt-content h2, [data-theme="dark"] .step-1 .membership-type .mt-content h2 { background-color: #303848 !important; color: #E0E4EF !important; } [data-theme="dark"] .step-2 .activity-type .rt-content, [data-theme="dark"] .step-1 .membership-type .mt-content { background-color: #1C2235 !important; } [data-theme="dark"] .step-2 .activity-type .rt-content p, [data-theme="dark"] .step-2 .activity-type .rt-content .rt-description, [data-theme="dark"] .step-2 .activity-type .rt-content .rt-description p { color: #C8CDD8 !important; background-color: #1C2235 !important; } /* --- Reservation form step border & time slot selection --- */ [data-theme="dark"] .form-step.active form, [data-theme="dark"] .form-step form { background-color: #1C2235 !important; border: none !important; outline: none !important; box-shadow: none !important; } [data-theme="dark"] .registration-btn { border-color: #4A5470 !important; color: #E0E4EF !important; } [data-theme="dark"] .package-btn.time-slot-btn { border-color: #4A5470 !important; color: #E0E4EF !important; } [data-theme="dark"] .package-btn.time-slot-btn.selected, [data-theme="dark"] .package-btn.time-slot-btn.time-selected { background-color: var(--color-brand) !important; border-color: var(--color-brand) !important; color: #FFFFFF !important; } /* --- Package recap/summary step --- */ [data-theme="dark"] .package-summary, [data-theme="dark"] .package-recap, [data-theme="dark"] .package-review, [data-theme="dark"] .order-review, [data-theme="dark"] .reservation-summary { color: #C8CDD8 !important; } [data-theme="dark"] .package-summary h3, [data-theme="dark"] .package-recap h3, [data-theme="dark"] .order-review h3, [data-theme="dark"] .package-summary .section-title, [data-theme="dark"] .order-review .section-title { color: #FFFFFF !important; } [data-theme="dark"] .form-step .summary-row, [data-theme="dark"] .form-step .recap-row, [data-theme="dark"] .form-step table td, [data-theme="dark"] .form-step table th, [data-theme="dark"] .form-step p, [data-theme="dark"] .form-step label, [data-theme="dark"] .form-step span:not(.button) { color: #C8CDD8 !important; } [data-theme="dark"] .form-step strong, [data-theme="dark"] .form-step b { color: #E0E4EF !important; } [data-theme="dark"] .add-reservation-content input[type=text], [data-theme="dark"] .add-reservation-content input[type=number], [data-theme="dark"] .add-reservation-content input[type=email] { background-color: #1C2235 !important; color: #E0E4EF !important; border-color: #4A5470 !important; } [data-theme="dark"] .add-reservation-content .form-step * { color: #C8CDD8 !important; } [data-theme="dark"] .add-reservation-content .form-step strong, [data-theme="dark"] .add-reservation-content .form-step b, [data-theme="dark"] .add-reservation-content .form-step h3, [data-theme="dark"] .add-reservation-content .form-step h4 { color: #E0E4EF !important; } /* --- Package content pricing table --- */ [data-theme="dark"] .add-package-content .grey-bg, [data-theme="dark"] .package-content .grey-bg { background-color: #181D2C !important; color: #C8CDD8 !important; } [data-theme="dark"] .add-package-content .grey-bg h3, [data-theme="dark"] .package-content .grey-bg h3 { color: #E0E4EF !important; } [data-theme="dark"] .add-package-content .grey-bg table th, [data-theme="dark"] .add-package-content .grey-bg table td, [data-theme="dark"] .package-content .grey-bg table th, [data-theme="dark"] .package-content .grey-bg table td { color: #C8CDD8 !important; background-color: transparent !important; } [data-theme="dark"] .add-package-content .grey-bg table th { color: #E0E4EF !important; } [data-theme="dark"] .registration-btn.time-selected, [data-theme="dark"] .registration-btn.selected { background-color: var(--color-brand) !important; border-color: var(--color-brand) !important; color: #FFFFFF !important; } /* --- New Reservation popup --- */ [data-theme="dark"] .popup.reservation, [data-theme="dark"] .popup.add-move-reservation, [data-theme="dark"] .reservation-content { background-color: #1C2235 !important; color: #C8CDD8 !important; } [data-theme="dark"] .reservation-package, [data-theme="dark"] .package-option, [data-theme="dark"] .package-card { background-color: #252D45 !important; border-color: #303848 !important; color: #C8CDD8 !important; } [data-theme="dark"] .package-option .package-header, [data-theme="dark"] .reservation-package .package-name { background-color: #303848 !important; color: #E0E4EF !important; } [data-theme="dark"] .package-option .package-description, [data-theme="dark"] .package-option .package-body { background-color: #1C2235 !important; color: #C8CDD8 !important; } [data-theme="dark"] .popup.reservation .cancel-button, [data-theme="dark"] .popup.add-move-reservation .cancel-button { border-color: #4A5470 !important; color: #C8CDD8 !important; background-color: transparent !important; } /* --- Reservations dayview grid --- */ [data-theme="dark"] .dayview-container, [data-theme="dark"] .reservations-grid, [data-theme="dark"] .res-grid, [data-theme="dark"] .dayview-area table, [data-theme="dark"] .dayview-area td, [data-theme="dark"] .dayview-area th, [data-theme="dark"] .dayview-header td, [data-theme="dark"] .dayview-header th, [data-theme="dark"] .dayview-time-col td, [data-theme="dark"] .res-asset-label { background-color: #1C2235 !important; color: #C8CDD8 !important; border-color: #303848 !important; } [data-theme="dark"] .dayview-container table td { background-color: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .dayview-container table th { background-color: #252D45 !important; color: #E0E4EF !important; border-color: #303848 !important; } [data-theme="dark"] .dayview-container tr td:first-child, [data-theme="dark"] .dayview-container .float-assets { background-color: #1C2235 !important; color: #C8CDD8 !important; } [data-theme="dark"] .dayview-container table thead th div { background-color: #303848 !important; } /* --- jQuery UI Datepicker --- */ [data-theme="dark"] .ui-datepicker { background-color: #1C2235 !important; border-color: #303848 !important; color: #C8CDD8 !important; } [data-theme="dark"] .ui-datepicker .ui-datepicker-header { background-color: #252D45 !important; border-color: #303848 !important; color: #E0E4EF !important; } [data-theme="dark"] .ui-datepicker .ui-datepicker-title { color: #E0E4EF !important; } [data-theme="dark"] .ui-datepicker th { color: #9098A8 !important; background-color: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .ui-datepicker td { background-color: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .ui-datepicker td a, [data-theme="dark"] .ui-datepicker td span { background-color: #1C2235 !important; color: #C8CDD8 !important; border-color: #303848 !important; } [data-theme="dark"] .ui-datepicker td a:hover { background-color: #252D45 !important; color: #FFFFFF !important; } [data-theme="dark"] .ui-datepicker .ui-state-active { background-color: var(--color-brand) !important; color: #FFFFFF !important; border-color: var(--color-brand) !important; } [data-theme="dark"] .ui-datepicker .ui-datepicker-today a { background-color: #303848 !important; color: var(--color-brand) !important; } [data-theme="dark"] .ui-datepicker .ui-datepicker-prev, [data-theme="dark"] .ui-datepicker .ui-datepicker-next { background-color: transparent !important; color: #C8CDD8 !important; } [data-theme="dark"] .ui-datepicker .ui-datepicker-prev span, [data-theme="dark"] .ui-datepicker .ui-datepicker-next span { filter: invert(0.7) !important; } /* Teardown stripes */ [data-theme="dark"] .calendar .reservation-detail-content, [data-theme="dark"] .calendar .event-detail-content { min-width: 340px !important; width: 340px !important; } [data-theme="dark"] .calendar .reservation-detail-buttons-container, [data-theme="dark"] .reservation-popup-buttons, [data-theme="dark"] .reservation-detail-content > div:last-child { flex-wrap: nowrap !important; display: flex !important; } [data-theme="dark"] .dayview-event-setup, [data-theme="dark"] .dayview-reservation-setup { background: repeating-linear-gradient( 45deg, #2A3350, #2A3350 10px, #1C2235 10px, #1C2235 20px ) !important; } /* Past time column */ [data-theme="dark"] .dayview-container td.before-now, [data-theme="dark"] .dayview-container td.past, [data-theme="dark"] .dayview-container td[class*="before"] { background-color: #181D2C !important; } /* Lock block */ [data-theme="dark"] .dayview-container .locked-asset, [data-theme="dark"] .dayview-container .lock-block, [data-theme="dark"] .dayview-container td.locked { background-color: #252D45 !important; border-color: #303848 !important; } [data-theme="dark"] .dayview-container .locked-asset img, [data-theme="dark"] .dayview-container .lock-block img { filter: invert(0.7) !important; } [data-theme="dark"] .res-past-time, [data-theme="dark"] .dayview-past { background-color: #181D2C !important; } [data-theme="dark"] .res-grid .res-time-header, [data-theme="dark"] .dayview-time-header { background-color: #252D45 !important; color: #E0E4EF !important; } /* --- View builder draggable columns --- */ [data-theme="dark"] .available-fields .draggable, [data-theme="dark"] .included-fields .draggable, [data-theme="dark"] .available-fields .draggable2, [data-theme="dark"] .included-fields .draggable2 { color: #E0E4EF !important; } /* --- Tabs (list/view tabs) --- */ [data-theme="dark"] .tabs2, [data-theme="dark"] .ui-tabs, [data-theme="dark"] .ui-tabs .ui-tabs-nav, [data-theme="dark"] .ui-tabs .ui-tabs-nav li, [data-theme="dark"] .ui-tabs .ui-tabs-nav li a, [data-theme="dark"] .ui-widget-header { background: #181D2C !important; border-color: #303848 !important; color: #C8CDD8 !important; } [data-theme="dark"] .ui-tabs .ui-tabs-nav li.ui-state-active a, [data-theme="dark"] .ui-tabs .ui-tabs-nav li.ui-state-active { background: #1C2235 !important; color: #FFFFFF !important; border-bottom-color: #1C2235 !important; } [data-theme="dark"] .ui-tabs .ui-tabs-nav li.ui-state-default:hover a { color: var(--color-brand) !important; } /* --- Modal overlay backdrop --- */ [data-theme="dark"] .modal-overlay, [data-theme="dark"] .popup-overlay, [data-theme="dark"] .overlay, [data-theme="dark"] body.modal-open::after, [data-theme="dark"] .ui-widget-overlay, [data-theme="dark"] .modal-backdrop { background-color: rgba(0, 0, 0, 0.7) !important; } [data-theme="dark"] .overlay { background-color: #000000 !important; opacity: 0.75 !important; } /* --- Checkbox visibility in dark mode --- */ [data-theme="dark"] input[type=checkbox] { accent-color: var(--color-brand); } [data-theme="dark"] .item.checkbox, [data-theme="dark"] .item.radio .selection { background-color: #1C2235 !important; } /* --- Package includes section --- */ [data-theme="dark"] .package-includes, [data-theme="dark"] .package-includes h3, [data-theme="dark"] .package-includes ul li, [data-theme="dark"] .menu-includes, [data-theme="dark"] .menu-includes h3, [data-theme="dark"] .menu-includes ul li, [data-theme="dark"] .includes-section, [data-theme="dark"] .includes-section h3, [data-theme="dark"] .includes-section li { color: #C8CDD8 !important; } [data-theme="dark"] .activity-add-list.included-list h2, [data-theme="dark"] .activity-add-list.included-list .included-items li { color: #C8CDD8 !important; } /* --- Email compose action links --- */ [data-theme="dark"] .attach-file-button, [data-theme="dark"] .attach-file, [data-theme="dark"] .share-document, [data-theme="dark"] .share-payment, [data-theme="dark"] .request-payment, [data-theme="dark"] .insert-document-link, [data-theme="dark"] .insert-payment-link, [data-theme="dark"] .email-action-link, [data-theme="dark"] .message-actions a, [data-theme="dark"] .compose-actions a, [data-theme="dark"] .attachments.new-message .documents a, [data-theme="dark"] .attachments.new-message .file-library a { color: #C8CDD8 !important; filter: brightness(0) invert(0.8) !important; } [data-theme="dark"] .attach-file-button:hover, [data-theme="dark"] .share-document:hover, [data-theme="dark"] .share-payment:hover, [data-theme="dark"] .request-payment:hover, [data-theme="dark"] .insert-document-link:hover, [data-theme="dark"] .insert-payment-link:hover { color: #FFFFFF !important; filter: brightness(0) invert(1) !important; } /* --- Hyperlink colors in dark mode --- */ [data-theme="dark"] a:not(.button):not(.nav-link):not(.main-menu a) { color: var(--color-brand) !important; } [data-theme="dark"] a:not(.button):not(.nav-link):not(.main-menu a):hover { color: var(--color-brand-light) !important; } [data-theme="dark"] #calendar .calendar-option a, [data-theme="dark"] #calendar .calendar-option a:hover, [data-theme="dark"] #calendar .area-option a, [data-theme="dark"] #calendar .area-option a:hover { color: #ffffff !important; } /* --- Activity recap / summary --- */ [data-theme="dark"] .activity-content.summary, [data-theme="dark"] .activity-content.summary h3, [data-theme="dark"] .activity-content.summary h4, [data-theme="dark"] .menu.ui-sortable-handle h3, [data-theme="dark"] .menu-section h4.msection_name, [data-theme="dark"] .menu-section .included-section, [data-theme="dark"] .menu-section > div, [data-theme="dark"] .menu-section, [data-theme="dark"] .menu-subtotal, [data-theme="dark"] .activity-total, [data-theme="dark"] .inside-content.menus .menu { color: #C8CDD8 !important; } [data-theme="dark"] .popup.activity *:not(.activity-header):not(.activity-header *):not([class*="button"]):not(button) { color: #C8CDD8 !important; } [data-theme="dark"] .item.checkbox input[type=checkbox] + label, [data-theme="dark"] .item.multi-select input[type=checkbox] + label { background-image: url(../images/checkbox-off.svg) !important; } [data-theme="dark"] .item.checkbox input[type=checkbox]:checked + label, [data-theme="dark"] .item.multi-select input[type=checkbox]:checked + label { background-image: url(../images/checkbox-on.svg) !important; } [data-theme="dark"] .dd-options li input.item-dd-option + label { background-image: url(../images/checkbox-off.svg) !important; background-repeat: no-repeat; background-position: top left; padding-left: 28px; color: #C8CDD8 !important; display: block; cursor: pointer; } [data-theme="dark"] .dd-options li input.item-dd-option:checked + label { background-image: url(../images/checkbox-on.svg) !important; } [data-theme="dark"] .dd-options { background-color: #1C2235 !important; border-color: #333D55 !important; } [data-theme="dark"] .dd-options ul li a, [data-theme="dark"] .dd-options ul li label, [data-theme="dark"] .dd-options ul li span { color: #C8CDD8 !important; background-color: #1C2235 !important; } [data-theme="dark"] .dd-options ul li:hover a, [data-theme="dark"] .dd-options ul li:hover label { background-color: #252D45 !important; } /* --- Roadmap step connectors --- */ [data-theme="dark"] .roadmap-step-connector, [data-theme="dark"] .step-arrow, [data-theme="dark"] .roadmap-arrow, [data-theme="dark"] .milestone-arrow { background-color: #2A3350 !important; border-color: #3D4A6B !important; } [data-theme="dark"] .roadmap-step-connector svg path, [data-theme="dark"] .step-arrow svg path, [data-theme="dark"] .roadmap-arrow svg path, [data-theme="dark"] .milestone-arrow svg path { fill: #4A5470 !important; } [data-theme="dark"] tr.spacer td, [data-theme="dark"] tr.spacer td * { background-color: transparent !important; border-color: transparent !important; } [data-theme="dark"] tr.spacer svg path, [data-theme="dark"] tr.spacer svg rect, [data-theme="dark"] tr.spacer svg polygon { fill: #4A5470 !important; stroke: #4A5470 !important; } [data-theme="dark"] tr.roadmap-action td.stepname { color: #C8CDD8 !important; } [data-theme="dark"] tr.roadmap-action td.ddate { color: #9098A8 !important; } [data-theme="dark"] tr.spacer img[src*="roadmap-next"] { filter: opacity(0.15) !important; } /* --- Calendar event detail popup --- */ [data-theme="dark"] .calendar .pop-up { background-color: #1C2235 !important; border: 1px solid #4A5470 !important; box-shadow: 0px 8px 24px rgba(0,0,0,0.5) !important; } [data-theme="dark"] .calendar .event-detail-arrow, [data-theme="dark"] .calendar .event-detail-content .event-detail-arrow { background: #1C2235 !important; border-color: #4A5470 !important; } /* --- Calendar view dropdown options --- */ [data-theme="dark"] .calendar .calendar-option a, [data-theme="dark"] .calendar .calendar-option a:hover, [data-theme="dark"] .calendar .area-option a, [data-theme="dark"] .calendar .area-option a:hover, [data-theme="dark"] .calendar .select-items div, [data-theme="dark"] .calendar .select-items div:hover, [data-theme="dark"] .calendar .select-selected, [data-theme="dark"] .calendar-options li a, [data-theme="dark"] .calendar-options li, [data-theme="dark"] .calendar-options { color: #ffffff !important; background-color: var(--color-brand) !important; } /* --- Hyperlink colors in dark mode --- */ [data-theme="dark"] .fc-limited, [data-theme="dark"] a.fc-more, [data-theme="dark"] .view-more-row, [data-theme="dark"] .view-more-row td, [data-theme="dark"] .fc-row .fc-content-skeleton td.fc-limited, [data-theme="dark"] .view-more-container { background-color: #1C2235 !important; color: #9098A8 !important; border-color: #303848 !important; } [data-theme="dark"] .view-more-row a, [data-theme="dark"] .view-more-container a { color: #9098A8 !important; } [data-theme="dark"] .more-events { background-color: #1C2235 !important; color: #9098A8 !important; border-color: #303848 !important; } [data-theme="dark"] .more-events a { color: #9098A8 !important; } [data-theme="dark"] .more-events .view-more, [data-theme="dark"] .more-events .view-less { background-color: #1C2235 !important; color: #9098A8 !important; } [data-theme="dark"] .calendar li.day-box { border-top-color: #303848 !important; border-left-color: #303848 !important; } /* --- Calendar --- */ [data-theme="dark"] .fc, [data-theme="dark"] .fc th, [data-theme="dark"] .fc td, [data-theme="dark"] .fc-view, [data-theme="dark"] .fc-widget-content, [data-theme="dark"] .fc-widget-header, [data-theme="dark"] .fc-scroller, [data-theme="dark"] .fc-row { background-color: #1C2235 !important; color: #E0E4EF !important; border-color: #303848 !important; } [data-theme="dark"] .fc-today { background-color: #202840 !important; } [data-theme="dark"] .fc-day-number, [data-theme="dark"] .fc-day-header span { color: #E0E4EF !important; } [data-theme="dark"] .fc-toolbar h2 { color: #E0E4EF !important; } [data-theme="dark"] .event .content-body, [data-theme="dark"] .content-body.event { background-color: #1E2438 !important; } [data-theme="dark"] .dayview-event-setup, [data-theme="dark"] .dayview-reservation-setup { background: repeating-linear-gradient( 45deg, #3A4258, #3A4258 10px, #2E3650 10px, #2E3650 20px ) !important; } /* --- Dayview --- */ [data-theme="dark"] .dayview-container, [data-theme="dark"] .listview-container { background-color: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .dayview-container table th { background-color: #252D45 !important; border-color: #303848 !important; color: #C8CDD8 !important; } [data-theme="dark"] .dayview-container table thead th { background-color: #252D45 !important; border-color: #303848 !important; } [data-theme="dark"] .dayview-container table thead th div { background-color: #303848 !important; } [data-theme="dark"] .dayview-container table td { border-color: #303848 !important; } [data-theme="dark"] .dayview-container .main table thead th:first-child, [data-theme="dark"] .dayview-container .main table tbody th { background-color: #1C2235 !important; } [data-theme="dark"] .dayview-container .float-assets { background: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .right-pane { background-color: #1C2235 !important; } [data-theme="dark"] .right-pane .small-calendar { background-color: #1C2235 !important; } [data-theme="dark"] .popout-calendar-button { background-color: #252D45 !important; border-color: #303848 !important; } /* --- Dayview header row --- */ [data-theme="dark"] .dayview-header-row, [data-theme="dark"] .dayview-body-wrap, [data-theme="dark"] .dayview-time-col td, [data-theme="dark"] .dayview-area td, [data-theme="dark"] .time-slot-row td { background-color: #1C2235 !important; border-color: #303848 !important; color: #E0E4EF !important; } /* --- Report styles --- */ [data-theme="dark"] .report-content, [data-theme="dark"] .report-box, [data-theme="dark"] .report-group-header, [data-theme="dark"] .report-row, [data-theme="dark"] .report-summary-row, [data-theme="dark"] table.report-table th, [data-theme="dark"] table.report-table td { background-color: #1C2235 !important; color: #E0E4EF !important; border-color: #303848 !important; } /* --- Tabs --- */ [data-theme="dark"] .tabs2 .ui-widget-header { border-bottom-color: #303848 !important; } [data-theme="dark"] .tabs2 .ui-state-default { background-color: #181D2C !important; border-color: #303848 !important; } [data-theme="dark"] .tabs2 .ui-state-active { background-color: #1C2235 !important; border-color: #303848 !important; } /* --- Popups --- */ [data-theme="dark"] .popup, [data-theme="dark"] .popup-lookup, [data-theme="dark"] .file.search { background-color: #1C2235 !important; } [data-theme="dark"] .lookup-header, [data-theme="dark"] .popup-search-header { background-color: #252D45 !important; color: #E0E4EF !important; } /* --- Dropdowns --- */ [data-theme="dark"] .dd-options, [data-theme="dark"] .account-menu-dd, [data-theme="dark"] .utility-menu, [data-theme="dark"] .event-location-menu-dd, [data-theme="dark"] .reservation-location-menu-dd { background-color: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .dd-options ul li a, [data-theme="dark"] .utility-menu ul li a, [data-theme="dark"] .account-menu-dd ul li a { color: #A0A8B8 !important; } [data-theme="dark"] .utility-menu #welcome, [data-theme="dark"] .utility-menu #welcome strong { color: #E0E4EF !important; } [data-theme="dark"] .utility-menu ul li a { color: #C8CDD8 !important; } [data-theme="dark"] .utility-menu ul li a:hover { color: #ffffff !important; background-color: #252D45 !important; } /* --- Memberships dashboard --- */ [data-theme="dark"] .memberships-stat-box { background-color: #1C2235 !important; border: 1px solid #303848 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .memberships-stat-label { color: #C8CDD8 !important; } [data-theme="dark"] .memberships-dash-wrapper { border-color: #303848 !important; } [data-theme="dark"] #memberships-dash thead { background: #252D45 !important; } [data-theme="dark"] #memberships-dash tbody tr:nth-child(odd) td { background-color: #1C2235 !important; } [data-theme="dark"] #memberships-dash tbody tr:nth-child(even) td { background-color: #1A1F30 !important; } [data-theme="dark"] #memberships-search-input { color: #E0E4EF !important; background: transparent !important; } [data-theme="dark"] #memberships-search-input::-webkit-input-placeholder { color: #9098A8 !important; } [data-theme="dark"] #memberships-search-input::-moz-placeholder { color: #9098A8 !important; } [data-theme="dark"] #memberships-search-input:-ms-input-placeholder { color: #9098A8 !important; } [data-theme="dark"] .cancelling-chip { background: #2A2010 !important; color: #F0B840 !important; border-color: #5A4A20 !important; } [data-theme="dark"] .membership-icon-bg { fill: #3A4568 !important; } [data-theme="dark"] #membershipCancelPopup select, [data-theme="dark"] #membershipCancelPopup textarea { background-color: #252D45 !important; color: #E0E4EF !important; border-color: #4A5470 !important; } [data-theme="dark"] #membershipCancelPopup p, [data-theme="dark"] #membershipCancelPopup label, [data-theme="dark"] #membershipCancelPopup strong { color: #C8CDD8 !important; } [data-theme="dark"] .list_sort_elem { color: #E0E4EF !important; } [data-theme="dark"] .ui-state-default .list_sort_elem { color: #E0E4EF !important; } [data-theme="dark"] .ui-state-default { background-color: #252D45 !important; border-color: #3A4258 !important; color: #E0E4EF !important; } /* --- Report details page --- */ [data-theme="dark"] .reporting-table-container, [data-theme="dark"] .table-box { background-color: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .table-title h2, [data-theme="dark"] .table-title h2 span { color: #E0E4EF !important; } [data-theme="dark"] .table-title svg path { fill: #9098A8 !important; } [data-theme="dark"] .report-details-buttons .btn { color: var(--color-brand) !important; border-color: var(--color-brand) !important; background-color: transparent !important; } [data-theme="dark"] .report-details-buttons .btn:hover { background-color: var(--color-brand) !important; color: #ffffff !important; } [data-theme="dark"] .report-table th { color: #E0E4EF !important; background-color: #252D45 !important; border-color: #303848 !important; } [data-theme="dark"] .report-table td { color: #C8CDD8 !important; background-color: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .report-table tr:nth-child(even) td { background-color: #1A1F30 !important; } [data-theme="dark"] .report-table .subtotal-row td, [data-theme="dark"] .report-table .group-subtotal td { background-color: #252D45 !important; color: #E0E4EF !important; } [data-theme="dark"] .page__numbers a { color: #C8CDD8 !important; } [data-theme="dark"] .page__numbers.active a { color: #ffffff !important; background-color: var(--color-brand) !important; } /* Customize modal */ [data-theme="dark"] .modal-content { background-color: #1C2235 !important; color: #C8CDD8 !important; } [data-theme="dark"] .modal-header { background-color: #252D45 !important; color: #E0E4EF !important; border-color: #303848 !important; } [data-theme="dark"] .modal-body { background-color: #1C2235 !important; } [data-theme="dark"] .modal-footer { background-color: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .tab .tablinks { color: #9098A8 !important; background-color: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .tab .tablinks.active { color: #E0E4EF !important; background-color: #252D45 !important; } [data-theme="dark"] .tabcontent { background-color: #1C2235 !important; color: #C8CDD8 !important; } [data-theme="dark"] .details-title { color: #E0E4EF !important; } [data-theme="dark"] .customizing-container, [data-theme="dark"] .customizing-container-double, [data-theme="dark"] .customizing-container-triple, [data-theme="dark"] .customizing-container-quattro { background-color: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .btn-custom { color: #C8CDD8 !important; background-color: #252D45 !important; border-color: #4A5470 !important; } [data-theme="dark"] #popup_export { background-color: #252D45 !important; border-color: #303848 !important; } [data-theme="dark"] #popup_export p { color: #C8CDD8 !important; } [data-theme="dark"] #popup_export p:hover { background-color: #1C2235 !important; color: #E0E4EF !important; } /* --- Reports page --- */ [data-theme="dark"] .reporting-container { background-color: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .report-select { background-color: #1C2235 !important; } [data-theme="dark"] .report-select h2, [data-theme="dark"] .report-select .accordion h2 { color: #E0E4EF !important; } [data-theme="dark"] .report-subtitle { color: #9098A8 !important; } [data-theme="dark"] .report-buttons .btn { color: var(--color-brand) !important; border-color: var(--color-brand) !important; background-color: transparent !important; } [data-theme="dark"] .report-buttons .btn:hover { background-color: var(--color-brand) !important; color: #ffffff !important; } [data-theme="dark"] .report-box { background-color: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .report-title-saved h3 { color: #E0E4EF !important; } [data-theme="dark"] .saved-reports ul li a { color: #C8CDD8 !important; } [data-theme="dark"] .report-creator { color: #7B8499 !important; } [data-theme="dark"] .tab-nav { border-color: #303848 !important; background-color: #1C2235 !important; } [data-theme="dark"] .tab-item { color: #9098A8 !important; border-color: #303848 !important; } [data-theme="dark"] .tab-item.active { color: #E0E4EF !important; background-color: #252D45 !important; border-color: #303848 !important; } [data-theme="dark"] .modal_timeframe-content, [data-theme="dark"] .modal_popup-content { background-color: #1C2235 !important; color: #C8CDD8 !important; } [data-theme="dark"] .modal_timeframe-header, [data-theme="dark"] .modal_popup-header { background-color: #252D45 !important; color: #E0E4EF !important; border-color: #303848 !important; } [data-theme="dark"] .modal_timeframe-footer, [data-theme="dark"] .modal_popup-footer { background-color: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] #confirm_popup_message, [data-theme="dark"] #delete_popup_message { color: #C8CDD8 !important; } /* --- Event documents --- */ [data-theme="dark"] .document-body, [data-theme="dark"] .waiver-body { background-color: #1C2235 !important; box-shadow: -10px 8px 16px 0px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .document-body .document-corner { background-color: #1C2235 !important; } [data-theme="dark"] .document-body .document-corner .document-triangle { border-color: transparent #181D2C transparent transparent !important; } [data-theme="dark"] .document-body .content-body { background: #181D2C !important; border-color: #303848 !important; } [data-theme="dark"] .document-body .left-info p, [data-theme="dark"] .document-body .party-package-table .party-package-header, [data-theme="dark"] .document-body .status-banner { color: #E0E4EF !important; } [data-theme="dark"] .document-body .center-info .document-address { color: #9098A8 !important; } [data-theme="dark"] .document-body .document-table td, [data-theme="dark"] .document-body .order-table td, [data-theme="dark"] .document-body .party-package-table .party-package-detail, [data-theme="dark"] .document-body .document-table .party-package-detail, [data-theme="dark"] .document-body .order-table .order-detail { color: #C8CDD8 !important; } [data-theme="dark"] .document-body .party-info th, [data-theme="dark"] .document-body .party-info td { color: #C8CDD8 !important; border-color: #303848 !important; } [data-theme="dark"] .document-body .party-info .table-bottom-border th { border-bottom-color: #303848 !important; } [data-theme="dark"] .document-body .document-headers td, [data-theme="dark"] .document-body .document-table tr.headings th, [data-theme="dark"] .document-body .order-table tr.headings th { border-color: #303848 !important; color: #E0E4EF !important; } [data-theme="dark"] .document-body .status { background-color: #2A4A2A !important; color: #7EC9A5 !important; } [data-theme="dark"] .document-body, [data-theme="dark"] .document-body .footer, [data-theme="dark"] .document-preview .footer { background-color: #232B42 !important; color: #C8CDD8 !important; } [data-theme="dark"] .document-body table, [data-theme="dark"] .document-body td, [data-theme="dark"] .document-body tr { background-color: #232B42 !important; color: #C8CDD8 !important; border-color: #4A5470 !important; } [data-theme="dark"] .document-body .table-solid-background, [data-theme="dark"] .document-body tr.table-solid-background td, [data-theme="dark"] .document-body td.table-solid-background { background-color: var(--color-brand) !important; color: #ffffff !important; } [data-theme="dark"] .footer .terms-box { background-color: #252D45 !important; color: #C8CDD8 !important; } [data-theme="dark"] .footer .terms-box h2, [data-theme="dark"] .footer .terms-box p { color: #C8CDD8 !important; } [data-theme="dark"] .footer .closing-message-content { color: #9098A8 !important; } [data-theme="dark"] .footer .closing-message-header { color: #E0E4EF !important; } [data-theme="dark"] .footer .with-top-border { border-top-color: #303848 !important; } [data-theme="dark"] .footer .with-side-border { border-left-color: #303848 !important; border-right-color: #303848 !important; } [data-theme="dark"] .footer .total-label, [data-theme="dark"] .footer .total-price, [data-theme="dark"] .footer .charge, [data-theme="dark"] .footer .contract-charge { color: #E0E4EF !important; } [data-theme="dark"] .footer a { color: var(--color-brand) !important; } [data-theme="dark"] .footer .signature-field { background-color: #252D45 !important; color: #E0E4EF !important; } [data-theme="dark"] .footer .closing-message { color: #C8CDD8 !important; } [data-theme="dark"] #signature-canvas { background-color: #2E3852 !important; border: 1px solid #4A5470 !important; } [data-theme="dark"] .document-summary td, [data-theme="dark"] .document-notes, [data-theme="dark"] .document-charges-table td { color: #C8CDD8 !important; } [data-theme="dark"] .document-charges-table .row-grand-total td { border-top-color: #303848 !important; } [data-theme="dark"] .totals-block, [data-theme="dark"] .payment-totals { color: #C8CDD8 !important; } [data-theme="dark"] .details-document-preview { background-color: #161B2A !important; } [data-theme="dark"] .gift-cards-dash td.menu, [data-theme="dark"] .memberships-dash td.menu { border: none !important; } [data-theme="dark"] .gift-cards-dash tr, [data-theme="dark"] .gift-cards-dash td, [data-theme="dark"] .gift-cards-dash th { border: none !important; } [data-theme="dark"] .gift-cards-dash-td { border-right: 0 !important; } [data-theme="dark"] .gift-cards-dash tbody tr:nth-child(odd) td, [data-theme="dark"] .gift-cards-dash tbody tr:nth-child(even) td { background-color: #1C2235 !important; } [data-theme="dark"] .gift-cards-dash thead th { background-color: #252D45 !important; border-color: #303848 !important; } /* --- General tables (catch-all) --- */ [data-theme="dark"] .table td, [data-theme="dark"] .table th, [data-theme="dark"] .report-table td, [data-theme="dark"] .report-table th { border-color: #303848 !important; } /* --- Sidebar nav active --- */ [data-theme="dark"] .main-menu li.selected a, [data-theme="dark"] .main-menu li a:hover { background-color: #202840 !important; } /* --- Dashboard card text --- */ [data-theme="dark"] .dashboard-box { color: #C8CDD8 !important; } [data-theme="dark"] .dashboard-box h2, [data-theme="dark"] .dashboard-box .line-1, [data-theme="dark"] .dashboard-box .name, [data-theme="dark"] .dashboard-box .box-heading { color: #FFFFFF !important; } [data-theme="dark"] .dashboard-box .view-all a, [data-theme="dark"] .dashboard-box .task-location, [data-theme="dark"] .dashboard-box .task-event a, [data-theme="dark"] .dashboard-box .line-2, [data-theme="dark"] .dashboard-box .event_date, [data-theme="dark"] .dashboard-box .guests-budget { color: #9098A8 !important; } [data-theme="dark"] .dashboard-box .location { color: #FFFFFF !important; font-weight: 600; } /* --- Dashboard table headers (thead-grey) --- */ [data-theme="dark"] .thead-grey th, [data-theme="dark"] table.table thead th { background-color: #252D45 !important; color: #FFFFFF !important; border-color: #303848 !important; } /* --- Dashboard table rows --- */ [data-theme="dark"] table.table td { background-color: #1C2235 !important; color: #C8CDD8 !important; border-color: #303848 !important; } /* --- Generate Documents/Waivers buttons --- */ [data-theme="dark"] .box-header-button { background-color: transparent !important; color: #C8CDD8 !important; border-color: #4A5470 !important; } [data-theme="dark"] .box-header-button:hover { background-color: #252D45 !important; color: #FFFFFF !important; } /* --- Download/trash icons in tables --- */ [data-theme="dark"] table.table td img, [data-theme="dark"] table.table td svg { filter: invert(0.7) !important; } /* --- Account/client name in header --- */ [data-theme="dark"] .account-menu .selected { color: #FFFFFF !important; } [data-theme="dark"] body, [data-theme="dark"] html { background-color: #1A1F30 !important; } [data-theme="dark"] .content { background-color: #1C2235 !important; } [data-theme="dark"] .content-header { background-color: #1C2235 !important; } /* --- Page background catch-all for white surfaces --- */ [data-theme="dark"] .content-main, [data-theme="dark"] .content-top, [data-theme="dark"] .tabs1 .ui-tabs-panel, [data-theme="dark"] .tabs2 .ui-tabs-panel { background-color: #1C2235 !important; } /* --- Print: always render light regardless of dark mode --- */ @media print { [data-theme="dark"] body, [data-theme="dark"] .document-body, [data-theme="dark"] .waiver-body, [data-theme="dark"] .footer, [data-theme="dark"] .document-body *, [data-theme="dark"] .footer * { background-color: #ffffff !important; color: #000000 !important; border-color: #cccccc !important; box-shadow: none !important; } } /* v20260525 */ /* --- User Audit Log --- */ [data-theme="dark"] .audit-log-page .table-responsive { background: #1C2235 !important; border-color: #303848 !important; } [data-theme="dark"] .audit-log-page .data-table thead tr { background: #252D45 !important; border-bottom-color: #303848 !important; } [data-theme="dark"] .audit-log-page .data-table th { color: #E0E4EF !important; } [data-theme="dark"] .audit-log-page .data-table td { border-bottom-color: #303848 !important; color: #C8CDD8 !important; } [data-theme="dark"] .audit-log-page .data-table tbody tr:hover { background: #252D45 !important; } [data-theme="dark"] .audit-log-page .audit-search-bar { border-bottom-color: #3A4258 !important; } [data-theme="dark"] .audit-log-page .audit-search-bar #audit-search-input { color: #E0E4EF !important; } [data-theme="dark"] .audit-log-page .audit-search-bar #audit-search-input::placeholder { color: #6E7689 !important; } [data-theme="dark"] .audit-log-page .audit-filters .item { background-color: #1C2235 !important; border-color: #3A4258 !important; color: #E0E4EF !important; } [data-theme="dark"] .audit-log-page .audit-filters label { color: #9098A8 !important; } [data-theme="dark"] .audit-log-page .record-count { color: #9098A8 !important; }