/* Red Toy Club — Dark Mode CSS Overrides * Applied when has the "dark" class. * Dark palette: rich violet-indigo (not black — deliberately purple) * Deepest bg #1E1252 * Surface #2B2168 * Elevated #392C82 * Border #5746A8 * Input bg #332773 * Muted text #BCB2EE * Brand #FFD600 (yellow pops on violet) * Accent red #FF6B57 (warm red highlights) */ /* ================================================================ BRAND FONT — "Super Bubble" (registered wordmark font) Font file lives at static/fonts/SuperBubble.ttf (from ffonts.net). For best performance you can later add SuperBubble.woff2 and prepend it to the src list. Falls back to 'Bungee' if the file is ever missing. ================================================================ */ @font-face { font-family: 'Super Bubble'; src: url('../fonts/SuperBubble.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* ================================================================ GLOBAL TYPOGRAPHY — Bold text, high contrast in both modes ================================================================ */ /* All text elements: bold */ p, h1, h2, h3, h4, h5, h6, li, td, th, label, span:not(.material-symbols-outlined), a, button, small, caption { font-weight: 700 !important; } /* Preserve icon rendering weight */ .material-symbols-outlined { font-weight: 400 !important; } /* Light mode: near-black default text + explicit button/link colors */ body { color: #111111 !important; } a { color: #111111 !important; font-weight: 700 !important; } button { color: #111111 !important; font-weight: 700 !important; } /* Dark mode: white default text + explicit button/link colors */ html.dark body { color: #FFFFFF !important; } html.dark a { color: #FFFFFF !important; font-weight: 700 !important; } html.dark button { color: #FFFFFF !important; font-weight: 700 !important; } /* ──────────────────────────────────────────────────────────── PAGE BACKGROUNDS ──────────────────────────────────────────────────────────── */ html.dark body { color-scheme: dark; } /* Admin main area */ html.dark .admin-bg, html.dark body.bg-gray-50 { background-color: #1E1252 !important; } /* ──────────────────────────────────────────────────────────── SURFACES (cards, panels, tables) ──────────────────────────────────────────────────────────── */ html.dark .bg-white { background-color: #2B2168 !important; } html.dark .bg-gray-50 { background-color: #1E1252 !important; } html.dark .bg-gray-100 { background-color: #2B2168 !important; } /* Glass morphism (customer/auth pages) */ html.dark .glass, html.dark .glass-container { background: rgba(38, 28, 92, 0.92) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important; } /* ──────────────────────────────────────────────────────────── TEXT ──────────────────────────────────────────────────────────── */ html.dark .text-gray-900 { color: #EDE8FF !important; } html.dark .text-gray-800 { color: #E0D8FF !important; } html.dark .text-gray-700 { color: #D0C8F0 !important; } html.dark .text-gray-600 { color: #C7BFF2 !important; } html.dark .text-gray-500 { color: #B8AEE8 !important; } html.dark .text-gray-400 { color: #8478B6 !important; } /* ──────────────────────────────────────────────────────────── BORDERS & DIVIDERS ──────────────────────────────────────────────────────────── */ html.dark .border-gray-100 { border-color: #2B2168 !important; } html.dark .border-gray-200 { border-color: #5746A8 !important; } html.dark .border-gray-300 { border-color: #6555B4 !important; } html.dark .divide-gray-50 > * + * { border-color: #2B2168 !important; } html.dark .divide-gray-100 > * + * { border-color: #2B2168 !important; } /* ──────────────────────────────────────────────────────────── HOVER STATES ──────────────────────────────────────────────────────────── */ html.dark .hover\:bg-gray-50:hover { background-color: #2B2168 !important; } html.dark .hover\:bg-gray-100:hover { background-color: #392C82 !important; } html.dark tr.hover\:bg-gray-50:hover, html.dark tr.hover\:bg-gray-50 { background-color: #2B2168 !important; } /* ──────────────────────────────────────────────────────────── FORM INPUTS ──────────────────────────────────────────────────────────── */ html.dark input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), html.dark select, html.dark textarea { background-color: #2B2168 !important; border-color: #5746A8 !important; color: #EDE8FF !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #B8AEE8 !important; } html.dark input:focus:not([type="submit"]):not([type="button"]), html.dark select:focus, html.dark textarea:focus { border-color: #FFD600 !important; background-color: #1E1252 !important; } /* Login / auth glass inputs */ html.dark .custom-input { background-color: #2B2168 !important; border-color: #5746A8 !important; color: #EDE8FF !important; } html.dark .custom-input:focus { background-color: #1E1252 !important; border-color: #FFD600 !important; } /* ──────────────────────────────────────────────────────────── BRAND / PRIMARY ACCENT (yellow on dark) ──────────────────────────────────────────────────────────── */ html.dark .btn-primary { background: #FFD600 !important; color: #1A1400 !important; box-shadow: 0 4px 0 #B89200, 0 6px 20px rgba(255,214,0,0.28) !important; } html.dark .btn-primary:hover { background: #FFE033 !important; box-shadow: 0 5px 0 #B89200, 0 8px 26px rgba(255,214,0,0.4) !important; } html.dark .btn-spin { background: #FFD600 !important; color: #1A1400 !important; } html.dark .bricks-number { color: #FFD600 !important; } /* ──────────────────────────────────────────────────────────── STATUS / SEMANTIC COLOUR BADGES ──────────────────────────────────────────────────────────── */ html.dark .bg-green-50 { background-color: #052e16 !important; } html.dark .text-green-700 { color: #4ade80 !important; } html.dark .text-green-600 { color: #4ade80 !important; } html.dark .border-green-200 { border-color: #14532d !important; } html.dark .bg-red-50 { background-color: #450a0a !important; } html.dark .text-red-700 { color: #f87171 !important; } html.dark .text-red-600 { color: #f87171 !important; } html.dark .border-red-200 { border-color: #7f1d1d !important; } html.dark .bg-amber-50 { background-color: #2a1e00 !important; } html.dark .text-amber-700 { color: #fbbf24 !important; } html.dark .bg-yellow-50 { background-color: #2a1e00 !important; } html.dark .text-yellow-700 { color: #FFD600 !important; } html.dark .text-yellow-600 { color: #FFD600 !important; } html.dark .bg-blue-50 { background-color: #0c1a3a !important; } html.dark .text-blue-700 { color: #93c5fd !important; } html.dark .border-blue-200 { border-color: #1e3a5f !important; } html.dark .bg-indigo-50 { background-color: #2B2168 !important; } html.dark .text-indigo-700 { color: #FFD600 !important; } html.dark .bg-purple-50 { background-color: #392C82 !important; } html.dark .text-purple-700 { color: #FFD600 !important; } html.dark .text-purple-600 { color: #FFD600 !important; } /* Toy status badges */ html.dark .badge-available { background: #052e16 !important; color: #4ade80 !important; } html.dark .badge-in_use { background: #2a1e00 !important; color: #fbbf24 !important; } html.dark .badge-under_progress { background: #0c1a3a !important; color: #93c5fd !important; } html.dark .badge-issued { background: #450a0a !important; color: #f87171 !important; } html.dark .badge-maintenance { background: #2a1e00 !important; color: #fbbf24 !important; } /* ──────────────────────────────────────────────────────────── TABLES ──────────────────────────────────────────────────────────── */ html.dark thead tr { border-color: #2B2168 !important; } html.dark tbody tr { border-color: #2B2168 !important; } /* Legacy plain-CSS tables */ html.dark .toy-table th, html.dark .toy-table td, html.dark .report-table th, html.dark .report-table td, html.dark .transaction-table th, html.dark .transaction-table td, html.dark .lookup-table th, html.dark .lookup-table td { border-color: #5746A8 !important; color: #D0C8F0 !important; } html.dark .toy-table thead, html.dark .report-table thead, html.dark .transaction-table thead, html.dark .lookup-table thead { background: #2B2168 !important; } /* ──────────────────────────────────────────────────────────── DARK BG INLINE CLASSES (old slate override) ──────────────────────────────────────────────────────────── */ html.dark [class*='dark:bg-\[#1e293b\]'] { background-color: #2B2168 !important; } html.dark [class*='dark:bg-\[#0f172a\]'] { background-color: #1E1252 !important; } html.dark [class*='dark:border-slate-700'] { border-color: #5746A8 !important; } html.dark [class*='dark:divide-slate-700'] > * + * { border-color: #5746A8 !important; } /* ──────────────────────────────────────────────────────────── ADMIN ALERT BANNERS (success / error in layout.html) ──────────────────────────────────────────────────────────── */ html.dark .bg-green-50.border-green-200 { background-color: #052e16 !important; } html.dark .bg-red-50.border-red-200 { background-color: #450a0a !important; } /* ──────────────────────────────────────────────────────────── MISC UTILITY OVERRIDES ──────────────────────────────────────────────────────────── */ /* Admin-style card shadow in dark */ html.dark .shadow, html.dark .shadow-sm, html.dark .shadow-lg { box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.6) !important; } /* Inline white glass panels (leisure_builder, etc using style="background: rgba(255,255,255,...)") */ html.dark [style*="background: rgba(255,255,255"], html.dark [style*="background:rgba(255,255,255"] { background: rgba(38, 28, 92, 0.92) !important; } html.dark [style*="background: rgba(255,255,255"] .text-gray-900, html.dark [style*="background: rgba(255,255,255"] h2, html.dark [style*="background: rgba(255,255,255"] h3, html.dark [style*="background: rgba(255,255,255"] p, html.dark [style*="background: rgba(255,255,255"] td, html.dark [style*="background: rgba(255,255,255"] li { color: #e2e8f0 !important; } /* text-slate-* used in some journey templates */ html.dark .text-slate-900 { color: #f1f5f9 !important; } html.dark .text-slate-700 { color: #cbd5e1 !important; } html.dark .text-slate-600 { color: #94a3b8 !important; } html.dark .text-slate-500 { color: #64748b !important; } /* Inline code / value blocks */ html.dark .code-card { background: #1E1252 !important; border: 1px solid #5746A8 !important; } /* Flash messages */ html.dark .flash-success { background: #052e16 !important; color: #4ade80 !important; border-color: #14532d !important; } html.dark .flash-error { background: #450a0a !important; color: #fca5a5 !important; border-color: #7f1d1d !important; } html.dark .flash-info { background: #0c1a3a !important; color: #93c5fd !important; border-color: #1e3a5f !important; } /* Status badges (legacy CSS classes) */ html.dark .status-available { background: #052e16 !important; color: #4ade80 !important; } html.dark .status-in-use { background: #422006 !important; color: #fde68a !important; } html.dark .status-under_progress{ background: #0c1a3a !important; color: #93c5fd !important; } html.dark .status-issued { background: #450a0a !important; color: #fca5a5 !important; } /* Credit / debit in wallet */ html.dark .credit { color: #4ade80 !important; } html.dark .debit { color: #f87171 !important; } html.dark .overdue { color: #f87171 !important; } /* Journey step / player cards */ html.dark .player-card, html.dark .category-card, html.dark .program-card { background: #2B2168 !important; border-color: #5746A8 !important; color: #EDE8FF !important; } /* Admin cards */ html.dark .admin-card { background: #2B2168 !important; border-color: #5746A8 !important; color: #EDE8FF !important; } html.dark .admin-card:hover { border-color: #FFD600 !important; background: #392C82 !important; } /* ──────────────────────────────────────────────────────────── CLIENT PORTAL ──────────────────────────────────────────────────────────── */ /* Page background */ html.dark body.portal-page { background-color: #1E1252 !important; } /* Portal card */ html.dark .portal-card { background: #2B2168 !important; border-color: #5746A8 !important; box-shadow: 0 1px 8px rgba(0,0,0,0.5) !important; } html.dark .portal-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important; } /* Status badges */ html.dark .badge-active { background: #052e16 !important; color: #4ade80 !important; } html.dark .badge-completed { background: #2B2168 !important; color: #C7BFF2 !important; } html.dark .badge-overdue { background: #450a0a !important; color: #fca5a5 !important; } html.dark .badge-returned { background: #0c1a3a !important; color: #93c5fd !important; } /* Section title icons */ html.dark .portal-section-title { color: #D0C8F0 !important; } /* Tab bar */ html.dark .portal-tab-bar { background: #2B2168 !important; border-color: #5746A8 !important; } html.dark .portal-tab-active { color: #FFD600 !important; border-bottom-color: #FFD600 !important; } html.dark .portal-tab-inactive { color: #B8AEE8 !important; } html.dark .portal-tab-inactive:hover { color: #C7BFF2 !important; } /* ──────────────────────────────────────────────────────────── CUSTOMER TOPBAR (profile dropdown) ──────────────────────────────────────────────────────────── */ /* Keep the brand-red topbar in dark mode (slightly deepened) — a flat dark bar looked washed-out against the violet page. Red + yellow accents stay vivid. */ html.dark #customer-topbar { background: linear-gradient(135deg, #9E0C00 0%, #B81200 45%, #C71500 55%, #9E0C00 100%) !important; border-bottom-color: rgba(255, 214, 0, 0.22) !important; box-shadow: 0 3px 0 #5E0700, 0 6px 28px rgba(0,0,0,0.45) !important; } html.dark #profile-dropdown-menu { background: #2B2168 !important; border-color: #5746A8 !important; } /* ──────────────────────────────────────────────────────────── CUSTOMER PAGE BACKGROUNDS (light body overrides) ──────────────────────────────────────────────────────────── */ /* Pages using inline style body backgrounds (FFFDE7, f5f5f5) */ html.dark body[style*="background"], html.dark body[class*="antialiased"] { color-scheme: dark; } /* Customer tab bars */ html.dark .tab-active { color: #FFD600 !important; border-bottom-color: #FFD600 !important; } html.dark .tab-inactive { color: #B8AEE8 !important; } html.dark .tab-inactive:hover { color: #C7BFF2 !important; } /* Customer filter tabs (history) */ html.dark .filter-active { color: #FFD600 !important; border-bottom-color: #FFD600 !important; } html.dark .filter-inactive { color: #B8AEE8 !important; } /* Back links on dark gradient pages */ html.dark a[class*="text-gray-500"]:hover { color: #D0C8F0 !important; } /* ================================================================ CUSTOMER IN-STORE SCREENS — Purple-night dark mode Palette: bg #1E1252 deep purple-black surface #2B2168 card background elevated #392C82 hover/elevated card border #5746A8 purple border shadow #0F0A2E shadow text #FFFFFF primary text muted #BCB2EE secondary/label text ================================================================ */ /* ─── Page background — deep violet with a soft purple glow + brick texture ─── */ html.dark body { background-color: #241568 !important; background-image: radial-gradient(ellipse at 50% -10%, rgba(150, 105, 255, 0.40) 0%, transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(110, 70, 220, 0.28) 0%, transparent 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect x='8' y='28' width='64' height='44' rx='6' fill='none' stroke='%234C3C98' stroke-width='2.5' opacity='0.5'/%3E%3Ccircle cx='24' cy='22' r='10' fill='none' stroke='%234C3C98' stroke-width='2.5' opacity='0.5'/%3E%3Ccircle cx='56' cy='22' r='10' fill='none' stroke='%234C3C98' stroke-width='2.5' opacity='0.5'/%3E%3C/svg%3E") !important; background-attachment: fixed, fixed, scroll !important; color: #FFFFFF !important; } /* ─── Back button visibility — light mode (more opaque) + dark mode (yellow) ─── */ .back-btn, .back-link { opacity: 0.8 !important; } .back-btn:hover, .back-link:hover { opacity: 1 !important; } html.dark .back-btn, html.dark .back-link, html.dark .back-row a { color: #FFD600 !important; opacity: 0.9 !important; } html.dark .back-btn:hover, html.dark .back-link:hover, html.dark .back-row a:hover { opacity: 1 !important; } /* ─── White cards → dark surface ─── */ html.dark .toy-card, html.dark .rental-card, html.dark .info-card, html.dark .pricing-card, html.dark .form-card, html.dark .wallet-strip, html.dark .session-row, html.dark .quick-card, html.dark .not-found-card, html.dark .quick-link, html.dark .action-item, html.dark .child-item, html.dark .card { background: #2B2168 !important; border-color: #5746A8 !important; box-shadow: 0 4px 0 #0F0A2E !important; } html.dark .toy-card:hover, html.dark .session-row:hover, html.dark .quick-card:hover, html.dark .quick-link:hover { border-color: #FFD600 !important; } html.dark .rental-card:hover { border-color: #FFD600 !important; box-shadow: 0 7px 0 #0F0A2E !important; } /* Dashed add-child card */ html.dark .add-child-btn { background: #241A5E !important; border-color: #5746A8 !important; } html.dark .add-child-btn:hover { border-color: #FFD600 !important; background: #392C82 !important; } html.dark .add-child-label { color: #BCB2EE !important; } /* Logout action */ html.dark .action-logout { background: #280808 !important; border-color: #5C1010 !important; } html.dark .action-logout .action-item-title { color: #f87171 !important; } /* ─── Primary text ─── */ html.dark .page-title, html.dark .module-title, html.dark .section-title, html.dark .card-title, html.dark .toy-name, html.dark .child-name, html.dark .rental-name, html.dark .info-value, html.dark .pricing-value, html.dark .pricing-total-label, html.dark .wallet-amount, html.dark .profile-name, html.dark .quick-link-title, html.dark .action-item-title, html.dark .sub-title, html.dark .session-row-name, html.dark .quick-card-title, html.dark .charge-amount, html.dark .detail-value, html.dark .toy-name-text { color: #FFFFFF !important; } /* ─── Secondary / label text ─── */ html.dark .page-sub, html.dark .module-sub, html.dark .toy-meta, html.dark .rental-sub, html.dark .rental-meta, html.dark .info-label, html.dark .pricing-label, html.dark .wallet-label, html.dark .section-label, html.dark .add-child-label, html.dark .child-meta, html.dark .profile-role, html.dark .session-row-sub, html.dark .quick-card-sub, html.dark .charge-sub, html.dark .charge-label, html.dark .detail-label, html.dark .detail-sub, html.dark .rental-adv, html.dark .wallet-hint, html.dark .price-label, html.dark .toy-code, html.dark .photo-upload-text, html.dark .photo-label span { color: #BCB2EE !important; } /* ─── Section labels / card titles ─── */ html.dark .photo-label { color: #FFFFFF !important; } /* ─── Input fields ─── */ html.dark .field-group { background: #332773 !important; border-color: #5746A8 !important; } html.dark .field-group:focus-within { border-color: #CC1500 !important; } html.dark .field-sep { border-bottom-color: #5746A8 !important; } html.dark .rbc-input { background: transparent !important; color: #FFFFFF !important; } html.dark .rbc-input::placeholder { color: #9D92D2 !important; } html.dark .custom-input { background: #332773 !important; border-color: #5746A8 !important; color: #FFFFFF !important; } html.dark .custom-input::placeholder { color: #9D92D2 !important; } html.dark .custom-input:focus { border-color: #CC1500 !important; } html.dark .btn-update { background: #2B2168 !important; border-color: #5746A8 !important; color: #FFFFFF !important; } html.dark .btn-update:hover { border-color: #FFD600 !important; } /* ─── Day chips (rental duration) ─── */ html.dark .day-chip { background: #2B2168 !important; border-color: #5746A8 !important; color: #FFFFFF !important; } html.dark .day-chip:hover { border-color: #FFD600 !important; background: #392C82 !important; } html.dark .day-chip-active { background: #CC1500 !important; border-color: #7A0900 !important; color: white !important; } /* ─── Dividers ─── */ html.dark .info-divider { border-top-color: #5746A8 !important; } /* ─── Progress bar ─── */ html.dark .progress-track { background: rgba(255,255,255,0.08) !important; } html.dark .progress-header { color: #FFFFFF !important; } html.dark .progress-pct { color: #FF6B57 !important; } html.dark .progress-sub { color: #BCB2EE !important; } /* ─── Error box ─── */ html.dark .error-box { background: #280808 !important; border-color: #7f1d1d !important; color: #f87171 !important; } /* ─── Status pills (rental_detail) ─── */ html.dark .pill-active { background: #0A2E12 !important; color: #4ade80 !important; border-color: #14532d !important; } html.dark .pill-overdue { background: #280808 !important; color: #f87171 !important; border-color: #7f1d1d !important; } html.dark .pill-expiring { background: #2A1E00 !important; color: #fbbf24 !important; border-color: #78350f !important; } html.dark .pill-returned { background: #1A1A1A !important; color: #9CA3AF !important; border-color: #374151 !important; } /* ─── Status chips (biweekly) ─── */ html.dark .chip-active { background: #0A2E12 !important; color: #4ade80 !important; } html.dark .chip-overdue { background: #280808 !important; color: #f87171 !important; } html.dark .chip-expiring { background: #2A1E00 !important; color: #fbbf24 !important; } html.dark .chip-returned { background: #1A1A1A !important; color: #9CA3AF !important; } /* ─── Rental status badges (my_rentals) ─── */ html.dark .status-active { background: #0c1a3a !important; color: #93c5fd !important; } html.dark .status-overdue { background: #280808 !important; color: #f87171 !important; } html.dark .status-returned { background: #1A1A1A !important; color: #9CA3AF !important; } /* ─── Status mini chips (player_select) ─── */ html.dark .status-mini-overdue { background: #280808 !important; color: #f87171 !important; } html.dark .status-mini-teal { background: #003D36 !important; color: #34d399 !important; } html.dark .status-mini-orange { background: #2A1200 !important; color: #fb923c !important; } html.dark .status-mini-green { background: #0A2E12 !important; color: #4ade80 !important; } html.dark .resume-chip { background: #0A2E12 !important; color: #4ade80 !important; } /* ─── Deposit chips ─── */ html.dark .deposit-chip.deposit-refunded { background: #1A1A1A !important; color: #9CA3AF !important; } html.dark .deposit-chip.deposit-held { background: #2A1E00 !important; color: #fbbf24 !important; } /* ─── Toy image areas ─── */ html.dark .toy-img { background: #332773 !important; } html.dark .rental-img-placeholder { background: #332773 !important; } /* ─── Available badge ─── */ html.dark .available-badge { background: #0A2E12 !important; color: #4ade80 !important; } /* ─── Pricing highlights ─── */ html.dark .pricing-total-value { color: #FF6B57 !important; } html.dark .info-highlight { color: #FF6B57 !important; } html.dark .info-value-overdue { color: #f87171 !important; } html.dark .detail-overdue { color: #f87171 !important; } html.dark .detail-warning { color: #fbbf24 !important; } /* ─── Photo upload ─── */ html.dark .photo-section { background: #241A5E !important; } html.dark .photo-preview { background: rgba(204,21,0,0.2) !important; } html.dark .photo-upload-btn { background: #2B2168 !important; border-color: #5746A8 !important; } html.dark .photo-upload-btn:hover { border-color: #FFD600 !important; background: #392C82 !important; } /* ─── Footer / bottom links ─── */ html.dark .footer-link a { color: #FFD600 !important; opacity: 0.85 !important; } /* ─── Biweekly rental card details ─── */ html.dark .card-header { background: #2B2168 !important; border-bottom-color: #5746A8 !important; } html.dark .charges-row { border-top-color: #5746A8 !important; } html.dark .charge-cell:first-child { border-right-color: #5746A8 !important; } /* ─── Nav dropdown ─── */ html.dark #profile-dropdown-menu { background: #2B2168 !important; border-color: #5746A8 !important; box-shadow: 0 8px 0 #0F0A2E, 0 12px 40px rgba(0,0,0,0.55) !important; } html.dark #profile-dropdown-menu > div:first-child { background: #392C82 !important; border-bottom-color: #5746A8 !important; } html.dark #profile-dropdown-menu > div:first-child p { color: #FFFFFF !important; } html.dark #profile-dropdown-menu > div:last-child { border-top-color: #5746A8 !important; } html.dark #profile-dropdown-menu a { color: #FFFFFF !important; } html.dark #profile-dropdown-menu a:hover { background: rgba(255,214,0,0.08) !important; } html.dark #profile-dropdown-menu a span.material-symbols-outlined { color: #BCB2EE !important; } html.dark #profile-dropdown-menu > div:last-child button { color: #FF6B57 !important; } html.dark #profile-dropdown-menu > div:last-child button span { color: #FF6B57 !important; } /* ================================================================ FLOATING DARK MODE TOGGLE (FAB — auth/no-nav pages) ================================================================ */ #rbc-theme-fab { position: fixed; top: 14px; right: 14px; z-index: 9999; width: 42px; height: 42px; border-radius: 12px; background: rgba(0,0,0,0.28); border: 1.5px solid rgba(0,0,0,0.2); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0,0,0,0.25); transition: background 0.15s, border-color 0.15s; } #rbc-theme-fab:hover { background: rgba(0,0,0,0.4); } html.dark #rbc-theme-fab { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22); } html.dark #rbc-theme-fab:hover { background: rgba(255,255,255,0.24); } /* ================================================================ BACK BUTTON — VISIBLE CHIP STYLE (BOTH MODES) Applies to customer in-store screen back buttons only. Does NOT apply inside .auth-card (different context — centered links). ================================================================ */ .back-btn, .page-wrapper > .back-row .back-link, .page-wrapper > .back-link { display: inline-flex !important; align-items: center !important; gap: 4px !important; background: rgba(255,255,255,0.82) !important; border: 1.5px solid rgba(0,0,0,0.14) !important; padding: 7px 14px 7px 8px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 700 !important; color: #1A1400 !important; opacity: 1 !important; text-decoration: none !important; transition: background 0.15s, border-color 0.15s !important; } .back-btn:hover, .page-wrapper > .back-row .back-link:hover, .page-wrapper > .back-link:hover { background: white !important; border-color: rgba(0,0,0,0.22) !important; opacity: 1 !important; } html.dark .back-btn, html.dark .page-wrapper > .back-row .back-link, html.dark .page-wrapper > .back-link { background: rgba(255,214,0,0.14) !important; border-color: rgba(255,214,0,0.32) !important; color: #FFD600 !important; opacity: 1 !important; } html.dark .back-btn:hover, html.dark .page-wrapper > .back-row .back-link:hover, html.dark .page-wrapper > .back-link:hover { background: rgba(255,214,0,0.24) !important; border-color: rgba(255,214,0,0.52) !important; } /* Auth card back links — keep as plain centered links, just fix dark-mode color */ .auth-card .back-link { display: block !important; background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0 !important; text-align: center !important; font-weight: 400 !important; } html.dark .auth-card .back-link a { color: #BCB2EE !important; } /* When .back-link is a div container with inside (program_select, session_active): ensure the inner link text is visible in dark mode */ html.dark .page-wrapper > .back-link a { color: #FFFFFF !important; opacity: 1 !important; } /* leisure_builder uses .cust-back-link — not covered by .back-link rules */ html.dark .cust-back-link { color: #FFD600 !important; opacity: 0.9 !important; } html.dark .cust-back-link:hover { opacity: 1 !important; } /* ================================================================ AUTH CARD — DARK MODE Covers login, register, otp_verify, forgot/reset password ================================================================ */ html.dark .auth-card { background: #2B2168 !important; box-shadow: 0 8px 0 #0F0A2E, 0 14px 50px rgba(0,0,0,0.6) !important; } html.dark .auth-card .card-body { background: #2B2168 !important; } /* OTP screen */ html.dark .otp-title { color: #FFFFFF !important; font-weight: 800 !important; } html.dark .otp-subtitle { color: #BCB2EE !important; } html.dark .otp-subtitle strong { color: #FFFFFF !important; } html.dark .icon-circle { background: #392C82 !important; border-color: #5746A8 !important; } /* Register child cards */ html.dark .child-card { background: #392C82 !important; border-color: #5746A8 !important; } html.dark .child-card-header { background: #332773 !important; border-bottom-color: #5746A8 !important; } html.dark .child-label { color: #CC1500 !important; } html.dark .btn-remove { color: #FF6B57 !important; } html.dark .btn-remove:hover { background: #280808 !important; } /* Add another child btn */ html.dark .btn-add-child { border-color: #5746A8 !important; color: #BCB2EE !important; background: transparent !important; } html.dark .btn-add-child:hover { border-color: #CC1500 !important; color: #FF6B57 !important; } /* File upload */ html.dark .file-input { color: #BCB2EE !important; } html.dark .file-input::file-selector-button { background: #FFD600 !important; color: #1A1400 !important; } /* Auth card footer links (resend, back to login) */ html.dark .card-footer-links a { color: #FFD600 !important; font-weight: 700 !important; } html.dark .card-footer-links button { color: #FFD600 !important; font-weight: 700 !important; } html.dark .card-footer-links p { color: #BCB2EE !important; } /* Forgot password link on login screen */ html.dark a[href*="forgot-password"][style] { color: #BCB2EE !important; } /* "Already have account / New here" below card */ html.dark .below-card { color: #FFFFFF !important; } html.dark .below-card a { color: #FF6B57 !important; } /* Inline styled "Already have account" paragraph (register / login) */ html.dark p[style*="color:#7A5C00"] { color: #FFFFFF !important; } /* ================================================================ TEXT WEIGHT + VISIBILITY — ALL CUSTOMER SCREENS ================================================================ */ /* Ensure key label classes are bold and visible in dark */ html.dark .info-text-label, html.dark .detail-label, html.dark .charge-label, html.dark .price-label, html.dark .wallet-label, html.dark .page-sub, html.dark .module-sub, html.dark .toy-meta, html.dark .rental-sub, html.dark .rental-meta { font-weight: 600 !important; color: #BCB2EE !important; } html.dark .info-text-value, html.dark .detail-value, html.dark .charge-amount, html.dark .wallet-amount, html.dark .pricing-value, html.dark .price-val { font-weight: 800 !important; color: #FFFFFF !important; } /* ─── Portal top header (white bar) ─── */ html.dark #portal-topbar { background: #2B2168 !important; border-bottom-color: #5746A8 !important; box-shadow: 0 3px 0 #0F0A2E !important; } html.dark #portal-topbar p { color: #FFFFFF !important; } html.dark #portal-topbar p[style*="color:#888"] { color: #BCB2EE !important; } /* Portal sidebar in dark mode */ html.dark .portal-sidebar { background: #1E1252 !important; border-right-color: #2B2168 !important; } html.dark [style*="color:#1A1400"] { color: #FFFFFF !important; } html.dark [style*="color: #1A1400"] { color: #FFFFFF !important; } html.dark [style*="color:#888"] { color: #BCB2EE !important; } html.dark [style*="color: #888"] { color: #BCB2EE !important; } html.dark [style*="color:#AAA"] { color: #BCB2EE !important; } html.dark [style*="color: #AAA"] { color: #BCB2EE !important; } html.dark [style*="color:#CCC"] { color: #9D92D2 !important; } /* Strong / emphasis inside cards */ html.dark .auth-card strong, html.dark .auth-card b { color: #FFFFFF !important; } /* Inline card sub-labels that use gray */ html.dark .auth-card .card-body p[style*="color:#CCC"], html.dark .auth-card .card-body p[style*="color:#AAA"] { color: #BCB2EE !important; } /* Section labels on register screen */ html.dark .section-label { color: #CC1500 !important; font-weight: 800 !important; } /* Child-card inline label in register (Tailwind classes) */ html.dark .block.text-xs { color: #BCB2EE !important; } /* ================================================================ WALLET & HISTORY SCREENS ================================================================ */ /* Tab navigation bar (shared by wallet, history, my-rentals) */ html.dark .tab-nav { background: #2B2168 !important; border-bottom-color: #5746A8 !important; box-shadow: 0 3px 0 #0F0A2E !important; } html.dark .tab-link { color: #BCB2EE !important; } html.dark .tab-active { color: #CC1500 !important; background: #392C82 !important; } html.dark .tab-inactive:hover { background: #392C82 !important; color: #FFFFFF !important; } /* Wallet balance card */ html.dark .balance-card { background: #2B2168 !important; border-color: #5746A8 !important; box-shadow: 0 6px 0 #0F0A2E !important; } html.dark .balance-amount { color: #FFFFFF !important; } html.dark .balance-label { color: #BCB2EE !important; } /* Transaction card */ html.dark .tx-card { background: #2B2168 !important; border-color: #5746A8 !important; box-shadow: 0 4px 0 #0F0A2E !important; } html.dark .tx-header { border-bottom-color: #5746A8 !important; } html.dark .tx-header-title { color: #FFFFFF !important; } html.dark .tx-row { border-bottom-color: #392C82 !important; } html.dark .tx-row:hover { background: #392C82 !important; } html.dark .tx-icon-topup { background: #0A2E12 !important; } html.dark .tx-icon-deduct { background: #332773 !important; } html.dark .tx-desc { color: #FFFFFF !important; } html.dark .tx-date { color: #BCB2EE !important; } html.dark .tx-amount-topup { color: #4ade80 !important; } html.dark .tx-amount-deduct { color: #FFFFFF !important; } html.dark .tx-empty { color: #BCB2EE !important; } /* Pagination */ html.dark .page-btn { background: #2B2168 !important; border-color: #5746A8 !important; color: #FFFFFF !important; } html.dark .page-btn:hover { background: #392C82 !important; } html.dark .page-info { color: #BCB2EE !important; } /* History card */ html.dark .history-card { background: #2B2168 !important; border-color: #5746A8 !important; box-shadow: 0 4px 0 #0F0A2E !important; } html.dark .filter-tabs { border-bottom-color: #5746A8 !important; } /* Revamped pill-style history filter tabs */ html.dark .filter-tab { background: #332773 !important; border-color: #5746A8 !important; color: #D8CEFF !important; } html.dark .filter-tab:hover { border-color: #FFD600 !important; } html.dark .filter-active { color: #fff !important; background: #CC1500 !important; border-color: #7A0900 !important; box-shadow: 0 3px 0 #4A0500 !important; } html.dark .filter-inactive:hover { color: #FFFFFF !important; background: #332773 !important; } html.dark .session-item { border-bottom-color: #392C82 !important; } html.dark .session-item:hover { background: #392C82 !important; } html.dark .session-name { color: #FFFFFF !important; } html.dark .session-meta { color: #BCB2EE !important; } /* History status chips */ html.dark .status-completed .status-label { color: #4ade80 !important; } html.dark .status-active .status-label { color: #fbbf24 !important; } html.dark .status-cancelled .status-label { color: #f87171 !important; } html.dark .status-returned .status-label { color: #93c5fd !important; } html.dark .status-overdue .status-label { color: #f87171 !important; } /* ================================================================ SPIN WHEEL & MISC CUSTOMER SCREEN FIXES ================================================================ */ /* Spin Again button */ html.dark .btn-spin-again { background: #392C82 !important; color: #FFFFFF !important; font-weight: 700 !important; border-color: #5746A8 !important; } html.dark .btn-spin-again:hover { background: #5746A8 !important; color: #FFFFFF !important; } /* Cancel / start-over button on spin wheel */ html.dark .cancel-link button { color: #BCB2EE !important; opacity: 0.9 !important; } html.dark .cancel-link button:hover { opacity: 1 !important; color: #FFFFFF !important; } /* Spin chance label */ html.dark .spin-chance-label { color: #BCB2EE !important; opacity: 1 !important; } /* not-found-card text */ html.dark .not-found-card p { color: #BCB2EE !important; } html.dark .not-found-link { color: #FF6B57 !important; } /* header-icon-wrap (biweekly rental card) */ html.dark .header-icon-wrap { background: #1A3A5C !important; } /* Inline color:white text in dark cards (info section icons etc.) */ html.dark [style*="color:white"] { color: white !important; } html.dark [style*="color: white"] { color: white !important; } /* ================================================================ JOURNEY / CLIENT-FLOW SCREENS — violet dark mode These standalone templates (select-player, choose-category, spin, enter-code, choose-program, build-style, preferences, reveal) carry their own inline light styling. Below we convert their white cards to violet surfaces and rescue the dark-on-yellow text that would vanish on the violet background. ================================================================ */ /* ─── Dark-on-yellow hero / helper text → light on violet ─── */ html.dark .hero-sub, html.dark .page-sub, html.dark .playing-for, html.dark .no-toys-sub, html.dark .spin-chance-label, html.dark .add-child-label { color: #C7BFF2 !important; opacity: 1 !important; } /* Hero accent bar — give it a yellow-to-violet sheen on dark */ html.dark .hero-accent { background: linear-gradient(90deg, #FF6B57, #FFD600) !important; } /* Section sub-titles that used near-black ink */ html.dark .sub-title { color: #FFFFFF !important; } /* ─── category_select: white tile buttons ─── */ html.dark .cat-btn { background: #2B2168 !important; border-color: #5746A8 !important; box-shadow: 0 6px 0 #0F0A2E, 0 10px 24px rgba(0,0,0,0.45) !important; } html.dark .cat-btn:hover { border-color: #FFD600 !important; box-shadow: 0 12px 0 #0F0A2E, 0 18px 36px rgba(0,0,0,0.5) !important; } html.dark .cat-btn:active { box-shadow: 0 2px 0 #0F0A2E !important; } html.dark .cat-name { color: #FFFFFF !important; } html.dark .cat-desc { color: #FF8A7A !important; } html.dark .cat-coming { background: rgba(34, 26, 69, 0.55) !important; border-color: #5746A8 !important; } html.dark .cat-coming-icon { background: rgba(255,255,255,0.06) !important; } /* ─── code_entry: slot machine + input ─── */ html.dark .slot-inner { background: #241A5E !important; } html.dark .slot-column { border-right-color: #5746A8 !important; } html.dark .slot-code { color: #FFD600 !important; } html.dark .code-input { background: #332773 !important; border-color: #5746A8 !important; color: #FFFFFF !important; box-shadow: 0 3px 0 #0F0A2E !important; } html.dark .code-input::placeholder { color: #9D92D2 !important; } html.dark .code-input:focus { border-color: #FFD600 !important; box-shadow: 0 3px 0 #0F0A2E, 0 0 0 4px rgba(255,214,0,0.18) !important; } /* ─── program_select / builder_type_select: white cards (colored icons stay) ─── */ html.dark .prog-card, html.dark .builder-card { background: #2B2168 !important; border-color: #5746A8 !important; box-shadow: 0 7px 0 #0F0A2E, 0 12px 36px rgba(0,0,0,0.5) !important; } html.dark .prog-card:hover, html.dark .builder-card:hover { border-color: #FFD600 !important; box-shadow: 0 14px 0 #0F0A2E, 0 22px 50px rgba(0,0,0,0.55) !important; } html.dark .bc-name { color: #FFFFFF !important; } html.dark .bc-desc { color: #BCB2EE !important; } html.dark .bc-arrow { color: #FF8A7A !important; } /* ─── questionnaire: section cards + radio chips ─── */ html.dark .section-card { background: #2B2168 !important; border-color: #5746A8 !important; box-shadow: 0 6px 0 #0F0A2E, 0 10px 24px rgba(0,0,0,0.45) !important; } html.dark .section-label { color: #FF8A7A !important; } html.dark .gender-card, html.dark .age-card { background: #332773 !important; border-color: #5746A8 !important; color: #EDE8FF !important; box-shadow: 0 3px 0 #0F0A2E !important; } html.dark .gender-label:hover .gender-card, html.dark .age-label:hover .age-card { border-color: #FFD600 !important; } /* checked state keeps its red gradient (set inline) */ html.dark .warn-box { background: #332773 !important; border-color: #5746A8 !important; color: #FBD24E !important; } /* ─── spin_wheel: landed name + status mini chips ─── */ html.dark .landed-name { color: #FFFFFF !important; text-shadow: -2px 3px 0 #0F0A2E !important; } /* ─── player_select: status chips (light pastel → dark tinted) ─── */ html.dark .sc-green { background: #0A2E12 !important; color: #4ade80 !important; } html.dark .sc-teal { background: #003D36 !important; color: #34d399 !important; } html.dark .sc-orange { background: #2A1200 !important; color: #fb923c !important; } html.dark .sc-red { background: #280808 !important; color: #f87171 !important; } html.dark .sc-purple { background: #241653 !important; color: #c4b5fd !important; } /* ─── toy_reveal: the heading line above the white reveal card ─── */ html.dark #heading-wrap p[style] { color: rgba(255,255,255,0.72) !important; } html.dark .reveal-card { box-shadow: 0 0 0 4px rgba(255,214,0,0.85), 0 0 0 8px rgba(124,90,220,0.25), 0 16px 60px rgba(0,0,0,0.55) !important; } /* ─── Generic: dark-on-yellow inline ink used across journey heroes ─── */ html.dark [style*="color:rgba(26,20,0"], html.dark [style*="color: rgba(26,20,0"] { color: #C7BFF2 !important; } /* ================================================================ RENTAL CATALOGUE — revamped shelf (select_toy) ================================================================ */ /* Wallet strip: keep a rich red gradient (don't flatten to purple) */ html.dark .wallet-strip { background: linear-gradient(135deg, #B81200, #7A0900) !important; border-color: rgba(255,214,0,0.28) !important; box-shadow: 0 5px 0 #4A0500, 0 10px 24px rgba(0,0,0,0.45) !important; } html.dark .wallet-strip .wallet-label { color: rgba(255,255,255,0.78) !important; } html.dark .wallet-strip .wallet-amount { color: #FFFFFF !important; } /* Filter bar + chips */ html.dark .filter-bar { background: #2B2168 !important; border-color: #5746A8 !important; box-shadow: 0 4px 0 #0F0A2E !important; } html.dark .filter-group + .filter-group { border-top-color: #5746A8 !important; } html.dark .filter-group-label { color: #C7BFF2 !important; } html.dark .fchip { background: #332773 !important; border-color: #5746A8 !important; color: #D8CEFF !important; } html.dark .fchip:hover { border-color: #FFD600 !important; } html.dark .fchip.active { background: #CC1500 !important; border-color: #7A0900 !important; color: #fff !important; box-shadow: 0 3px 0 #4A0500 !important; } html.dark .result-count { color: #C7BFF2 !important; } html.dark .result-count b { color: #FF8A7A !important; } /* Toy cards */ html.dark .toy-card { box-shadow: 0 5px 0 #0F0A2E !important; } html.dark .toy-card:hover { box-shadow: 0 10px 0 #0F0A2E !important; border-color: #FFD600 !important; } html.dark .toy-img { background: radial-gradient(circle at 50% 38%, #3A2E86 0%, #2B2168 80%) !important; border-bottom-color: #5746A8 !important; } html.dark .toy-pricing { border-top-color: #5746A8 !important; } html.dark .cat-pill { background: #241A5E !important; color: #C7BFF2 !important; } html.dark .price-dep { color: #BCB2EE !important; } html.dark .badge-avail { background: #0A2E12 !important; color: #4ade80 !important; } html.dark .badge-out { background: #2E0A0A !important; color: #f87171 !important; } html.dark .age-tag { background: rgba(0,0,0,0.55) !important; color: #FFD600 !important; } html.dark .out-btn { background: #241A5E !important; color: #8478B6 !important; } html.dark .toy-card.is-out:hover { border-color: #5746A8 !important; box-shadow: 0 5px 0 #0F0A2E !important; } /* ================================================================ PROFILE SCREEN — revamped ================================================================ */ html.dark .card-title { color: #C7BFF2 !important; } html.dark .info-row { border-bottom-color: #392C82 !important; } html.dark .info-icon { background: #332773 !important; } html.dark .info-icon .material-symbols-outlined { color: #FF8A7A !important; } html.dark .quick-ico { filter: saturate(0.9) brightness(0.95); } html.dark .add-child-link { color: #FF8A7A !important; } /* hero stays red-gradient in both modes; just deepen its shadow on dark */ html.dark .profile-hero { box-shadow: 0 8px 0 #4A0500, 0 16px 40px rgba(0,0,0,0.5) !important; } /* ================================================================ WALLET SCREEN — revamped credit-card balance ================================================================ */ /* Keep the balance card a rich red gradient (override the flat-surface rule) */ html.dark .balance-card { background: linear-gradient(135deg, #B81200 0%, #8B0B00 55%, #5E0700 100%) !important; border: none !important; box-shadow: 0 8px 0 #4A0500, 0 16px 40px rgba(0,0,0,0.5) !important; } html.dark .balance-card .balance-label { color: rgba(255,255,255,0.82) !important; } html.dark .balance-card .balance-amount { color: #FFFFFF !important; } html.dark .tab-nav .tab-active { color: #CC1500 !important; background: #392C82 !important; } html.dark .type-chip { background: #332773 !important; border-color: #5746A8 !important; color: #D8CEFF !important; } html.dark .type-chip:hover { border-color: #FFD600 !important; } html.dark .type-chip.active { background: #CC1500 !important; border-color: #7A0900 !important; color: #fff !important; box-shadow: 0 3px 0 #4A0500 !important; } html.dark .tx-icon-refund { background: #0c1a3a !important; } html.dark .tx-amount-refund { color: #93c5fd !important; } html.dark .tx-empty .material-symbols-outlined { color: #5746A8 !important; } /* Wallet credit-expiry surfaces */ html.dark .expiry-alert { background: #2A1E00 !important; border-color: #78560A !important; box-shadow: 0 3px 0 #0F0A2E !important; } html.dark .expiry-alert .ea-ico { background: #3D2E00 !important; } html.dark .expiry-alert .ea-ico .material-symbols-outlined { color: #FBD24E !important; } html.dark .ea-title { color: #FBD24E !important; } html.dark .ea-sub { color: #D8B24A !important; } html.dark .tx-expiry { color: #4ade80 !important; } html.dark .tx-expiry.tx-expiry-soon { color: #fbbf24 !important; } html.dark .tx-expiry.tx-expiry-gone { color: #8478B6 !important; }