in main layout */ background-color: var(--surface-color); color: var(--text-primary); } /* The action button (.btn-primary) uses --action-color which we've inverted above to a near-white in dark mode. Re-tone the text fill so the high- contrast button reads as a light pill with dark text. */ [data-theme="dark"] .body-backoffice .btn-primary { color: #0F172A; } [data-theme="dark"] .body-backoffice .btn-primary:hover { color: #0F172A; } [data-theme="dark"] .body-backoffice .btn-outline-primary { color: var(--action-color); background-color: transparent; border-color: var(--action-color); } [data-theme="dark"] .body-backoffice .btn-outline-primary:hover { color: #0F172A; background-color: var(--action-color); border-color: var(--action-color); } [data-theme="dark"] .body-backoffice .btn-outline-secondary { color: var(--text-secondary); background-color: transparent; border-color: var(--border-color); } [data-theme="dark"] .body-backoffice .btn-outline-secondary:hover { color: var(--text-primary); background-color: var(--background-light); border-color: var(--text-primary); } /* Cards: tokenized background so they pick up the dark surface. Sub-component .razor.css files that hardcoded `background: white` are also handled below. */ [data-theme="dark"] .body-backoffice .card { background: var(--surface-subtle); color: var(--text-primary); } [data-theme="dark"] .body-backoffice .card:hover { border-color: #475569; } /* Form controls */ [data-theme="dark"] .body-backoffice .form-control, [data-theme="dark"] .body-backoffice .form-select { background-color: var(--surface-color); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] .body-backoffice .form-control:focus, [data-theme="dark"] .body-backoffice .form-select:focus { background-color: var(--surface-color); color: var(--text-primary); border-color: var(--text-primary); box-shadow: 0 0 0 3px rgba(226, 232, 240, 0.12); } [data-theme="dark"] .body-backoffice .form-control::placeholder { color: var(--text-secondary); opacity: 0.7; } /* Sticky header chrome turns dark on backoffice surfaces. */ [data-theme="dark"] .body-backoffice header.sticky-top, [data-theme="dark"] .body-backoffice .bg-white { background-color: var(--surface-color) !important; border-bottom-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .body-backoffice .navbar-brand .logo-word-secondary { fill: var(--text-primary); } /* Page background under main */ [data-theme="dark"] .body-backoffice main { background-color: var(--surface-color); } /* Tables on dark — clean odd-row hover, no hardcoded #fafafa */ [data-theme="dark"] .body-backoffice .table tbody tr:hover td, [data-theme="dark"] .body-backoffice .bookings-table tbody tr:hover td, [data-theme="dark"] .body-backoffice .backoffice-table tbody tr:hover td { background-color: rgba(255, 255, 255, 0.03); } /* Inputs / textareas in dark */ [data-theme="dark"] .body-backoffice textarea.form-control, [data-theme="dark"] .body-backoffice input[type="text"].form-control, [data-theme="dark"] .body-backoffice input[type="email"].form-control, [data-theme="dark"] .body-backoffice input[type="url"].form-control, [data-theme="dark"] .body-backoffice input[type="search"].form-control, [data-theme="dark"] .body-backoffice input[type="number"].form-control, [data-theme="dark"] .body-backoffice input[type="password"].form-control { background-color: var(--surface-color); color: var(--text-primary); } /* Modal / dialog overlays — keep readable cards on dark backdrops */ [data-theme="dark"] .body-backoffice .modal-content, [data-theme="dark"] .body-backoffice .release-modal-content { background-color: var(--surface-subtle); color: var(--text-primary); border-color: var(--border-color); } /* Backoffice shell uses literal `white` — token it via the override */ [data-theme="dark"] .body-backoffice .backoffice-shell, [data-theme="dark"] .body-backoffice .backoffice-content { background: var(--surface-color); } /* AppSidebar background was hardcoded #EEF1F6 — override to dark surface */ [data-theme="dark"] .body-backoffice .app-sidebar { background: #111827; border-right-color: var(--border-color); } [data-theme="dark"] .body-backoffice .nav-item.active { background: rgba(226, 232, 240, 0.10); border-left-color: var(--text-primary); } /* Mobile bottom nav — hardcoded white */ [data-theme="dark"] .body-backoffice .mobile-bottom-nav { background: var(--surface-subtle); border-top-color: var(--border-color); } /* nav-link hover background — uses --background-light (ok), but specific active underline uses --primary-color which is fine. */ /* Reconnect toast on dark — flip to light pill text */ [data-theme="dark"] .body-backoffice ~ #components-reconnect-modal .reconnect-toast-connecting, [data-theme="dark"] #components-reconnect-modal .reconnect-toast-connecting { /* Toast lives outside body-backoffice scope — keep current dark pill */ } /* Backoffice content header divider sits on a dark surface — already token-driven */ /* Status filter buttons — active state uses --text-primary which we've inverted to near-white; ensure the label inside contrasts. */ [data-theme="dark"] .body-backoffice .status-filter-btn { background: var(--surface-subtle); border-color: var(--border-color); } [data-theme="dark"] .body-backoffice .status-filter-btn:hover { color: var(--text-primary); border-color: var(--text-primary); } [data-theme="dark"] .body-backoffice .status-filter-btn.active { background: var(--text-primary); border-color: var(--text-primary); color: #0F172A; } [data-theme="dark"] .body-backoffice .status-filter-btn.active .status-count { background: rgba(15, 23, 42, 0.20); color: #0F172A; } [data-theme="dark"] .body-backoffice .status-count { background: rgba(255, 255, 255, 0.10); color: var(--text-secondary); } /* Booking stats row — the 1px gap between tiles uses the border colour; tile background was hardcoded white. Token it via the override. */ [data-theme="dark"] .body-backoffice .booking-stat, [data-theme="dark"] .body-backoffice a.booking-stat, [data-theme="dark"] .body-backoffice a.booking-stat-sub { background: var(--surface-subtle); color: var(--text-primary); } [data-theme="dark"] .body-backoffice .booking-stat-link:hover, [data-theme="dark"] .body-backoffice a.booking-stat-sub:hover { background: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .body-backoffice .record-count-badge { background: var(--surface-subtle); border-color: var(--border-color); color: var(--text-secondary); } /* Bootstrap's .table class sets cell backgrounds via box-shadow:inset using `--bs-table-bg` (default #fff via --bs-body-bg). Our `tr` selectors lose that paint because the inset shadow covers the row's bg. Override the Bootstrap table CSS variables directly so EVERY `.table` instance picks up dark surface, foreground, border, hover, and striped colors at once. This covers .backoffice-table, .bookings-table, .attribution-table, .api-keys-table, .transactions-table, .financial-panel table, etc. */ [data-theme="dark"] .body-backoffice .table { --bs-table-bg: var(--surface-color); --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border-color); --bs-table-hover-bg: rgba(255, 255, 255, 0.04); --bs-table-hover-color: var(--text-primary); --bs-table-striped-bg: var(--surface-subtle); --bs-table-striped-color: var(--text-primary); --bs-table-active-bg: rgba(255, 255, 255, 0.06); --bs-table-active-color: var(--text-primary); color: var(--text-primary); border-color: var(--border-color); } /* Mobile-card variants of backoffice/bookings tables hardcode white + #f3f3f3 borders. Override into the dark palette. */ [data-theme="dark"] .body-backoffice .backoffice-table tbody tr:not(.span-row), [data-theme="dark"] .body-backoffice .bookings-table tbody tr:not(.span-row), [data-theme="dark"] .body-backoffice .attribution-table tbody tr { background: var(--surface-subtle); border-color: var(--border-color); } [data-theme="dark"] .body-backoffice .backoffice-table tbody td, [data-theme="dark"] .body-backoffice .bookings-table tbody td { border-bottom-color: var(--border-color); } [data-theme="dark"] .body-backoffice .backoffice-table thead th, [data-theme="dark"] .body-backoffice .bookings-table thead th, [data-theme="dark"] .body-backoffice .table thead th { background: var(--surface-subtle); color: var(--text-secondary); border-bottom-color: var(--border-color); } [data-theme="dark"] .body-backoffice .row-selected td { background: rgba(59, 130, 246, 0.18) !important; } [data-theme="dark"] .body-backoffice .row-clickable:hover td { background: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .body-backoffice .reject-panel { background: rgba(127, 29, 29, 0.20); border-top-color: var(--color-danger-border); border-bottom-color: var(--color-danger-border); } [data-theme="dark"] .body-backoffice .email-template-pill { background: var(--surface-subtle); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .body-backoffice .email-template-pill:hover { background: var(--background-light); border-color: var(--text-secondary); } [data-theme="dark"] .body-backoffice .invite-role-info, [data-theme="dark"] .body-backoffice .user-drawer-card { background: var(--surface-subtle); border-color: var(--border-color); } [data-theme="dark"] .body-backoffice .user-drawer-info-list, [data-theme="dark"] .body-backoffice .user-drawer-info-item { border-color: var(--border-color); } /* User-drawer role badges — keep their hue but darken bg + lighten text */ [data-theme="dark"] .body-backoffice .user-drawer-role-administrator { background: rgba(220, 38, 38, 0.20); color: #FCA5A5; } [data-theme="dark"] .body-backoffice .user-drawer-role-platform { background: rgba(37, 99, 235, 0.20); color: #93C5FD; } [data-theme="dark"] .body-backoffice .user-drawer-role-property { background: rgba(22, 163, 74, 0.20); color: #86EFAC; } [data-theme="dark"] .body-backoffice .user-drawer-role-brand { background: rgba(217, 119, 6, 0.20); color: #FCD34D; } [data-theme="dark"] .body-backoffice .user-drawer-role-referral { background: rgba(139, 92, 246, 0.20); color: #C4B5FD; } [data-theme="dark"] .body-backoffice .user-drawer-role-none { background: var(--background-light); color: var(--text-secondary); } [data-theme="dark"] .body-backoffice .user-drawer-status.status-locked { background: #475569; color: #F1F5F9; } [data-theme="dark"] .body-backoffice .community-admin-card { background: var(--surface-subtle); border-color: var(--border-color); } [data-theme="dark"] .body-backoffice .community-admin-card:hover { border-color: #475569; } [data-theme="dark"] .body-backoffice .community-admin-placeholder { background: var(--background-light); color: var(--text-secondary); border-bottom-color: var(--border-color); } [data-theme="dark"] .body-backoffice .community-admin-card .card-header { background: var(--surface-subtle); border-bottom-color: var(--border-color); } [data-theme="dark"] .body-backoffice .brand-admin-banner-placeholder { background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); border-bottom-color: var(--border-color); } [data-theme="dark"] .body-backoffice .brand-admin-logo-circle { background: var(--surface-subtle); border-color: var(--surface-subtle); } /* Mobile section tabs scoped to backoffice */ [data-theme="dark"] .body-backoffice .mobile-section-tabs { background: var(--surface-subtle); border-bottom-color: var(--border-color); } [data-theme="dark"] .body-backoffice .mobile-tab-btn.active { background: var(--surface-color); color: var(--text-primary); } [data-theme="dark"] .body-backoffice .mobile-tab-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); } /* CSS-only tooltip — already uses a dark pill, ensure it stays readable */ /* Confirm-icon circles inside modals (release-confirm-icon) — desaturate bg */ [data-theme="dark"] .body-backoffice .release-confirm-icon { background: rgba(217, 119, 6, 0.20); color: #FCD34D; } [data-theme="dark"] .body-backoffice .declined-circle { background: rgba(220, 38, 38, 0.20); color: #FCA5A5; } [data-theme="dark"] .body-backoffice .error-circle { background: rgba(217, 119, 6, 0.20); color: #FCD34D; } /* Drawer nav (mobile drawer / shared) on dark */ [data-theme="dark"] .body-backoffice .drawer-nav-item.active { background: rgba(226, 232, 240, 0.10); border-left-color: var(--text-primary); } /* ================================================================ Dark-mode overrides — component-level hardcoded colors All selectors here correspond to hardcoded white / light-tint values found in individual .razor.css files. Concentrating them here keeps each component file clean for light-mode and avoids scattering 15+ dark blocks across the component tree. ================================================================ */ /* ── AccountMenu — account-menu-item card ───────────────────── */ [data-theme="dark"] .body-backoffice .account-menu-item { background: var(--surface-subtle); } [data-theme="dark"] .body-backoffice .account-menu-item:hover, [data-theme="dark"] .body-backoffice .account-menu-item:focus { background: var(--background-light); } /* ── AppSidebar — mobile bottom nav ─────────────────────────── */ /* Note: .mobile-bottom-nav root override already exists above */ /* The bg:white on the nav item itself (line 290 AppSidebar.css) */ /* is inside @media (max-width: 767px) .mobile-bottom-nav {} */ /* The parent already has the dark override — no extra rule needed */ /* ── AdminUsers — role badges ───────────────────────────────── */ [data-theme="dark"] .body-backoffice .role-brand { background: rgba(2, 119, 189, 0.20); color: #7DD3FC; } [data-theme="dark"] .body-backoffice .role-property { background: rgba(46, 125, 50, 0.20); color: #86EFAC; } [data-theme="dark"] .body-backoffice .role-platform { background: rgba(123, 31, 162, 0.20); color: #D8B4FE; } [data-theme="dark"] .body-backoffice .role-administrator{ background: rgba(230, 81, 0, 0.20); color: #FDBA74; } [data-theme="dark"] .body-backoffice .role-none { background: var(--background-light); color: var(--text-secondary); } /* ── AdminUsers — status badges ─────────────────────────────── */ [data-theme="dark"] .body-backoffice .status-pending { background: rgba(245, 127, 23, 0.18); color: #FCD34D; } [data-theme="dark"] .body-backoffice .status-approved { background: rgba(46, 125, 50, 0.18); color: #86EFAC; } [data-theme="dark"] .body-backoffice .status-rejected { background: rgba(198, 40, 40, 0.18); color: #FCA5A5; } [data-theme="dark"] .body-backoffice .status-inactive { background: var(--background-light); color: var(--text-secondary); } [data-theme="dark"] .body-backoffice .status-locked { background: #334155; color: #E2E8F0; } /* ── AdminUsers — table cell borders, reject form ───────────── */ [data-theme="dark"] .body-backoffice .users-table tbody td { border-bottom-color: var(--border-color); } [data-theme="dark"] .body-backoffice .reject-form-inline { background: var(--color-warning-bg); border-color: var(--color-warning-border); } /* Mobile card rows for users-table */ [data-theme="dark"] .body-backoffice .users-table tbody tr { background: var(--surface-subtle); } [data-theme="dark"] .body-backoffice .users-table tbody td { border-bottom-color: var(--border-color); } /* ── AdminUserDetail — status badges (reuse above) ──────────── */ /* role-badge / status-badge classes shared — overrides above */ /* cover AdminUserDetail too since class names are the same. */ /* AdminUserDetail reject panel + profile-info-item border */ [data-theme="dark"] .body-backoffice .reject-panel { background: var(--color-danger-bg); border-color: var(--color-danger-border); } [data-theme="dark"] .body-backoffice .profile-info-item { border-bottom-color: var(--border-color); } /* AdminUserDetail action-tab active state */ [data-theme="dark"] .body-backoffice .action-tab.active { background: var(--surface-color); } /* ── PlatformBackoffice — table hover/border hardcodes ──────── */ /* bookings-table and generic .table hover rows */ [data-theme="dark"] .body-backoffice .bookings-table tbody td { border-bottom-color: var(--border-color); } [data-theme="dark"] .body-backoffice .bookings-table tbody tr:hover td, [data-theme="dark"] .body-backoffice .table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); } /* backoffice-table td borders */ [data-theme="dark"] .body-backoffice .backoffice-table tbody td { border-bottom-color: var(--border-color); } /* Clickable row hover and selected row */ [data-theme="dark"] .body-backoffice .row-clickable:hover td { background: rgba(255, 255, 255, 0.04); } [data-theme="dark"] .body-backoffice .row-selected td { background: rgba(59, 130, 246, 0.18) !important; } /* PlatformBackoffice reject panel (same class, different component scope) */ /* Already covered by the .reject-panel rule above. */ /* Email template pills */ [data-theme="dark"] .body-backoffice .email-template-pill { background: var(--surface-subtle); } /* Mobile card rows — backoffice-table / bookings-table */ /* (Also declared in the mobile-card-variants block above as var(--surface-subtle). These explicit rules ensure the mobile card rows also pick it up.) */ [data-theme="dark"] .body-backoffice .backoffice-table tbody tr:not(.span-row), [data-theme="dark"] .body-backoffice .bookings-table tbody tr:not(.span-row) { background: var(--surface-subtle); } [data-theme="dark"] .body-backoffice .backoffice-table tbody td:not([colspan]), [data-theme="dark"] .body-backoffice .bookings-table tbody td:not([colspan]) { border-bottom-color: var(--border-color); } /* Attribution nested table mobile cards */ [data-theme="dark"] .body-backoffice .attribution-table tbody tr { background: var(--surface-subtle); } [data-theme="dark"] .body-backoffice .attribution-table tbody td { border-bottom-color: var(--border-color); } /* Community admin card header */ [data-theme="dark"] .body-backoffice .community-admin-card .card-header { background: var(--surface-subtle); } /* Brand admin banner placeholder gradient */ [data-theme="dark"] .body-backoffice .brand-admin-banner-placeholder { background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); } /* Brand admin logo circle border */ [data-theme="dark"] .body-backoffice .brand-admin-logo-circle { border-color: var(--surface-subtle); background: var(--surface-subtle); } /* User drawer card */ [data-theme="dark"] .body-backoffice .user-drawer-card { background: var(--surface-subtle); } /* User-drawer role badges — same class names used in PlatformBackoffice.razor.css */ /* (Already defined in the block starting ~line 399 above — those cover both files.) */ /* ── FinancialDashboardPanel — trend bars background ────────── */ [data-theme="dark"] .body-backoffice .trend-bars { background: linear-gradient(180deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.9) 100%); } [data-theme="dark"] .body-backoffice .financial-panel table tbody tr { background: var(--surface-subtle); } [data-theme="dark"] .body-backoffice .financial-panel table tbody td { border-bottom-color: var(--border-color); } /* ── PlatformBackoffice — notif sub-tab active ──────────────── */ /* .notif-subtab.active uses border-bottom highlight (--primary-color) + transparent bg — works fine in dark mode. No override needed. */ /* ── IntelEnginePanel — subtab active ───────────────────────── */ /* .intel-subtab.active uses background: var(--surface-color) which flips correctly via the token. No additional override needed. */ /* ── IntelligencePanel — top-level tab active ───────────────── */ /* .intelligence-tab.active uses --primary-color border + color. Stays brand red in both themes. No override needed. */ /* ── IssueApiKeyDialog — scope-toggle-btn active ────────────── */ /* .scope-toggle-btn.active uses --primary-color fill. Stays brand red in both themes. No override needed. */ /* ── BlogManagementPanel — locale tab active ────────────────── */ /* .blog-locale-tabs .nav-link.active uses var(--surface-color) bg + var(--border-color) border — both flip via tokens. No override. */ /* ── ApiKeysPanel — mobile card row borders ─────────────────── */ [data-theme="dark"] .body-backoffice .api-keys-table tbody td { border-bottom-color: var(--border-color); } /* ── Global btn-outline variants — transparent bg on dark ────── */ [data-theme="dark"] .body-backoffice .btn-outline-primary, [data-theme="dark"] .body-backoffice .btn-outline-secondary, [data-theme="dark"] .body-backoffice .btn-outline-danger, [data-theme="dark"] .body-backoffice .btn-outline-success, [data-theme="dark"] .body-backoffice .btn-outline-warning, [data-theme="dark"] .body-backoffice .btn-outline-info { background-color: transparent; } /* ── DashboardShell segmented tabs ────────────────────────────── Light-mode rules use `background: var(--text-primary)` for the active pill, which inverts to a near-white surface on dark — producing white text on a near-white pill. Re-tone in dark so the active pill sits on an elevated surface with normal foreground contrast. */ [data-theme="dark"] .body-backoffice .shell-tabs { background: var(--surface-subtle); border-color: var(--border-color); } [data-theme="dark"] .body-backoffice .shell-tab.active, [data-theme="dark"] .body-backoffice .shell-tab.active:hover { background: var(--surface-color); color: var(--text-primary); box-shadow: var(--shadow-sm); } [data-theme="dark"] .body-backoffice .shell-tab:hover:not(.active) { background: rgba(255, 255, 255, 0.04); color: var(--text-primary); } [data-theme="dark"] .body-backoffice .shell-tab.active .shell-tab-count { background: var(--surface-subtle); color: var(--text-primary); } /* ── LoginDisplay dropdown — Bootstrap utility classes ────────── The auth-state dropdown in LoginDisplay.razor uses raw Bootstrap utilities (.bg-white, .text-dark, .dropdown-item) instead of design tokens. .bg-white already gets a dark override (line 215). Below covers the foreground + dropdown-item state so the menu is readable. */ [data-theme="dark"] .body-backoffice .text-dark, [data-theme="dark"] .body-backoffice .dropdown-item.text-dark, [data-theme="dark"] .body-backoffice .dropdown-item { color: var(--text-primary) !important; } [data-theme="dark"] .body-backoffice .dropdown-item:hover, [data-theme="dark"] .body-backoffice .dropdown-item:focus { background-color: var(--background-light); color: var(--text-primary) !important; } /* The dropdown panel itself uses .bg-white .border .rounded .shadow-sm utilities; .bg-white is overridden, but the border becomes invisible on the dark surface — re-tone it so the panel reads as a card. */ [data-theme="dark"] .body-backoffice .bg-white.border, [data-theme="dark"] .body-backoffice .bg-white.border-bottom, [data-theme="dark"] .body-backoffice .bg-white.border-top { border-color: var(--border-color) !important; } /* ── Bootstrap utility — .text-muted ──────────────────────────── Bootstrap's .text-muted is ~#6c757d — readable on light, nearly invisible on very dark surfaces. We remap it to the project's --text-secondary token so it stays at the right contrast level. */ [data-theme="dark"] .body-backoffice .text-muted { color: var(--text-secondary) !important; } /* ── Bootstrap utility — .bg-light ────────────────────────────── .bg-light renders as #f8f9fa on light — blindingly pale on a dark surface. Remap to --background-light which is already dark-aware. */ [data-theme="dark"] .body-backoffice .bg-light { background-color: var(--background-light) !important; color: var(--text-primary); } /* ── Bootstrap .badge.bg-warning.text-dark / .bg-info.text-dark ─ Used for "DCR" and "Community #N" / "Brand #N" badges in OAuthClientsPanel and Payabli drawer rows. In dark mode Bootstrap's bg-warning is still vivid yellow but text-dark (#212529) becomes illegible on a dark surface chrome. Remap both to themed palette. */ [data-theme="dark"] .body-backoffice .badge.bg-warning { background-color: rgba(217, 119, 6, 0.25) !important; color: #FCD34D !important; } [data-theme="dark"] .body-backoffice .badge.bg-info { background-color: rgba(37, 99, 235, 0.25) !important; color: #93C5FD !important; } /* bg-white badge used in PlatformBackoffice brand/community card for campaign/space counts. Already overridden via .bg-white rule but the text-primary foreground should stay readable. */ [data-theme="dark"] .body-backoffice .badge.bg-white { background-color: var(--surface-subtle) !important; color: var(--text-primary) !important; } /* ── PlatformDashboard — .pd-trend-btn.active anti-pattern ────── `.pd-trend-btn.active { background: var(--text-primary); color: white }` In dark mode --text-primary is #E2E8F0 ≈ near-white, producing white-on-white. Re-tone the active pill to a real elevated surface. */ [data-theme="dark"] .body-backoffice .pd-trend-btn.active { background: var(--surface-color); color: var(--text-primary); box-shadow: var(--shadow-sm); } [data-theme="dark"] .body-backoffice .pd-trend-btn:hover { color: var(--text-primary); } /* ── IntelEnginePanel — .intel-filter-chip.active anti-pattern ─── Same pattern: background: var(--text-primary) → near-white on dark. Re-tone to an elevated surface so the chip reads as "selected". */ [data-theme="dark"] .body-backoffice .intel-filter-chip.active { background: var(--surface-color); color: var(--text-primary); border-color: var(--text-secondary); box-shadow: var(--shadow-sm); } /* ── IssueApiKeyDialog — .step-indicator.completed anti-pattern ── `.step-number` inside `.step-indicator.completed` uses `background: var(--text-primary); color: white` — same white-on-white bug. Re-tone completed steps to a subtle elevated look. */ [data-theme="dark"] .body-backoffice .step-indicator.completed .step-number { background: var(--surface-subtle); color: var(--text-primary); border-color: var(--text-secondary); } [data-theme="dark"] .body-backoffice .step-indicator.completed { color: var(--text-secondary); } /* ── NextBestActionCard — hardcoded `background: white` ───────── .nba-card uses `background: white` which bypasses the token. */ [data-theme="dark"] .body-backoffice .nba-card { background: var(--surface-subtle); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .body-backoffice .nba-card:hover { border-color: #475569; color: var(--text-primary); } /* ── ActionDialog — hardcoded `background: #ffffff` ───────────── .action-dialog-card uses a literal white — needs dark surface. */ [data-theme="dark"] .body-backoffice .action-dialog-card { background: var(--surface-subtle); border-color: var(--border-color); color: var(--text-primary); } /* ── FinancialDashboardPanel — hardcoded mobile table row border ─ .financial-panel table tbody td has `border-bottom: 1px solid #f3f3f3` inside the @media (max-width: 767px) block — override to token. */ [data-theme="dark"] .body-backoffice .financial-panel table tbody td { border-bottom-color: var(--border-color); } /* ── BlogManagementPanel / ApiKeysPanel — hardcoded #f3f3f3 row borders ─ Mobile card layout uses `border-bottom: 1px solid #f3f3f3` — too light for dark surfaces. Token it via the broad table-cell override already covering .backoffice-table / .bookings-table; the blog panel uses the same .backoffice-table class so it's already covered. */ /* ── BackofficeSidebar — .nav-item.active low-alpha tint ──────── rgba(30,41,59,0.07) is nearly invisible on the dark #111827 sidebar background. Increase the alpha so the active indicator is visible. */ [data-theme="dark"] .body-backoffice .backoffice-sidebar .nav-item.active { background: rgba(226, 232, 240, 0.10); color: var(--text-primary); border-left-color: var(--text-primary); } [data-theme="dark"] .body-backoffice .backoffice-sidebar .nav-item.active .nav-badge { background: rgba(226, 232, 240, 0.15); color: var(--text-primary); } /* Backoffice sidebar mobile bottom border active indicator mirrors same fix */ [data-theme="dark"] .body-backoffice .backoffice-sidebar .nav-item.active { border-bottom-color: var(--text-primary); } html, body { font-family: var(--font-sans); color: var(--text-primary); line-height: 1.6; margin: 0; padding: 0; } * { box-sizing: border-box; } /* Typography */ h1, h2 { font-family: var(--font-display); font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; letter-spacing: -0.02em; font-optical-sizing: auto; } h3, h4 { font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; letter-spacing: -0.01em; } h5, h6 { font-weight: 500; color: var(--text-primary); margin-bottom: 0.5rem; } h1:focus { outline: none; } /* Links */ a { color: var(--text-primary); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--primary-color); } /* Buttons — modest 10px radius, flat solids, subtle hover lift. No gradients. */ .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 600; padding: 12px 24px; line-height: 1.25; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; border: 1.5px solid transparent; white-space: nowrap; } .btn-primary { color: #fff; background-color: var(--action-color); border-color: var(--action-color); } .btn-primary:hover { background-color: var(--action-hover); border-color: var(--action-hover); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16); transform: translateY(-1px); color: #fff; } .btn-outline-primary { color: var(--action-color); background-color: #fff; border: 1.5px solid var(--action-color); } .btn-outline-primary:hover { background-color: var(--action-color); border-color: var(--action-color); color: #fff; } .btn-outline-secondary { color: var(--text-secondary); background-color: #fff; border: 1.5px solid var(--border-color); } .btn-outline-secondary:hover { background-color: var(--surface-warm); border-color: var(--text-primary); color: var(--text-primary); } .btn-outline-danger { color: var(--color-danger); background-color: #fff; border: 1.5px solid var(--color-danger); } .btn-outline-danger:hover { background-color: var(--color-danger-bg); border-color: #B91C1C; color: #B91C1C; } .btn-success { color: #fff; background-color: var(--color-success); border-color: var(--color-success); } .btn-success:hover { background-color: #15803D; border-color: #15803D; box-shadow: 0 6px 18px rgba(22, 163, 74, 0.22); transform: translateY(-1px); color: #fff; } .btn-warning { color: #fff; background-color: var(--color-warning); border-color: var(--color-warning); } .btn-warning:hover { background-color: #B45309; border-color: #B45309; box-shadow: 0 6px 18px rgba(217, 119, 6, 0.22); transform: translateY(-1px); color: #fff; } .btn-danger { color: #fff; background-color: var(--color-danger); border-color: var(--color-danger); } .btn-danger:hover { background-color: #B91C1C; border-color: #B91C1C; box-shadow: 0 6px 18px rgba(220, 38, 38, 0.22); transform: translateY(-1px); color: #fff; } .btn-info { color: #fff; background-color: var(--color-info); border-color: var(--color-info); } .btn-info:hover { background-color: #1D4ED8; border-color: #1D4ED8; box-shadow: 0 6px 18px rgba(37, 99, 235, 0.22); transform: translateY(-1px); color: #fff; } .btn-outline-success { color: var(--color-success); background-color: #fff; border: 1.5px solid var(--color-success); } .btn-outline-success:hover { background-color: var(--color-success-bg); border-color: #15803D; color: #15803D; } .btn-outline-warning { color: var(--color-warning); background-color: #fff; border: 1.5px solid var(--color-warning); } .btn-outline-warning:hover { background-color: var(--color-warning-bg); border-color: #B45309; color: #B45309; } .btn-outline-info { color: var(--color-info); background-color: #fff; border: 1.5px solid var(--color-info); } .btn-outline-info:hover { background-color: var(--color-info-bg); border-color: #1D4ED8; color: #1D4ED8; } .btn-sm { padding: 5px 14px; font-size: 0.8125rem; min-height: unset; border-radius: 8px; } .btn-lg { padding: 14px 32px; font-size: 1.0625rem; border-radius: 12px; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 4px rgba(26, 26, 26, 0.12); outline: none; } .btn-link { color: var(--text-primary); } .btn-link:hover { color: var(--primary-color); } /* Cards */ .card { border-radius: var(--border-radius); border: 1px solid var(--border-color); background: #ffffff; box-shadow: none; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .card:hover { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); border-color: #CBD5E1; } .card-img-top { border-radius: var(--border-radius) var(--border-radius) 0 0; } /* Badges */ .badge { border-radius: var(--border-radius-pill); padding: 4px 12px; font-weight: 600; font-size: 0.75rem; } .bg-primary { background-color: var(--primary-color) !important; } .text-primary { color: var(--primary-color) !important; } .bg-primary-subtle { background-color: rgba(255, 56, 92, 0.1) !important; } .bg-success { background-color: var(--color-success) !important; } .bg-warning { background-color: var(--color-warning) !important; } .bg-danger { background-color: var(--color-danger) !important; } .bg-info { background-color: var(--color-info) !important; } .bg-success-subtle { background-color: var(--color-success-bg) !important; } .bg-warning-subtle { background-color: var(--color-warning-bg) !important; } .bg-danger-subtle { background-color: var(--color-danger-bg) !important; } .bg-info-subtle { background-color: var(--color-info-bg) !important; } .text-success { color: var(--color-success) !important; } .text-warning { color: var(--color-warning) !important; } .text-danger { color: var(--color-danger) !important; } .text-info { color: var(--color-info) !important; } /* Navbar */ .navbar { padding: 12px 0; } .navbar-brand { font-size: 1.5rem; font-weight: 700; color: var(--primary-color) !important; } .nav-link { font-weight: 500; color: var(--text-primary) !important; padding: 8px 16px !important; border-radius: 8px; transition: background-color 0.2s ease, color 0.2s ease; position: relative; text-decoration: none !important; } .nav-link:hover { background-color: var(--background-light); } .nav-link.nav-link-active { font-weight: 700; color: var(--text-primary) !important; } .nav-link.nav-link-active::after { content: ''; position: absolute; bottom: 2px; left: 16px; right: 16px; height: 2px; background: var(--primary-color); border-radius: 1px; } /* Sticky header */ .sticky-top { z-index: 1020; } header.sticky-top { background-color: #fff; border-bottom: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } /* Nav tabs — underline-only active state */ .nav-tabs { border-bottom: 1px solid rgba(0, 0, 0, 0.08); gap: 0; } .nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--text-secondary); font-weight: 500; padding: 0.625rem 1rem; margin-bottom: -1px; background: transparent; transition: color 0.15s ease, border-color 0.15s ease; } .nav-tabs .nav-link.active { border-bottom: 2px solid var(--text-primary); color: var(--text-primary); font-weight: 700; background: transparent; } .nav-tabs .nav-link:hover:not(.active) { border-bottom-color: rgba(0, 0, 0, 0.2); color: var(--text-primary); background: transparent; } /* Content spacing - REDUCED */ .content, main { padding-top: 0; } main > div { padding: 0; } /* Container improvements */ .container { max-width: 1280px; padding-left: 20px; padding-right: 20px; } /* Section surface helpers */ .section-dark { background: var(--surface-dark); color: var(--text-inverse); } .section-warm { background: var(--surface-warm); color: var(--text-primary); } .section-white { background: var(--surface-white); color: var(--text-primary); } /* Rounded utilities */ .rounded-pill { border-radius: var(--border-radius-pill) !important; } .rounded-3 { border-radius: 12px !important; } .rounded-4 { border-radius: 16px !important; } /* Image styling */ img { max-width: 100%; height: auto; } /* Shadow utilities */ .shadow-sm { box-shadow: var(--shadow-sm) !important; } .shadow { box-shadow: var(--shadow-md) !important; } .shadow-lg { box-shadow: var(--shadow-lg) !important; } /* Form styling */ .form-control { border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.15); padding: 12px 16px; background: #ffffff; } .form-control:focus { border-color: var(--text-primary); box-shadow: 0 0 0 3px rgba(34, 34, 34, 0.08); } /* Validation */ .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e52000; } .validation-message { color: #e52000; } /* Error boundary */ .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTcuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } /* Wizard Progress Styles */ .wizard-progress { margin: 2rem 0; } .wizard-progress .step { display: flex; flex-direction: column; align-items: center; position: relative; flex: 1; } .wizard-progress .step-number { width: 40px; height: 40px; border-radius: 50%; background-color: #e9ecef; color: #6c757d; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; position: relative; z-index: 2; } .wizard-progress .step.active .step-number { background-color: var(--primary-color, #0d6efd); color: white; box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3); } .wizard-progress .step.completed .step-number { background-color: #28a745; color: transparent; /* hides the digit */ font-size: 0; /* belt-and-suspenders */ } .wizard-progress .step.completed .step-number::after { content: ""; /* remove checkmark */ } .wizard-progress .step-label { margin-top: 0.5rem; font-size: 0.875rem; color: #6c757d; text-align: center; transition: all 0.3s ease; } .wizard-progress .step.active .step-label { color: var(--primary-color, #0d6efd); font-weight: 600; } .wizard-progress .step.completed .step-label { color: #28a745; } .wizard-progress .step-line { height: 2px; background-color: #e9ecef; flex: 1; margin: 0 10px; align-self: center; position: relative; top: -15px; transition: background-color 0.3s ease; } .wizard-progress .step-line.completed { background-color: #28a745; } .step-content { animation: fadeIn 0.3s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Responsive utilities */ @media (max-width: 768px) { .container { padding-left: 16px; padding-right: 16px; } .navbar { padding: 10px 0; } .wizard-progress .step-label { font-size: 0.75rem; } .wizard-progress .step-number { width: 32px; height: 32px; font-size: 0.875rem; } .wizard-progress .step-line { margin: 0 5px; } } /* Custom Map Marker Styles */ .custom-map-marker { background: transparent; } .custom-map-marker .marker-pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: var(--primary-color, #FF385C); position: absolute; transform: rotate(-45deg); left: 50%; top: 50%; margin: -15px 0 0 -15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .custom-map-marker .marker-pin::after { content: ''; width: 14px; height: 14px; margin: 8px 0 0 8px; background: #fff; position: absolute; border-radius: 50%; } /* Leaflet popup customization */ .leaflet-popup-content-wrapper { border-radius: 8px; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4); } .leaflet-popup-content { margin: 13px 19px; line-height: 1.4; font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ── Backoffice shell layout (PlatformBackoffice + AdminUserDetail) ──────────── */ .backoffice-shell { display: flex; min-height: calc(100vh - 71px); background: white; } .backoffice-content { flex: 1; min-width: 0; padding: 1.25rem 1.75rem; background: white; } @media (max-width: 768px) { .backoffice-shell { flex-direction: column; min-height: unset; } .backoffice-content { padding: 1.25rem 1rem; } } /* ── Blazor reconnection toast ─────────────────────────────────────────────── Subtle bottom-center pill; Blazor toggles show / hide / failed / rejected ─────────────────────────────────────────────────────────────────────────── */ #components-reconnect-modal { display: none; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; pointer-events: none; } #components-reconnect-modal.components-reconnect-show { display: flex; animation: reconnect-slide-up 0.25s ease; pointer-events: auto; } #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected { display: flex; animation: reconnect-slide-up 0.25s ease; pointer-events: auto; } #components-reconnect-modal.components-reconnect-hide { display: none; } .reconnect-toast { display: none; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 40px; font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14); } .components-reconnect-show .reconnect-toast-connecting { display: flex; background: rgba(34, 34, 34, 0.92); color: #ffffff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .components-reconnect-failed .reconnect-toast-failed, .components-reconnect-rejected .reconnect-toast-failed { display: flex; background: #fff3cd; color: #7b5800; border: 1px solid #ffe08a; } .reconnect-spinner { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #ffffff; border-radius: 50%; animation: reconnect-spin 0.7s linear infinite; flex-shrink: 0; } .reconnect-icon { font-size: 0.95rem; flex-shrink: 0; } .reconnect-reload { margin-left: 4px; font-weight: 700; color: #7b5800; text-decoration: underline; cursor: pointer; } .reconnect-reload:hover { color: #4a3500; } @keyframes reconnect-slide-up { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes reconnect-spin { to { transform: rotate(360deg); } } /* ── Payabli embedded component ───────────────────────────────────────────── */ /* Strips Bootstrap grid padding so the single-row card layout renders flush */ #payabli-container .row { margin: 0; align-items: center; flex-wrap: nowrap; } #payabli-container .row + .row { border-top: 1px solid var(--border-color); } #payabli-container [class*="col-"], #payabli-container .col { padding: 0; } #payabli-container iframe { display: block; border: none; width: 100%; } #payabli-container [class*="col-"] + [class*="col-"] iframe, #payabli-container .col + .col iframe { border-left: 1px solid var(--border-color); } #payabli-container .form-group, #payabli-container .mb-3 { margin: 0; } #payabli-container label, #payabli-container .form-label { display: none; } /* ── Mobile / WebView global utilities ─────────────────────────────────────── Safe-area insets for iOS notch + home indicator. Applied via viewport-fit=cover in App.razor. ─────────────────────────────────────────────────────────────────────────── */ /* Prevent iOS Safari auto-zoom on focused inputs (font-size < 16px triggers it) */ @media (max-width: 767px) { input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], textarea, select { font-size: 16px; } } /* Enforce 44px minimum touch targets on interactive elements */ @media (max-width: 767px) { .btn { min-height: 44px; padding-left: 16px; padding-right: 16px; } /* btn-sm still needs adequate touch area but can be smaller */ .btn-sm { min-height: 40px; } .form-control, .form-select { min-height: 44px; } } /* Prevent horizontal overflow on mobile — Bootstrap row gutters can bleed past viewport */ @media (max-width: 767px) { .content-area, main { overflow-x: hidden; } /* Reduce Bootstrap container horizontal padding on phones */ .container-fluid.px-4, .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } /* Ensure page content never exceeds viewport width */ .backoffice-content { padding-left: 0.875rem; padding-right: 0.875rem; } } /* Reconnect toast: lift above mobile bottom nav bar */ @media (max-width: 767px) { #components-reconnect-modal { bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 16px); } } /* Backoffice shell: add bottom padding on phones for mobile nav */ @media (max-width: 767px) { .backoffice-shell { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } } /* ============================================================ Backoffice section header — shared between PlatformBackoffice tabs and any panel components rendered inside it (e.g. TransactionsPanel). Lives globally so CSS isolation does not strip it from sub-components. ============================================================ */ .content-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); } .content-title { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); margin: 0 0 0.25rem; letter-spacing: -0.02em; } .content-subtitle { font-size: 0.875rem; color: var(--text-secondary); margin: 0; } .record-count-badge { flex-shrink: 0; background: var(--background-light); border: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: var(--border-radius-pill); white-space: nowrap; margin-top: 0.25rem; } .status-filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .status-filter-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4rem 0.875rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-pill); background: white; color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.15s ease; } .status-filter-btn:hover { border-color: var(--text-primary); color: var(--text-primary); } .status-filter-btn.active { background: var(--text-primary); border-color: var(--text-primary); color: white; } .status-count { font-size: 0.75rem; font-weight: 700; background: rgba(0, 0, 0, 0.12); border-radius: 6px; padding: 0.05rem 0.4rem; } .status-filter-btn.active .status-count { background: rgba(255, 255, 255, 0.25); } /* Draws the eye to a non-active filter that has items needing review (e.g. Pending users awaiting approval). */ .status-filter-btn.needs-attention { border-color: var(--color-warning); background: var(--color-warning-bg); color: var(--color-warning); } .status-filter-btn.needs-attention:hover { border-color: var(--color-warning); color: var(--color-warning); background: white; } .status-filter-btn.needs-attention .status-count { background: var(--color-warning); color: white; } @media (max-width: 768px) { .content-header { flex-direction: column; gap: 0.5rem; align-items: flex-start; } .content-header .btn { width: 100%; justify-content: center; } } /* ============================================================ Backoffice header stat bar — shared design system pattern Used by the bookings tab, platform dashboard, and financial dashboard for consolidated header metric rows. ============================================================ */ .booking-stats-row { display: flex; gap: 1px; background: var(--border-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; } .booking-stat { flex: 1; background: white; padding: 0.625rem 1rem; border: none; text-align: left; cursor: default; min-width: 0; } .booking-stat-link { cursor: pointer; transition: background 0.15s ease; } .booking-stat-link:hover { background: var(--background-light); } a.booking-stat, a.booking-stat-sub { text-decoration: none; color: inherit; } a.booking-stat:hover, a.booking-stat:focus-visible { color: inherit; } .booking-stat-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 0.1rem; } .booking-stat-value { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .booking-stat-link .summary-card-link { font-size: 0.75rem; margin-top: 0.15rem; color: var(--primary-color); font-weight: 600; } .booking-stat-pair { display: flex; align-items: stretch; gap: 0.5rem; } .booking-stat-sub { flex: 1; display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; padding: 0.25rem 0.4rem; margin: -0.25rem -0.4rem; border-radius: 6px; transition: background 0.15s ease; } a.booking-stat-sub { cursor: pointer; } a.booking-stat-sub:hover, a.booking-stat-sub:focus-visible { background: var(--background-light); color: inherit; } .booking-stat-sub-value { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .booking-stat-sub-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); white-space: nowrap; } .booking-stats-row.booking-stats-row-wrap { flex-wrap: wrap; } @media (max-width: 991px) { .booking-stats-row { flex-wrap: wrap; } .booking-stat { flex: 1 1 calc(50% - 1px); } } @media (max-width: 575px) { .booking-stat { flex: 1 1 100%; } .booking-stat-pair { gap: 1rem; } .booking-stat-sub-value { font-size: 1.2rem; } } /* ============================================================ .NET MAUI shell ("hoastnow-mobile" UA) — chrome stripping The inline script in App.razor adds `in-mobile-app` to when the WebView UA contains "hoastnow-mobile". CSS does the rest so there is no SSR/interactive flash. ============================================================ */ /* Hide marketing chrome (top header, footer, public chat) inside the app. */ html.in-mobile-app .app-chrome-public { display: none !important; } /* Reveal the X-style top bar inside the app. */ html.in-mobile-app .mobile-app-header { display: flex; } /* ------------------------------------------------------------ Auth pages (/login, /register) — restyle to match the native RoleSelectPage / WelcomePage chrome so the WebView feels like a continuation of the native flow, not a separate website. ------------------------------------------------------------ */ /* Drop the centered card column and its drop-shadow/border — inside the native shell the page should feel edge-to-edge. */ html.in-mobile-app .login-outer { min-height: auto; padding: 1.5rem 0; } html.in-mobile-app .login-outer .row, html.in-mobile-app .register-page .row { margin: 0; } html.in-mobile-app .login-outer .col-md-6, html.in-mobile-app .login-outer .col-lg-5, html.in-mobile-app .register-page .col-md-8, html.in-mobile-app .register-page .col-lg-6 { flex: 0 0 100%; max-width: 100%; padding: 0 1.5rem; } html.in-mobile-app .login-card, html.in-mobile-app .register-card { border: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; } html.in-mobile-app .login-card .card-body, html.in-mobile-app .register-card .card-body { padding: 0.5rem 0 !important; } html.in-mobile-app .login-card .card-title, html.in-mobile-app .register-card .register-heading { text-align: left !important; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem !important; } html.in-mobile-app .register-page .container, html.in-mobile-app .register-page { margin-top: 1rem !important; padding: 0 !important; } /* Form controls — match native Entry styling: 16px text, 1px border, 12px corners, comfortable height. */ html.in-mobile-app .login-card .form-control, html.in-mobile-app .register-card .form-control { font-size: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); min-height: 48px; } html.in-mobile-app .login-card .form-control:focus, html.in-mobile-app .register-card .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(255, 56, 92, 0.15); } html.in-mobile-app .login-card .form-label, html.in-mobile-app .register-card .form-label { font-weight: 600; color: var(--text-primary); margin-bottom: 0.4rem; } /* Primary submit — match the native 52px brand-red CTA. */ html.in-mobile-app .login-card .btn-primary, html.in-mobile-app .register-card .btn-primary { height: 52px; border-radius: var(--border-radius); font-size: 1rem; font-weight: 700; } /* Hide "Remember me" inside the app — refresh-token + biometrics already handle persistence transparently. */ html.in-mobile-app .login-card .form-check { display: none; } /* Tighten the "Don't have an account?" / "Login here" link rows. */ html.in-mobile-app .login-card hr, html.in-mobile-app .register-card hr { margin: 1.5rem 0 1rem; border-color: var(--border-color); opacity: 0.6; } /* ============================================================ CSS-only tooltip — apply with [data-tooltip="..."] on any element. Works on hover and keyboard focus, no JS required, appears immediately (unlike the native title attribute which is delayed and unreliable on touch devices). Bootstrap .btn-close also gets a default "Dismiss" tooltip without any markup change (override with data-tooltip="..."). Usage: