/* ============================================ MYWAFACASH THEME TOKENS Enterprise-Grade Theming System Architecture: 1. Semantic tokens that adapt to theme 2. [data-theme] attribute on 3. System preference via prefers-color-scheme WCAG AA Compliance: 4.5:1 contrast minimum ============================================ */ /* ============================================ LIGHT THEME (DEFAULT) Applied when: no data-theme OR data-theme="light" ============================================ */ :root, html[data-theme="light"] { /* === SEMANTIC BACKGROUNDS === */ --theme-bg-base: #ffffff; --theme-bg-subtle: #f8f8f8; --theme-bg-muted: #f5f5f5; --theme-bg-elevated: #ffffff; --theme-bg-overlay: rgba(0, 0, 0, 0.5); /* === SEMANTIC SURFACES === */ --theme-surface: #ffffff; --theme-surface-hover: #f8f8f8; --theme-surface-active: #f0f0f0; --theme-surface-disabled: #f5f5f5; /* === SEMANTIC TEXT === */ --theme-text-primary: #333333; --theme-text-secondary: #666666; --theme-text-tertiary: #999999; --theme-text-disabled: #aaaaaa; --theme-text-inverse: #ffffff; --theme-text-on-brand: #1E2929; --theme-text-on-brand-dark: #ffffff; /* === SEMANTIC BORDERS === */ --theme-border-default: #e0e0e0; --theme-border-subtle: #eeeeee; --theme-border-strong: #cccccc; --theme-divider: #eeeeee; /* === SEMANTIC STATUS (LIGHT MODE) === */ --theme-success: #4CAF50; --theme-success-bg: #e8f5e9; --theme-success-text: #1b5e20; --theme-error: #dc3545; --theme-error-bg: #ffebee; --theme-error-text: #b71c1c; --theme-warning: #ff9800; --theme-warning-bg: #fff3e0; --theme-warning-text: #e65100; --theme-info: #2196f3; --theme-info-bg: #e3f2fd; --theme-info-text: #0d47a1; /* === SHADOWS (LIGHT MODE) === */ --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --theme-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1); --theme-shadow-color: rgba(0, 0, 0, 0.1); /* === FOCUS RING === */ --theme-focus-ring: rgba(30, 41, 41, 0.3); /* === INPUT STATES === */ --theme-input-bg: #ffffff; --theme-input-border: #e0e0e0; --theme-input-border-hover: #cccccc; --theme-input-border-focus: var(--wfc-primary); --theme-input-placeholder: #999999; /* === COLOR SCHEME FOR SCROLLBARS/FORM CONTROLS === */ color-scheme: light; } /* ============================================ DARK THEME (SOMBRE) Applied when: data-theme="dark" IMPORTANT: Avoid pure black (#000000) Use soft blacks for reduced eye strain ============================================ */ html[data-theme="dark"] { /* === SEMANTIC BACKGROUNDS === */ --theme-bg-base: #121417; --theme-bg-subtle: #1a1d21; --theme-bg-muted: #212529; --theme-bg-elevated: #2b3035; --theme-bg-overlay: rgba(0, 0, 0, 0.7); /* === SEMANTIC SURFACES === */ --theme-surface: #1a1d21; --theme-surface-hover: #2b3035; --theme-surface-active: #343a40; --theme-surface-disabled: #212529; /* === SEMANTIC TEXT === */ --theme-text-primary: #f1f3f5; --theme-text-secondary: #adb5bd; --theme-text-tertiary: #6c757d; --theme-text-disabled: #495057; --theme-text-inverse: #1a1d21; --theme-text-on-brand: #1E2929; --theme-text-on-brand-dark: #f1f3f5; /* === SEMANTIC BORDERS === */ --theme-border-default: #343a40; --theme-border-subtle: #2b3035; --theme-border-strong: #495057; --theme-divider: #2b3035; /* === SEMANTIC STATUS (DARK MODE - BRIGHTER) === */ --theme-success: #81C784; --theme-success-bg: rgba(129, 199, 132, 0.15); --theme-success-text: #a5d6a7; --theme-error: #FF6B6B; --theme-error-bg: rgba(255, 107, 107, 0.15); --theme-error-text: #ff8a8a; --theme-warning: #FFB74D; --theme-warning-bg: rgba(255, 183, 77, 0.15); --theme-warning-text: #ffcc80; --theme-info: #64B5F6; --theme-info-bg: rgba(100, 181, 246, 0.15); --theme-info-text: #90caf9; /* === SHADOWS (DARK MODE - MORE PROMINENT) === */ --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --theme-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); --theme-shadow-color: rgba(0, 0, 0, 0.4); /* === FOCUS RING === */ --theme-focus-ring: rgba(255, 223, 28, 0.4); /* === INPUT STATES === */ --theme-input-bg: #1a1d21; --theme-input-border: #343a40; --theme-input-border-hover: #495057; --theme-input-border-focus: var(--wfc-secondary); --theme-input-placeholder: #6c757d; /* === COLOR SCHEME === */ color-scheme: dark; /* ============================================ DARK MODE VARIABLE OVERRIDES Map existing variables to dark values ============================================ */ /* Background overrides */ --wfc-bg-page: var(--theme-bg-base); --wfc-bg-light: var(--theme-bg-muted); --wfc-bg-lighter: var(--theme-bg-subtle); --wfc-bg-subtle: var(--theme-bg-subtle); --wfc-card: var(--theme-surface); --wfc-card-rgb: 26, 29, 33; --wfc-background: var(--theme-bg-base); --wfc-light: var(--theme-surface); --wfc-third: var(--theme-bg-muted); /* Text overrides */ --wfc-text: var(--theme-text-primary); --wfc-text-muted: var(--theme-text-secondary); --wfc-text-disabled: var(--theme-text-tertiary); --wfc-text-hint: var(--theme-text-tertiary); --wfc-text-secondary: var(--theme-text-secondary); --wfc-dark: var(--theme-text-primary); --wfc-fourth: var(--theme-text-secondary); --wfc-fifth: var(--theme-text-tertiary); /* Border overrides */ --wfc-border: var(--theme-border-default); --wfc-border-light: var(--theme-border-subtle); --wfc-divider: var(--theme-divider); /* Status color overrides */ --wfc-success: var(--theme-success); --wfc-success-rgb: 129, 199, 132; --wfc-success-light: var(--theme-success-bg); --wfc-error: var(--theme-error); --wfc-error-rgb: 255, 107, 107; --wfc-error-light: var(--theme-error-bg); --wfc-danger: var(--theme-error); --wfc-danger-rgb: 255, 107, 107; --wfc-warning: var(--theme-warning); --wfc-warning-rgb: 255, 183, 77; --wfc-info: var(--theme-info); --wfc-info-rgb: 100, 181, 246; /* Background status overrides */ --wfc-bg-error-light: var(--theme-error-bg); --wfc-bg-success-light: var(--theme-success-bg); --wfc-bg-warning-light: var(--theme-warning-bg); /* Shadow overrides */ --wfc-shadow-sm: var(--theme-shadow-sm); --wfc-shadow-md: var(--theme-shadow-md); --wfc-shadow-lg: var(--theme-shadow-lg); --wfc-shadow-light: rgba(0, 0, 0, 0.2); --wfc-shadow-medium: rgba(0, 0, 0, 0.3); --wfc-shadow-dark: rgba(0, 0, 0, 0.4); --wfc-shadow-xs: rgba(0, 0, 0, 0.15); /* Overlay adjustments for dark mode */ --wfc-overlay-dark: rgba(0, 0, 0, 0.3); --wfc-overlay-dark-04: rgba(0, 0, 0, 0.12); --wfc-overlay-dark-05: rgba(0, 0, 0, 0.15); --wfc-overlay-dark-07: rgba(0, 0, 0, 0.2); --wfc-overlay-light: rgba(255, 255, 255, 0.1); --wfc-black-04: rgba(0, 0, 0, 0.12); --wfc-black-05: rgba(0, 0, 0, 0.15); --wfc-black-06: rgba(0, 0, 0, 0.18); --wfc-black-07: rgba(0, 0, 0, 0.2); --wfc-black-08: rgba(0, 0, 0, 0.24); --wfc-black-10: rgba(0, 0, 0, 0.3); /* White overlay adjustments */ --wfc-white-10: rgba(255, 255, 255, 0.1); --wfc-white-20: rgba(255, 255, 255, 0.2); --wfc-white-90: rgba(255, 255, 255, 0.9); /* Primary overlays for dark mode */ --wfc-primary-02: rgba(241, 243, 245, 0.02); --wfc-primary-05: rgba(241, 243, 245, 0.05); --wfc-primary-06: rgba(241, 243, 245, 0.06); --wfc-primary-10: rgba(241, 243, 245, 0.10); --wfc-primary-12: rgba(241, 243, 245, 0.12); --wfc-primary-overlay: rgba(241, 243, 245, 0.10); --wfc-primary-overlay-05: rgba(241, 243, 245, 0.05); --wfc-primary-overlay-06: rgba(241, 243, 245, 0.06); /* Status overlays for dark mode */ --wfc-success-08: rgba(129, 199, 132, 0.08); --wfc-success-10: rgba(129, 199, 132, 0.10); --wfc-success-15: rgba(129, 199, 132, 0.15); --wfc-success-20: rgba(129, 199, 132, 0.20); --wfc-success-overlay: rgba(129, 199, 132, 0.10); --wfc-error-08: rgba(255, 107, 107, 0.08); --wfc-error-10: rgba(255, 107, 107, 0.10); --wfc-error-15: rgba(255, 107, 107, 0.15); --wfc-error-20: rgba(255, 107, 107, 0.20); --wfc-error-overlay: rgba(255, 107, 107, 0.10); --wfc-warning-10: rgba(255, 183, 77, 0.10); --wfc-warning-15: rgba(255, 183, 77, 0.15); --wfc-warning-20: rgba(255, 183, 77, 0.20); --wfc-warning-overlay: rgba(255, 183, 77, 0.10); --wfc-info-10: rgba(100, 181, 246, 0.10); --wfc-info-20: rgba(100, 181, 246, 0.20); --wfc-info-overlay: rgba(100, 181, 246, 0.10); /* WAFA aliases */ --wafa-background: var(--theme-bg-base); --wafa-bg: var(--theme-bg-base); --wafa-bg-page: var(--theme-bg-base); --wafa-bg-light: var(--theme-bg-muted); --wafa-bg-lighter: var(--theme-bg-subtle); --wafa-bg-subtle: var(--theme-bg-subtle); --wafa-surface: var(--theme-surface); --wafa-surface-elevated: var(--theme-bg-elevated); --wafa-card: var(--theme-surface); --wafa-card-bg: var(--theme-surface); --wafa-light: var(--theme-surface); --wafa-text-primary: var(--theme-text-primary); --wafa-text-secondary: var(--theme-text-secondary); --wafa-text-tertiary: var(--theme-text-tertiary); --wafa-text-disabled: var(--theme-text-disabled); --wafa-text-muted: var(--theme-text-secondary); --wafa-text-hint: var(--theme-text-tertiary); --wafa-text: var(--theme-text-primary); --wafa-dark: var(--theme-text-primary); --wafa-border: var(--theme-border-default); --wafa-border-color: var(--theme-border-default); --wafa-border-light: var(--theme-border-subtle); --wafa-divider: var(--theme-divider); --wafa-disabled: var(--theme-text-disabled); --wafa-disabled-bg: var(--theme-surface-disabled); --wafa-disabled-text: var(--theme-text-disabled); /* Grey scale inversion for dark mode */ --wafa-gray-50: #1a1d21; --wafa-gray-100: #212529; --wafa-gray-200: #2b3035; --wafa-gray-300: #343a40; --wafa-gray-400: #495057; --wafa-gray-500: #6c757d; --wafa-gray-600: #adb5bd; --wafa-gray-700: #ced4da; --wafa-gray-800: #e9ecef; --wafa-gray-900: #f1f3f5; /* WFC grey scale */ --wfc-grey-light: #495057; --wfc-grey-medium: #adb5bd; --wfc-grey-dark: #6c757d; /* Color primitives - inverted for dark mode */ --color-grey-900: 241, 243, 245; --color-grey-700: 173, 181, 189; --color-grey-500: 108, 117, 125; --color-grey-400: 108, 117, 125; --color-grey-300: 52, 58, 64; --color-grey-200: 43, 48, 53; --color-grey-100: 33, 37, 41; --color-grey-50: 26, 29, 33; /* Swap white/black semantically */ --wafa-white: #1a1d21; --wafa-black: #f1f3f5; --color-white: 26, 29, 33; --color-black: 241, 243, 245; } /* ============================================ SYSTEM PREFERENCE (data-theme="system") Follows OS/Browser preference ============================================ */ @media (prefers-color-scheme: dark) { html[data-theme="system"] { /* Copy all dark theme variables */ --theme-bg-base: #121417; --theme-bg-subtle: #1a1d21; --theme-bg-muted: #212529; --theme-bg-elevated: #2b3035; --theme-bg-overlay: rgba(0, 0, 0, 0.7); --theme-surface: #1a1d21; --theme-surface-hover: #2b3035; --theme-surface-active: #343a40; --theme-surface-disabled: #212529; --theme-text-primary: #f1f3f5; --theme-text-secondary: #adb5bd; --theme-text-tertiary: #6c757d; --theme-text-disabled: #495057; --theme-text-inverse: #1a1d21; --theme-text-on-brand: #1E2929; --theme-text-on-brand-dark: #f1f3f5; --theme-border-default: #343a40; --theme-border-subtle: #2b3035; --theme-border-strong: #495057; --theme-divider: #2b3035; --theme-success: #81C784; --theme-success-bg: rgba(129, 199, 132, 0.15); --theme-success-text: #a5d6a7; --theme-error: #FF6B6B; --theme-error-bg: rgba(255, 107, 107, 0.15); --theme-error-text: #ff8a8a; --theme-warning: #FFB74D; --theme-warning-bg: rgba(255, 183, 77, 0.15); --theme-warning-text: #ffcc80; --theme-info: #64B5F6; --theme-info-bg: rgba(100, 181, 246, 0.15); --theme-info-text: #90caf9; --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --theme-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --theme-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); --theme-shadow-color: rgba(0, 0, 0, 0.4); --theme-focus-ring: rgba(255, 223, 28, 0.4); --theme-input-bg: #1a1d21; --theme-input-border: #343a40; --theme-input-border-hover: #495057; --theme-input-border-focus: var(--wfc-secondary); --theme-input-placeholder: #6c757d; color-scheme: dark; /* All variable overrides - copy from dark theme */ --wfc-bg-page: var(--theme-bg-base); --wfc-bg-light: var(--theme-bg-muted); --wfc-bg-lighter: var(--theme-bg-subtle); --wfc-bg-subtle: var(--theme-bg-subtle); --wfc-card: var(--theme-surface); --wfc-card-rgb: 26, 29, 33; --wfc-background: var(--theme-bg-base); --wfc-light: var(--theme-surface); --wfc-third: var(--theme-bg-muted); --wfc-text: var(--theme-text-primary); --wfc-text-muted: var(--theme-text-secondary); --wfc-text-disabled: var(--theme-text-tertiary); --wfc-text-hint: var(--theme-text-tertiary); --wfc-text-secondary: var(--theme-text-secondary); --wfc-dark: var(--theme-text-primary); --wfc-fourth: var(--theme-text-secondary); --wfc-fifth: var(--theme-text-tertiary); --wfc-border: var(--theme-border-default); --wfc-border-light: var(--theme-border-subtle); --wfc-divider: var(--theme-divider); --wfc-success: var(--theme-success); --wfc-success-rgb: 129, 199, 132; --wfc-error: var(--theme-error); --wfc-error-rgb: 255, 107, 107; --wfc-danger: var(--theme-error); --wfc-warning: var(--theme-warning); --wfc-info: var(--theme-info); --wafa-background: var(--theme-bg-base); --wafa-surface: var(--theme-surface); --wafa-text-primary: var(--theme-text-primary); --wafa-text-secondary: var(--theme-text-secondary); --wafa-border: var(--theme-border-default); --wafa-divider: var(--theme-divider); --wafa-gray-50: #1a1d21; --wafa-gray-100: #212529; --wafa-gray-200: #2b3035; --wafa-gray-300: #343a40; --wafa-gray-400: #495057; --wafa-gray-500: #6c757d; --wafa-gray-600: #adb5bd; --wafa-gray-700: #ced4da; --wafa-gray-800: #e9ecef; --wafa-gray-900: #f1f3f5; } } /* Light mode for system preference - uses default :root values */ @media (prefers-color-scheme: light) { html[data-theme="system"] { /* No overrides needed - defaults to light */ } } /* ============================================ COMPONENT-SPECIFIC DARK MODE FIXES Target specific components that need extra help ============================================ */ /* Fix hardcoded colors in dynamic-services.css */ html[data-theme="dark"] .dynamic-service-page input, html[data-theme="dark"] .dynamic-service-page textarea, html[data-theme="dark"] .dynamic-service-page select, html[data-theme="dark"] .dynamic-service-page input.mud-input-slot, html[data-theme="dark"] .dynamic-service-page input.mud-input-root, html[data-theme="dark"] .dynamic-service-page .mud-input-slot input { color: var(--theme-text-primary) !important; -webkit-text-fill-color: var(--theme-text-primary) !important; background-color: var(--theme-input-bg) !important; } html[data-theme="dark"] .dynamic-service-page input::placeholder, html[data-theme="dark"] .dynamic-service-page textarea::placeholder { color: var(--theme-input-placeholder) !important; -webkit-text-fill-color: var(--theme-input-placeholder) !important; } /* System mode - dark preference */ @media (prefers-color-scheme: dark) { html[data-theme="system"] .dynamic-service-page input, html[data-theme="system"] .dynamic-service-page textarea, html[data-theme="system"] .dynamic-service-page select, html[data-theme="system"] .dynamic-service-page input.mud-input-slot, html[data-theme="system"] .dynamic-service-page input.mud-input-root, html[data-theme="system"] .dynamic-service-page .mud-input-slot input { color: var(--theme-text-primary) !important; -webkit-text-fill-color: var(--theme-text-primary) !important; background-color: var(--theme-input-bg) !important; } html[data-theme="system"] .dynamic-service-page input::placeholder, html[data-theme="system"] .dynamic-service-page textarea::placeholder { color: var(--theme-input-placeholder) !important; -webkit-text-fill-color: var(--theme-input-placeholder) !important; } } /* MudBlazor component overrides for dark mode */ html[data-theme="dark"] { --mud-palette-surface: var(--theme-surface); --mud-palette-background: var(--theme-bg-base); --mud-palette-text-primary: var(--theme-text-primary); --mud-palette-text-secondary: var(--theme-text-secondary); --mud-palette-divider: var(--theme-divider); --mud-palette-lines-default: var(--theme-border-default); --mud-palette-lines-inputs: var(--theme-input-border); --mud-palette-action-default: var(--theme-text-secondary); --mud-palette-action-disabled: var(--theme-text-disabled); --mud-palette-action-disabled-background: var(--theme-surface-disabled); } @media (prefers-color-scheme: dark) { html[data-theme="system"] { --mud-palette-surface: var(--theme-surface); --mud-palette-background: var(--theme-bg-base); --mud-palette-text-primary: var(--theme-text-primary); --mud-palette-text-secondary: var(--theme-text-secondary); --mud-palette-divider: var(--theme-divider); --mud-palette-lines-default: var(--theme-border-default); --mud-palette-lines-inputs: var(--theme-input-border); --mud-palette-action-default: var(--theme-text-secondary); --mud-palette-action-disabled: var(--theme-text-disabled); --mud-palette-action-disabled-background: var(--theme-surface-disabled); } } /* ============================================ TRANSITION FOR SMOOTH THEME SWITCHING ============================================ */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } /* ============================================ DARK MODE INPUT ELEMENT OVERRIDES Ensures all form inputs adapt to dark theme ============================================ */ /* Dark mode - Login form wrappers */ html[data-theme="dark"] .phone-input-wrapper, html[data-theme="dark"] .password-input-wrapper { background: var(--theme-surface) !important; border-color: var(--theme-border-default) !important; } html[data-theme="dark"] .phone-input-wrapper:focus-within, html[data-theme="dark"] .password-input-wrapper:focus-within { border-color: var(--wfc-secondary) !important; } /* Dark mode - All inputs */ html[data-theme="dark"] input, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: transparent !important; color: var(--theme-text-primary) !important; border-color: var(--theme-input-border) !important; caret-color: var(--wfc-secondary); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--theme-input-placeholder) !important; opacity: 1; } html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { border-color: var(--wfc-secondary) !important; outline: none; } /* Dark mode - Browser autofill override */ html[data-theme="dark"] input:-webkit-autofill, html[data-theme="dark"] input:-webkit-autofill:hover, html[data-theme="dark"] input:-webkit-autofill:focus, html[data-theme="dark"] input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px var(--theme-surface) inset !important; -webkit-text-fill-color: var(--theme-text-primary) !important; box-shadow: 0 0 0 30px var(--theme-surface) inset !important; transition: background-color 5000s ease-in-out 0s; } /* System preference - dark mode */ @media (prefers-color-scheme: dark) { html[data-theme="system"] .phone-input-wrapper, html[data-theme="system"] .password-input-wrapper { background: var(--theme-surface) !important; border-color: var(--theme-border-default) !important; } html[data-theme="system"] .phone-input-wrapper:focus-within, html[data-theme="system"] .password-input-wrapper:focus-within { border-color: var(--wfc-secondary) !important; } html[data-theme="system"] input, html[data-theme="system"] input[type="text"], html[data-theme="system"] input[type="password"], html[data-theme="system"] input[type="email"], html[data-theme="system"] input[type="tel"], html[data-theme="system"] input[type="number"], html[data-theme="system"] input[type="search"], html[data-theme="system"] textarea, html[data-theme="system"] select { background-color: transparent !important; color: var(--theme-text-primary) !important; border-color: var(--theme-input-border) !important; caret-color: var(--wfc-secondary); } html[data-theme="system"] input::placeholder, html[data-theme="system"] textarea::placeholder { color: var(--theme-input-placeholder) !important; opacity: 1; } html[data-theme="system"] input:focus, html[data-theme="system"] textarea:focus, html[data-theme="system"] select:focus { border-color: var(--wfc-secondary) !important; outline: none; } /* Autofill override for system preference dark */ html[data-theme="system"] input:-webkit-autofill, html[data-theme="system"] input:-webkit-autofill:hover, html[data-theme="system"] input:-webkit-autofill:focus, html[data-theme="system"] input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px var(--theme-surface) inset !important; -webkit-text-fill-color: var(--theme-text-primary) !important; box-shadow: 0 0 0 30px var(--theme-surface) inset !important; transition: background-color 5000s ease-in-out 0s; } } /* ============================================ DARK MODE COMPONENT OVERRIDES All component-specific dark mode styles ============================================ */ /* --- Global Input Text Color Override --- */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] input.mud-input-slot, html[data-theme="dark"] input.mud-input-root, html[data-theme="dark"] .mud-input input, html[data-theme="dark"] .mud-input textarea, html[data-theme="dark"] .mud-input-outlined input, html[data-theme="dark"] .mud-input .mud-input-slot, html[data-theme="dark"] .mud-select-input, html[data-theme="dark"] .phone-input, html[data-theme="dark"] .password-input { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder, html[data-theme="dark"] .mud-input input::placeholder, html[data-theme="dark"] .mud-input textarea::placeholder, html[data-theme="dark"] .mud-input-outlined input::placeholder { color: #6c757d !important; -webkit-text-fill-color: #6c757d !important; opacity: 1 !important; } /* --- Login Form Wrappers --- */ html[data-theme="dark"] .phone-input-wrapper, html[data-theme="dark"] .password-input-wrapper { background: #1a1d21 !important; border-color: #343a40 !important; } html[data-theme="dark"] .phone-input-wrapper input, html[data-theme="dark"] .password-input-wrapper input { background: transparent !important; color: #f1f3f5 !important; } html[data-theme="dark"] .phone-input-wrapper input::placeholder, html[data-theme="dark"] .password-input-wrapper input::placeholder { color: #6c757d !important; } html[data-theme="dark"] .phone-prefix { color: #f1f3f5 !important; } html[data-theme="dark"] .phone-divider { background: #343a40 !important; } /* Autofill override */ html[data-theme="dark"] .phone-input-wrapper input:-webkit-autofill, html[data-theme="dark"] .password-input-wrapper input:-webkit-autofill, html[data-theme="dark"] .phone-input-wrapper input:-webkit-autofill:hover, html[data-theme="dark"] .password-input-wrapper input:-webkit-autofill:hover, html[data-theme="dark"] .phone-input-wrapper input:-webkit-autofill:focus, html[data-theme="dark"] .password-input-wrapper input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px #1a1d21 inset !important; -webkit-text-fill-color: #f1f3f5 !important; box-shadow: 0 0 0 30px #1a1d21 inset !important; caret-color: #FFDF1C; } /* --- Checkbox --- */ html[data-theme="dark"] .checkbox-icon { background: #1a1d21 !important; border-color: #343a40 !important; } html[data-theme="dark"] .checkbox-label input:checked + .checkbox-icon { background: var(--wfc-secondary) !important; border-color: var(--wfc-secondary) !important; color: #1E2929 !important; } /* --- Step Indicator --- */ html[data-theme="dark"] .step-dot { background: #2b3035 !important; color: #6c757d !important; border-color: #343a40 !important; } html[data-theme="dark"] .step-dot.active { background: #FFDF1C !important; color: #1E2929 !important; border-color: #FFDF1C !important; } html[data-theme="dark"] .step-dot.completed { background: #FFDF1C !important; color: #1E2929 !important; border-color: #FFDF1C !important; } html[data-theme="dark"] .step-line { background: #343a40 !important; } html[data-theme="dark"] .step-line.completed { background: #FFDF1C !important; } /* --- OTP Input --- */ html[data-theme="dark"] .otp-input, html[data-theme="dark"] .wafa-otp-input { background: #2b3035 !important; border-color: #343a40 !important; color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; } html[data-theme="dark"] .otp-input:focus, html[data-theme="dark"] .wafa-otp-input:focus { border-color: #FFDF1C !important; background: #1a1d21 !important; } html[data-theme="dark"] .otp-input.filled { border-color: #81C784 !important; } html[data-theme="dark"] .otp-timer { background: #2b3035 !important; } html[data-theme="dark"] .otp-timer span { color: #adb5bd !important; } html[data-theme="dark"] .otp-timer strong { color: #FFDF1C !important; } html[data-theme="dark"] .otp-phone-info { background: #2b3035 !important; } html[data-theme="dark"] .otp-message { color: #adb5bd !important; } html[data-theme="dark"] .otp-phone { color: #FFDF1C !important; } html[data-theme="dark"] .resend-question { color: #adb5bd !important; } html[data-theme="dark"] .resend-countdown { color: #6c757d !important; } html[data-theme="dark"] .countdown-time { color: #FFDF1C !important; } /* --- Form Hints --- */ html[data-theme="dark"] .form-hint { color: #adb5bd !important; } /* --- Back Button --- */ html[data-theme="dark"] .btn-back-register { color: #adb5bd !important; border-color: #343a40 !important; } /* --- Links (forgot-link, terms links) --- */ html[data-theme="dark"] .forgot-link, html[data-theme="dark"] .terms-checkbox a, html[data-theme="dark"] .terms-text a { color: #FFDF1C !important; } html[data-theme="dark"] .forgot-link:hover, html[data-theme="dark"] .terms-checkbox a:hover, html[data-theme="dark"] .terms-text a:hover { color: #ffe566 !important; } /* --- Dashboard & Widget Titles --- */ html[data-theme="dark"] .dashboard-header .mud-typography-h5, html[data-theme="dark"] .dashboard-header .font-weight-bold { color: #f1f3f5 !important; } html[data-theme="dark"] .widget-title { color: #f1f3f5 !important; } html[data-theme="dark"] .widget-action { color: var(--wfc-secondary) !important; } html[data-theme="dark"] .widget-action:hover:not(:disabled) { background-color: rgba(255, 223, 28, 0.15) !important; } html[data-theme="dark"] .section-title { color: #adb5bd !important; } /* ============================================ DASHBOARD WIDGETS - DARK MODE ============================================ */ /* --- MudPaper Widget Background (all widgets) --- */ html[data-theme="dark"] .favorites-widget, html[data-theme="dark"] .transactions-widget, html[data-theme="dark"] .services-widget, html[data-theme="dark"] .help-widget, html[data-theme="dark"] .beneficiaries-widget { background: #1a1d21 !important; border-color: #343a40 !important; } /* --- Favorites Widget --- */ html[data-theme="dark"] .favorites-widget .favorite-label { color: #adb5bd !important; } html[data-theme="dark"] .favorites-widget .favorite-icon { background: linear-gradient(135deg, rgba(255, 223, 28, 0.15) 0%, rgba(255, 223, 28, 0.05) 100%) !important; } html[data-theme="dark"] .favorites-widget .favorite-icon .mud-icon-root { color: #FFDF1C !important; } html[data-theme="dark"] .favorites-widget .favorite-item:hover { background-color: #2b3035 !important; } html[data-theme="dark"] .favorites-widget .add-item .add-icon { background: #2b3035 !important; border-color: #495057 !important; } html[data-theme="dark"] .favorites-widget .add-item .add-icon .mud-icon-root { color: #adb5bd !important; } /* Favorites Edit Mode */ html[data-theme="dark"] .favorites-widget .edit-mode-container { background: #1a1d21 !important; } html[data-theme="dark"] .favorites-widget .edit-section { background: #1a1d21 !important; } html[data-theme="dark"] .favorites-widget .section-header { border-bottom-color: #343a40 !important; } html[data-theme="dark"] .favorites-widget .section-header .section-title { color: #adb5bd !important; } html[data-theme="dark"] .favorites-widget .section-counter { color: #6c757d !important; } html[data-theme="dark"] .favorites-widget .favorite-edit-item { background: #212529 !important; border-color: #343a40 !important; } html[data-theme="dark"] .favorites-widget .favorite-edit-item:hover { background: #2b3035 !important; } html[data-theme="dark"] .favorites-widget .favorite-edit-item.selected { background: rgba(255, 223, 28, 0.1) !important; border-color: var(--wfc-secondary) !important; } html[data-theme="dark"] .favorites-widget .favorite-edit-item .selected-icon { background: var(--wfc-secondary) !important; } html[data-theme="dark"] .favorites-widget .favorite-edit-item .selected-icon .mud-icon-root { color: #1E2929 !important; } html[data-theme="dark"] .favorites-widget .favorite-edit-item .available-icon { background: #343a40 !important; } html[data-theme="dark"] .favorites-widget .favorite-edit-item .available-icon .mud-icon-root { color: #adb5bd !important; } html[data-theme="dark"] .favorites-widget .favorite-edit-label { color: #f1f3f5 !important; } html[data-theme="dark"] .favorites-widget .drag-handle .mud-icon-root { color: #6c757d !important; } html[data-theme="dark"] .favorites-widget .remove-btn { background: rgba(255, 107, 107, 0.15) !important; color: #FF6B6B !important; } html[data-theme="dark"] .favorites-widget .remove-btn .mud-icon-root { color: #FF6B6B !important; } html[data-theme="dark"] .favorites-widget .add-btn { background: rgba(129, 199, 132, 0.15) !important; color: #81C784 !important; } html[data-theme="dark"] .favorites-widget .add-btn .mud-icon-root { color: #81C784 !important; } html[data-theme="dark"] .favorites-widget .cancel-btn { color: #adb5bd !important; } html[data-theme="dark"] .favorites-widget .save-btn { background: var(--wfc-secondary) !important; color: #1E2929 !important; } html[data-theme="dark"] .favorites-widget .max-warning { background: rgba(255, 183, 77, 0.15) !important; color: #FFB74D !important; } /* --- Transactions Widget --- */ html[data-theme="dark"] .transactions-widget .transaction-item { background-color: #212529 !important; } html[data-theme="dark"] .transactions-widget .transaction-item:not(.skeleton):hover { background-color: #2b3035 !important; } html[data-theme="dark"] .transactions-widget .tx-description { color: #f1f3f5 !important; } html[data-theme="dark"] .transactions-widget .tx-date { color: #6c757d !important; } html[data-theme="dark"] .transactions-widget .tx-amount { color: #f1f3f5 !important; } html[data-theme="dark"] .transactions-widget .tx-amount.credit { color: #81C784 !important; } html[data-theme="dark"] .transactions-widget .tx-icon.credit { background-color: rgba(129, 199, 132, 0.15) !important; color: #81C784 !important; } html[data-theme="dark"] .transactions-widget .tx-icon.credit .mud-icon-root { color: #81C784 !important; } html[data-theme="dark"] .transactions-widget .tx-icon.debit { background-color: rgba(255, 223, 28, 0.15) !important; color: #FFDF1C !important; } html[data-theme="dark"] .transactions-widget .tx-icon.debit .mud-icon-root { color: #FFDF1C !important; } html[data-theme="dark"] .transactions-widget .empty-state { color: #6c757d !important; } html[data-theme="dark"] .transactions-widget .empty-icon { color: #495057 !important; } html[data-theme="dark"] .transactions-widget .empty-icon .mud-icon-root { color: #495057 !important; } html[data-theme="dark"] .transactions-widget .empty-text { color: #6c757d !important; } /* --- Quick Services Widget --- */ html[data-theme="dark"] .services-widget .service-item:not(.skeleton):hover { background-color: #2b3035 !important; } html[data-theme="dark"] .services-widget .service-label { color: #adb5bd !important; } html[data-theme="dark"] .services-widget .service-icon { background: linear-gradient(135deg, rgba(255, 223, 28, 0.15) 0%, rgba(255, 223, 28, 0.05) 100%) !important; } html[data-theme="dark"] .services-widget .service-icon .mud-icon-root { color: #FFDF1C !important; } /* Service icon color variants */ html[data-theme="dark"] .services-widget .service-icon.telecom { background: linear-gradient(135deg, rgba(100, 181, 246, 0.2) 0%, rgba(100, 181, 246, 0.1) 100%) !important; } html[data-theme="dark"] .services-widget .service-icon.telecom .mud-icon-root { color: #64B5F6 !important; } html[data-theme="dark"] .services-widget .service-icon.jawaz { background: linear-gradient(135deg, rgba(129, 199, 132, 0.2) 0%, rgba(129, 199, 132, 0.1) 100%) !important; } html[data-theme="dark"] .services-widget .service-icon.jawaz .mud-icon-root { color: #81C784 !important; } html[data-theme="dark"] .services-widget .service-icon.bills { background: linear-gradient(135deg, rgba(255, 183, 77, 0.2) 0%, rgba(255, 183, 77, 0.1) 100%) !important; } html[data-theme="dark"] .services-widget .service-icon.bills .mud-icon-root { color: #FFB74D !important; } html[data-theme="dark"] .services-widget .service-icon.merchant { background: linear-gradient(135deg, rgba(186, 104, 200, 0.2) 0%, rgba(186, 104, 200, 0.1) 100%) !important; } html[data-theme="dark"] .services-widget .service-icon.merchant .mud-icon-root { color: #BA68C8 !important; } html[data-theme="dark"] .services-widget .service-icon.qr { background: linear-gradient(135deg, rgba(77, 182, 172, 0.2) 0%, rgba(77, 182, 172, 0.1) 100%) !important; } html[data-theme="dark"] .services-widget .service-icon.qr .mud-icon-root { color: #4DB6AC !important; } html[data-theme="dark"] .services-widget .service-icon.history { background: linear-gradient(135deg, rgba(144, 164, 174, 0.2) 0%, rgba(144, 164, 174, 0.1) 100%) !important; } html[data-theme="dark"] .services-widget .service-icon.history .mud-icon-root { color: #90A4AE !important; } /* --- Header Balance (Top Navigation Bar) --- */ html[data-theme="dark"] .wfc-header-balance { background: rgba(255, 223, 28, 0.15) !important; border-color: rgba(255, 223, 28, 0.25) !important; } html[data-theme="dark"] .wfc-header-balance .balance-toggle, html[data-theme="dark"] .wfc-header-balance .balance-refresh { color: #f1f3f5 !important; } html[data-theme="dark"] .wfc-header-balance .balance-toggle svg, html[data-theme="dark"] .wfc-header-balance .balance-refresh svg { fill: #f1f3f5 !important; } html[data-theme="dark"] .wfc-header-balance .balance-toggle:hover, html[data-theme="dark"] .wfc-header-balance .balance-refresh:hover { background: rgba(255, 223, 28, 0.25) !important; color: #FFDF1C !important; } html[data-theme="dark"] .wfc-header-balance .balance-toggle:hover svg, html[data-theme="dark"] .wfc-header-balance .balance-refresh:hover svg { fill: #FFDF1C !important; } html[data-theme="dark"] .wfc-header-balance .balance-amount { color: #f1f3f5 !important; } html[data-theme="dark"] .wfc-header-balance .balance-amount .amount { color: #f1f3f5 !important; } html[data-theme="dark"] .wfc-header-balance .balance-amount .currency { color: #adb5bd !important; } html[data-theme="dark"] .wfc-header-balance .balance-skeleton { background: rgba(255, 223, 28, 0.2) !important; } /* --- Help Widget --- */ html[data-theme="dark"] .help-widget .help-section:hover { background-color: #2b3035 !important; } html[data-theme="dark"] .help-widget .help-icon { background-color: #212529 !important; } html[data-theme="dark"] .help-widget .phone-icon { background-color: rgba(129, 199, 132, 0.15) !important; } html[data-theme="dark"] .help-widget .mud-text-primary { color: #f1f3f5 !important; } html[data-theme="dark"] .help-widget .mud-text-secondary { color: #adb5bd !important; } html[data-theme="dark"] .help-widget .font-weight-medium { color: #f1f3f5 !important; } html[data-theme="dark"] .help-widget .mud-divider { border-color: #343a40 !important; } /* --- Beneficiaries Widget --- */ html[data-theme="dark"] .beneficiaries-widget .beneficiary-item:not(.skeleton):hover { background-color: #2b3035 !important; } html[data-theme="dark"] .beneficiaries-widget .beneficiary-avatar { background: var(--wfc-secondary) !important; color: #1E2929 !important; } html[data-theme="dark"] .beneficiaries-widget .beneficiary-avatar.add-avatar { background: #2b3035 !important; border-color: #495057 !important; color: #adb5bd !important; } html[data-theme="dark"] .beneficiaries-widget .beneficiary-avatar.add-avatar .mud-icon-root { color: #adb5bd !important; } html[data-theme="dark"] .beneficiaries-widget .beneficiary-name { color: #adb5bd !important; } html[data-theme="dark"] .beneficiaries-widget .bank-badge { background: #1a1d21 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] .beneficiaries-widget .bank-badge-icon { color: #adb5bd !important; } html[data-theme="dark"] .beneficiaries-widget .empty-state { color: #6c757d !important; } html[data-theme="dark"] .beneficiaries-widget .empty-icon { color: #495057 !important; } html[data-theme="dark"] .beneficiaries-widget .empty-icon .mud-icon-root { color: #495057 !important; } html[data-theme="dark"] .beneficiaries-widget .empty-text { color: #6c757d !important; } html[data-theme="dark"] .beneficiaries-widget .empty-action { border-color: var(--wfc-secondary) !important; color: var(--wfc-secondary) !important; } html[data-theme="dark"] .beneficiaries-widget .empty-action .mud-icon-root { color: var(--wfc-secondary) !important; } html[data-theme="dark"] .beneficiaries-widget .empty-action:hover { background-color: rgba(255, 223, 28, 0.15) !important; } /* --- All Widgets Skeleton Loading --- */ html[data-theme="dark"] .skeleton-icon, html[data-theme="dark"] .skeleton-text, html[data-theme="dark"] .skeleton-title, html[data-theme="dark"] .skeleton-date, html[data-theme="dark"] .skeleton-amount, html[data-theme="dark"] .skeleton-avatar, html[data-theme="dark"] .skeleton-name, html[data-theme="dark"] .skeleton-label, html[data-theme="dark"] .service-label-skeleton { background: #343a40 !important; } html[data-theme="dark"] .skeleton-pulse { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent) !important; } /* --- Balance Widget --- */ html[data-theme="dark"] .balance-widget { background: #1a1d21 !important; border-color: #343a40 !important; } /* Balance Header */ html[data-theme="dark"] .balance-header { border-bottom-color: #343a40 !important; } html[data-theme="dark"] .balance-label { color: #adb5bd !important; } html[data-theme="dark"] .balance-value { color: #f1f3f5 !important; } html[data-theme="dark"] .balance-value.balance-guest { color: #6c757d !important; } html[data-theme="dark"] .balance-currency { color: #adb5bd !important; } /* Header Buttons */ html[data-theme="dark"] .header-btn { background: rgba(255, 255, 255, 0.1) !important; color: #f1f3f5 !important; } html[data-theme="dark"] .header-btn svg { fill: #f1f3f5 !important; color: #f1f3f5 !important; } html[data-theme="dark"] .header-btn .mud-icon-root { color: #f1f3f5 !important; } html[data-theme="dark"] .header-btn:hover:not(:disabled) { background: rgba(255, 223, 28, 0.25) !important; } html[data-theme="dark"] .header-btn:hover:not(:disabled) svg { fill: #FFDF1C !important; color: #FFDF1C !important; } html[data-theme="dark"] .header-btn:hover:not(:disabled) .mud-icon-root { color: #FFDF1C !important; } html[data-theme="dark"] .header-btn:disabled { opacity: 0.3 !important; } /* Skeleton Loading */ html[data-theme="dark"] .balance-skeleton .skeleton-amount, html[data-theme="dark"] .balance-skeleton .skeleton-currency, html[data-theme="dark"] .action-skeleton { background: #343a40 !important; } html[data-theme="dark"] .skeleton-pulse { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important; } /* Action Buttons Disabled */ html[data-theme="dark"] .action-send:disabled, html[data-theme="dark"] .action-receive:disabled { background-color: #343a40 !important; color: #6c757d !important; } html[data-theme="dark"] .action-send:disabled .mud-icon-root, html[data-theme="dark"] .action-receive:disabled .mud-icon-root { color: #6c757d !important; } /* --- Sidebar Navigation --- */ /* All sidebar nav items - dark text to match footer */ html[data-theme="dark"] .wfc-sidebar .wfc-nav-item, html[data-theme="dark"] .wfc-sidebar .wfc-nav-item span, html[data-theme="dark"] .wfc-sidebar .wfc-nav-group-header, html[data-theme="dark"] .wfc-sidebar .wfc-nav-group-header span, html[data-theme="dark"] .wfc-sidebar-nav .wfc-nav-item, html[data-theme="dark"] .wfc-sidebar-nav .wfc-nav-item span { color: #1E2929 !important; } html[data-theme="dark"] .wfc-sidebar .wfc-nav-item .mud-icon-root, html[data-theme="dark"] .wfc-sidebar .wfc-nav-group-header .mud-icon-root, html[data-theme="dark"] .wfc-sidebar-nav .wfc-nav-item .mud-icon-root, html[data-theme="dark"] .wfc-sidebar .mud-icon-root { color: #1E2929 !important; } html[data-theme="dark"] .wfc-sidebar .wfc-nav-item:hover, html[data-theme="dark"] .wfc-sidebar .wfc-nav-group-header:hover { color: #1E2929 !important; background: rgba(255, 255, 255, 0.15) !important; } /* Chevron icons in nav groups */ html[data-theme="dark"] .wfc-sidebar .wfc-nav-chevron, html[data-theme="dark"] .wfc-sidebar .wfc-nav-group-header .wfc-nav-chevron { color: #1E2929 !important; } /* Sub-items in expanded groups */ html[data-theme="dark"] .wfc-sidebar .wfc-nav-group-items .wfc-nav-item, html[data-theme="dark"] .wfc-sidebar .wfc-nav-group-items .wfc-nav-item span, html[data-theme="dark"] .wfc-sidebar .wfc-nav-subitem, html[data-theme="dark"] .wfc-sidebar .wfc-nav-subitem span { color: #1E2929 !important; } html[data-theme="dark"] .wfc-sidebar .wfc-nav-group-items .mud-icon-root, html[data-theme="dark"] .wfc-sidebar .wfc-nav-subitem .mud-icon-root { color: #1E2929 !important; } /* Active nav item - dark text on yellow */ html[data-theme="dark"] .wfc-sidebar .wfc-nav-item.active, html[data-theme="dark"] .wfc-sidebar .wfc-nav-item.active span { color: #1E2929 !important; } html[data-theme="dark"] .wfc-sidebar .wfc-nav-item.active .mud-icon-root { color: #1E2929 !important; } /* Disabled services - muted dark */ html[data-theme="dark"] .wfc-sidebar .wfc-service-disabled, html[data-theme="dark"] .wfc-sidebar .wfc-service-disabled span, html[data-theme="dark"] .wfc-sidebar .wfc-nav-item.wfc-service-disabled, html[data-theme="dark"] .wfc-sidebar .wfc-nav-item.wfc-service-disabled span, html[data-theme="dark"] .wfc-sidebar button.wfc-service-disabled, html[data-theme="dark"] .wfc-sidebar button.wfc-service-disabled span { color: rgba(0, 0, 0, 0.35) !important; opacity: 1 !important; } html[data-theme="dark"] .wfc-sidebar .wfc-service-disabled .mud-icon-root, html[data-theme="dark"] .wfc-sidebar .wfc-nav-item.wfc-service-disabled .mud-icon-root, html[data-theme="dark"] .wfc-sidebar button.wfc-service-disabled .mud-icon-root { color: rgba(0, 0, 0, 0.35) !important; } /* Sidebar Footer - same dark text */ html[data-theme="dark"] .wfc-sidebar-footer { color: #1E2929 !important; } html[data-theme="dark"] .wfc-sidebar-footer .wfc-nav-item, html[data-theme="dark"] .wfc-sidebar-footer .wfc-nav-item span, html[data-theme="dark"] .wfc-sidebar-footer a, html[data-theme="dark"] .wfc-sidebar-footer a span { color: #1E2929 !important; } html[data-theme="dark"] .wfc-sidebar-footer .mud-icon-root, html[data-theme="dark"] .wfc-sidebar-footer .wfc-nav-item .mud-icon-root, html[data-theme="dark"] .wfc-sidebar-footer a .mud-icon-root, html[data-theme="dark"] .wfc-sidebar-footer svg { color: #1E2929 !important; fill: #1E2929 !important; } html[data-theme="dark"] .wfc-user-level-badge, html[data-theme="dark"] .wfc-user-level-badge span, html[data-theme="dark"] .wfc-user-level-badge .mud-icon-root { color: #1E2929 !important; } /* ============================================ SYSTEM PREFERENCE DARK MODE COMPONENT OVERRIDES ============================================ */ @media (prefers-color-scheme: dark) { /* Global Input Text */ html[data-theme="system"] input, html[data-theme="system"] textarea, html[data-theme="system"] select, html[data-theme="system"] input.mud-input-slot, html[data-theme="system"] input.mud-input-root, html[data-theme="system"] .mud-input input, html[data-theme="system"] .mud-input textarea, html[data-theme="system"] .mud-input-outlined input, html[data-theme="system"] .mud-input .mud-input-slot, html[data-theme="system"] .mud-select-input, html[data-theme="system"] .phone-input, html[data-theme="system"] .password-input { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; } html[data-theme="system"] input::placeholder, html[data-theme="system"] textarea::placeholder, html[data-theme="system"] .mud-input input::placeholder, html[data-theme="system"] .mud-input textarea::placeholder, html[data-theme="system"] .mud-input-outlined input::placeholder { color: #6c757d !important; -webkit-text-fill-color: #6c757d !important; opacity: 1 !important; } /* Login Form Wrappers */ html[data-theme="system"] .phone-input-wrapper, html[data-theme="system"] .password-input-wrapper { background: #1a1d21 !important; border-color: #343a40 !important; } html[data-theme="system"] .phone-input-wrapper input, html[data-theme="system"] .password-input-wrapper input { background: transparent !important; color: #f1f3f5 !important; } html[data-theme="system"] .phone-prefix { color: #f1f3f5 !important; } html[data-theme="system"] .phone-divider { background: #343a40 !important; } html[data-theme="system"] .phone-input-wrapper input:-webkit-autofill, html[data-theme="system"] .password-input-wrapper input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #1a1d21 inset !important; -webkit-text-fill-color: #f1f3f5 !important; box-shadow: 0 0 0 30px #1a1d21 inset !important; } /* Checkbox */ html[data-theme="system"] .checkbox-icon { background: #1a1d21 !important; border-color: #343a40 !important; } html[data-theme="system"] .checkbox-label input:checked + .checkbox-icon { background: var(--wfc-secondary) !important; border-color: var(--wfc-secondary) !important; color: #1E2929 !important; } /* Step Indicator */ html[data-theme="system"] .step-dot { background: #2b3035 !important; color: #6c757d !important; border-color: #343a40 !important; } html[data-theme="system"] .step-dot.active { background: #FFDF1C !important; color: #1E2929 !important; border-color: #FFDF1C !important; } html[data-theme="system"] .step-dot.completed { background: #FFDF1C !important; color: #1E2929 !important; border-color: #FFDF1C !important; } html[data-theme="system"] .step-line { background: #343a40 !important; } html[data-theme="system"] .step-line.completed { background: #FFDF1C !important; } /* OTP Input */ html[data-theme="system"] .otp-input, html[data-theme="system"] .wafa-otp-input { background: #2b3035 !important; border-color: #343a40 !important; color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; } html[data-theme="system"] .otp-input:focus, html[data-theme="system"] .wafa-otp-input:focus { border-color: #FFDF1C !important; background: #1a1d21 !important; } html[data-theme="system"] .otp-timer { background: #2b3035 !important; } html[data-theme="system"] .otp-timer span { color: #adb5bd !important; } html[data-theme="system"] .otp-timer strong { color: #FFDF1C !important; } html[data-theme="system"] .otp-phone-info { background: #2b3035 !important; } html[data-theme="system"] .otp-message { color: #adb5bd !important; } html[data-theme="system"] .otp-phone { color: #FFDF1C !important; } /* Form Hints */ html[data-theme="system"] .form-hint { color: #adb5bd !important; } /* Back Button */ html[data-theme="system"] .btn-back-register { color: #adb5bd !important; border-color: #343a40 !important; } /* Links (forgot-link, terms links) */ html[data-theme="system"] .forgot-link, html[data-theme="system"] .terms-checkbox a, html[data-theme="system"] .terms-text a { color: #FFDF1C !important; } html[data-theme="system"] .forgot-link:hover, html[data-theme="system"] .terms-checkbox a:hover, html[data-theme="system"] .terms-text a:hover { color: #ffe566 !important; } /* Dashboard & Widget Titles */ html[data-theme="system"] .dashboard-header .mud-typography-h5, html[data-theme="system"] .dashboard-header .font-weight-bold { color: #f1f3f5 !important; } html[data-theme="system"] .widget-title { color: #f1f3f5 !important; } html[data-theme="system"] .widget-action { color: var(--wfc-secondary) !important; } html[data-theme="system"] .widget-action:hover:not(:disabled) { background-color: rgba(255, 223, 28, 0.15) !important; } html[data-theme="system"] .section-title { color: #adb5bd !important; } /* ============================================ DASHBOARD WIDGETS - SYSTEM PREFERENCE DARK ============================================ */ /* MudPaper Widget Background (all widgets) */ html[data-theme="system"] .favorites-widget, html[data-theme="system"] .transactions-widget, html[data-theme="system"] .services-widget, html[data-theme="system"] .help-widget, html[data-theme="system"] .beneficiaries-widget { background: #1a1d21 !important; border-color: #343a40 !important; } /* Favorites Widget */ html[data-theme="system"] .favorites-widget .favorite-label { color: #adb5bd !important; } html[data-theme="system"] .favorites-widget .favorite-icon { background: linear-gradient(135deg, rgba(255, 223, 28, 0.15) 0%, rgba(255, 223, 28, 0.05) 100%) !important; } html[data-theme="system"] .favorites-widget .favorite-icon .mud-icon-root { color: #FFDF1C !important; } html[data-theme="system"] .favorites-widget .favorite-item:hover { background-color: #2b3035 !important; } html[data-theme="system"] .favorites-widget .add-item .add-icon { background: #2b3035 !important; border-color: #495057 !important; } html[data-theme="system"] .favorites-widget .add-item .add-icon .mud-icon-root { color: #adb5bd !important; } /* Favorites Edit Mode */ html[data-theme="system"] .favorites-widget .favorite-edit-item { background: #212529 !important; border-color: #343a40 !important; } html[data-theme="system"] .favorites-widget .favorite-edit-item:hover { background: #2b3035 !important; } html[data-theme="system"] .favorites-widget .favorite-edit-item.selected { background: rgba(255, 223, 28, 0.1) !important; border-color: var(--wfc-secondary) !important; } html[data-theme="system"] .favorites-widget .favorite-edit-label { color: #f1f3f5 !important; } html[data-theme="system"] .favorites-widget .section-counter { color: #6c757d !important; } html[data-theme="system"] .favorites-widget .cancel-btn { color: #adb5bd !important; } html[data-theme="system"] .favorites-widget .save-btn { background: var(--wfc-secondary) !important; color: #1E2929 !important; } /* Balance Widget */ html[data-theme="system"] .balance-widget { background: #1a1d21 !important; border-color: #343a40 !important; } /* Balance Header */ html[data-theme="system"] .balance-header { border-bottom-color: #343a40 !important; } html[data-theme="system"] .balance-label { color: #adb5bd !important; } html[data-theme="system"] .balance-value { color: #f1f3f5 !important; } html[data-theme="system"] .balance-value.balance-guest { color: #6c757d !important; } html[data-theme="system"] .balance-currency { color: #adb5bd !important; } /* Header Buttons */ html[data-theme="system"] .header-btn { background: rgba(255, 255, 255, 0.1) !important; color: #f1f3f5 !important; } html[data-theme="system"] .header-btn svg { fill: #f1f3f5 !important; color: #f1f3f5 !important; } html[data-theme="system"] .header-btn .mud-icon-root { color: #f1f3f5 !important; } html[data-theme="system"] .header-btn:hover:not(:disabled) { background: rgba(255, 223, 28, 0.25) !important; } html[data-theme="system"] .header-btn:hover:not(:disabled) svg { fill: #FFDF1C !important; color: #FFDF1C !important; } html[data-theme="system"] .header-btn:hover:not(:disabled) .mud-icon-root { color: #FFDF1C !important; } html[data-theme="system"] .header-btn:disabled { opacity: 0.3 !important; } /* Skeleton Loading */ html[data-theme="system"] .balance-skeleton .skeleton-amount, html[data-theme="system"] .balance-skeleton .skeleton-currency, html[data-theme="system"] .action-skeleton { background: #343a40 !important; } /* Transactions Widget */ html[data-theme="system"] .transactions-widget .transaction-item { background-color: #212529 !important; } html[data-theme="system"] .transactions-widget .transaction-item:not(.skeleton):hover { background-color: #2b3035 !important; } html[data-theme="system"] .transactions-widget .tx-description { color: #f1f3f5 !important; } html[data-theme="system"] .transactions-widget .tx-date { color: #6c757d !important; } html[data-theme="system"] .transactions-widget .tx-amount { color: #f1f3f5 !important; } html[data-theme="system"] .transactions-widget .tx-amount.credit { color: #81C784 !important; } html[data-theme="system"] .transactions-widget .tx-icon.credit { background-color: rgba(129, 199, 132, 0.15) !important; } html[data-theme="system"] .transactions-widget .tx-icon.credit .mud-icon-root { color: #81C784 !important; } html[data-theme="system"] .transactions-widget .tx-icon.debit { background-color: rgba(255, 223, 28, 0.15) !important; } html[data-theme="system"] .transactions-widget .tx-icon.debit .mud-icon-root { color: #FFDF1C !important; } html[data-theme="system"] .transactions-widget .empty-icon .mud-icon-root { color: #495057 !important; } html[data-theme="system"] .transactions-widget .empty-text { color: #6c757d !important; } /* Quick Services Widget */ html[data-theme="system"] .services-widget .service-item:not(.skeleton):hover { background-color: #2b3035 !important; } html[data-theme="system"] .services-widget .service-label { color: #adb5bd !important; } html[data-theme="system"] .services-widget .service-icon { background: linear-gradient(135deg, rgba(255, 223, 28, 0.15) 0%, rgba(255, 223, 28, 0.05) 100%) !important; } html[data-theme="system"] .services-widget .service-icon .mud-icon-root { color: #FFDF1C !important; } html[data-theme="system"] .services-widget .service-icon.telecom { background: linear-gradient(135deg, rgba(100, 181, 246, 0.2) 0%, rgba(100, 181, 246, 0.1) 100%) !important; } html[data-theme="system"] .services-widget .service-icon.telecom .mud-icon-root { color: #64B5F6 !important; } html[data-theme="system"] .services-widget .service-icon.jawaz { background: linear-gradient(135deg, rgba(129, 199, 132, 0.2) 0%, rgba(129, 199, 132, 0.1) 100%) !important; } html[data-theme="system"] .services-widget .service-icon.jawaz .mud-icon-root { color: #81C784 !important; } html[data-theme="system"] .services-widget .service-icon.bills { background: linear-gradient(135deg, rgba(255, 183, 77, 0.2) 0%, rgba(255, 183, 77, 0.1) 100%) !important; } html[data-theme="system"] .services-widget .service-icon.bills .mud-icon-root { color: #FFB74D !important; } html[data-theme="system"] .services-widget .service-icon.merchant { background: linear-gradient(135deg, rgba(186, 104, 200, 0.2) 0%, rgba(186, 104, 200, 0.1) 100%) !important; } html[data-theme="system"] .services-widget .service-icon.merchant .mud-icon-root { color: #BA68C8 !important; } html[data-theme="system"] .services-widget .service-icon.qr { background: linear-gradient(135deg, rgba(77, 182, 172, 0.2) 0%, rgba(77, 182, 172, 0.1) 100%) !important; } html[data-theme="system"] .services-widget .service-icon.qr .mud-icon-root { color: #4DB6AC !important; } html[data-theme="system"] .services-widget .service-icon.history { background: linear-gradient(135deg, rgba(144, 164, 174, 0.2) 0%, rgba(144, 164, 174, 0.1) 100%) !important; } html[data-theme="system"] .services-widget .service-icon.history .mud-icon-root { color: #90A4AE !important; } /* Header Balance (Top Navigation Bar) */ html[data-theme="system"] .wfc-header-balance { background: rgba(255, 223, 28, 0.15) !important; border-color: rgba(255, 223, 28, 0.25) !important; } html[data-theme="system"] .wfc-header-balance .balance-toggle, html[data-theme="system"] .wfc-header-balance .balance-refresh { color: #f1f3f5 !important; } html[data-theme="system"] .wfc-header-balance .balance-toggle svg, html[data-theme="system"] .wfc-header-balance .balance-refresh svg { fill: #f1f3f5 !important; } html[data-theme="system"] .wfc-header-balance .balance-toggle:hover, html[data-theme="system"] .wfc-header-balance .balance-refresh:hover { background: rgba(255, 223, 28, 0.25) !important; color: #FFDF1C !important; } html[data-theme="system"] .wfc-header-balance .balance-toggle:hover svg, html[data-theme="system"] .wfc-header-balance .balance-refresh:hover svg { fill: #FFDF1C !important; } html[data-theme="system"] .wfc-header-balance .balance-amount { color: #f1f3f5 !important; } html[data-theme="system"] .wfc-header-balance .balance-amount .amount { color: #f1f3f5 !important; } html[data-theme="system"] .wfc-header-balance .balance-amount .currency { color: #adb5bd !important; } html[data-theme="system"] .wfc-header-balance .balance-skeleton { background: rgba(255, 223, 28, 0.2) !important; } /* Help Widget */ html[data-theme="system"] .help-widget .help-section:hover { background-color: #2b3035 !important; } html[data-theme="system"] .help-widget .help-icon { background-color: #212529 !important; } html[data-theme="system"] .help-widget .phone-icon { background-color: rgba(129, 199, 132, 0.15) !important; } html[data-theme="system"] .help-widget .font-weight-medium { color: #f1f3f5 !important; } html[data-theme="system"] .help-widget .mud-divider { border-color: #343a40 !important; } /* Beneficiaries Widget */ html[data-theme="system"] .beneficiaries-widget .beneficiary-item:not(.skeleton):hover { background-color: #2b3035 !important; } html[data-theme="system"] .beneficiaries-widget .beneficiary-avatar { background: var(--wfc-secondary) !important; color: #1E2929 !important; } html[data-theme="system"] .beneficiaries-widget .beneficiary-avatar.add-avatar { background: #2b3035 !important; border-color: #495057 !important; color: #adb5bd !important; } html[data-theme="system"] .beneficiaries-widget .beneficiary-name { color: #adb5bd !important; } html[data-theme="system"] .beneficiaries-widget .bank-badge { background: #1a1d21 !important; } html[data-theme="system"] .beneficiaries-widget .empty-icon .mud-icon-root { color: #495057 !important; } html[data-theme="system"] .beneficiaries-widget .empty-text { color: #6c757d !important; } html[data-theme="system"] .beneficiaries-widget .empty-action { border-color: var(--wfc-secondary) !important; color: var(--wfc-secondary) !important; } html[data-theme="system"] .beneficiaries-widget .empty-action:hover { background-color: rgba(255, 223, 28, 0.15) !important; } /* All Widgets Skeleton Loading */ html[data-theme="system"] .skeleton-icon, html[data-theme="system"] .skeleton-text, html[data-theme="system"] .skeleton-title, html[data-theme="system"] .skeleton-date, html[data-theme="system"] .skeleton-amount, html[data-theme="system"] .skeleton-avatar, html[data-theme="system"] .skeleton-name, html[data-theme="system"] .skeleton-label, html[data-theme="system"] .service-label-skeleton { background: #343a40 !important; } html[data-theme="system"] .skeleton-pulse { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent) !important; } html[data-theme="system"] .skeleton-pulse { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important; } /* Action Buttons Disabled */ html[data-theme="system"] .action-send:disabled, html[data-theme="system"] .action-receive:disabled { background-color: #343a40 !important; color: #6c757d !important; } html[data-theme="system"] .action-send:disabled .mud-icon-root, html[data-theme="system"] .action-receive:disabled .mud-icon-root { color: #6c757d !important; } /* Sidebar Navigation */ /* All sidebar nav items - dark text to match footer */ html[data-theme="system"] .wfc-sidebar .wfc-nav-item, html[data-theme="system"] .wfc-sidebar .wfc-nav-item span, html[data-theme="system"] .wfc-sidebar .wfc-nav-group-header, html[data-theme="system"] .wfc-sidebar .wfc-nav-group-header span, html[data-theme="system"] .wfc-sidebar-nav .wfc-nav-item, html[data-theme="system"] .wfc-sidebar-nav .wfc-nav-item span { color: #1E2929 !important; } html[data-theme="system"] .wfc-sidebar .wfc-nav-item .mud-icon-root, html[data-theme="system"] .wfc-sidebar .wfc-nav-group-header .mud-icon-root, html[data-theme="system"] .wfc-sidebar-nav .wfc-nav-item .mud-icon-root, html[data-theme="system"] .wfc-sidebar .mud-icon-root { color: #1E2929 !important; } html[data-theme="system"] .wfc-sidebar .wfc-nav-item:hover, html[data-theme="system"] .wfc-sidebar .wfc-nav-group-header:hover { color: #1E2929 !important; background: rgba(255, 255, 255, 0.15) !important; } /* Chevron icons in nav groups */ html[data-theme="system"] .wfc-sidebar .wfc-nav-chevron, html[data-theme="system"] .wfc-sidebar .wfc-nav-group-header .wfc-nav-chevron { color: #1E2929 !important; } /* Sub-items in expanded groups */ html[data-theme="system"] .wfc-sidebar .wfc-nav-group-items .wfc-nav-item, html[data-theme="system"] .wfc-sidebar .wfc-nav-group-items .wfc-nav-item span, html[data-theme="system"] .wfc-sidebar .wfc-nav-subitem, html[data-theme="system"] .wfc-sidebar .wfc-nav-subitem span { color: #1E2929 !important; } html[data-theme="system"] .wfc-sidebar .wfc-nav-group-items .mud-icon-root, html[data-theme="system"] .wfc-sidebar .wfc-nav-subitem .mud-icon-root { color: #1E2929 !important; } /* Active nav item - dark text on yellow */ html[data-theme="system"] .wfc-sidebar .wfc-nav-item.active, html[data-theme="system"] .wfc-sidebar .wfc-nav-item.active span { color: #1E2929 !important; } html[data-theme="system"] .wfc-sidebar .wfc-nav-item.active .mud-icon-root { color: #1E2929 !important; } /* Disabled services - muted dark */ html[data-theme="system"] .wfc-sidebar .wfc-service-disabled, html[data-theme="system"] .wfc-sidebar .wfc-service-disabled span, html[data-theme="system"] .wfc-sidebar .wfc-nav-item.wfc-service-disabled, html[data-theme="system"] .wfc-sidebar .wfc-nav-item.wfc-service-disabled span, html[data-theme="system"] .wfc-sidebar button.wfc-service-disabled, html[data-theme="system"] .wfc-sidebar button.wfc-service-disabled span { color: rgba(0, 0, 0, 0.35) !important; opacity: 1 !important; } html[data-theme="system"] .wfc-sidebar .wfc-service-disabled .mud-icon-root, html[data-theme="system"] .wfc-sidebar .wfc-nav-item.wfc-service-disabled .mud-icon-root, html[data-theme="system"] .wfc-sidebar button.wfc-service-disabled .mud-icon-root { color: rgba(0, 0, 0, 0.35) !important; } /* Sidebar Footer - same dark text */ html[data-theme="system"] .wfc-sidebar-footer { color: #1E2929 !important; } html[data-theme="system"] .wfc-sidebar-footer .wfc-nav-item, html[data-theme="system"] .wfc-sidebar-footer .wfc-nav-item span, html[data-theme="system"] .wfc-sidebar-footer a, html[data-theme="system"] .wfc-sidebar-footer a span { color: #1E2929 !important; } html[data-theme="system"] .wfc-sidebar-footer .mud-icon-root, html[data-theme="system"] .wfc-sidebar-footer .wfc-nav-item .mud-icon-root, html[data-theme="system"] .wfc-sidebar-footer a .mud-icon-root, html[data-theme="system"] .wfc-sidebar-footer svg { color: #1E2929 !important; fill: #1E2929 !important; } html[data-theme="system"] .wfc-user-level-badge, html[data-theme="system"] .wfc-user-level-badge span, html[data-theme="system"] .wfc-user-level-badge .mud-icon-root { color: #1E2929 !important; } } /* ============================================ DYNAMIC SERVICES, BILLING, BINGA - DARK MODE ============================================ */ /* --- Dynamic Service Page Inputs - Comprehensive Override --- */ /* High specificity selectors to override dynamic-services.css */ html[data-theme="dark"] .billing-payment-page .dynamic-transaction-wizard .dynamic-form-step input.mud-input-slot.mud-input-root.mud-input-root-outlined, html[data-theme="dark"] .billing-payment-page .dynamic-transaction-wizard .dynamic-form-step input.mud-input-slot, html[data-theme="dark"] .billing-payment-page .dynamic-transaction-wizard .dynamic-form-step input, html[data-theme="dark"] .billing-payment-page .dynamic-form-step input, html[data-theme="dark"] .billing-payment-page input.mud-input-slot, html[data-theme="dark"] .billing-payment-page input, html[data-theme="dark"] .dynamic-service-page .dynamic-transaction-wizard .dynamic-form-step input.mud-input-slot, html[data-theme="dark"] .dynamic-service-page .dynamic-transaction-wizard .dynamic-form-step input, html[data-theme="dark"] .dynamic-service-page .dynamic-form-step input.mud-input-slot, html[data-theme="dark"] .dynamic-service-page .dynamic-form-step input, html[data-theme="dark"] .dynamic-service-page input, html[data-theme="dark"] .dynamic-service-page textarea, html[data-theme="dark"] .dynamic-service-page select, html[data-theme="dark"] .dynamic-service-page input.mud-input-slot, html[data-theme="dark"] .dynamic-service-page input.mud-input-root, html[data-theme="dark"] .dynamic-service-page input.mud-input-root-outlined, html[data-theme="dark"] .dynamic-service-page .mud-input-slot input, html[data-theme="dark"] .dynamic-service-page .mud-input-slot textarea, html[data-theme="dark"] .dynamic-service-page .mud-select-input, html[data-theme="dark"] .dynamic-form-step input, html[data-theme="dark"] .dynamic-form-step textarea, html[data-theme="dark"] .dynamic-form-step input.mud-input-slot, html[data-theme="dark"] .dynamic-form-step input.mud-input-root, html[data-theme="dark"] .dynamic-form-step input.mud-input-root-outlined, html[data-theme="dark"] .dynamic-form-step .mud-input-slot input, html[data-theme="dark"] .dynamic-form-step .mud-input-slot textarea, html[data-theme="dark"] .dynamic-form-step .mud-select-input, html[data-theme="dark"] .dynamic-transaction-wizard input, html[data-theme="dark"] .dynamic-transaction-wizard textarea, html[data-theme="dark"] .dynamic-transaction-wizard .mud-input-slot input, html[data-theme="dark"] .billing-billers-page input, html[data-theme="dark"] .billing-billers-page .mud-input-slot input { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; } html[data-theme="dark"] .dynamic-service-page input::placeholder, html[data-theme="dark"] .dynamic-service-page textarea::placeholder, html[data-theme="dark"] .dynamic-service-page input.mud-input-slot::placeholder, html[data-theme="dark"] .dynamic-service-page input.mud-input-root::placeholder, html[data-theme="dark"] .dynamic-service-page .mud-input-slot input::placeholder, html[data-theme="dark"] .dynamic-form-step input::placeholder, html[data-theme="dark"] .dynamic-form-step textarea::placeholder, html[data-theme="dark"] .dynamic-form-step input.mud-input-slot::placeholder, html[data-theme="dark"] .dynamic-form-step .mud-input-slot input::placeholder, html[data-theme="dark"] .dynamic-transaction-wizard input::placeholder, html[data-theme="dark"] .dynamic-transaction-wizard .mud-input-slot input::placeholder, html[data-theme="dark"] .billing-billers-page input::placeholder, html[data-theme="dark"] .billing-billers-page .mud-input-slot input::placeholder { color: #6c757d !important; -webkit-text-fill-color: #6c757d !important; opacity: 1 !important; } /* --- Dynamic Form Step Backgrounds --- */ html[data-theme="dark"] .dynamic-form-step .mud-input-slot, html[data-theme="dark"] .dynamic-form-step .mud-input-outlined, html[data-theme="dark"] .dynamic-form-step .mud-input-control, html[data-theme="dark"] .dynamic-transaction-wizard .mud-input-slot, html[data-theme="dark"] .dynamic-transaction-wizard .mud-input-outlined, html[data-theme="dark"] .dynamic-transaction-wizard .mud-input-control, html[data-theme="dark"] .billing-billers-page .mud-input-slot, html[data-theme="dark"] .billing-billers-page .mud-input-outlined { background-color: #212529 !important; background: #212529 !important; } html[data-theme="dark"] .dynamic-form-step .mud-input-outlined .mud-input-outlined-border, html[data-theme="dark"] .dynamic-transaction-wizard .mud-input-outlined .mud-input-outlined-border, html[data-theme="dark"] .billing-billers-page .mud-input-outlined .mud-input-outlined-border { border-color: #343a40 !important; } html[data-theme="dark"] .dynamic-form-step .mud-input-outlined:hover .mud-input-outlined-border, html[data-theme="dark"] .dynamic-transaction-wizard .mud-input-outlined:hover .mud-input-outlined-border, html[data-theme="dark"] .billing-billers-page .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--wfc-secondary) !important; } html[data-theme="dark"] .dynamic-form-step .mud-input-label, html[data-theme="dark"] .dynamic-transaction-wizard .mud-input-label, html[data-theme="dark"] .billing-billers-page .mud-input-label { color: #adb5bd !important; } html[data-theme="dark"] .dynamic-form-step .mud-input-adornment, html[data-theme="dark"] .dynamic-transaction-wizard .mud-input-adornment { color: #f1f3f5 !important; } /* --- Billing Payment Page --- */ html[data-theme="dark"] .billing-payment-page { background: #121417 !important; } /* --- Wizard Title --- */ html[data-theme="dark"] .dynamic-transaction-wizard .wizard-title, html[data-theme="dark"] .dynamic-transaction-wizard .mud-typography-h5, html[data-theme="dark"] .billing-payment-page .wizard-title, html[data-theme="dark"] .billing-payment-page .mud-typography-h5 { color: #f1f3f5 !important; } /* --- Input Labels (more specific) --- */ html[data-theme="dark"] .dynamic-transaction-wizard .mud-input-label, html[data-theme="dark"] .dynamic-transaction-wizard .mud-input-label-outlined, html[data-theme="dark"] .dynamic-transaction-wizard .mud-input-label-inputcontrol, html[data-theme="dark"] .billing-payment-page .mud-input-label, html[data-theme="dark"] .billing-payment-page .mud-input-label-outlined, html[data-theme="dark"] .billing-payment-page .mud-input-label-inputcontrol, html[data-theme="dark"] .dynamic-form-step .mud-input-label-outlined, html[data-theme="dark"] .dynamic-form-step .mud-input-label-inputcontrol { color: #adb5bd !important; } /* --- Helper Text --- */ html[data-theme="dark"] .dynamic-transaction-wizard .mud-input-helper-text, html[data-theme="dark"] .dynamic-transaction-wizard .mud-input-control-helper-container, html[data-theme="dark"] .billing-payment-page .mud-input-helper-text, html[data-theme="dark"] .billing-payment-page .mud-input-control-helper-container, html[data-theme="dark"] .dynamic-form-step .mud-input-helper-text, html[data-theme="dark"] .dynamic-form-step .mud-input-control-helper-container { color: #6c757d !important; } /* --- Checkbox Label --- */ html[data-theme="dark"] .dynamic-transaction-wizard .mud-checkbox p, html[data-theme="dark"] .dynamic-transaction-wizard .mud-typography-body1, html[data-theme="dark"] .billing-payment-page .mud-checkbox p, html[data-theme="dark"] .billing-payment-page .mud-typography-body1, html[data-theme="dark"] .dynamic-form-step .mud-checkbox p, html[data-theme="dark"] .dynamic-form-step .mud-typography-body1 { color: #f1f3f5 !important; } /* --- Checkbox Icon --- */ html[data-theme="dark"] .dynamic-transaction-wizard .mud-checkbox .mud-icon-root, html[data-theme="dark"] .billing-payment-page .mud-checkbox .mud-icon-root, html[data-theme="dark"] .dynamic-form-step .mud-checkbox .mud-icon-root { color: #adb5bd !important; } /* --- MudBlazor Typography in Wizard --- */ html[data-theme="dark"] .dynamic-transaction-wizard .mud-typography, html[data-theme="dark"] .billing-payment-page .mud-typography { color: #f1f3f5 !important; } html[data-theme="dark"] .dynamic-transaction-wizard .mud-secondary-text, html[data-theme="dark"] .billing-payment-page .mud-secondary-text { color: #adb5bd !important; } /* --- Step Indicator --- */ html[data-theme="dark"] .step-indicator .step-dot.pending { background: #2b3035 !important; color: #6c757d !important; border-color: #343a40 !important; } html[data-theme="dark"] .step-indicator .step-line { background: #343a40 !important; } /* --- Wizard Content --- */ html[data-theme="dark"] .wizard-content { background: #1a1d21 !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important; } /* --- Recap Step --- */ html[data-theme="dark"] .dynamic-recap-step .recap-details { background: #212529 !important; } html[data-theme="dark"] .dynamic-recap-step .recap-row { border-bottom-color: #343a40 !important; } html[data-theme="dark"] .dynamic-recap-step .recap-label { color: #adb5bd !important; } html[data-theme="dark"] .dynamic-recap-step .recap-value { color: #f1f3f5 !important; } /* --- Success Step --- */ html[data-theme="dark"] .dynamic-success-step .reference-box { background: #212529 !important; } html[data-theme="dark"] .dynamic-success-step .reference-label { color: #adb5bd !important; } html[data-theme="dark"] .dynamic-success-step .reference-value { color: #f1f3f5 !important; } html[data-theme="dark"] .dynamic-success-step .success-message { color: #adb5bd !important; } /* --- Billing Billers Page --- */ html[data-theme="dark"] .billing-billers-page { background: #1a1d21 !important; } html[data-theme="dark"] .billing-billers-page .category-header { color: #f1f3f5 !important; border-bottom-color: var(--wfc-secondary) !important; } html[data-theme="dark"] .biller-card-inner { background-color: #212529 !important; border-color: #343a40 !important; } html[data-theme="dark"] .biller-card-inner:hover { border-color: var(--wfc-secondary) !important; } html[data-theme="dark"] .biller-name { color: #f1f3f5 !important; } html[data-theme="dark"] .gateway-badge { background-color: #1a1d21 !important; } /* ============================================ TRANSACTION HISTORY - DARK MODE ============================================ */ html[data-theme="dark"] .history-page { background: #121417 !important; } html[data-theme="dark"] .history-page .page-header { background: #1a1d21 !important; } /* Header content - title and icon buttons */ html[data-theme="dark"] .history-page .header-content { background: #1a1d21 !important; } html[data-theme="dark"] .history-page .header-content .mud-typography-h6, html[data-theme="dark"] .history-page .header-content .font-weight-bold { color: #f1f3f5 !important; } html[data-theme="dark"] .history-page .header-content .mud-icon-button { color: #f1f3f5 !important; } html[data-theme="dark"] .history-page .header-content .mud-icon-button .mud-icon-root, html[data-theme="dark"] .history-page .header-content .mud-icon-button svg { color: #f1f3f5 !important; fill: #f1f3f5 !important; } html[data-theme="dark"] .history-page .header-content .mud-icon-button:hover { background: rgba(255, 255, 255, 0.1) !important; } /* Filter tabs */ html[data-theme="dark"] .history-page .filter-tabs { background: #1a1d21 !important; } html[data-theme="dark"] .history-page .tabs-container { background: transparent !important; } html[data-theme="dark"] .history-page .tab-item { color: #adb5bd !important; background: transparent !important; } html[data-theme="dark"] .history-page .tab-item:hover { background: #2b3035 !important; color: #f1f3f5 !important; } html[data-theme="dark"] .history-page .tab-item.active { color: #1E2929 !important; background: var(--wfc-secondary) !important; } /* Advanced filters */ html[data-theme="dark"] .history-page .advanced-filters { background: #212529 !important; border-color: #343a40 !important; } html[data-theme="dark"] .history-page .page-content { background: #121417 !important; } html[data-theme="dark"] .history-page .transaction-group .group-header { background: transparent !important; } html[data-theme="dark"] .history-page .group-date { color: #f1f3f5 !important; } html[data-theme="dark"] .history-page .group-count { color: #6c757d !important; } html[data-theme="dark"] .history-page .transaction-item { background: #1a1d21 !important; border-color: #343a40 !important; } html[data-theme="dark"] .history-page .transaction-item:hover { background: #212529 !important; } html[data-theme="dark"] .history-page .tx-title { color: #f1f3f5 !important; } html[data-theme="dark"] .history-page .tx-subtitle { color: #adb5bd !important; } html[data-theme="dark"] .history-page .tx-chevron { color: #6c757d !important; } html[data-theme="dark"] .history-page .empty-state { color: #adb5bd !important; } html[data-theme="dark"] .history-page .empty-icon { background: #212529 !important; } html[data-theme="dark"] .history-page .empty-icon .mud-icon-root { color: #495057 !important; } /* Transaction Icons (tx-avatar) - More visible in dark mode */ html[data-theme="dark"] .history-page .tx-avatar { background: #2b3035 !important; } html[data-theme="dark"] .history-page .tx-avatar.credit { background: linear-gradient(135deg, rgba(129, 199, 132, 0.25) 0%, rgba(129, 199, 132, 0.15) 100%) !important; color: #81C784 !important; } html[data-theme="dark"] .history-page .tx-avatar.credit .mud-icon-root { color: #81C784 !important; } html[data-theme="dark"] .history-page .tx-avatar.debit { background: linear-gradient(135deg, rgba(255, 223, 28, 0.25) 0%, rgba(255, 223, 28, 0.15) 100%) !important; color: #FFDF1C !important; } html[data-theme="dark"] .history-page .tx-avatar.debit .mud-icon-root { color: #FFDF1C !important; } /* Transaction icon images - better visibility */ html[data-theme="dark"] .history-page .tx-icon-img { filter: brightness(1.1) !important; } /* Bank Badge - Dark mode styling */ html[data-theme="dark"] .history-page .tx-bank-badge { background: #343a40 !important; color: #adb5bd !important; border: 1px solid #495057 !important; } html[data-theme="dark"] .history-page .tx-bank-badge span { color: #adb5bd !important; } html[data-theme="dark"] .history-page .tx-bank-badge .mud-icon-root { color: #adb5bd !important; } html[data-theme="dark"] .history-page .tx-bank-logo { background: #495057 !important; border-radius: 3px !important; padding: 1px !important; } /* Transaction status badges */ html[data-theme="dark"] .history-page .tx-status { background: #343a40 !important; color: #adb5bd !important; } html[data-theme="dark"] .history-page .tx-status.pending { background: rgba(255, 183, 77, 0.2) !important; color: #FFB74D !important; } html[data-theme="dark"] .history-page .tx-status.failed { background: rgba(255, 107, 107, 0.2) !important; color: #FF6B6B !important; } /* Transaction amount colors */ html[data-theme="dark"] .history-page .tx-amount { color: #f1f3f5 !important; } html[data-theme="dark"] .history-page .tx-amount.credit { color: #81C784 !important; } html[data-theme="dark"] .history-page .tx-amount.debit { color: #f1f3f5 !important; } /* Transaction Details Bottom Sheet */ html[data-theme="dark"] .bottom-sheet { background: #1a1d21 !important; } html[data-theme="dark"] .bottom-sheet .drawer-header { border-bottom-color: #343a40 !important; } html[data-theme="dark"] .bottom-sheet .handle-bar { background: #495057 !important; } html[data-theme="dark"] .bottom-sheet .detail-row { border-bottom-color: #343a40 !important; } html[data-theme="dark"] .bottom-sheet .detail-label { color: #6c757d !important; } html[data-theme="dark"] .bottom-sheet .detail-value { color: #f1f3f5 !important; } /* Receipt Modal */ html[data-theme="dark"] .receipt-modal { background: #1a1d21 !important; } html[data-theme="dark"] .receipt-header { border-bottom-color: #343a40 !important; } html[data-theme="dark"] .receipt-actions { background: #1a1d21 !important; border-top-color: #343a40 !important; } /* ============================================ FAQ PAGE - DARK MODE ============================================ */ html[data-theme="dark"] .faq-page { background: #121417 !important; } html[data-theme="dark"] .faq-page .faq-main { background: #121417 !important; } html[data-theme="dark"] .faq-page .faq-search-box { background: #212529 !important; } html[data-theme="dark"] .faq-page .faq-search-box input { color: #f1f3f5 !important; } html[data-theme="dark"] .faq-page .faq-search-box input::placeholder { color: #6c757d !important; } html[data-theme="dark"] .faq-page .faq-search-box .search-icon { color: #6c757d !important; } html[data-theme="dark"] .faq-page .faq-search-box .clear-search { color: #6c757d !important; } html[data-theme="dark"] .faq-page .section-title { color: #f1f3f5 !important; } html[data-theme="dark"] .faq-page .loading-state { color: #adb5bd !important; } html[data-theme="dark"] .faq-page .spinner-ring { border-color: #343a40 !important; border-top-color: var(--wfc-secondary) !important; } html[data-theme="dark"] .faq-page .empty-state h3 { color: #f1f3f5 !important; } html[data-theme="dark"] .faq-page .empty-state p { color: #adb5bd !important; } html[data-theme="dark"] .faq-page .empty-icon { background: #212529 !important; } html[data-theme="dark"] .faq-page .empty-icon svg { color: #6c757d !important; } html[data-theme="dark"] .faq-page .btn-secondary { background: #212529 !important; border-color: #343a40 !important; color: #f1f3f5 !important; } html[data-theme="dark"] .faq-page .btn-secondary:hover { background: #2b3035 !important; } /* Category Pills */ html[data-theme="dark"] .faq-page .category-pill { background: #212529 !important; color: #adb5bd !important; } html[data-theme="dark"] .faq-page .category-pill:hover { background: #2b3035 !important; } html[data-theme="dark"] .faq-page .category-pill.active { background: var(--wfc-secondary) !important; color: #1E2929 !important; } html[data-theme="dark"] .faq-page .category-count { background: rgba(255, 255, 255, 0.1) !important; } html[data-theme="dark"] .faq-page .category-pill.active .category-count { background: rgba(0, 0, 0, 0.15) !important; } /* FAQ Cards */ html[data-theme="dark"] .faq-page .faq-card { background: #1a1d21 !important; } html[data-theme="dark"] .faq-page .faq-card:hover { background: #212529 !important; } html[data-theme="dark"] .faq-page .question-text { color: #f1f3f5 !important; } html[data-theme="dark"] .faq-page .expand-icon { color: #6c757d !important; } html[data-theme="dark"] .faq-page .answer-content { color: #adb5bd !important; } /* Footer */ html[data-theme="dark"] .faq-page .faq-footer { background: #1a1d21 !important; border-top-color: #343a40 !important; } html[data-theme="dark"] .faq-page .footer-link { color: #adb5bd !important; } html[data-theme="dark"] .faq-page .footer-link:hover { color: #f1f3f5 !important; } html[data-theme="dark"] .faq-page .footer-divider { background: #343a40 !important; } /* ============================================ PROFILE DROPDOWN & PROFILE PAGE - DARK MODE ============================================ */ /* --- Profile Dropdown Menu --- */ html[data-theme="dark"] .wfc-profile-dropdown { background: #1a1d21 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; border: 1px solid #343a40 !important; } html[data-theme="dark"] .wfc-dropdown-item { color: #f1f3f5 !important; } html[data-theme="dark"] .wfc-dropdown-item svg { color: #adb5bd !important; } html[data-theme="dark"] .wfc-dropdown-item:hover { background: #2b3035 !important; } html[data-theme="dark"] .wfc-dropdown-item.wfc-logout { color: #FF6B6B !important; } html[data-theme="dark"] .wfc-dropdown-item.wfc-logout svg { color: #FF6B6B !important; } html[data-theme="dark"] .wfc-dropdown-item.wfc-logout:hover { background: rgba(255, 107, 107, 0.15) !important; } /* Language options in dropdown */ html[data-theme="dark"] .wfc-lang-option-mini { background: #212529 !important; border-color: #343a40 !important; } html[data-theme="dark"] .wfc-lang-option-mini span { color: #f1f3f5 !important; } html[data-theme="dark"] .wfc-lang-option-mini:hover { border-color: #495057 !important; background: #2b3035 !important; } html[data-theme="dark"] .wfc-lang-option-mini.active { border-color: var(--wfc-secondary) !important; background: rgba(255, 223, 28, 0.15) !important; } /* --- Profile Page --- */ html[data-theme="dark"] .profile-page { background: #121417 !important; } html[data-theme="dark"] .profile-page .profile-header { background: #1a1d21 !important; border-bottom-color: #343a40 !important; } html[data-theme="dark"] .profile-page .profile-header h1 { color: #f1f3f5 !important; } html[data-theme="dark"] .profile-page .back-btn { background: #2b3035 !important; color: #f1f3f5 !important; } html[data-theme="dark"] .profile-page .back-btn:hover { background: #343a40 !important; } html[data-theme="dark"] .profile-page .avatar-name { color: #f1f3f5 !important; } html[data-theme="dark"] .profile-page .section-header h2 { color: #f1f3f5 !important; } html[data-theme="dark"] .profile-page .section-card { background: #1a1d21 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .profile-page .info-label { color: #6c757d !important; } html[data-theme="dark"] .profile-page .info-value { color: #f1f3f5 !important; } html[data-theme="dark"] .profile-page .password-mask { color: #f1f3f5 !important; } /* Change password form */ html[data-theme="dark"] .profile-page .change-password-form { border-top-color: #343a40 !important; } html[data-theme="dark"] .profile-page .form-group label { color: #adb5bd !important; } html[data-theme="dark"] .profile-page .input-wrapper { background: #212529 !important; border-color: transparent !important; } html[data-theme="dark"] .profile-page .input-wrapper:focus-within { border-color: var(--wfc-secondary) !important; } html[data-theme="dark"] .profile-page .input-wrapper input { color: #f1f3f5 !important; background: transparent !important; } html[data-theme="dark"] .profile-page .input-wrapper input::placeholder { color: #6c757d !important; } html[data-theme="dark"] .profile-page .btn-toggle-password { color: #6c757d !important; } html[data-theme="dark"] .profile-page .btn-toggle-password:hover { color: #f1f3f5 !important; } html[data-theme="dark"] .profile-page .btn-secondary { background: #2b3035 !important; color: #f1f3f5 !important; } html[data-theme="dark"] .profile-page .btn-secondary:hover:not(:disabled) { background: #343a40 !important; } /* Skeleton loading for profile */ html[data-theme="dark"] .profile-page .skeleton { background: linear-gradient(90deg, #2b3035 25%, #343a40 50%, #2b3035 75%) !important; background-size: 200% 100% !important; } /* ============================================ COMPLETE PROFILE COMPONENTS - DARK MODE Banner, Alert Dialog, and Page ============================================ */ /* --- Complete Profile Alert Dialog --- */ html[data-theme="dark"] .cp-alert-dialog, html[data-theme="dark"] .cp-alert-dialog .mud-dialog-content, html[data-theme="dark"] .cp-alert-dialog .mud-dialog-actions { background: #1a1d21 !important; } html[data-theme="dark"] .cp-alert-body { background: #1a1d21 !important; } html[data-theme="dark"] .cp-alert-close svg { fill: #adb5bd !important; } html[data-theme="dark"] .cp-alert-close:hover { background: rgba(255, 255, 255, 0.1) !important; } html[data-theme="dark"] .cp-alert-close:hover svg { fill: #f1f3f5 !important; } html[data-theme="dark"] .cp-alert-title { color: #f1f3f5 !important; } html[data-theme="dark"] .cp-alert-message { color: #adb5bd !important; } html[data-theme="dark"] .cp-alert-benefits { background: rgba(255, 255, 255, 0.05) !important; } html[data-theme="dark"] .cp-alert-benefit-item span { color: #f1f3f5 !important; } html[data-theme="dark"] .cp-alert-timer svg { fill: #6c757d !important; } html[data-theme="dark"] .cp-alert-timer span { color: #6c757d !important; } html[data-theme="dark"] .cp-alert-actions { background: #1a1d21 !important; } html[data-theme="dark"] .cp-alert-btn-secondary { color: #adb5bd !important; } html[data-theme="dark"] .cp-alert-btn-secondary:hover { color: #f1f3f5 !important; background: rgba(255, 255, 255, 0.08) !important; } /* --- Complete Profile Page --- */ html[data-theme="dark"] .complete-profile-page { background: #121417 !important; } html[data-theme="dark"] .complete-profile-page .page-header { background: #1a1d21 !important; border-bottom-color: #343a40 !important; } html[data-theme="dark"] .complete-profile-page .page-header h1 { color: #f1f3f5 !important; } html[data-theme="dark"] .complete-profile-page .back-btn { background: #2b3035 !important; color: #f1f3f5 !important; } html[data-theme="dark"] .complete-profile-page .back-btn:hover { background: var(--wfc-secondary) !important; color: #1E2929 !important; } html[data-theme="dark"] .complete-profile-page .progress-section { background: #1a1d21 !important; } html[data-theme="dark"] .complete-profile-page .progress-bar { background: #343a40 !important; } html[data-theme="dark"] .complete-profile-page .form-card { background: #1a1d21 !important; border-color: #343a40 !important; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .complete-profile-page .form-section { border-bottom-color: #343a40 !important; } html[data-theme="dark"] .complete-profile-page .form-section h3 { color: #f1f3f5 !important; } html[data-theme="dark"] .complete-profile-page .form-group label { color: #adb5bd !important; } html[data-theme="dark"] .complete-profile-page .form-input { background: #212529 !important; background-color: #212529 !important; border-color: #343a40 !important; color: #f1f3f5 !important; } html[data-theme="dark"] .complete-profile-page .form-input:focus { border-color: var(--wfc-secondary) !important; box-shadow: 0 0 0 3px rgba(255, 223, 28, 0.15) !important; } html[data-theme="dark"] .complete-profile-page .form-input::placeholder { color: #6c757d !important; } html[data-theme="dark"] .complete-profile-page select.form-input { background-color: #212529 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23adb5bd' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; } html[data-theme="dark"] .complete-profile-page select.form-input option { background-color: #212529 !important; color: #f1f3f5 !important; } html[data-theme="dark"] .complete-profile-page .checkbox-container { color: #adb5bd !important; } html[data-theme="dark"] .complete-profile-page .checkbox-label a { color: var(--wfc-secondary) !important; } html[data-theme="dark"] .complete-profile-page .checkbox-label a:hover { color: #ffe566 !important; } html[data-theme="dark"] .complete-profile-page .btn-secondary { color: #adb5bd !important; border-color: #343a40 !important; } html[data-theme="dark"] .complete-profile-page .btn-secondary:hover:not(:disabled) { border-color: var(--wfc-secondary) !important; color: var(--wfc-secondary) !important; } html[data-theme="dark"] .complete-profile-page .validation-error { color: #FF6B6B !important; } html[data-theme="dark"] .complete-profile-page .alert-error { background: rgba(255, 107, 107, 0.15) !important; color: #FF6B6B !important; border-color: rgba(255, 107, 107, 0.3) !important; } /* --- Complete Profile Banner --- */ /* Banner is already dark-themed, just ensure consistency */ html[data-theme="dark"] .cp-banner { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; } /* --- ReLogin Required Dialog --- */ html[data-theme="dark"] .cp-relogin-dialog, html[data-theme="dark"] .cp-relogin-dialog .mud-dialog-content, html[data-theme="dark"] .cp-relogin-dialog .mud-dialog-actions { background: #1a1d21 !important; } html[data-theme="dark"] .cp-dialog-body { background: #1a1d21 !important; } html[data-theme="dark"] .cp-dialog-title { color: #f1f3f5 !important; } html[data-theme="dark"] .cp-dialog-message { color: #adb5bd !important; } html[data-theme="dark"] .cp-dialog-info { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; } html[data-theme="dark"] .cp-dialog-info svg { fill: #adb5bd !important; } html[data-theme="dark"] .cp-dialog-info span { color: #adb5bd !important; } html[data-theme="dark"] .cp-dialog-actions { background: #1a1d21 !important; } /* ============================================ SYSTEM PREFERENCE DARK - DYNAMIC, BILLING, HISTORY, FAQ ============================================ */ @media (prefers-color-scheme: dark) { /* Dynamic Service Page Inputs - Comprehensive */ html[data-theme="system"] .dynamic-service-page input, html[data-theme="system"] .dynamic-service-page textarea, html[data-theme="system"] .dynamic-service-page select, html[data-theme="system"] .dynamic-service-page input.mud-input-slot, html[data-theme="system"] .dynamic-service-page input.mud-input-root, html[data-theme="system"] .dynamic-service-page input.mud-input-root-outlined, html[data-theme="system"] .dynamic-service-page .mud-input-slot input, html[data-theme="system"] .dynamic-form-step input, html[data-theme="system"] .dynamic-form-step input.mud-input-slot, html[data-theme="system"] .dynamic-form-step input.mud-input-root, html[data-theme="system"] .dynamic-form-step .mud-input-slot input, html[data-theme="system"] .dynamic-transaction-wizard input, html[data-theme="system"] .dynamic-transaction-wizard .mud-input-slot input, html[data-theme="system"] .billing-billers-page input, html[data-theme="system"] .billing-billers-page .mud-input-slot input { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; } html[data-theme="system"] .dynamic-service-page input::placeholder, html[data-theme="system"] .dynamic-service-page textarea::placeholder, html[data-theme="system"] .dynamic-service-page input.mud-input-slot::placeholder, html[data-theme="system"] .dynamic-form-step input::placeholder, html[data-theme="system"] .dynamic-form-step input.mud-input-slot::placeholder, html[data-theme="system"] .dynamic-transaction-wizard input::placeholder, html[data-theme="system"] .billing-billers-page input::placeholder { color: #6c757d !important; -webkit-text-fill-color: #6c757d !important; opacity: 1 !important; } html[data-theme="system"] .dynamic-form-step .mud-input-slot, html[data-theme="system"] .dynamic-form-step .mud-input-outlined, html[data-theme="system"] .dynamic-form-step .mud-input-control, html[data-theme="system"] .dynamic-transaction-wizard .mud-input-slot, html[data-theme="system"] .dynamic-transaction-wizard .mud-input-outlined, html[data-theme="system"] .billing-billers-page .mud-input-slot, html[data-theme="system"] .billing-billers-page .mud-input-outlined { background-color: #212529 !important; background: #212529 !important; } html[data-theme="system"] .dynamic-form-step .mud-input-outlined .mud-input-outlined-border, html[data-theme="system"] .dynamic-transaction-wizard .mud-input-outlined .mud-input-outlined-border, html[data-theme="system"] .billing-billers-page .mud-input-outlined .mud-input-outlined-border { border-color: #343a40 !important; } html[data-theme="system"] .dynamic-form-step .mud-input-label, html[data-theme="system"] .dynamic-transaction-wizard .mud-input-label, html[data-theme="system"] .billing-billers-page .mud-input-label { color: #adb5bd !important; } /* Billing Payment Page */ html[data-theme="system"] .billing-payment-page { background: #121417 !important; } /* Wizard Title */ html[data-theme="system"] .dynamic-transaction-wizard .wizard-title, html[data-theme="system"] .dynamic-transaction-wizard .mud-typography-h5, html[data-theme="system"] .billing-payment-page .wizard-title, html[data-theme="system"] .billing-payment-page .mud-typography-h5 { color: #f1f3f5 !important; } /* Input Labels (more specific) */ html[data-theme="system"] .dynamic-transaction-wizard .mud-input-label-outlined, html[data-theme="system"] .dynamic-transaction-wizard .mud-input-label-inputcontrol, html[data-theme="system"] .billing-payment-page .mud-input-label, html[data-theme="system"] .billing-payment-page .mud-input-label-outlined, html[data-theme="system"] .billing-payment-page .mud-input-label-inputcontrol { color: #adb5bd !important; } /* Helper Text */ html[data-theme="system"] .dynamic-transaction-wizard .mud-input-helper-text, html[data-theme="system"] .billing-payment-page .mud-input-helper-text, html[data-theme="system"] .dynamic-form-step .mud-input-helper-text { color: #6c757d !important; } /* Checkbox Label */ html[data-theme="system"] .dynamic-transaction-wizard .mud-checkbox p, html[data-theme="system"] .dynamic-transaction-wizard .mud-typography-body1, html[data-theme="system"] .billing-payment-page .mud-checkbox p, html[data-theme="system"] .billing-payment-page .mud-typography-body1, html[data-theme="system"] .dynamic-form-step .mud-checkbox p { color: #f1f3f5 !important; } /* Checkbox Icon */ html[data-theme="system"] .dynamic-transaction-wizard .mud-checkbox .mud-icon-root, html[data-theme="system"] .billing-payment-page .mud-checkbox .mud-icon-root { color: #adb5bd !important; } /* MudBlazor Typography */ html[data-theme="system"] .dynamic-transaction-wizard .mud-typography, html[data-theme="system"] .billing-payment-page .mud-typography { color: #f1f3f5 !important; } html[data-theme="system"] .dynamic-transaction-wizard .mud-secondary-text, html[data-theme="system"] .billing-payment-page .mud-secondary-text { color: #adb5bd !important; } html[data-theme="system"] .step-indicator .step-dot.pending { background: #2b3035 !important; color: #6c757d !important; border-color: #343a40 !important; } html[data-theme="system"] .step-indicator .step-line { background: #343a40 !important; } html[data-theme="system"] .wizard-content { background: #1a1d21 !important; } html[data-theme="system"] .dynamic-recap-step .recap-details { background: #212529 !important; } html[data-theme="system"] .dynamic-recap-step .recap-label { color: #adb5bd !important; } html[data-theme="system"] .dynamic-recap-step .recap-value { color: #f1f3f5 !important; } html[data-theme="system"] .dynamic-success-step .reference-box { background: #212529 !important; } html[data-theme="system"] .billing-billers-page { background: #1a1d21 !important; } html[data-theme="system"] .billing-billers-page .category-header { color: #f1f3f5 !important; } html[data-theme="system"] .biller-card-inner { background-color: #212529 !important; border-color: #343a40 !important; } html[data-theme="system"] .biller-name { color: #f1f3f5 !important; } /* Transaction History */ html[data-theme="system"] .history-page { background: #121417 !important; } html[data-theme="system"] .history-page .page-header { background: #1a1d21 !important; } /* Header content - title and icon buttons */ html[data-theme="system"] .history-page .header-content { background: #1a1d21 !important; } html[data-theme="system"] .history-page .header-content .mud-typography-h6, html[data-theme="system"] .history-page .header-content .font-weight-bold { color: #f1f3f5 !important; } html[data-theme="system"] .history-page .header-content .mud-icon-button { color: #f1f3f5 !important; } html[data-theme="system"] .history-page .header-content .mud-icon-button .mud-icon-root, html[data-theme="system"] .history-page .header-content .mud-icon-button svg { color: #f1f3f5 !important; fill: #f1f3f5 !important; } html[data-theme="system"] .history-page .header-content .mud-icon-button:hover { background: rgba(255, 255, 255, 0.1) !important; } /* Filter tabs */ html[data-theme="system"] .history-page .filter-tabs { background: #1a1d21 !important; } html[data-theme="system"] .history-page .tabs-container { background: transparent !important; } html[data-theme="system"] .history-page .tab-item { color: #adb5bd !important; background: transparent !important; } html[data-theme="system"] .history-page .tab-item:hover { background: #2b3035 !important; color: #f1f3f5 !important; } html[data-theme="system"] .history-page .tab-item.active { color: #1E2929 !important; background: var(--wfc-secondary) !important; } /* Advanced filters */ html[data-theme="system"] .history-page .advanced-filters { background: #212529 !important; border-color: #343a40 !important; } html[data-theme="system"] .history-page .page-content { background: #121417 !important; } html[data-theme="system"] .history-page .transaction-item { background: #1a1d21 !important; border-color: #343a40 !important; } html[data-theme="system"] .history-page .transaction-item:hover { background: #212529 !important; } html[data-theme="system"] .history-page .tx-title { color: #f1f3f5 !important; } html[data-theme="system"] .history-page .tx-subtitle { color: #adb5bd !important; } html[data-theme="system"] .history-page .group-date { color: #f1f3f5 !important; } html[data-theme="system"] .history-page .group-count { color: #6c757d !important; } /* Transaction Icons (tx-avatar) - More visible in dark mode */ html[data-theme="system"] .history-page .tx-avatar { background: #2b3035 !important; } html[data-theme="system"] .history-page .tx-avatar.credit { background: linear-gradient(135deg, rgba(129, 199, 132, 0.25) 0%, rgba(129, 199, 132, 0.15) 100%) !important; color: #81C784 !important; } html[data-theme="system"] .history-page .tx-avatar.credit .mud-icon-root { color: #81C784 !important; } html[data-theme="system"] .history-page .tx-avatar.debit { background: linear-gradient(135deg, rgba(255, 223, 28, 0.25) 0%, rgba(255, 223, 28, 0.15) 100%) !important; color: #FFDF1C !important; } html[data-theme="system"] .history-page .tx-avatar.debit .mud-icon-root { color: #FFDF1C !important; } html[data-theme="system"] .history-page .tx-icon-img { filter: brightness(1.1) !important; } /* Bank Badge - Dark mode styling */ html[data-theme="system"] .history-page .tx-bank-badge { background: #343a40 !important; color: #adb5bd !important; border: 1px solid #495057 !important; } html[data-theme="system"] .history-page .tx-bank-badge span { color: #adb5bd !important; } html[data-theme="system"] .history-page .tx-bank-badge .mud-icon-root { color: #adb5bd !important; } html[data-theme="system"] .history-page .tx-bank-logo { background: #495057 !important; border-radius: 3px !important; padding: 1px !important; } /* Transaction status badges */ html[data-theme="system"] .history-page .tx-status.pending { background: rgba(255, 183, 77, 0.2) !important; color: #FFB74D !important; } html[data-theme="system"] .history-page .tx-status.failed { background: rgba(255, 107, 107, 0.2) !important; color: #FF6B6B !important; } /* Transaction amount colors */ html[data-theme="system"] .history-page .tx-amount { color: #f1f3f5 !important; } html[data-theme="system"] .history-page .tx-amount.credit { color: #81C784 !important; } html[data-theme="system"] .bottom-sheet { background: #1a1d21 !important; } html[data-theme="system"] .bottom-sheet .detail-label { color: #6c757d !important; } html[data-theme="system"] .bottom-sheet .detail-value { color: #f1f3f5 !important; } html[data-theme="system"] .receipt-modal { background: #1a1d21 !important; } /* FAQ Page */ html[data-theme="system"] .faq-page { background: #121417 !important; } html[data-theme="system"] .faq-page .faq-main { background: #121417 !important; } html[data-theme="system"] .faq-page .faq-search-box { background: #212529 !important; } html[data-theme="system"] .faq-page .faq-search-box input { color: #f1f3f5 !important; } html[data-theme="system"] .faq-page .section-title { color: #f1f3f5 !important; } html[data-theme="system"] .faq-page .category-pill { background: #212529 !important; color: #adb5bd !important; } html[data-theme="system"] .faq-page .category-pill.active { background: var(--wfc-secondary) !important; color: #1E2929 !important; } html[data-theme="system"] .faq-page .faq-card { background: #1a1d21 !important; } html[data-theme="system"] .faq-page .question-text { color: #f1f3f5 !important; } html[data-theme="system"] .faq-page .answer-content { color: #adb5bd !important; } html[data-theme="system"] .faq-page .faq-footer { background: #1a1d21 !important; border-top-color: #343a40 !important; } html[data-theme="system"] .faq-page .footer-link { color: #adb5bd !important; } } /* ============================================ SYSTEM PREFERENCE DARK - PROFILE & DROPDOWN ============================================ */ @media (prefers-color-scheme: dark) { /* Profile Dropdown Menu */ html[data-theme="system"] .wfc-profile-dropdown { background: #1a1d21 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; border: 1px solid #343a40 !important; } html[data-theme="system"] .wfc-dropdown-item { color: #f1f3f5 !important; } html[data-theme="system"] .wfc-dropdown-item svg { color: #adb5bd !important; } html[data-theme="system"] .wfc-dropdown-item:hover { background: #2b3035 !important; } html[data-theme="system"] .wfc-dropdown-item.wfc-logout { color: #FF6B6B !important; } html[data-theme="system"] .wfc-dropdown-item.wfc-logout svg { color: #FF6B6B !important; } html[data-theme="system"] .wfc-dropdown-item.wfc-logout:hover { background: rgba(255, 107, 107, 0.15) !important; } /* Language options in dropdown */ html[data-theme="system"] .wfc-lang-option-mini { background: #212529 !important; border-color: #343a40 !important; } html[data-theme="system"] .wfc-lang-option-mini span { color: #f1f3f5 !important; } html[data-theme="system"] .wfc-lang-option-mini:hover { border-color: #495057 !important; background: #2b3035 !important; } html[data-theme="system"] .wfc-lang-option-mini.active { border-color: var(--wfc-secondary) !important; background: rgba(255, 223, 28, 0.15) !important; } /* Profile Page */ html[data-theme="system"] .profile-page { background: #121417 !important; } html[data-theme="system"] .profile-page .profile-header { background: #1a1d21 !important; border-bottom-color: #343a40 !important; } html[data-theme="system"] .profile-page .profile-header h1 { color: #f1f3f5 !important; } html[data-theme="system"] .profile-page .back-btn { background: #2b3035 !important; color: #f1f3f5 !important; } html[data-theme="system"] .profile-page .back-btn:hover { background: #343a40 !important; } html[data-theme="system"] .profile-page .avatar-name { color: #f1f3f5 !important; } html[data-theme="system"] .profile-page .section-header h2 { color: #f1f3f5 !important; } html[data-theme="system"] .profile-page .section-card { background: #1a1d21 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } html[data-theme="system"] .profile-page .info-label { color: #6c757d !important; } html[data-theme="system"] .profile-page .info-value { color: #f1f3f5 !important; } html[data-theme="system"] .profile-page .password-mask { color: #f1f3f5 !important; } /* Change password form */ html[data-theme="system"] .profile-page .change-password-form { border-top-color: #343a40 !important; } html[data-theme="system"] .profile-page .form-group label { color: #adb5bd !important; } html[data-theme="system"] .profile-page .input-wrapper { background: #212529 !important; border-color: transparent !important; } html[data-theme="system"] .profile-page .input-wrapper:focus-within { border-color: var(--wfc-secondary) !important; } html[data-theme="system"] .profile-page .input-wrapper input { color: #f1f3f5 !important; background: transparent !important; } html[data-theme="system"] .profile-page .input-wrapper input::placeholder { color: #6c757d !important; } html[data-theme="system"] .profile-page .btn-toggle-password { color: #6c757d !important; } html[data-theme="system"] .profile-page .btn-toggle-password:hover { color: #f1f3f5 !important; } html[data-theme="system"] .profile-page .btn-secondary { background: #2b3035 !important; color: #f1f3f5 !important; } html[data-theme="system"] .profile-page .btn-secondary:hover:not(:disabled) { background: #343a40 !important; } /* Skeleton loading for profile */ html[data-theme="system"] .profile-page .skeleton { background: linear-gradient(90deg, #2b3035 25%, #343a40 50%, #2b3035 75%) !important; background-size: 200% 100% !important; } } /* ============================================ SYSTEM PREFERENCE DARK - COMPLETE PROFILE ============================================ */ @media (prefers-color-scheme: dark) { /* Complete Profile Alert Dialog */ html[data-theme="system"] .cp-alert-dialog, html[data-theme="system"] .cp-alert-dialog .mud-dialog-content, html[data-theme="system"] .cp-alert-dialog .mud-dialog-actions { background: #1a1d21 !important; } html[data-theme="system"] .cp-alert-body { background: #1a1d21 !important; } html[data-theme="system"] .cp-alert-close svg { fill: #adb5bd !important; } html[data-theme="system"] .cp-alert-close:hover { background: rgba(255, 255, 255, 0.1) !important; } html[data-theme="system"] .cp-alert-close:hover svg { fill: #f1f3f5 !important; } html[data-theme="system"] .cp-alert-title { color: #f1f3f5 !important; } html[data-theme="system"] .cp-alert-message { color: #adb5bd !important; } html[data-theme="system"] .cp-alert-benefits { background: rgba(255, 255, 255, 0.05) !important; } html[data-theme="system"] .cp-alert-benefit-item span { color: #f1f3f5 !important; } html[data-theme="system"] .cp-alert-timer svg { fill: #6c757d !important; } html[data-theme="system"] .cp-alert-timer span { color: #6c757d !important; } html[data-theme="system"] .cp-alert-actions { background: #1a1d21 !important; } html[data-theme="system"] .cp-alert-btn-secondary { color: #adb5bd !important; } html[data-theme="system"] .cp-alert-btn-secondary:hover { color: #f1f3f5 !important; background: rgba(255, 255, 255, 0.08) !important; } /* Complete Profile Page */ html[data-theme="system"] .complete-profile-page { background: #121417 !important; } html[data-theme="system"] .complete-profile-page .page-header { background: #1a1d21 !important; border-bottom-color: #343a40 !important; } html[data-theme="system"] .complete-profile-page .page-header h1 { color: #f1f3f5 !important; } html[data-theme="system"] .complete-profile-page .back-btn { background: #2b3035 !important; color: #f1f3f5 !important; } html[data-theme="system"] .complete-profile-page .back-btn:hover { background: var(--wfc-secondary) !important; color: #1E2929 !important; } html[data-theme="system"] .complete-profile-page .progress-section { background: #1a1d21 !important; } html[data-theme="system"] .complete-profile-page .progress-bar { background: #343a40 !important; } html[data-theme="system"] .complete-profile-page .form-card { background: #1a1d21 !important; border-color: #343a40 !important; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3) !important; } html[data-theme="system"] .complete-profile-page .form-section { border-bottom-color: #343a40 !important; } html[data-theme="system"] .complete-profile-page .form-section h3 { color: #f1f3f5 !important; } html[data-theme="system"] .complete-profile-page .form-group label { color: #adb5bd !important; } html[data-theme="system"] .complete-profile-page .form-input { background: #212529 !important; background-color: #212529 !important; border-color: #343a40 !important; color: #f1f3f5 !important; } html[data-theme="system"] .complete-profile-page .form-input:focus { border-color: var(--wfc-secondary) !important; box-shadow: 0 0 0 3px rgba(255, 223, 28, 0.15) !important; } html[data-theme="system"] .complete-profile-page .form-input::placeholder { color: #6c757d !important; } html[data-theme="system"] .complete-profile-page select.form-input { background-color: #212529 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23adb5bd' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; } html[data-theme="system"] .complete-profile-page select.form-input option { background-color: #212529 !important; color: #f1f3f5 !important; } html[data-theme="system"] .complete-profile-page .checkbox-container { color: #adb5bd !important; } html[data-theme="system"] .complete-profile-page .checkbox-label a { color: var(--wfc-secondary) !important; } html[data-theme="system"] .complete-profile-page .checkbox-label a:hover { color: #ffe566 !important; } html[data-theme="system"] .complete-profile-page .btn-secondary { color: #adb5bd !important; border-color: #343a40 !important; } html[data-theme="system"] .complete-profile-page .btn-secondary:hover:not(:disabled) { border-color: var(--wfc-secondary) !important; color: var(--wfc-secondary) !important; } html[data-theme="system"] .complete-profile-page .validation-error { color: #FF6B6B !important; } html[data-theme="system"] .complete-profile-page .alert-error { background: rgba(255, 107, 107, 0.15) !important; color: #FF6B6B !important; border-color: rgba(255, 107, 107, 0.3) !important; } /* Complete Profile Banner */ html[data-theme="system"] .cp-banner { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; } /* ReLogin Required Dialog */ html[data-theme="system"] .cp-relogin-dialog, html[data-theme="system"] .cp-relogin-dialog .mud-dialog-content, html[data-theme="system"] .cp-relogin-dialog .mud-dialog-actions { background: #1a1d21 !important; } html[data-theme="system"] .cp-dialog-body { background: #1a1d21 !important; } html[data-theme="system"] .cp-dialog-title { color: #f1f3f5 !important; } html[data-theme="system"] .cp-dialog-message { color: #adb5bd !important; } html[data-theme="system"] .cp-dialog-info { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; } html[data-theme="system"] .cp-dialog-info svg { fill: #adb5bd !important; } html[data-theme="system"] .cp-dialog-info span { color: #adb5bd !important; } html[data-theme="system"] .cp-dialog-actions { background: #1a1d21 !important; } } /* ============================================ ULTRA-HIGH SPECIFICITY OVERRIDES For billing-payment-page inputs where dynamic-services.css has #333333 !important ============================================ */ /* --- Exact Pattern Matches from dynamic-services.css --- */ /* These selectors exactly mirror dynamic-services.css patterns with html[data-theme="dark"] prefix */ html[data-theme="dark"] .dynamic-form-step .mud-input-slot input, html[data-theme="dark"] .dynamic-form-step .mud-input-slot textarea, html[data-theme="dark"] .dynamic-form-step input, html[data-theme="dark"] .dynamic-form-step input.mud-input-slot, html[data-theme="dark"] .dynamic-form-step input.mud-input-root, html[data-theme="dark"] .dynamic-form-step input.mud-input-root-outlined, html[data-theme="dark"] .dynamic-form-step textarea, html[data-theme="dark"] .dynamic-form-step .mud-select-input { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; caret-color: var(--wfc-secondary) !important; } html[data-theme="dark"] .dynamic-form-step .mud-input-slot, html[data-theme="dark"] .dynamic-form-step .mud-input-outlined, html[data-theme="dark"] .dynamic-form-step .mud-input-control { background-color: #212529 !important; background: #212529 !important; } html[data-theme="dark"] .dynamic-form-step .mud-input-label { color: #adb5bd !important; } html[data-theme="dark"] .dynamic-form-step .mud-input-label.mud-input-label-animated.mud-input-label-inputcontrol { color: #adb5bd !important; } html[data-theme="dark"] .dynamic-form-step .mud-input-outlined .mud-input-outlined-border { border-color: #343a40 !important; } html[data-theme="dark"] .dynamic-form-step .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--wfc-secondary) !important; } html[data-theme="dark"] .dynamic-form-step .mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--wfc-secondary) !important; } html[data-theme="dark"] .dynamic-form-step .mud-select .mud-input-slot { background-color: #212529 !important; } html[data-theme="dark"] .dynamic-form-step .mud-input-adornment { color: #f1f3f5 !important; } /* --- Input Text Color - Maximum Specificity --- */ html[data-theme="dark"] .billing-payment-page .dynamic-transaction-wizard .dynamic-form-step .mud-input-control .mud-input-slot.mud-input-root.mud-input-root-outlined, html[data-theme="dark"] .billing-payment-page .dynamic-form-step .mud-input-control input.mud-input-slot.mud-input-root.mud-input-root-outlined, html[data-theme="dark"] .billing-payment-page .mud-input-control input.mud-input-slot.mud-input-root.mud-input-root-outlined, html[data-theme="dark"] .billing-payment-page .mud-input-control input.mud-input-slot.mud-input-root, html[data-theme="dark"] .billing-payment-page .mud-input-control input.mud-input-slot, html[data-theme="dark"] .billing-payment-page .mud-input-control input, html[data-theme="dark"] .billing-payment-page .mud-input-outlined input.mud-input-slot, html[data-theme="dark"] .billing-payment-page .mud-input-outlined input, html[data-theme="dark"] .billing-payment-page input.mud-input-slot.mud-input-root.mud-input-root-outlined, html[data-theme="dark"] .billing-payment-page input.mud-input-slot.mud-input-root, html[data-theme="dark"] .billing-payment-page input.mud-input-slot, html[data-theme="dark"] .dynamic-transaction-wizard .dynamic-form-step .mud-input-control input.mud-input-slot.mud-input-root.mud-input-root-outlined, html[data-theme="dark"] .dynamic-transaction-wizard .dynamic-form-step .mud-input-control input.mud-input-slot, html[data-theme="dark"] .dynamic-transaction-wizard .dynamic-form-step .mud-input-control input, html[data-theme="dark"] .dynamic-form-step .mud-input-control input.mud-input-slot.mud-input-root.mud-input-root-outlined, html[data-theme="dark"] .dynamic-form-step .mud-input-control input.mud-input-slot.mud-input-root, html[data-theme="dark"] .dynamic-form-step .mud-input-control input.mud-input-slot, html[data-theme="dark"] .dynamic-form-step .mud-input-control input { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; caret-color: var(--wfc-secondary) !important; } /* --- Input Labels - Maximum Specificity --- */ html[data-theme="dark"] .billing-payment-page .dynamic-transaction-wizard .dynamic-form-step .mud-input-control .mud-input-label.mud-input-label-animated.mud-input-label-outlined.mud-input-label-margin-dense.mud-input-label-inputcontrol, html[data-theme="dark"] .billing-payment-page .dynamic-form-step .mud-input-control .mud-input-label.mud-input-label-animated.mud-input-label-outlined.mud-input-label-margin-dense.mud-input-label-inputcontrol, html[data-theme="dark"] .billing-payment-page .mud-input-control .mud-input-label.mud-input-label-animated.mud-input-label-outlined.mud-input-label-margin-dense.mud-input-label-inputcontrol, html[data-theme="dark"] .billing-payment-page .mud-input-control .mud-input-label.mud-input-label-animated.mud-input-label-outlined.mud-input-label-inputcontrol, html[data-theme="dark"] .billing-payment-page .mud-input-control .mud-input-label.mud-input-label-animated.mud-input-label-outlined, html[data-theme="dark"] .billing-payment-page .mud-input-control .mud-input-label.mud-input-label-outlined, html[data-theme="dark"] .billing-payment-page .mud-input-control .mud-input-label, html[data-theme="dark"] .billing-payment-page .mud-input-label.mud-input-label-animated.mud-input-label-outlined.mud-input-label-margin-dense.mud-input-label-inputcontrol, html[data-theme="dark"] .billing-payment-page .mud-input-label.mud-input-label-animated.mud-input-label-outlined, html[data-theme="dark"] .billing-payment-page .mud-input-label.mud-input-label-outlined, html[data-theme="dark"] .billing-payment-page label.mud-input-label, html[data-theme="dark"] .dynamic-transaction-wizard .dynamic-form-step .mud-input-control .mud-input-label.mud-input-label-animated.mud-input-label-outlined.mud-input-label-margin-dense.mud-input-label-inputcontrol, html[data-theme="dark"] .dynamic-transaction-wizard .dynamic-form-step .mud-input-control .mud-input-label.mud-input-label-outlined, html[data-theme="dark"] .dynamic-transaction-wizard .dynamic-form-step .mud-input-control .mud-input-label, html[data-theme="dark"] .dynamic-form-step .mud-input-control .mud-input-label.mud-input-label-animated.mud-input-label-outlined.mud-input-label-margin-dense.mud-input-label-inputcontrol, html[data-theme="dark"] .dynamic-form-step .mud-input-control .mud-input-label.mud-input-label-outlined, html[data-theme="dark"] .dynamic-form-step .mud-input-control .mud-input-label { color: #adb5bd !important; } /* --- Helper Text - Maximum Specificity --- */ html[data-theme="dark"] .billing-payment-page .dynamic-transaction-wizard .dynamic-form-step .mud-input-control .mud-input-control-helper-container .mud-input-helper-text, html[data-theme="dark"] .billing-payment-page .dynamic-form-step .mud-input-control .mud-input-control-helper-container .mud-input-helper-text, html[data-theme="dark"] .billing-payment-page .mud-input-control .mud-input-control-helper-container .mud-input-helper-text, html[data-theme="dark"] .billing-payment-page .mud-input-helper-text.mud-input-helper-text-sub, html[data-theme="dark"] .billing-payment-page .mud-input-helper-text, html[data-theme="dark"] .dynamic-transaction-wizard .dynamic-form-step .mud-input-control .mud-input-helper-text, html[data-theme="dark"] .dynamic-form-step .mud-input-control .mud-input-helper-text { color: #6c757d !important; } /* --- Checkbox Labels - Maximum Specificity --- */ html[data-theme="dark"] .billing-payment-page .dynamic-transaction-wizard .dynamic-form-step .mud-checkbox-dense label.mud-checkbox p.mud-typography, html[data-theme="dark"] .billing-payment-page .dynamic-form-step .mud-checkbox-dense label.mud-checkbox p.mud-typography, html[data-theme="dark"] .billing-payment-page .mud-checkbox-dense label.mud-checkbox p.mud-typography, html[data-theme="dark"] .billing-payment-page .mud-checkbox p.mud-typography.mud-typography-body1, html[data-theme="dark"] .billing-payment-page .mud-checkbox p.mud-typography, html[data-theme="dark"] .billing-payment-page .mud-checkbox p, html[data-theme="dark"] .billing-payment-page label.mud-checkbox p, html[data-theme="dark"] .dynamic-transaction-wizard .dynamic-form-step .mud-checkbox p.mud-typography, html[data-theme="dark"] .dynamic-form-step .mud-checkbox-dense label.mud-checkbox p.mud-typography, html[data-theme="dark"] .dynamic-form-step .mud-checkbox p.mud-typography, html[data-theme="dark"] .dynamic-form-step .mud-checkbox p { color: #f1f3f5 !important; } /* --- Input Border Focus State --- */ html[data-theme="dark"] .billing-payment-page .mud-input-control:focus-within .mud-input-outlined-border, html[data-theme="dark"] .billing-payment-page .mud-input-outlined:focus-within .mud-input-outlined-border, html[data-theme="dark"] .dynamic-transaction-wizard .mud-input-control:focus-within .mud-input-outlined-border, html[data-theme="dark"] .dynamic-form-step .mud-input-control:focus-within .mud-input-outlined-border { border-color: var(--wfc-secondary) !important; } /* --- Input Background Consistency --- */ html[data-theme="dark"] .billing-payment-page .mud-input-control .mud-input-outlined, html[data-theme="dark"] .billing-payment-page .mud-input-outlined, html[data-theme="dark"] .billing-payment-page .mud-input-slot, html[data-theme="dark"] .dynamic-transaction-wizard .mud-input-control .mud-input-outlined, html[data-theme="dark"] .dynamic-form-step .mud-input-control .mud-input-outlined { background: #212529 !important; background-color: #212529 !important; } /* ============================================ SYSTEM PREFERENCE - ULTRA-HIGH SPECIFICITY ============================================ */ @media (prefers-color-scheme: dark) { /* Exact Pattern Matches from dynamic-services.css */ html[data-theme="system"] .dynamic-form-step .mud-input-slot input, html[data-theme="system"] .dynamic-form-step .mud-input-slot textarea, html[data-theme="system"] .dynamic-form-step input, html[data-theme="system"] .dynamic-form-step input.mud-input-slot, html[data-theme="system"] .dynamic-form-step input.mud-input-root, html[data-theme="system"] .dynamic-form-step input.mud-input-root-outlined, html[data-theme="system"] .dynamic-form-step textarea, html[data-theme="system"] .dynamic-form-step .mud-select-input { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; caret-color: var(--wfc-secondary) !important; } html[data-theme="system"] .dynamic-form-step .mud-input-slot, html[data-theme="system"] .dynamic-form-step .mud-input-outlined, html[data-theme="system"] .dynamic-form-step .mud-input-control { background-color: #212529 !important; background: #212529 !important; } html[data-theme="system"] .dynamic-form-step .mud-input-label { color: #adb5bd !important; } html[data-theme="system"] .dynamic-form-step .mud-input-label.mud-input-label-animated.mud-input-label-inputcontrol { color: #adb5bd !important; } html[data-theme="system"] .dynamic-form-step .mud-input-outlined .mud-input-outlined-border { border-color: #343a40 !important; } html[data-theme="system"] .dynamic-form-step .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--wfc-secondary) !important; } html[data-theme="system"] .dynamic-form-step .mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--wfc-secondary) !important; } html[data-theme="system"] .dynamic-form-step .mud-select .mud-input-slot { background-color: #212529 !important; } html[data-theme="system"] .dynamic-form-step .mud-input-adornment { color: #f1f3f5 !important; } /* Input Text Color - Maximum Specificity */ html[data-theme="system"] .billing-payment-page .dynamic-transaction-wizard .dynamic-form-step .mud-input-control .mud-input-slot.mud-input-root.mud-input-root-outlined, html[data-theme="system"] .billing-payment-page .dynamic-form-step .mud-input-control input.mud-input-slot.mud-input-root.mud-input-root-outlined, html[data-theme="system"] .billing-payment-page .mud-input-control input.mud-input-slot.mud-input-root.mud-input-root-outlined, html[data-theme="system"] .billing-payment-page .mud-input-control input.mud-input-slot.mud-input-root, html[data-theme="system"] .billing-payment-page .mud-input-control input.mud-input-slot, html[data-theme="system"] .billing-payment-page .mud-input-control input, html[data-theme="system"] .billing-payment-page .mud-input-outlined input.mud-input-slot, html[data-theme="system"] .billing-payment-page .mud-input-outlined input, html[data-theme="system"] .billing-payment-page input.mud-input-slot.mud-input-root.mud-input-root-outlined, html[data-theme="system"] .billing-payment-page input.mud-input-slot.mud-input-root, html[data-theme="system"] .billing-payment-page input.mud-input-slot, html[data-theme="system"] .dynamic-transaction-wizard .dynamic-form-step .mud-input-control input.mud-input-slot.mud-input-root.mud-input-root-outlined, html[data-theme="system"] .dynamic-transaction-wizard .dynamic-form-step .mud-input-control input.mud-input-slot, html[data-theme="system"] .dynamic-transaction-wizard .dynamic-form-step .mud-input-control input, html[data-theme="system"] .dynamic-form-step .mud-input-control input.mud-input-slot.mud-input-root.mud-input-root-outlined, html[data-theme="system"] .dynamic-form-step .mud-input-control input.mud-input-slot.mud-input-root, html[data-theme="system"] .dynamic-form-step .mud-input-control input.mud-input-slot, html[data-theme="system"] .dynamic-form-step .mud-input-control input { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; caret-color: var(--wfc-secondary) !important; } /* Input Labels - Maximum Specificity */ html[data-theme="system"] .billing-payment-page .dynamic-transaction-wizard .dynamic-form-step .mud-input-control .mud-input-label.mud-input-label-animated.mud-input-label-outlined.mud-input-label-margin-dense.mud-input-label-inputcontrol, html[data-theme="system"] .billing-payment-page .dynamic-form-step .mud-input-control .mud-input-label.mud-input-label-animated.mud-input-label-outlined.mud-input-label-margin-dense.mud-input-label-inputcontrol, html[data-theme="system"] .billing-payment-page .mud-input-control .mud-input-label.mud-input-label-animated.mud-input-label-outlined.mud-input-label-margin-dense.mud-input-label-inputcontrol, html[data-theme="system"] .billing-payment-page .mud-input-control .mud-input-label.mud-input-label-animated.mud-input-label-outlined.mud-input-label-inputcontrol, html[data-theme="system"] .billing-payment-page .mud-input-control .mud-input-label.mud-input-label-animated.mud-input-label-outlined, html[data-theme="system"] .billing-payment-page .mud-input-control .mud-input-label.mud-input-label-outlined, html[data-theme="system"] .billing-payment-page .mud-input-control .mud-input-label, html[data-theme="system"] .billing-payment-page .mud-input-label.mud-input-label-animated.mud-input-label-outlined.mud-input-label-margin-dense.mud-input-label-inputcontrol, html[data-theme="system"] .billing-payment-page .mud-input-label.mud-input-label-animated.mud-input-label-outlined, html[data-theme="system"] .billing-payment-page .mud-input-label.mud-input-label-outlined, html[data-theme="system"] .billing-payment-page label.mud-input-label, html[data-theme="system"] .dynamic-transaction-wizard .dynamic-form-step .mud-input-control .mud-input-label.mud-input-label-animated.mud-input-label-outlined.mud-input-label-margin-dense.mud-input-label-inputcontrol, html[data-theme="system"] .dynamic-transaction-wizard .dynamic-form-step .mud-input-control .mud-input-label.mud-input-label-outlined, html[data-theme="system"] .dynamic-transaction-wizard .dynamic-form-step .mud-input-control .mud-input-label, html[data-theme="system"] .dynamic-form-step .mud-input-control .mud-input-label.mud-input-label-animated.mud-input-label-outlined.mud-input-label-margin-dense.mud-input-label-inputcontrol, html[data-theme="system"] .dynamic-form-step .mud-input-control .mud-input-label.mud-input-label-outlined, html[data-theme="system"] .dynamic-form-step .mud-input-control .mud-input-label { color: #adb5bd !important; } /* Helper Text - Maximum Specificity */ html[data-theme="system"] .billing-payment-page .dynamic-transaction-wizard .dynamic-form-step .mud-input-control .mud-input-control-helper-container .mud-input-helper-text, html[data-theme="system"] .billing-payment-page .dynamic-form-step .mud-input-control .mud-input-control-helper-container .mud-input-helper-text, html[data-theme="system"] .billing-payment-page .mud-input-control .mud-input-control-helper-container .mud-input-helper-text, html[data-theme="system"] .billing-payment-page .mud-input-helper-text.mud-input-helper-text-sub, html[data-theme="system"] .billing-payment-page .mud-input-helper-text, html[data-theme="system"] .dynamic-transaction-wizard .dynamic-form-step .mud-input-control .mud-input-helper-text, html[data-theme="system"] .dynamic-form-step .mud-input-control .mud-input-helper-text { color: #6c757d !important; } /* Checkbox Labels - Maximum Specificity */ html[data-theme="system"] .billing-payment-page .dynamic-transaction-wizard .dynamic-form-step .mud-checkbox-dense label.mud-checkbox p.mud-typography, html[data-theme="system"] .billing-payment-page .dynamic-form-step .mud-checkbox-dense label.mud-checkbox p.mud-typography, html[data-theme="system"] .billing-payment-page .mud-checkbox-dense label.mud-checkbox p.mud-typography, html[data-theme="system"] .billing-payment-page .mud-checkbox p.mud-typography.mud-typography-body1, html[data-theme="system"] .billing-payment-page .mud-checkbox p.mud-typography, html[data-theme="system"] .billing-payment-page .mud-checkbox p, html[data-theme="system"] .billing-payment-page label.mud-checkbox p, html[data-theme="system"] .dynamic-transaction-wizard .dynamic-form-step .mud-checkbox p.mud-typography, html[data-theme="system"] .dynamic-form-step .mud-checkbox-dense label.mud-checkbox p.mud-typography, html[data-theme="system"] .dynamic-form-step .mud-checkbox p.mud-typography, html[data-theme="system"] .dynamic-form-step .mud-checkbox p { color: #f1f3f5 !important; } /* Input Border Focus State */ html[data-theme="system"] .billing-payment-page .mud-input-control:focus-within .mud-input-outlined-border, html[data-theme="system"] .billing-payment-page .mud-input-outlined:focus-within .mud-input-outlined-border, html[data-theme="system"] .dynamic-transaction-wizard .mud-input-control:focus-within .mud-input-outlined-border, html[data-theme="system"] .dynamic-form-step .mud-input-control:focus-within .mud-input-outlined-border { border-color: var(--wfc-secondary) !important; } /* Input Background Consistency */ html[data-theme="system"] .billing-payment-page .mud-input-control .mud-input-outlined, html[data-theme="system"] .billing-payment-page .mud-input-outlined, html[data-theme="system"] .billing-payment-page .mud-input-slot, html[data-theme="system"] .dynamic-transaction-wizard .mud-input-control .mud-input-outlined, html[data-theme="system"] .dynamic-form-step .mud-input-control .mud-input-outlined { background: #212529 !important; background-color: #212529 !important; } } /* ============================================ HISTORY PAGE - ADVANCED FILTERS DARK MODE MudBlazor Date Pickers and Buttons ============================================ */ /* --- Advanced Filters Container (already basic styling exists) --- */ /* Date Picker Input Container */ html[data-theme="dark"] .history-page .advanced-filters .mud-picker, html[data-theme="dark"] .history-page .advanced-filters .mud-picker-inline { background: transparent !important; } /* Date Picker Input Control */ html[data-theme="dark"] .history-page .advanced-filters .mud-input-control, html[data-theme="dark"] .history-page .advanced-filters .mud-input-control-margin-dense, html[data-theme="dark"] .history-page .advanced-filters .mud-input-input-control { background: transparent !important; } /* Date Picker Input Field */ html[data-theme="dark"] .history-page .advanced-filters .mud-input, html[data-theme="dark"] .history-page .advanced-filters .mud-input-outlined, html[data-theme="dark"] .history-page .advanced-filters .mud-input-outlined-with-label { background: #1a1d21 !important; } /* Date Picker Input Slot */ html[data-theme="dark"] .history-page .advanced-filters .mud-input-slot, html[data-theme="dark"] .history-page .advanced-filters .mud-input-root, html[data-theme="dark"] .history-page .advanced-filters .mud-input-root-outlined, html[data-theme="dark"] .history-page .advanced-filters input.mud-input-slot { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; background: transparent !important; } html[data-theme="dark"] .history-page .advanced-filters input.mud-input-slot::placeholder { color: #6c757d !important; -webkit-text-fill-color: #6c757d !important; } /* Date Picker Input Border */ html[data-theme="dark"] .history-page .advanced-filters .mud-input-outlined-border { border-color: #343a40 !important; } html[data-theme="dark"] .history-page .advanced-filters .mud-input-outlined:hover .mud-input-outlined-border { border-color: #495057 !important; } html[data-theme="dark"] .history-page .advanced-filters .mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--wfc-secondary) !important; } /* Date Picker Label */ html[data-theme="dark"] .history-page .advanced-filters .mud-input-label, html[data-theme="dark"] .history-page .advanced-filters .mud-input-label-animated, html[data-theme="dark"] .history-page .advanced-filters .mud-input-label-outlined, html[data-theme="dark"] .history-page .advanced-filters .mud-input-label-inputcontrol, html[data-theme="dark"] .history-page .advanced-filters label.mud-input-label { color: #adb5bd !important; background: #212529 !important; } /* Date Picker Adornment (calendar icon button) */ html[data-theme="dark"] .history-page .advanced-filters .mud-input-adornment, html[data-theme="dark"] .history-page .advanced-filters .mud-input-adornment-end { color: #adb5bd !important; } html[data-theme="dark"] .history-page .advanced-filters .mud-input-adornment .mud-icon-button, html[data-theme="dark"] .history-page .advanced-filters .mud-input-adornment-icon-button { color: #adb5bd !important; } html[data-theme="dark"] .history-page .advanced-filters .mud-input-adornment .mud-icon-button:hover, html[data-theme="dark"] .history-page .advanced-filters .mud-input-adornment-icon-button:hover { background: rgba(255, 255, 255, 0.1) !important; color: #f1f3f5 !important; } html[data-theme="dark"] .history-page .advanced-filters .mud-input-adornment .mud-icon-root, html[data-theme="dark"] .history-page .advanced-filters .mud-input-adornment svg { color: #adb5bd !important; fill: #adb5bd !important; } html[data-theme="dark"] .history-page .advanced-filters .mud-input-adornment .mud-icon-button:hover .mud-icon-root, html[data-theme="dark"] .history-page .advanced-filters .mud-input-adornment .mud-icon-button:hover svg { color: #f1f3f5 !important; fill: #f1f3f5 !important; } /* Reset Button (outlined) */ html[data-theme="dark"] .history-page .advanced-filters .mud-button-outlined, html[data-theme="dark"] .history-page .advanced-filters .mud-button-outlined-default { background: transparent !important; border-color: #495057 !important; color: #adb5bd !important; } html[data-theme="dark"] .history-page .advanced-filters .mud-button-outlined:hover, html[data-theme="dark"] .history-page .advanced-filters .mud-button-outlined-default:hover { background: #2b3035 !important; border-color: #6c757d !important; color: #f1f3f5 !important; } html[data-theme="dark"] .history-page .advanced-filters .mud-button-outlined .mud-button-label { color: inherit !important; } /* Apply Button (filled primary) */ html[data-theme="dark"] .history-page .advanced-filters .mud-button-filled, html[data-theme="dark"] .history-page .advanced-filters .mud-button-filled-primary { background: var(--wfc-secondary) !important; color: #1E2929 !important; } html[data-theme="dark"] .history-page .advanced-filters .mud-button-filled:hover, html[data-theme="dark"] .history-page .advanced-filters .mud-button-filled-primary:hover { background: #ffe566 !important; } html[data-theme="dark"] .history-page .advanced-filters .mud-button-filled .mud-button-label { color: #1E2929 !important; } /* Date Picker Popover (calendar dropdown) */ html[data-theme="dark"] .mud-picker-container, html[data-theme="dark"] .mud-picker-content, html[data-theme="dark"] .mud-picker-calendar-container, html[data-theme="dark"] .mud-picker-calendar { background: #1a1d21 !important; color: #f1f3f5 !important; } html[data-theme="dark"] .mud-picker-calendar-header { background: #212529 !important; color: #f1f3f5 !important; } html[data-theme="dark"] .mud-picker-calendar-header-switch button { color: #f1f3f5 !important; } html[data-theme="dark"] .mud-picker-calendar-header-switch button:hover { background: rgba(255, 255, 255, 0.1) !important; } html[data-theme="dark"] .mud-picker-calendar-day { color: #f1f3f5 !important; } html[data-theme="dark"] .mud-picker-calendar-day:hover { background: #2b3035 !important; } html[data-theme="dark"] .mud-picker-calendar-day.mud-selected { background: var(--wfc-secondary) !important; color: #1E2929 !important; } html[data-theme="dark"] .mud-picker-calendar-day.mud-current { border-color: var(--wfc-secondary) !important; } html[data-theme="dark"] .mud-picker-calendar-day.mud-disabled { color: #495057 !important; } html[data-theme="dark"] .mud-picker-toolbar { background: #212529 !important; color: #f1f3f5 !important; } html[data-theme="dark"] .mud-picker-toolbar button { color: #f1f3f5 !important; } /* ============================================ SYSTEM PREFERENCE - ADVANCED FILTERS DARK MODE ============================================ */ @media (prefers-color-scheme: dark) { /* Date Picker Input Container */ html[data-theme="system"] .history-page .advanced-filters .mud-picker, html[data-theme="system"] .history-page .advanced-filters .mud-picker-inline { background: transparent !important; } /* Date Picker Input Control */ html[data-theme="system"] .history-page .advanced-filters .mud-input-control, html[data-theme="system"] .history-page .advanced-filters .mud-input-control-margin-dense { background: transparent !important; } /* Date Picker Input Field */ html[data-theme="system"] .history-page .advanced-filters .mud-input, html[data-theme="system"] .history-page .advanced-filters .mud-input-outlined, html[data-theme="system"] .history-page .advanced-filters .mud-input-outlined-with-label { background: #1a1d21 !important; } /* Date Picker Input Slot */ html[data-theme="system"] .history-page .advanced-filters .mud-input-slot, html[data-theme="system"] .history-page .advanced-filters .mud-input-root, html[data-theme="system"] .history-page .advanced-filters .mud-input-root-outlined, html[data-theme="system"] .history-page .advanced-filters input.mud-input-slot { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; background: transparent !important; } html[data-theme="system"] .history-page .advanced-filters input.mud-input-slot::placeholder { color: #6c757d !important; -webkit-text-fill-color: #6c757d !important; } /* Date Picker Input Border */ html[data-theme="system"] .history-page .advanced-filters .mud-input-outlined-border { border-color: #343a40 !important; } html[data-theme="system"] .history-page .advanced-filters .mud-input-outlined:hover .mud-input-outlined-border { border-color: #495057 !important; } html[data-theme="system"] .history-page .advanced-filters .mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--wfc-secondary) !important; } /* Date Picker Label */ html[data-theme="system"] .history-page .advanced-filters .mud-input-label, html[data-theme="system"] .history-page .advanced-filters .mud-input-label-animated, html[data-theme="system"] .history-page .advanced-filters .mud-input-label-outlined, html[data-theme="system"] .history-page .advanced-filters .mud-input-label-inputcontrol, html[data-theme="system"] .history-page .advanced-filters label.mud-input-label { color: #adb5bd !important; background: #212529 !important; } /* Date Picker Adornment (calendar icon button) */ html[data-theme="system"] .history-page .advanced-filters .mud-input-adornment, html[data-theme="system"] .history-page .advanced-filters .mud-input-adornment-end { color: #adb5bd !important; } html[data-theme="system"] .history-page .advanced-filters .mud-input-adornment .mud-icon-button, html[data-theme="system"] .history-page .advanced-filters .mud-input-adornment-icon-button { color: #adb5bd !important; } html[data-theme="system"] .history-page .advanced-filters .mud-input-adornment .mud-icon-button:hover, html[data-theme="system"] .history-page .advanced-filters .mud-input-adornment-icon-button:hover { background: rgba(255, 255, 255, 0.1) !important; color: #f1f3f5 !important; } html[data-theme="system"] .history-page .advanced-filters .mud-input-adornment .mud-icon-root, html[data-theme="system"] .history-page .advanced-filters .mud-input-adornment svg { color: #adb5bd !important; fill: #adb5bd !important; } html[data-theme="system"] .history-page .advanced-filters .mud-input-adornment .mud-icon-button:hover .mud-icon-root, html[data-theme="system"] .history-page .advanced-filters .mud-input-adornment .mud-icon-button:hover svg { color: #f1f3f5 !important; fill: #f1f3f5 !important; } /* Reset Button (outlined) */ html[data-theme="system"] .history-page .advanced-filters .mud-button-outlined, html[data-theme="system"] .history-page .advanced-filters .mud-button-outlined-default { background: transparent !important; border-color: #495057 !important; color: #adb5bd !important; } html[data-theme="system"] .history-page .advanced-filters .mud-button-outlined:hover, html[data-theme="system"] .history-page .advanced-filters .mud-button-outlined-default:hover { background: #2b3035 !important; border-color: #6c757d !important; color: #f1f3f5 !important; } html[data-theme="system"] .history-page .advanced-filters .mud-button-outlined .mud-button-label { color: inherit !important; } /* Apply Button (filled primary) */ html[data-theme="system"] .history-page .advanced-filters .mud-button-filled, html[data-theme="system"] .history-page .advanced-filters .mud-button-filled-primary { background: var(--wfc-secondary) !important; color: #1E2929 !important; } html[data-theme="system"] .history-page .advanced-filters .mud-button-filled:hover, html[data-theme="system"] .history-page .advanced-filters .mud-button-filled-primary:hover { background: #ffe566 !important; } html[data-theme="system"] .history-page .advanced-filters .mud-button-filled .mud-button-label { color: #1E2929 !important; } /* Date Picker Popover (calendar dropdown) */ html[data-theme="system"] .mud-picker-container, html[data-theme="system"] .mud-picker-content, html[data-theme="system"] .mud-picker-calendar-container, html[data-theme="system"] .mud-picker-calendar { background: #1a1d21 !important; color: #f1f3f5 !important; } html[data-theme="system"] .mud-picker-calendar-header { background: #212529 !important; color: #f1f3f5 !important; } html[data-theme="system"] .mud-picker-calendar-header-switch button { color: #f1f3f5 !important; } html[data-theme="system"] .mud-picker-calendar-header-switch button:hover { background: rgba(255, 255, 255, 0.1) !important; } html[data-theme="system"] .mud-picker-calendar-day { color: #f1f3f5 !important; } html[data-theme="system"] .mud-picker-calendar-day:hover { background: #2b3035 !important; } html[data-theme="system"] .mud-picker-calendar-day.mud-selected { background: var(--wfc-secondary) !important; color: #1E2929 !important; } html[data-theme="system"] .mud-picker-calendar-day.mud-current { border-color: var(--wfc-secondary) !important; } html[data-theme="system"] .mud-picker-calendar-day.mud-disabled { color: #495057 !important; } html[data-theme="system"] .mud-picker-toolbar { background: #212529 !important; color: #f1f3f5 !important; } html[data-theme="system"] .mud-picker-toolbar button { color: #f1f3f5 !important; } } /* ============================================ DYNAMIC RECAP & SUCCESS STEPS - DARK MODE ============================================ */ /* Recap Step - Summary paper (uses inline style with --mud-palette-background-grey) */ html[data-theme="dark"] .dynamic-recap-step .mud-paper { background-color: #212529 !important; background: #212529 !important; } html[data-theme="dark"] .dynamic-recap-step .mud-typography { color: #f1f3f5 !important; } html[data-theme="dark"] .dynamic-recap-step .mud-typography-subtitle1, html[data-theme="dark"] .dynamic-recap-step .mud-typography-subtitle2 { color: #f1f3f5 !important; } html[data-theme="dark"] .dynamic-recap-step .mud-typography-body2[style*="Color.Dark"], html[data-theme="dark"] .dynamic-recap-step .mud-typography-body2 { color: #adb5bd !important; } html[data-theme="dark"] .dynamic-recap-step .font-weight-medium, html[data-theme="dark"] .dynamic-recap-step .font-weight-bold { color: #f1f3f5 !important; } html[data-theme="dark"] .dynamic-recap-step .mud-typography-caption { color: #6c757d !important; } /* Recap List Items */ html[data-theme="dark"] .dynamic-recap-step .mud-list { background: transparent !important; } html[data-theme="dark"] .dynamic-recap-step .mud-list-item { border-color: #343a40 !important; } /* Fees breakdown paper (uses --mud-palette-warning-lighten) */ html[data-theme="dark"] .dynamic-recap-step .mud-paper[style*="warning"] { background-color: rgba(255, 223, 28, 0.1) !important; background: rgba(255, 223, 28, 0.1) !important; } /* Confirmation section (uses --mud-palette-surface) */ html[data-theme="dark"] .dynamic-recap-step .confirmation-section { background-color: #1a1d21 !important; background: #1a1d21 !important; border-color: var(--wfc-secondary) !important; } /* Confirmation section password/OTP inputs */ html[data-theme="dark"] .dynamic-recap-step .mud-input-slot, html[data-theme="dark"] .dynamic-recap-step .mud-input-root, html[data-theme="dark"] .dynamic-recap-step input.mud-input-slot { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; } html[data-theme="dark"] .dynamic-recap-step .mud-input-outlined { background: #212529 !important; } html[data-theme="dark"] .dynamic-recap-step .mud-input-outlined-border { border-color: #343a40 !important; } html[data-theme="dark"] .dynamic-recap-step .mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--wfc-secondary) !important; } html[data-theme="dark"] .dynamic-recap-step .mud-input-label { color: #adb5bd !important; } /* Recap row details */ html[data-theme="dark"] .dynamic-recap-step .recap-details { background: #212529 !important; } html[data-theme="dark"] .dynamic-recap-step .recap-label { color: #adb5bd !important; } html[data-theme="dark"] .dynamic-recap-step .recap-value { color: #f1f3f5 !important; } html[data-theme="dark"] .dynamic-recap-step .recap-row { border-color: #343a40 !important; } /* Recap divider */ html[data-theme="dark"] .dynamic-recap-step .mud-divider { border-color: #343a40 !important; } /* Disabled primary button in dark mode */ html[data-theme="dark"] .dynamic-recap-step .wfc-btn-primary:disabled, html[data-theme="dark"] .dynamic-recap-step .mud-button-filled:disabled { background: #343a40 !important; background-color: #343a40 !important; color: #6c757d !important; } /* Secondary button in dark mode */ html[data-theme="dark"] .dynamic-recap-step .wfc-btn-secondary, html[data-theme="dark"] .dynamic-recap-step .mud-button-outlined { border-color: #495057 !important; color: #adb5bd !important; } html[data-theme="dark"] .dynamic-recap-step .wfc-btn-secondary:hover, html[data-theme="dark"] .dynamic-recap-step .mud-button-outlined:hover { border-color: #6c757d !important; color: #f1f3f5 !important; background: #2b3035 !important; } /* Success Step */ html[data-theme="dark"] .dynamic-success-step .mud-typography { color: #f1f3f5 !important; } html[data-theme="dark"] .dynamic-success-step .mud-typography-body1 { color: #adb5bd !important; } /* Reference box paper */ html[data-theme="dark"] .dynamic-success-step .mud-paper { background-color: #212529 !important; background: #212529 !important; } html[data-theme="dark"] .dynamic-success-step .mud-typography-caption { color: #6c757d !important; } html[data-theme="dark"] .dynamic-success-step .mud-typography-h6 { color: #f1f3f5 !important; } /* Success step reference box */ html[data-theme="dark"] .dynamic-success-step .reference-box { background: #212529 !important; } html[data-theme="dark"] .dynamic-success-step .reference-label { color: #6c757d !important; } html[data-theme="dark"] .dynamic-success-step .reference-value { color: #f1f3f5 !important; } /* Success step buttons */ html[data-theme="dark"] .dynamic-success-step .mud-button-outlined { border-color: #495057 !important; color: #adb5bd !important; } html[data-theme="dark"] .dynamic-success-step .mud-button-outlined:hover { border-color: #6c757d !important; color: #f1f3f5 !important; background: #2b3035 !important; } html[data-theme="dark"] .dynamic-success-step .mud-button-text { color: #6c757d !important; } html[data-theme="dark"] .dynamic-success-step .mud-button-text:hover { color: #f1f3f5 !important; background: rgba(255, 255, 255, 0.05) !important; } /* ============================================ BENEFICIARY MANAGEMENT - DARK MODE ============================================ */ /* Beneficiaries List Page */ html[data-theme="dark"] .beneficiaries-page { background: #121417 !important; } html[data-theme="dark"] .beneficiaries-page .page-header .mud-typography-h5 { color: #f1f3f5 !important; } html[data-theme="dark"] .beneficiaries-page .page-header .mud-icon-button { color: #f1f3f5 !important; } /* Search bar */ html[data-theme="dark"] .beneficiaries-page .mud-input-outlined { background: #1a1d21 !important; } html[data-theme="dark"] .beneficiaries-page .mud-input-slot, html[data-theme="dark"] .beneficiaries-page input.mud-input-slot { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; } html[data-theme="dark"] .beneficiaries-page .mud-input-outlined-border { border-color: #343a40 !important; } html[data-theme="dark"] .beneficiaries-page .mud-input-label { color: #adb5bd !important; } html[data-theme="dark"] .beneficiaries-page .mud-input-adornment .mud-icon-root { color: #6c757d !important; } /* Group header letter */ html[data-theme="dark"] .beneficiaries-page .beneficiary-group .mud-typography-subtitle2 { color: var(--wfc-secondary) !important; } /* Beneficiary items card */ html[data-theme="dark"] .beneficiaries-page .mud-paper { background: #1a1d21 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .beneficiaries-page .beneficiary-item:hover { background-color: #212529 !important; } html[data-theme="dark"] .beneficiaries-page .border-bottom { border-color: #343a40 !important; } /* Beneficiary name and phone */ html[data-theme="dark"] .beneficiaries-page .mud-typography-body2 { color: #f1f3f5 !important; } html[data-theme="dark"] .beneficiaries-page .mud-typography-caption { color: #6c757d !important; } /* Empty state */ html[data-theme="dark"] .beneficiaries-page .empty-state { background: #1a1d21 !important; } html[data-theme="dark"] .beneficiaries-page .empty-state .mud-typography-h6 { color: #adb5bd !important; } /* MudMenu in beneficiary items */ html[data-theme="dark"] .mud-menu .mud-list { background: #1a1d21 !important; } html[data-theme="dark"] .mud-menu .mud-list-item { color: #f1f3f5 !important; } html[data-theme="dark"] .mud-menu .mud-list-item:hover { background: #2b3035 !important; } /* Add Beneficiary Page */ html[data-theme="dark"] .add-beneficiary-page { background: #121417 !important; } html[data-theme="dark"] .add-beneficiary-page .page-header .mud-typography-h5 { color: #f1f3f5 !important; } html[data-theme="dark"] .add-beneficiary-page .page-header .mud-icon-button { color: #f1f3f5 !important; } /* Form card */ html[data-theme="dark"] .add-beneficiary-page .form-card { background: #1a1d21 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } /* Type selector */ html[data-theme="dark"] .add-beneficiary-page .mud-typography-subtitle2 { color: #f1f3f5 !important; } html[data-theme="dark"] .add-beneficiary-page .type-option { border-color: #343a40 !important; background: transparent !important; } html[data-theme="dark"] .add-beneficiary-page .type-option .mud-icon-root { color: #adb5bd !important; } html[data-theme="dark"] .add-beneficiary-page .type-option .mud-typography-body2 { color: #f1f3f5 !important; } html[data-theme="dark"] .add-beneficiary-page .type-option .mud-typography-caption { color: #6c757d !important; } html[data-theme="dark"] .add-beneficiary-page .type-option:hover { border-color: var(--wfc-secondary) !important; background: rgba(255, 223, 28, 0.08) !important; } html[data-theme="dark"] .add-beneficiary-page .type-option.selected { border-color: var(--wfc-secondary) !important; background: rgba(255, 223, 28, 0.1) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .add-beneficiary-page .type-option.selected .mud-icon-root { color: var(--wfc-secondary) !important; } /* Form inputs */ html[data-theme="dark"] .add-beneficiary-page .mud-input-outlined { background: #212529 !important; } html[data-theme="dark"] .add-beneficiary-page .mud-input-slot, html[data-theme="dark"] .add-beneficiary-page input.mud-input-slot { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; } html[data-theme="dark"] .add-beneficiary-page .mud-input-outlined-border { border-color: #343a40 !important; } html[data-theme="dark"] .add-beneficiary-page .mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--wfc-secondary) !important; } html[data-theme="dark"] .add-beneficiary-page .mud-input-label { color: #adb5bd !important; } html[data-theme="dark"] .add-beneficiary-page .mud-input-helper-text { color: #6c757d !important; } /* Phone input wrapper */ html[data-theme="dark"] .add-beneficiary-page .form-label, html[data-theme="dark"] .edit-beneficiary-page .form-label { color: #adb5bd !important; } html[data-theme="dark"] .add-beneficiary-page .phone-input-wrapper, html[data-theme="dark"] .edit-beneficiary-page .phone-input-wrapper { background: #212529 !important; border-color: #343a40 !important; } html[data-theme="dark"] .add-beneficiary-page .phone-input-wrapper input, html[data-theme="dark"] .edit-beneficiary-page .phone-input-wrapper input { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; } html[data-theme="dark"] .add-beneficiary-page .phone-input-wrapper input::placeholder, html[data-theme="dark"] .edit-beneficiary-page .phone-input-wrapper input::placeholder { color: #6c757d !important; } html[data-theme="dark"] .add-beneficiary-page .phone-prefix, html[data-theme="dark"] .edit-beneficiary-page .phone-prefix { color: #adb5bd !important; } html[data-theme="dark"] .add-beneficiary-page .phone-divider, html[data-theme="dark"] .edit-beneficiary-page .phone-divider { background: #343a40 !important; } html[data-theme="dark"] .add-beneficiary-page .validation-message, html[data-theme="dark"] .edit-beneficiary-page .validation-message { color: #FF6B6B !important; } /* Bank badge */ html[data-theme="dark"] .add-beneficiary-page .bank-badge, html[data-theme="dark"] .edit-beneficiary-page .bank-badge { background: rgba(255, 223, 28, 0.08) !important; border-color: rgba(255, 223, 28, 0.15) !important; } /* Success screen */ html[data-theme="dark"] .add-beneficiary-page .success-screen .mud-typography-h5 { color: #f1f3f5 !important; } html[data-theme="dark"] .add-beneficiary-page .success-screen .mud-typography-body1 { color: #adb5bd !important; } /* Edit Beneficiary Page */ html[data-theme="dark"] .edit-beneficiary-page { background: #121417 !important; } html[data-theme="dark"] .edit-beneficiary-page .page-header .mud-typography-h5 { color: #f1f3f5 !important; } html[data-theme="dark"] .edit-beneficiary-page .page-header .mud-icon-button { color: #f1f3f5 !important; } /* Profile card */ html[data-theme="dark"] .edit-beneficiary-page .profile-card { background: #1a1d21 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .edit-beneficiary-page .profile-card .mud-typography-h6 { color: #f1f3f5 !important; } html[data-theme="dark"] .edit-beneficiary-page .profile-card .mud-typography-body2 { color: #adb5bd !important; } /* Quick actions buttons */ html[data-theme="dark"] .edit-beneficiary-page .quick-actions .mud-button-outlined { border-color: #495057 !important; color: #adb5bd !important; } html[data-theme="dark"] .edit-beneficiary-page .quick-actions .mud-button-outlined:hover { border-color: #6c757d !important; color: #f1f3f5 !important; background: #2b3035 !important; } /* Info card */ html[data-theme="dark"] .edit-beneficiary-page .info-card { background: #1a1d21 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .edit-beneficiary-page .info-card .mud-typography-subtitle2 { color: #f1f3f5 !important; } html[data-theme="dark"] .edit-beneficiary-page .info-row { border-color: #343a40 !important; } html[data-theme="dark"] .edit-beneficiary-page .info-row .mud-typography-body2 { color: #f1f3f5 !important; } html[data-theme="dark"] .edit-beneficiary-page .info-row .mud-typography-caption { color: #6c757d !important; } /* Edit form card */ html[data-theme="dark"] .edit-beneficiary-page .edit-form-card { background: #1a1d21 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .edit-beneficiary-page .mud-input-outlined { background: #212529 !important; } html[data-theme="dark"] .edit-beneficiary-page .mud-input-slot, html[data-theme="dark"] .edit-beneficiary-page input.mud-input-slot { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; } html[data-theme="dark"] .edit-beneficiary-page .mud-input-outlined-border { border-color: #343a40 !important; } html[data-theme="dark"] .edit-beneficiary-page .mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--wfc-secondary) !important; } html[data-theme="dark"] .edit-beneficiary-page .mud-input-label { color: #adb5bd !important; } html[data-theme="dark"] .edit-beneficiary-page .mud-input-helper-text { color: #6c757d !important; } /* Edit form buttons */ html[data-theme="dark"] .edit-beneficiary-page .edit-btn.mud-button-outlined { border-color: #495057 !important; color: #adb5bd !important; } html[data-theme="dark"] .edit-beneficiary-page .edit-btn.mud-button-outlined:hover { border-color: #6c757d !important; color: #f1f3f5 !important; background: #2b3035 !important; } /* Delete Beneficiary Dialog */ html[data-theme="dark"] .mud-dialog { background: #1a1d21 !important; } html[data-theme="dark"] .mud-dialog .mud-dialog-content { background: #1a1d21 !important; color: #f1f3f5 !important; } html[data-theme="dark"] .mud-dialog .mud-dialog-actions { background: #1a1d21 !important; } html[data-theme="dark"] .mud-dialog .mud-typography-h6 { color: #f1f3f5 !important; } html[data-theme="dark"] .mud-dialog .mud-typography-body1 { color: #adb5bd !important; } html[data-theme="dark"] .mud-dialog .mud-button-text { color: #adb5bd !important; } html[data-theme="dark"] .mud-dialog .mud-button-text:hover { background: rgba(255, 255, 255, 0.08) !important; } /* Beneficiary Picker Dialog */ html[data-theme="dark"] .beneficiary-picker-list .mud-list { background: transparent !important; } html[data-theme="dark"] .beneficiary-picker-list .mud-list-item { color: #f1f3f5 !important; } html[data-theme="dark"] .beneficiary-picker-list .mud-list-item:hover { background: #2b3035 !important; } /* ============================================ SYSTEM PREFERENCE - RECAP, SUCCESS & BENEFICIARIES ============================================ */ @media (prefers-color-scheme: dark) { /* Recap Step */ html[data-theme="system"] .dynamic-recap-step .mud-paper { background-color: #212529 !important; background: #212529 !important; } html[data-theme="system"] .dynamic-recap-step .mud-typography { color: #f1f3f5 !important; } html[data-theme="system"] .dynamic-recap-step .mud-typography-body2 { color: #adb5bd !important; } html[data-theme="system"] .dynamic-recap-step .font-weight-medium, html[data-theme="system"] .dynamic-recap-step .font-weight-bold { color: #f1f3f5 !important; } html[data-theme="system"] .dynamic-recap-step .mud-typography-caption { color: #6c757d !important; } html[data-theme="system"] .dynamic-recap-step .mud-list { background: transparent !important; } html[data-theme="system"] .dynamic-recap-step .mud-list-item { border-color: #343a40 !important; } html[data-theme="system"] .dynamic-recap-step .mud-paper[style*="warning"] { background-color: rgba(255, 223, 28, 0.1) !important; background: rgba(255, 223, 28, 0.1) !important; } html[data-theme="system"] .dynamic-recap-step .confirmation-section { background-color: #1a1d21 !important; background: #1a1d21 !important; border-color: var(--wfc-secondary) !important; } html[data-theme="system"] .dynamic-recap-step .mud-input-slot, html[data-theme="system"] .dynamic-recap-step .mud-input-root, html[data-theme="system"] .dynamic-recap-step input.mud-input-slot { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; } html[data-theme="system"] .dynamic-recap-step .mud-input-outlined { background: #212529 !important; } html[data-theme="system"] .dynamic-recap-step .mud-input-outlined-border { border-color: #343a40 !important; } html[data-theme="system"] .dynamic-recap-step .mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--wfc-secondary) !important; } html[data-theme="system"] .dynamic-recap-step .mud-input-label { color: #adb5bd !important; } html[data-theme="system"] .dynamic-recap-step .recap-details { background: #212529 !important; } html[data-theme="system"] .dynamic-recap-step .recap-label { color: #adb5bd !important; } html[data-theme="system"] .dynamic-recap-step .recap-value { color: #f1f3f5 !important; } html[data-theme="system"] .dynamic-recap-step .recap-row { border-color: #343a40 !important; } html[data-theme="system"] .dynamic-recap-step .mud-divider { border-color: #343a40 !important; } html[data-theme="system"] .dynamic-recap-step .wfc-btn-primary:disabled, html[data-theme="system"] .dynamic-recap-step .mud-button-filled:disabled { background: #343a40 !important; background-color: #343a40 !important; color: #6c757d !important; } html[data-theme="system"] .dynamic-recap-step .wfc-btn-secondary, html[data-theme="system"] .dynamic-recap-step .mud-button-outlined { border-color: #495057 !important; color: #adb5bd !important; } html[data-theme="system"] .dynamic-recap-step .wfc-btn-secondary:hover, html[data-theme="system"] .dynamic-recap-step .mud-button-outlined:hover { border-color: #6c757d !important; color: #f1f3f5 !important; background: #2b3035 !important; } /* Success Step */ html[data-theme="system"] .dynamic-success-step .mud-typography { color: #f1f3f5 !important; } html[data-theme="system"] .dynamic-success-step .mud-typography-body1 { color: #adb5bd !important; } html[data-theme="system"] .dynamic-success-step .mud-paper { background-color: #212529 !important; background: #212529 !important; } html[data-theme="system"] .dynamic-success-step .mud-typography-caption { color: #6c757d !important; } html[data-theme="system"] .dynamic-success-step .mud-typography-h6 { color: #f1f3f5 !important; } html[data-theme="system"] .dynamic-success-step .reference-box { background: #212529 !important; } html[data-theme="system"] .dynamic-success-step .reference-label { color: #6c757d !important; } html[data-theme="system"] .dynamic-success-step .reference-value { color: #f1f3f5 !important; } html[data-theme="system"] .dynamic-success-step .mud-button-outlined { border-color: #495057 !important; color: #adb5bd !important; } html[data-theme="system"] .dynamic-success-step .mud-button-outlined:hover { border-color: #6c757d !important; color: #f1f3f5 !important; background: #2b3035 !important; } html[data-theme="system"] .dynamic-success-step .mud-button-text { color: #6c757d !important; } html[data-theme="system"] .dynamic-success-step .mud-button-text:hover { color: #f1f3f5 !important; background: rgba(255, 255, 255, 0.05) !important; } /* Beneficiaries List Page */ html[data-theme="system"] .beneficiaries-page { background: #121417 !important; } html[data-theme="system"] .beneficiaries-page .page-header .mud-typography-h5 { color: #f1f3f5 !important; } html[data-theme="system"] .beneficiaries-page .page-header .mud-icon-button { color: #f1f3f5 !important; } html[data-theme="system"] .beneficiaries-page .mud-input-outlined { background: #1a1d21 !important; } html[data-theme="system"] .beneficiaries-page .mud-input-slot, html[data-theme="system"] .beneficiaries-page input.mud-input-slot { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; } html[data-theme="system"] .beneficiaries-page .mud-input-outlined-border { border-color: #343a40 !important; } html[data-theme="system"] .beneficiaries-page .mud-input-label { color: #adb5bd !important; } html[data-theme="system"] .beneficiaries-page .mud-input-adornment .mud-icon-root { color: #6c757d !important; } html[data-theme="system"] .beneficiaries-page .beneficiary-group .mud-typography-subtitle2 { color: var(--wfc-secondary) !important; } html[data-theme="system"] .beneficiaries-page .mud-paper { background: #1a1d21 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } html[data-theme="system"] .beneficiaries-page .beneficiary-item:hover { background-color: #212529 !important; } html[data-theme="system"] .beneficiaries-page .border-bottom { border-color: #343a40 !important; } html[data-theme="system"] .beneficiaries-page .mud-typography-body2 { color: #f1f3f5 !important; } html[data-theme="system"] .beneficiaries-page .mud-typography-caption { color: #6c757d !important; } html[data-theme="system"] .beneficiaries-page .empty-state { background: #1a1d21 !important; } html[data-theme="system"] .beneficiaries-page .empty-state .mud-typography-h6 { color: #adb5bd !important; } /* MudMenu */ html[data-theme="system"] .mud-menu .mud-list { background: #1a1d21 !important; } html[data-theme="system"] .mud-menu .mud-list-item { color: #f1f3f5 !important; } html[data-theme="system"] .mud-menu .mud-list-item:hover { background: #2b3035 !important; } /* Add Beneficiary Page */ html[data-theme="system"] .add-beneficiary-page { background: #121417 !important; } html[data-theme="system"] .add-beneficiary-page .page-header .mud-typography-h5 { color: #f1f3f5 !important; } html[data-theme="system"] .add-beneficiary-page .page-header .mud-icon-button { color: #f1f3f5 !important; } html[data-theme="system"] .add-beneficiary-page .form-card { background: #1a1d21 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } html[data-theme="system"] .add-beneficiary-page .mud-typography-subtitle2 { color: #f1f3f5 !important; } html[data-theme="system"] .add-beneficiary-page .type-option { border-color: #343a40 !important; background: transparent !important; } html[data-theme="system"] .add-beneficiary-page .type-option .mud-icon-root { color: #adb5bd !important; } html[data-theme="system"] .add-beneficiary-page .type-option .mud-typography-body2 { color: #f1f3f5 !important; } html[data-theme="system"] .add-beneficiary-page .type-option .mud-typography-caption { color: #6c757d !important; } html[data-theme="system"] .add-beneficiary-page .type-option:hover { border-color: var(--wfc-secondary) !important; background: rgba(255, 223, 28, 0.08) !important; } html[data-theme="system"] .add-beneficiary-page .type-option.selected { border-color: var(--wfc-secondary) !important; background: rgba(255, 223, 28, 0.1) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; } html[data-theme="system"] .add-beneficiary-page .type-option.selected .mud-icon-root { color: var(--wfc-secondary) !important; } html[data-theme="system"] .add-beneficiary-page .mud-input-outlined { background: #212529 !important; } html[data-theme="system"] .add-beneficiary-page .mud-input-slot, html[data-theme="system"] .add-beneficiary-page input.mud-input-slot { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; } html[data-theme="system"] .add-beneficiary-page .mud-input-outlined-border { border-color: #343a40 !important; } html[data-theme="system"] .add-beneficiary-page .mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--wfc-secondary) !important; } html[data-theme="system"] .add-beneficiary-page .mud-input-label { color: #adb5bd !important; } html[data-theme="system"] .add-beneficiary-page .mud-input-helper-text { color: #6c757d !important; } /* Phone input wrapper */ html[data-theme="system"] .add-beneficiary-page .form-label, html[data-theme="system"] .edit-beneficiary-page .form-label { color: #adb5bd !important; } html[data-theme="system"] .add-beneficiary-page .phone-input-wrapper, html[data-theme="system"] .edit-beneficiary-page .phone-input-wrapper { background: #212529 !important; border-color: #343a40 !important; } html[data-theme="system"] .add-beneficiary-page .phone-input-wrapper input, html[data-theme="system"] .edit-beneficiary-page .phone-input-wrapper input { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; } html[data-theme="system"] .add-beneficiary-page .phone-input-wrapper input::placeholder, html[data-theme="system"] .edit-beneficiary-page .phone-input-wrapper input::placeholder { color: #6c757d !important; } html[data-theme="system"] .add-beneficiary-page .phone-prefix, html[data-theme="system"] .edit-beneficiary-page .phone-prefix { color: #adb5bd !important; } html[data-theme="system"] .add-beneficiary-page .phone-divider, html[data-theme="system"] .edit-beneficiary-page .phone-divider { background: #343a40 !important; } html[data-theme="system"] .add-beneficiary-page .validation-message, html[data-theme="system"] .edit-beneficiary-page .validation-message { color: #FF6B6B !important; } /* Bank badge */ html[data-theme="system"] .add-beneficiary-page .bank-badge, html[data-theme="system"] .edit-beneficiary-page .bank-badge { background: rgba(255, 223, 28, 0.08) !important; border-color: rgba(255, 223, 28, 0.15) !important; } /* Success screen */ html[data-theme="system"] .add-beneficiary-page .success-screen .mud-typography-h5 { color: #f1f3f5 !important; } html[data-theme="system"] .add-beneficiary-page .success-screen .mud-typography-body1 { color: #adb5bd !important; } /* Edit Beneficiary Page */ html[data-theme="system"] .edit-beneficiary-page { background: #121417 !important; } html[data-theme="system"] .edit-beneficiary-page .page-header .mud-typography-h5 { color: #f1f3f5 !important; } html[data-theme="system"] .edit-beneficiary-page .page-header .mud-icon-button { color: #f1f3f5 !important; } html[data-theme="system"] .edit-beneficiary-page .profile-card { background: #1a1d21 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } html[data-theme="system"] .edit-beneficiary-page .profile-card .mud-typography-h6 { color: #f1f3f5 !important; } html[data-theme="system"] .edit-beneficiary-page .profile-card .mud-typography-body2 { color: #adb5bd !important; } html[data-theme="system"] .edit-beneficiary-page .quick-actions .mud-button-outlined { border-color: #495057 !important; color: #adb5bd !important; } html[data-theme="system"] .edit-beneficiary-page .quick-actions .mud-button-outlined:hover { border-color: #6c757d !important; color: #f1f3f5 !important; background: #2b3035 !important; } html[data-theme="system"] .edit-beneficiary-page .info-card { background: #1a1d21 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } html[data-theme="system"] .edit-beneficiary-page .info-card .mud-typography-subtitle2 { color: #f1f3f5 !important; } html[data-theme="system"] .edit-beneficiary-page .info-row { border-color: #343a40 !important; } html[data-theme="system"] .edit-beneficiary-page .info-row .mud-typography-body2 { color: #f1f3f5 !important; } html[data-theme="system"] .edit-beneficiary-page .info-row .mud-typography-caption { color: #6c757d !important; } html[data-theme="system"] .edit-beneficiary-page .edit-form-card { background: #1a1d21 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } html[data-theme="system"] .edit-beneficiary-page .mud-input-outlined { background: #212529 !important; } html[data-theme="system"] .edit-beneficiary-page .mud-input-slot, html[data-theme="system"] .edit-beneficiary-page input.mud-input-slot { color: #f1f3f5 !important; -webkit-text-fill-color: #f1f3f5 !important; } html[data-theme="system"] .edit-beneficiary-page .mud-input-outlined-border { border-color: #343a40 !important; } html[data-theme="system"] .edit-beneficiary-page .mud-input-outlined:focus-within .mud-input-outlined-border { border-color: var(--wfc-secondary) !important; } html[data-theme="system"] .edit-beneficiary-page .mud-input-label { color: #adb5bd !important; } html[data-theme="system"] .edit-beneficiary-page .mud-input-helper-text { color: #6c757d !important; } html[data-theme="system"] .edit-beneficiary-page .edit-btn.mud-button-outlined { border-color: #495057 !important; color: #adb5bd !important; } html[data-theme="system"] .edit-beneficiary-page .edit-btn.mud-button-outlined:hover { border-color: #6c757d !important; color: #f1f3f5 !important; background: #2b3035 !important; } /* Delete Beneficiary Dialog */ html[data-theme="system"] .mud-dialog { background: #1a1d21 !important; } html[data-theme="system"] .mud-dialog .mud-dialog-content { background: #1a1d21 !important; color: #f1f3f5 !important; } html[data-theme="system"] .mud-dialog .mud-dialog-actions { background: #1a1d21 !important; } html[data-theme="system"] .mud-dialog .mud-typography-h6 { color: #f1f3f5 !important; } html[data-theme="system"] .mud-dialog .mud-typography-body1 { color: #adb5bd !important; } html[data-theme="system"] .mud-dialog .mud-button-text { color: #adb5bd !important; } html[data-theme="system"] .mud-dialog .mud-button-text:hover { background: rgba(255, 255, 255, 0.08) !important; } /* Beneficiary Picker Dialog */ html[data-theme="system"] .beneficiary-picker-list .mud-list { background: transparent !important; } html[data-theme="system"] .beneficiary-picker-list .mud-list-item { color: #f1f3f5 !important; } html[data-theme="system"] .beneficiary-picker-list .mud-list-item:hover { background: #2b3035 !important; } }