/* =====================================================================
   SAFE PLAYDATE DESIGN SYSTEM
   Teal primary — warm, trusted, colorblind-safe
   ===================================================================== */

/* === CSS VARIABLES FOR CONSISTENT THEMING === */
:root {
    --primary: #0f766e;
    --primary-hover: #0d6b63;
    --primary-light: #ccfbf1;
    --primary-mid: #0d9488;
    --amber: #f59e0b;
    --amber-light: #fef3c7;
    --amber-dark: #b45309;
    /* Legacy aliases — kept for backwards compat */
    --primary-purple: #0f766e;
    --primary-purple-dark: #0d6b63;
    --primary-purple-light: #ccfbf1;
    --secondary-purple: #0d9488;
    --accent-purple: #99f6e4;
    --light-purple: #f0fdfa;
    --purple-gradient: #0f766e;
    --purple-gradient-hover: #0d6b63;
    --dark-purple: #134e4a;
    /* Warm accent — token economy only */
    --accent-light: #f0fdfa;
    --warm-accent: #f59e0b;
    --warm-accent-light: #fef3c7;
    --warm-accent-muted: #fde68a;
    --text-dark: #1a2726;
    --text-light: #5f7574;
    --white: #ffffff;
    --light-bg: #faf9f7;
    --border-color: #e2e9e8;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --border-radius: 10px;
    --border-radius-lg: 14px;
    --transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    /* Semantic surface tokens used by isolated components */
    --bg: #ffffff;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-hover: #f3f4f6;
    --surface-2: #f4f6f6;
    --text: #1a2726;
    --text-secondary: #5f7574;
    --border: #e2e9e8;
}

/* === DARK MODE VARIABLES === */
body.dark-mode {
    --text-dark: #e8f0ef;
    --text-light: #9db0af;
    --white: #1a2422;
    --light-bg: #111918;
    --light-purple: #1f2d2b;
    --accent-light: #1f2d2b;
    --border-color: #2a3d3b;
    --primary: #0d9488;
    --primary-hover: #0f9e96;
    --primary-light: rgba(13,148,136,.12);
    --purple-gradient: #0d9488;
    --purple-gradient-hover: #0f9e96;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.7);
    /* Semantic surface tokens — dark mode */
    --bg: #0d1117;
    --bg-primary: #151b23;
    --bg-secondary: #1c2333;
    --bg-hover: #21273a;
    --surface-2: #1c2333;
    --text: #e2e8f0;
    --text-secondary: #9db0af;
    --border: #2a3d3b;
    background: #0d1117 !important;
    color: #e2e8f0 !important;
}

/* Page layout containers must inherit the dark background */
body.dark-mode .app-wrapper {
    background: #0d1117 !important;
}

body.dark-mode .main-content {
    background: #0d1117 !important;
}

body.dark-mode .page-body {
    background: #0d1117 !important;
}

/* Cards */
body.dark-mode .card {
    background-color: #161b22 !important;
    color: #e2e8f0 !important;
    border-color: #30363d !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .card-body {
    background-color: #161b22 !important;
    color: #e2e8f0 !important;
}

body.dark-mode .card-header {
    background-color: #1e2433 !important;
    border-bottom-color: #30363d !important;
    color: #e2e8f0 !important;
}

body.dark-mode .card-footer {
    background-color: #1e2433 !important;
    border-top-color: #30363d !important;
}

/* Headings and text � only apply on dark surfaces, not inside white cards */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #e2e8f0 !important;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode li,
body.dark-mode td,
body.dark-mode th {
    color: #c9d1d9 !important;
}

body.dark-mode .text-muted,
body.dark-mode small {
    color: #8b949e !important;
}

/* ?? White-surface carve-outs ??????????????????????????????????????????
   Any container that stays white in dark mode must keep light-readable
   text and input colors. Add new white-surface wrappers here.
   ------------------------------------------------------------------- */

/* Inputs & selects inside any white surface stay light */
body.dark-mode .card .form-control,
body.dark-mode .card .form-select,
body.dark-mode .card-body .form-control,
body.dark-mode .card-body .form-select,
body.dark-mode .signin-card .form-control,
body.dark-mode .signin-card .form-select,
body.dark-mode .signin-body .form-control,
body.dark-mode .signin-body .form-select,
body.dark-mode .signup-card .form-control,
body.dark-mode .signup-card .form-select {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

body.dark-mode .card .form-control:focus,
body.dark-mode .card .form-select:focus,
body.dark-mode .card-body .form-control:focus,
body.dark-mode .card-body .form-select:focus,
body.dark-mode .signin-card .form-control:focus,
body.dark-mode .signin-card .form-select:focus,
body.dark-mode .signin-body .form-control:focus,
body.dark-mode .signin-body .form-select:focus,
body.dark-mode .signup-card .form-control:focus,
body.dark-mode .signup-card .form-select:focus {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: var(--primary-purple) !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2) !important;
}

body.dark-mode .card .form-control::placeholder,
body.dark-mode .card-body .form-control::placeholder,
body.dark-mode .signin-card .form-control::placeholder,
body.dark-mode .signin-body .form-control::placeholder,
body.dark-mode .signup-card .form-control::placeholder {
    color: #94a3b8 !important;
}

body.dark-mode .card .form-label,
body.dark-mode .card label,
body.dark-mode .card-body .form-label,
body.dark-mode .card-body label,
body.dark-mode .signin-card .form-label,
body.dark-mode .signin-card label,
body.dark-mode .signin-body .form-label,
body.dark-mode .signin-body label,
body.dark-mode .signup-card .form-label,
body.dark-mode .signup-card label {
    color: #475569 !important;
}

body.dark-mode .card .input-group-text,
body.dark-mode .card-body .input-group-text,
body.dark-mode .signin-card .input-group-text,
body.dark-mode .signin-body .input-group-text {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
}

/* Text inside white surfaces inherits the container's own colors */
body.dark-mode .signin-card h1,
body.dark-mode .signin-card h2,
body.dark-mode .signin-card h3,
body.dark-mode .signin-card p,
body.dark-mode .signin-card span,
body.dark-mode .signin-body h1,
body.dark-mode .signin-body h2,
body.dark-mode .signin-body h3,
body.dark-mode .signin-body p,
body.dark-mode .signin-body span {
    color: inherit !important;
}

/* Restore exact scoped colors defined in SignIn.razor <style> */
body.dark-mode .signin-title {
    color: #1e293b !important;
}

body.dark-mode .signin-subtitle {
    color: #64748b !important;
}

/* Home page dark-mode surfaces — elevate cards to dark teal surface */
body.dark-mode .hero-card {
    background: linear-gradient(160deg, #1a2b29 0%, #0f1e1d 100%) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .hero-card h1,
body.dark-mode .hero-card h2,
body.dark-mode .hero-card h3,
body.dark-mode .hero-card .hero-title {
    color: #e2e8f0 !important;
}

body.dark-mode .hero-card p,
body.dark-mode .hero-card .hero-subtitle {
    color: #94a3b8 !important;
}

body.dark-mode .hero-card span {
    color: #c9d1d9 !important;
}

body.dark-mode .hero-card .hero-badge,
body.dark-mode .hero-card .hero-badge span {
    color: #5eead4 !important;
    background: rgba(13, 148, 136, 0.15) !important;
}

body.dark-mode .feature-card h1,
body.dark-mode .feature-card h2,
body.dark-mode .feature-card h3,
body.dark-mode .feature-card .feature-title {
    color: #1e293b !important;
}

body.dark-mode .feature-card p,
body.dark-mode .feature-card .feature-desc {
    color: #64748b !important;
}

body.dark-mode .feature-card span {
    color: #64748b !important;
}

body.dark-mode .hero-title     { color: #e2e8f0 !important; }
body.dark-mode .hero-subtitle  { color: #94a3b8 !important; }
body.dark-mode .hero-badge     { color: #5eead4 !important; background: rgba(13, 148, 136, 0.15) !important; }
body.dark-mode .feature-title  { color: #e2e8f0 !important; }
body.dark-mode .feature-desc   { color: #94a3b8 !important; }

/* How-it-works section dark mode */
body.dark-mode .how-it-works {
    background: #161b22 !important;
    border-color: #2a3d3b !important;
}

body.dark-mode .how-step {
    border-bottom-color: #2a3d3b !important;
}

body.dark-mode .how-trust-row {
    border-top-color: #2a3d3b !important;
}

body.dark-mode .how-title,
body.dark-mode .step-title {
    color: #e2e8f0 !important;
}

body.dark-mode .how-label,
body.dark-mode .step-number {
    color: #5eead4 !important;
}

body.dark-mode .step-desc {
    color: #94a3b8 !important;
}

/* Text inside white auth surfaces � use explicit values not inherit */
body.dark-mode .signin-card h1,
body.dark-mode .signin-card h2,
body.dark-mode .signin-card h3,
body.dark-mode .signin-body h1,
body.dark-mode .signin-body h2,
body.dark-mode .signin-body h3 {
    color: #1e293b !important;
}

body.dark-mode .signin-card p,
body.dark-mode .signin-card span,
body.dark-mode .signin-body p,
body.dark-mode .signin-body span {
    color: #64748b !important;
}

body.dark-mode .signin-title   { color: #1e293b !important; }
body.dark-mode .signin-subtitle { color: #64748b !important; }

/* === DARK MODE SPECIFIC STYLES === */

/* Adjust scrollbar for dark mode */
body.dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background-color: #525252;
    border-radius: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #161b22;
    border-radius: 10px;
}

/* Force all links to keep the purple theme */
body.dark-mode a {
    color: var(--primary-purple) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

body.dark-mode a:hover {
    color: var(--primary-purple-dark) !important;
    text-decoration: underline !important;
}

/* Adjust code and preformatted text backgrounds */
body.dark-mode code,
body.dark-mode pre {
    background-color: #161b22 !important;
    color: #c9d1d9 !important;
    border-radius: 6px !important;
    padding: 0.2rem 0.4rem !important;
}

/* Tables */
body.dark-mode .table {
    color: #e2e8f0 !important;
    border-color: #30363d !important;
}

body.dark-mode .table > :not(caption) > * > * {
    background-color: #161b22 !important;
    border-bottom-color: #30363d !important;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #1e2433 !important;
}

body.dark-mode .table-hover > tbody > tr:hover > * {
    background-color: #21262d !important;
}

/* Modals */
body.dark-mode .modal-content {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #e2e8f0 !important;
}

body.dark-mode .modal-header {
    border-bottom-color: #30363d !important;
}

body.dark-mode .modal-footer {
    border-top-color: #30363d !important;
}

/* Dropdowns */
body.dark-mode .dropdown-menu {
    background-color: #161b22 !important;
    border-color: #30363d !important;
}

body.dark-mode .dropdown-item {
    color: #e2e8f0 !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #21262d !important;
    color: #e2e8f0 !important;
}

body.dark-mode .dropdown-divider {
    border-top-color: #30363d !important;
}

/* Buttons � keep branded ones, tone down grey ones */
body.dark-mode .btn-secondary,
body.dark-mode .btn-outline-secondary {
    background-color: #21262d !important;
    border-color: #30363d !important;
    color: #e2e8f0 !important;
}

body.dark-mode .btn-light {
    background-color: #21262d !important;
    border-color: #30363d !important;
    color: #e2e8f0 !important;
}

body.dark-mode .btn-outline-light {
    border-color: #8b949e !important;
    color: #e2e8f0 !important;
}

/* Alerts */
body.dark-mode .alert {
    border-color: #30363d !important;
}

body.dark-mode .alert-info {
    background-color: #1e2d3d !important;
    color: #79c0ff !important;
    border-color: #1f4068 !important;
}

body.dark-mode .alert-warning {
    background-color: #2d2208 !important;
    color: #e3b341 !important;
    border-color: #5c3d0e !important;
}

body.dark-mode .alert-danger {
    background-color: #2d0f0f !important;
    color: #f85149 !important;
    border-color: #5c1414 !important;
}

body.dark-mode .alert-success {
    background-color: #0f2d1e !important;
    color: #3fb950 !important;
    border-color: #145c2e !important;
}

/* Badges */
body.dark-mode .badge.bg-light {
    background-color: #21262d !important;
    color: #e2e8f0 !important;
}

/* List groups */
body.dark-mode .list-group-item {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #e2e8f0 !important;
}

body.dark-mode .list-group-item:hover {
    background-color: #21262d !important;
}

/* Borders and dividers */
body.dark-mode hr {
    border-color: #30363d !important;
}

body.dark-mode .border {
    border-color: #30363d !important;
}

/* Navbar stays purple-gradient in dark mode (sidebar already handles itself) */
body.dark-mode .navbar {
    background: var(--purple-gradient) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .user-name-link {
    color: #e2e8f0 !important;
}

body.dark-mode .user-name-link:hover {
    color: var(--primary-purple-light) !important;
}

/* Syncfusion components */
body.dark-mode .e-grid,
body.dark-mode .e-panel,
body.dark-mode .e-card {
    background-color: #161b22 !important;
    border-color: #30363d !important;
    color: #e2e8f0 !important;
}

body.dark-mode .e-grid .e-headercell,
body.dark-mode .e-grid .e-headercelldiv {
    background-color: #1e2433 !important;
    color: #e2e8f0 !important;
}

body.dark-mode .e-grid .e-rowcell {
    background-color: #161b22 !important;
    color: #e2e8f0 !important;
    border-color: #30363d !important;
}

/* Bootstrap btn-outline-primary — override Bootstrap blue with design-system teal */
.btn-outline-primary {
    --bs-btn-color: #0f766e;
    --bs-btn-border-color: #0f766e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0f766e;
    --bs-btn-hover-border-color: #0f766e;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6b63;
    --bs-btn-active-border-color: #0d6b63;
    --bs-btn-focus-shadow-rgb: 15, 118, 110;
}

/* Bootstrap Badge Colors - Dynamic Status Indicators */
.badge-success,
.bg-success {
    background-color: #0891b2 !important;
    color: white !important;
}

.text-success {
    color: #0891b2 !important;
}

.badge-warning,
.bg-warning {
    background-color: #f59e0b !important;
    color: white !important;
}

.badge-danger,
.bg-danger {
    background-color: #ef4444 !important;
    color: white !important;
}

.badge-info,
.bg-info {
    background-color: #3b82f6 !important;
    color: white !important;
}

.badge-secondary,
.bg-secondary {
    background-color: #6b7280 !important;
    color: white !important;
}

.badge-primary {
    background-color: #0f766e !important;
    color: white !important;
}

/* === GLOBAL STYLES === */
html {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color-scheme: light dark;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background: #faf9f7 !important;
    min-height: 100vh !important;
    color: var(--text-dark) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    line-height: 1.6 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-dark) !important;
    font-weight: 600;
    letter-spacing: -0.02em !important;
}

h1,
h2,
h3 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

/* Geist for numeric data — tabular alignment for stats, balances, and counts */
.stat-number,
.token-balance,
.token-amount,
.badge-count,
[class*="count"],
[class*="balance"],
[class*="stat-value"],
.leaderboard-score,
.rating-number,
td.numeric,
th.numeric {
    font-family: 'Geist', 'Geist Mono', monospace;
    font-variant-numeric: tabular-nums;
}

h1:focus:not(:focus-visible) {
    outline: none;
}

/* === CSS CLASSES TO REPLACE INLINE STYLES (FIXES CSS WARNINGS) === */
.card-header-gradient {
    background: #0f766e !important;
}

.card-header-gradient h3,
.card-header-gradient h5 {
    color: white !important;
    text-shadow: none !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.card-header-gradient p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.card-header-gradient i,
.card-header-gradient .fas,
.card-header-gradient .fa {
    color: white !important;
}

.text-white-shadow {
    color: white !important;
}

.icon-white {
    color: white !important;
}

/* === PREVENT AUTHENTICATION WARNING FLASH === */
.auth-status-loading,
.auth-initializing {
    opacity: 0.7;
    transition: opacity 0.5s ease-in-out;
}

.auth-warning {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}

.auth-warning.show {
    opacity: 1;
}

/* Hide any red authentication warnings for the first 2 seconds after page load */
.page-initializing .auth-warning,
.page-initializing .text-danger,
.page-initializing .alert-danger {
    display: none !important;
}

/* === ERROR UI IMPROVEMENTS === */
#blazor-error-ui {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
    padding: 1rem !important;
    color: white !important;
    text-align: center !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4) !important;
    transform: translateY(-100%) !important;
    transition: transform 0.3s ease-in-out !important;
    display: none !important; /* Hide by default */
}

#blazor-error-ui.show {
    display: block !important;
    transform: translateY(0) !important;
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 0.5rem 1rem !important;
    margin: 0 0.5rem !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
    cursor: pointer !important;
    display: inline-block !important;
}

#blazor-error-ui .reload:hover,
#blazor-error-ui .dismiss:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05) !important;
}

/* === DEVELOPMENT ERROR OVERLAY === */
.console-error-overlay {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    background: #1f2937 !important;
    color: #f3f4f6 !important;
    padding: 1rem !important;
    border-radius: 8px !important;
    max-width: 400px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    font-family: 'Courier New', monospace !important;
    font-size: 0.875rem !important;
    z-index: 999998 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #374151 !important;
    display: none !important;
}

.console-error-overlay.show {
    display: block !important;
}

.console-error-overlay .close-btn {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
    background: none !important;
    border: none !important;
    color: #9ca3af !important;
    cursor: pointer !important;
    font-size: 1.2rem !important;
}

.console-error-overlay .close-btn:hover {
    color: #f3f4f6 !important;
}

/* === BLAZOR ERROR BOUNDARY === */
.blazor-error-boundary {
    background: #fee2e2 !important;
    padding: 1.5rem !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
    border-radius: var(--border-radius) !important;
    margin: 1rem 0 !important;
    box-shadow: var(--shadow-lg) !important;
    display: none !important; /* Hide by default */
}

.blazor-error-boundary.show {
    display: block !important;
}

.blazor-error-boundary::after {
    content: "An error has occurred." !important;
    font-weight: 600 !important;
}

/* === NAVBAR GLOBAL OVERRIDES === */
.navbar,
.e-toolbar,
.top-bar,
.header-bar,
nav {
    background: var(--purple-gradient) !important;
    color: var(--white) !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

.navbar *,
.e-toolbar *,
.navbar-brand,
.navbar-title,
.navbar-text {
    color: var(--white) !important;
}

.navbar .btn,
.navbar button,
.e-toolbar .e-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: var(--white) !important;
    border-radius: 8px !important;
    transition: var(--transition) !important;
    backdrop-filter: blur(10px) !important;
    min-height: 44px !important;
}

.navbar .btn:hover,
.navbar button:hover,
.e-toolbar .e-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: scale(1.05) !important;
}

/* === MENU BUTTON OVERRIDES === */
.menu-btn,
.hamburger-btn,
.e-tbar-menu-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: var(--white) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    transition: var(--transition) !important;
    backdrop-filter: blur(10px) !important;
}

.menu-btn:hover,
.hamburger-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: scale(1.05) !important;
}

/* === BRAND/LOGO STYLES === */
.navbar-brand,
.brand-container,
.navbar-title {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    color: var(--white) !important;
    text-decoration: none !important;
}

.brand-icon,
.brand-icon-small {
    color: var(--white) !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
}

/* === STATUS INDICATOR === */
.status-indicator,
.online-indicator {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 20px !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.online-dot {
    color: #0891b2 !important;
    font-size: 0.5rem !important;
    animation: pulse 2s infinite !important;
}

/* === FORM VALIDATION STYLES === */
.valid.modified:not([type=checkbox]) {
    outline: 2px solid var(--primary-purple) !important;
    border-color: var(--primary-purple) !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1) !important;
}

.invalid {
    outline: 2px solid #ef4444 !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.validation-message {
    color: #ef4444 !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
    font-weight: 500 !important;
}

/* === COMPREHENSIVE PURPLE BACKGROUND TEXT CONTRAST FIX === */

/* Ensure ALL text on purple backgrounds is white */
.card.shadow-purple .card-header,
.card.shadow-purple .card-header *,
.bg-purple,
.bg-purple *,
[style*="background: linear-gradient"][style*="purple"],
[style*="background: linear-gradient"][style*="purple"] *,
[style*="background-color: purple"],
[style*="background-color: purple"] *,
[style*="background: var(--purple-gradient)"],
[style*="background: var(--purple-gradient)"] *,
.e-btn.e-primary,
.e-btn.e-primary *,
.btn-primary,
.btn-primary * {
    color: var(--white) !important;
}

/* === CARD STYLES === */
.card {
    background: var(--white) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden !important;
    transition: var(--transition) !important;
}

.card:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.card-header {
    background: var(--purple-gradient) !important;
    color: var(--white) !important;
    border: none !important;
    padding: 2rem 1.5rem !important;
    text-align: center !important;
}

/* FORCE white text on ALL purple card headers */
.card.shadow-purple .card-header {
    background: var(--purple-gradient) !important;
    color: var(--white) !important;
}

/* Ensure ALL text elements in purple card headers are white */
.card.shadow-purple .card-header *,
.card.shadow-purple .card-header h1,
.card.shadow-purple .card-header h2,
.card.shadow-purple .card-header h3,
.card.shadow-purple .card-header h4,
.card.shadow-purple .card-header h5,
.card.shadow-purple .card-header h6,
.card.shadow-purple .card-header p,
.card.shadow-purple .card-header span,
.card.shadow-purple .card-header div,
.card.shadow-purple .card-header .fas,
.card.shadow-purple .card-header .fa,
.card.shadow-purple .card-header i {
    color: var(--white) !important;
    fill: var(--white) !important;
}

/* Ensure card body text is dark and readable */
.card.shadow-purple .card-body {
    background: var(--white) !important;
    color: var(--text-dark) !important;
}

.card.shadow-purple .card-body h1,
.card.shadow-purple .card-body h2,
.card.shadow-purple .card-body h3,
.card.shadow-purple .card-body h4,
.card.shadow-purple .card-body h5,
.card.shadow-purple .card-body h6 {
    color: var(--text-dark) !important;
}

.card-header h3 {
    color: var(--white) !important;
    margin-bottom: 0.5rem !important;
    font-size: 1.875rem !important;
    font-weight: 700 !important;
}

.card-header p {
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 !important;
    font-size: 1rem !important;
}

.card-body {
    padding: 2rem !important;
}

/* === FORM STYLES === */
.form-group {
    margin-bottom: 1.5rem !important;
}

.form-group label {
    display: block !important;
    margin-bottom: 0.5rem !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.01em !important;
}

/* === SYNCFUSION INPUT OVERRIDES === */
.e-input-group,
.e-input-group.e-control-wrapper,
.e-input-group input,
.e-textbox,
.e-float-input {
    border: 2px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    background: var(--white) !important;
    transition: var(--transition) !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
}

.e-input-group:hover,
.e-input-group.e-control-wrapper:hover {
    border-color: var(--primary-purple-light) !important;
    box-shadow: var(--shadow-sm) !important;
}

.e-input-group.e-input-focus,
.e-input-group.e-control-wrapper.e-input-focus {
    border-color: var(--primary-purple) !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1) !important;
}

/* === DROPDOWN STYLES === */
.e-dropdownlist,
.e-ddl.e-input-group {
    border: 2px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    background: var(--white) !important;
    transition: var(--transition) !important;
}

.e-dropdownlist:hover,
.e-ddl.e-input-group:hover {
    border-color: var(--primary-purple-light) !important;
    box-shadow: var(--shadow-sm) !important;
}

.e-dropdownlist.e-input-focus,
.e-ddl.e-input-group.e-input-focus {
    border-color: var(--primary-purple) !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1) !important;
}

/* === BUTTON STYLES === */
.e-btn,
.btn,
button {
    border-radius: var(--border-radius) !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    letter-spacing: 0.01em !important;
    font-size: 0.875rem !important;
    padding: 0.625rem 1.25rem !important;
}

.e-btn.e-primary,
.btn-primary {
    background: var(--purple-gradient) !important;
    border: none !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-md) !important;
}

/* FORCE white text on ALL primary buttons */
.e-btn.e-primary,
.e-btn.e-primary *,
.e-btn.e-primary span,
.e-btn.e-primary i,
.btn-primary,
.btn-primary *,
.btn-primary span,
.btn-primary i {
    color: var(--white) !important;
    fill: var(--white) !important;
}

.e-btn.e-primary:hover,
.btn-primary:hover {
    background: var(--purple-gradient-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Ensure hover state maintains white text */
.e-btn.e-primary:hover,
.e-btn.e-primary:hover *,
.btn-primary:hover,
.btn-primary:hover * {
    color: var(--white) !important;
    fill: var(--white) !important;
}

.e-btn.e-primary:active,
.btn-primary:active {
    transform: translateY(0) !important;
}

.e-btn.e-primary:disabled,
.btn-primary:disabled {
    background: var(--light-purple) !important;
    color: var(--text-light) !important;
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
    cursor: not-allowed !important;
}

/* === ALERT STYLES === */
.alert {
    border-radius: var(--border-radius) !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 1.5rem !important;
}

.alert-info {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1e40af !important;
}

.alert-warning {
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
    color: #92400e !important;
}

.alert strong {
    font-weight: 700 !important;
}

/* === FORM CONTROLS === */
.form-control,
.form-select {
    border: 2px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    min-height: 44px !important;
    transition: var(--transition) !important;
    background: var(--white) !important;
    color: var(--text-dark) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12) !important;
    outline: none !important;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--primary-purple-light) !important;
}

/* === CHECKBOX STYLES === */
.form-check-input {
    width: 1.25rem !important;
    height: 1.25rem !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 0.375rem !important;
    transition: var(--transition) !important;
}

.form-check-input:checked {
    background-color: var(--primary-purple) !important;
    border-color: var(--primary-purple) !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1) !important;
}

.form-check {
    min-height: 2.75rem !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.form-check-label {
    margin-left: 0.5rem !important;
    font-weight: 500 !important;
    color: var(--text-dark) !important;
    line-height: 1.5 !important;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292 !important;
}

/* === PAYMENT SECTION === */
#card-element {
    background: var(--white) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    padding: 1rem !important;
    transition: var(--transition) !important;
}

#card-element:hover {
    border-color: var(--primary-purple-light) !important;
    box-shadow: var(--shadow-sm) !important;
}

#card-element:focus-within {
    border-color: var(--primary-purple) !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1) !important;
}

/* === SPINNER === */
.spinner-border {
    border-color: rgba(255, 255, 255, 0.3) !important;
    border-top-color: var(--white) !important;
}

/* === SECTION HEADERS === */
h5 {
    color: var(--text-dark) !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 2px solid var(--light-purple) !important;
    position: relative !important;
}

h5::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 50px !important;
    height: 2px !important;
    background: var(--purple-gradient) !important;
    border-radius: 1px !important;
}

/* FORCE white text for ALL h5 elements in card headers and purple backgrounds */
.card-header h5,
.card.shadow-purple .card-header h5,
.bg-purple h5,
[style*="background: linear-gradient"][style*="purple"] h5,
[style*="background: var(--purple-gradient)"] h5 {
    color: var(--white) !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.card-header h5::after,
.card.shadow-purple .card-header h5::after,
.bg-purple h5::after,
[style*="background: linear-gradient"][style*="purple"] h5::after,
[style*="background: var(--purple-gradient)"] h5::after {
    display: none !important;
}

/* Filter section specific fixes */
.card.shadow-purple .card-body h5 {
    color: var(--text-dark) !important;
    border-bottom: 2px solid var(--light-purple) !important;
}

/* === LINKS === */
a {
    color: var(--primary-purple) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
}

/* Prevent the global anchor color from overriding white text on filled button-styled links */
a.btn-primary, a.btn-success, a.btn-danger, a.btn-warning,
a[style*="background"][style*="color"] {
    color: white !important;
}

a:hover {
    color: var(--primary-purple-dark) !important;
    text-decoration: underline !important;
}

/* === CONTAINER STYLES === */
.container {
    max-width: 1200px;
}

/* === SIDEBAR AND MENU CUSTOMIZATION === */
.sidebar-content,
.e-sidebar,
.e-menu-wrapper {
    background: linear-gradient(180deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%) !important;
}

.e-sidebar {
    min-width: 260px !important;
    max-width: 100vw !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--shadow-xl) !important;
}

/* FORCE all sidebar text to be white */
.e-menu-wrapper,
.e-menu-wrapper *,
.e-menu-item,
.e-menu-item *,
.e-menu-item .e-menu-text,
.e-menu-item .e-menu-icon,
.e-menu-item .e-menu-url,
.e-sidebar,
.e-sidebar *,
.e-sidebar .e-menu,
.e-sidebar .e-menu *,
.sidebar-content,
.sidebar-content *,
.sidebar-content h1,
.sidebar-content h2,
.sidebar-content h3,
.sidebar-content h4,
.sidebar-content h5,
.sidebar-content h6,
.sidebar-content p,
.sidebar-content span,
.sidebar-content div,
.sidebar-content a,
.sidebar-content .fas,
.sidebar-content .fa,
.sidebar-content i {
    color: var(--white) !important;
    fill: var(--white) !important;
}

/* Sidebar brand/header text */
.e-sidebar .brand-container,
.e-sidebar .navbar-brand,
.e-sidebar .navbar-title,
.sidebar-content .brand-container,
.sidebar-content .navbar-brand,
.sidebar-content .navbar-title {
    color: var(--white) !important;
}

/* Menu item states */
.e-menu-item.e-active,
.e-menu-item:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--white) !important;
    border-radius: var(--border-radius) !important;
    margin: 0.25rem 0.5rem !important;
}

.e-menu-item {
    transition: var(--transition) !important;
    border-radius: var(--border-radius) !important;
    margin: 0.25rem 0.5rem !important;
}

/* Force white text on active and hover states */
.e-menu-item.e-active,
.e-menu-item.e-active *,
.e-menu-item:hover,
.e-menu-item:hover * {
    color: var(--white) !important;
    fill: var(--white) !important;
}

/* Close button styling */
.e-sidebar .e-close,
.sidebar-close,
.sidebar-close-btn,
.e-sidebar-close,
.close-sidebar,
.close-btn {
    color: var(--white) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    padding: 0.5rem !important;
    transition: var(--transition) !important;
    min-height: 44px !important;
    min-width: 44px !important;
}

.e-sidebar .e-close:hover,
.sidebar-close:hover,
.sidebar-close-btn:hover,
.e-sidebar-close:hover,
.close-sidebar:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--white) !important;
}

/* Specific targeting for menu icons */
.e-menu-item i,
.e-menu-item .e-menu-icon,
.e-menu-item .fas,
.e-menu-item .fa {
    color: var(--white) !important;
    fill: var(--white) !important;
    margin-right: 0.75rem !important;
}

/* Universal sidebar text fix */
[class*="sidebar"] *,
[class*="e-sidebar"] *,
[class*="menu"] * {
    color: var(--white) !important;
    fill: var(--white) !important;
}

/* === FORM SECTION STYLING === */
.form-section {
    background: var(--white) !important;
    border-radius: var(--border-radius) !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-color) !important;
}

/* === ANIMATION CLASSES === */
.fade-in {
    animation: fadeIn 0.3s ease-out forwards !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-up {
    animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% { 
        transform: scale(1); 
    }
    50% { 
        transform: scale(1.05); 
    }
    100% { 
        transform: scale(1); 
    }
}

@keyframes spin {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(360deg); 
    }
}

/* === UTILITY CLASSES === */
.text-purple {
    color: var(--primary-purple) !important;
}

/* Override text-purple when on purple backgrounds */
.bg-purple .text-purple,
.card-header .text-purple,
[style*="background: linear-gradient"][style*="purple"] .text-purple,
[style*="background: var(--purple-gradient)"] .text-purple {
    color: var(--white) !important;
}

.bg-purple {
    background: var(--purple-gradient) !important;
}

.border-purple {
    border-color: var(--primary-purple) !important;
}

.shadow-purple {
    box-shadow: var(--shadow-lg) !important;
}

/* Ensure shadow-purple cards have proper text contrast */
.shadow-purple .card-header,
.shadow-purple .card-header * {
    color: var(--white) !important;
    fill: var(--white) !important;
}

.shadow-purple .card-body,
.shadow-purple .card-body * {
    color: var(--text-dark) !important;
}

/* === VALIDATION SUMMARY === */
.validation-summary {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
    border: 2px solid #fca5a5 !important;
    border-radius: var(--border-radius) !important;
    padding: 1rem !important;
    margin-bottom: 1.5rem !important;
    color: #dc2626 !important;
}

.validation-summary ul {
    margin: 0 !important;
    padding-left: 1.25rem !important;
}

/* === FOCUS STYLES === */
*:focus {
    outline: 2px solid var(--primary-purple) !important;
    outline-offset: 2px !important;
}

/* === LOADING STATES === */
.loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 118, 110, 0.1) !important;
    backdrop-filter: blur(5px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999997 !important;
}

.loading-spinner {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--purple-gradient) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    color: white !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.loading-spinner .spinner {
    width: 3rem !important;
    height: 3rem !important;
    border: 4px solid rgba(255, 255, 255, 0.3) !important;
    border-top: 4px solid white !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    margin-bottom: 1rem !important;
}

.loading-spinner p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* === DEVELOPMENT-ONLY RESOURCE STATUS === */
.resource-status {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-family: 'Courier New', monospace !important;
    z-index: 999997 !important;
    display: none !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.resource-status.show {
    display: block !important;
    opacity: 1 !important;
}

/* Hide resource status completely in production */
body:not(.development-mode) .resource-status {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* === DASHBOARD SPECIFIC STYLES === */
.dashboard-container {
    padding-top: 1rem !important;
}

.summary-card {
    height: 100% !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
    border: none !important;
    border-radius: var(--border-radius-lg) !important;
    overflow: hidden !important;
}

.summary-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-xl) !important;
}

.summary-content {
    display: flex !important;
    align-items: center !important;
    padding: 1.5rem !important;
    height: 100% !important;
}

.summary-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 1.25rem !important;
    font-size: 1.5rem !important;
    color: white !important;
    flex-shrink: 0 !important;
}

.summary-details h3 {
    margin: 0 0 0.25rem 0 !important;
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: var(--primary-purple) !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
}

.summary-details p {
    margin: 0 !important;
    color: var(--text-light) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

/* Filter buttons improvements */
.filter-buttons-container {
    display: flex !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.filter-buttons-container .e-btn {
    min-width: 130px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.625rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.025em !important;
    border-radius: var(--border-radius) !important;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* OUTLINE buttons - ensure good contrast */
.filter-buttons-container .e-btn.e-outline {
    background: rgba(15, 118, 110, 0.1) !important;
    border: 2px solid rgba(15, 118, 110, 0.3) !important;
    color: var(--primary-purple) !important;
}

.filter-buttons-container .e-btn.e-outline,
.filter-buttons-container .e-btn.e-outline *,
.filter-buttons-container .e-btn.e-outline span,
.filter-buttons-container .e-btn.e-outline i {
    color: var(--primary-purple) !important;
    fill: var(--primary-purple) !important;
}

.filter-buttons-container .e-btn.e-outline:hover {
    background: rgba(15, 118, 110, 0.2) !important;
    border-color: var(--primary-purple) !important;
    transform: translateY(-1px) !important;
}

.filter-buttons-container .e-btn.e-outline:hover,
.filter-buttons-container .e-btn.e-outline:hover *,
.filter-buttons-container .e-btn.e-outline:hover span,
.filter-buttons-container .e-btn.e-outline:hover i {
    color: var(--primary-purple) !important;
    fill: var(--primary-purple) !important;
}

/* PRIMARY buttons - ensure white text */
.filter-buttons-container .e-btn.e-primary {
    background: var(--purple-gradient) !important;
    border: 2px solid transparent !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-md) !important;
}

.filter-buttons-container .e-btn.e-primary,
.filter-buttons-container .e-btn.e-primary *,
.filter-buttons-container .e-btn.e-primary span,
.filter-buttons-container .e-btn.e-primary i {
    color: var(--white) !important;
    fill: var(--white) !important;
}

.filter-buttons-container .e-btn.e-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.filter-buttons-container .e-btn.e-primary:hover,
.filter-buttons-container .e-btn.e-primary:hover *,
.filter-buttons-container .e-btn.e-primary:hover span,
.filter-buttons-container .e-btn.e-primary:hover i {
    color: var(--white) !important;
    fill: var(--white) !important;
}

/* Card header improvements */
.card-header h5 {
    margin-bottom: 0 !important;
    color: var(--white) !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 0 !important;
}

.card-header h5::after {
    display: none !important;
}

/* FORCE all icons and text in card headers to be white */
.card-header,
.card-header *,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-header p,
.card-header span,
.card-header div,
.card-header i,
card-header .fas,
card-header .fa {
    color: var(--white) !important;
    fill: var(--white) !important;
}

/* Ensure card body headers are dark and readable */
.card-body h5 {
    color: var(--text-dark) !important;
    border-bottom: 2px solid var(--light-purple) !important;
}

.card-body h5::after {
    background: var(--purple-gradient) !important;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .filter-buttons-container {
        justify-content: center !important;
        gap: 0.5rem !important;
    }
    
    .filter-buttons-container .e-btn {
        min-width: auto !important;
        flex: 1 !important;
        max-width: 140px !important;
        font-size: 0.8rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    .summary-content {
        padding: 1rem !important;
    }
    
    .summary-icon {
        width: 50px !important;
        height: 50px !important;
        margin-right: 1rem !important;
        font-size: 1.25rem !important;
    }
    
    .summary-details h3 {
        font-size: 1.875rem !important;
    }
}

/* === TEXT CONTRAST ENFORCEMENT FOR ALL PAGES === */

/* UNIVERSAL RULE: ANY element with purple background gets white text GLOBALLY */
[style*="background: linear-gradient(135deg, #667eea"],
[style*="background: linear-gradient(135deg, #6c63ff"],
[style*="background: var(--purple-gradient)"],
[style*="background-color: #6c63ff"],
[style*="background-color: purple"],
[style*="background-color: rgb(108, 99, 255)"],
[style*="background: #6c63ff"],
[style*="background: purple"],
[style*="background: rgb(108, 99, 255)"],
.bg-purple,
.card-header,
.e-btn.e-primary,
.btn-primary,
.navbar,
.e-toolbar,
.top-bar,
.header-bar,
nav,
.shadow-purple .card-header,
.card.shadow-purple .card-header,
div.card.shadow-purple .card-header {
    color: var(--white) !important;
}

/* UNIVERSAL RULE: ANY text element inside purple backgrounds gets white text GLOBALLY */
[style*="background: linear-gradient(135deg, #667eea"] *,
[style*="background: linear-gradient(135deg, #6c63ff"] *,
[style*="background: var(--purple-gradient)"] *,
[style*="background-color: #6c63ff"] *,
[style*="background-color: purple"] *,
[style*="background-color: rgb(108, 99, 255)"] *,
[style*="background: #6c63ff"] *,
[style*="background: purple"] *,
[style*="background: rgb(108, 99, 255)"] *,
.bg-purple *,
.card-header *,
.e-btn.e-primary *,
.btn-primary *,
.navbar *,
.e-toolbar *,
.top-bar *,
.header-bar *,
nav *,
.shadow-purple .card-header *,
.card.shadow-purple .card-header *,
div.card.shadow-purple .card-header *,
.shadow-purple .card-header h1,
.shadow-purple .card-header h2,
.shadow-purple .card-header h3,
.shadow-purple .card-header h4,
.shadow-purple .card-header h5,
.shadow-purple .card-header h6,
.shadow-purple .card-header p,
.shadow-purple .card-header span,
.shadow-purple .card-header div,
.shadow-purple .card-header i,
.shadow-purple .card-header .fas,
.shadow-purple .card-header .fa,
.card.shadow-purple .card-header h1,
.card.shadow-purple .card-header h2,
.card.shadow-purple .card-header h3,
.card.shadow-purple .card-header h4,
.card.shadow-purple .card-header h5,
.card.shadow-purple .card-header h6,
.card.shadow-purple .card-header p,
.card.shadow-purple .card-header span,
.card.shadow-purple .card-header div,
.card.shadow-purple .card-header i,
.card.shadow-purple .card-header .fas,
.card.shadow-purple .card-header .fa {
    color: var(--white) !important;
    fill: var(--white) !important;
}

/* FORCE all shadow-purple card headers to have white text regardless of inline styles */
.shadow-purple .card-header,
.card.shadow-purple .card-header,
div.card.shadow-purple .card-header {
    background: var(--purple-gradient) !important;
    color: var(--white) !important;
}

/* Enhanced specificity for ALL heading levels in purple backgrounds */
.shadow-purple .card-header h1,
.shadow-purple .card-header h2,
.shadow-purple .card-header h3,
.shadow-purple .card-header h4,
.shadow-purple .card-header h5,
.shadow-purple .card-header h6,
.card.shadow-purple .card-header h1,
.card.shadow-purple .card-header h2,
.card.shadow-purple .card-header h3,
.card.shadow-purple .card-header h4,
.card.shadow-purple .card-header h5,
.card.shadow-purple .card-header h6,
div.card.shadow-purple .card-header h1,
div.card.shadow-purple .card-header h2,
div.card.shadow-purple .card-header h3,
div.card.shadow-purple .card-header h4,
div.card.shadow-purple .card-header h5,
div.card.shadow-purple .card-header h6 {
    color: var(--white) !important;
}

/* Enhanced specificity for ALL paragraph and text elements in purple backgrounds */
.shadow-purple .card-header p,
.shadow-purple .card-header span,
.shadow-purple .card-header div,
.shadow-purple .card-header small,
.shadow-purple .card-header strong,
.shadow-purple .card-header em,
.card.shadow-purple .card-header p,
.card.shadow-purple .card-header span,
.card.shadow-purple .card-header div,
.card.shadow-purple .card-header small,
.card.shadow-purple .card-header strong,
.card.shadow-purple .card-header em,
div.card.shadow-purple .card-header p,
div.card.shadow-purple .card-header span,
div.card.shadow-purple .card-header div,
div.card.shadow-purple .card-header small,
div.card.shadow-purple .card-header strong,
div.card.shadow-purple .card-header em {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Enhanced specificity for ALL icons in purple backgrounds */
.shadow-purple .card-header i,
.shadow-purple .card-header .fas,
.shadow-purple .card-header .fa,
.shadow-purple .card-header .fab,
.shadow-purple .card-header .far,
.shadow-purple .card-header .fal,
.card.shadow-purple .card-header i,
.card.shadow-purple .card-header .fas,
.card.shadow-purple .card-header .fa,
.card.shadow-purple .card-header .fab,
.card.shadow-purple .card-header .far,
.card.shadow-purple .card-header .fal,
div.card.shadow-purple .card-header i,
div.card.shadow-purple .card-header .fas,
div.card.shadow-purple .card-header .fa,
div.card.shadow-purple .card-header .fab,
div.card.shadow-purple .card-header .far,
div.card.shadow-purple .card-header .fal {
    color: var(--white) !important;
    fill: var(--white) !important;
}

/* FORCE all regular card headers to have proper contrast */
.card-header {
    background: var(--purple-gradient) !important;
    color: var(--white) !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    color: var(--white) !important;
}

.card-header p,
.card-header span,
.card-header div,
.card-header small,
.card-header strong,
.card-header em {
    color: rgba(255, 255, 255, 0.9) !important;
}

.card-header i,
.card-header .fas,
.card-header .fa,
.card-header .fab,
.card-header .far,
.card-header .fal {
    color: var(--white) !important;
    fill: var(--white) !important;
}

/* White background areas should have dark text (only when not in purple context) */
[style*="background: white"]:not(.card-header):not(.shadow-purple.card-header),
[style*="background-color: white"]:not(.card-header):not(.shadow-purple.card-header),
[style*="background: #ffffff"]:not(.card-header):not(.shadow-purple.card-header),
[style*="background: #fff"]:not(.card-header):not(.shadow-purple.card-header),
.bg-white:not(.card-header):not(.shadow-purple.card-header),
.card-body:not(.card-header):not(.shadow-purple.card-header) {
    color: var(--text-dark) !important;
}

[style*="background: white"]:not(.card-header):not(.shadow-purple.card-header) *,
[style*="background-color: white"]:not(.card-header):not(.shadow-purple.card-header) *,
[style*="background: #ffffff"]:not(.card-header):not(.shadow-purple.card-header) *,
[style*="background: #fff"]:not(.card-header):not(.shadow-purple.card-header) *,
.bg-white:not(.card-header):not(.shadow-purple.card-header) *,
.card-body:not(.card-header):not(.shadow-purple.card-header) * {
    color: var(--text-dark) !important;
}

/* === PAGE INITIALIZATION HELPER === */
/* Add class to body during initial page load to prevent authentication warning flash */
body.page-initializing .text-danger,
body.page-initializing .alert-danger,
body.page-initializing .auth-warning {
    display: none !important;
}

/* Smooth transition when authentication state is ready */
.auth-ready {
    transition: opacity 0.3s ease-in-out;
}

/* =============================================================================
   ADDITIONAL RESPONSIVE ENHANCEMENTS FOR SPECIFIC COMPONENTS
   ============================================================================= */

/* === TABLET-SPECIFIC BUTTON GROUP IMPROVEMENTS === */
@media (min-width: 768px) and (max-width: 1024px) {
    .btn-group {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .btn-group .btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 150px;
    }
    
    /* Dashboard summary cards for tablets */
    .summary-card {
        margin-bottom: 1rem;
    }
    
    .summary-content {
        padding: 1.25rem;
    }
    
    .summary-icon {
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
    }
    
    /* Filter buttons for tablets */
    .filter-buttons-container .e-btn {
        min-width: 150px;
        flex: 0 1 auto;
    }
}

/* === RESPONSIVE IMAGES AND MEDIA === */
@media (max-width: 1024px) {
    /* Ensure all images are responsive */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Responsive video embeds */
    iframe,
    embed,
    object,
    video {
        max-width: 100%;
        height: auto;
    }
    
    /* Responsive photo galleries */
    .photo-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }
}

/* === RESPONSIVE FORMS ON TABLETS === */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Form layout improvements */
    .form-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .form-group {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 250px;
    }
    
    /* Select elements with better touch targets */
    select.form-control {
        min-height: 52px;
        font-size: 1.05rem;
    }
    
    /* Checkbox and radio button improvements */
    input[type="checkbox"],
    input[type="radio"] {
        width: 24px;
        height: 24px;
        margin-right: 0.75rem;
    }
}

/* === RESPONSIVE TABLES ON TABLETS === */
@media (min-width: 768px) and (max-width: 1024px) {
    .table-responsive {
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .table th {
        font-size: 0.95rem;
        padding: 1rem 0.75rem;
        white-space: nowrap;
    }
    
    .table td {
        font-size: 0.9rem;
        padding: 0.875rem 0.75rem;
    }
    
    /* Actions column optimization */
    .table .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* === RESPONSIVE CARDS ON TABLETS === */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Card grid layout for tablets */
    .card-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* Ensure cards don't overflow */
    .card {
        overflow: hidden;
    }
    
    .card-body {
        overflow-x: auto;
    }
    
    /* Card actions should stack or wrap nicely */
    .card-footer .btn {
        flex: 1 1 auto;
        min-width: 120px;
    }
}

/* === RESPONSIVE MODALS ON TABLETS === */
@media (min-width: 768px) and (max-width: 1024px) {
    .modal-dialog {
        max-width: 90%;
        margin: 2rem auto;
    }
    
    .modal-content {
        border-radius: 1rem;
    }
    
    .modal-header {
        padding: 1.5rem;
    }
    
    .modal-body {
        padding: 1.5rem;
        max-height: calc(100vh - 300px);
        overflow-y: auto;
    }
    
    .modal-footer {
        padding: 1rem 1.5rem;
        display: flex;
        gap: 1rem;
    }
    
    .modal-footer .btn {
        flex: 1;
    }
}

/* === RESPONSIVE NAVIGATION ON TABLETS === */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Navbar optimization */
    .navbar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .nav-item {
        margin-bottom: 0;
    }
    
    .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
    
    /* Dropdown menus on tablets */
    .dropdown-menu {
        min-width: 220px;
        border-radius: 0.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .dropdown-item {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
}

/* === RESPONSIVE ALERTS AND NOTIFICATIONS === */
@media (max-width: 1024px) {
    .alert {
        padding: 1rem;
        border-radius: 0.75rem;
        font-size: 0.95rem;
    }
    
    .alert-dismissible .btn-close {
        padding: 1rem;
    }
    
    /* Toast notifications on mobile/tablet */
    .toast {
        max-width: 90%;
        margin: 0 auto;
    }
}

/* === RESPONSIVE BADGES AND LABELS === */
@media (max-width: 1024px) {
    .badge {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
        border-radius: 0.5rem;
    }
    
    .label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
}

/* === RESPONSIVE PAGINATION === */
@media (max-width: 768px) {
    .pagination {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Hide page numbers on very small screens, show only prev/next */
    .pagination .page-item:not(.previous):not(.next) {
        display: none;
    }
    
    .pagination .page-item.active,
    .pagination .page-item.previous,
    .pagination .page-item.next {
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .pagination .page-link {
        min-width: 48px;
        min-height: 48px;
        font-size: 1rem;
    }
}

/* === RESPONSIVE LOADING STATES === */
@media (max-width: 1024px) {
    .loading-spinner {
        width: 60px;
        height: 60px;
    }
    
    .loading-container {
        padding: 2rem;
    }
    
    .loading-text {
        font-size: 1.1rem;
        margin-top: 1rem;
    }
}

/* === RESPONSIVE SYNCFUSION COMPONENT OVERRIDES === */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Syncfusion Grid on tablets */
    .e-grid .e-gridheader {
        font-size: 0.95rem;
    }
    
    .e-grid .e-rowcell {
        font-size: 0.9rem;
        padding: 0.875rem 0.75rem;
    }
    
    /* Syncfusion Buttons on tablets */
    .e-btn {
        min-height: 48px;
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
    
    /* Syncfusion Dialog on tablets */
    .e-dialog {
        width: 90% !important;
        max-width: 700px !important;
    }
    
    /* Syncfusion Dropdown on tablets */
    .e-dropdownbase {
        font-size: 1rem;
    }
    
    .e-dropdownbase .e-list-item {
        padding: 0.75rem 1rem;
        min-height: 48px;
    }
}

/* === RESPONSIVE SPACING UTILITIES FOR TABLETS === */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Margin utilities */
    .mt-tablet-3 { margin-top: 1rem !important; }
    .mb-tablet-3 { margin-bottom: 1rem !important; }
    .my-tablet-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
    .mx-tablet-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
    
    /* Padding utilities */
    .pt-tablet-3 { padding-top: 1rem !important; }
    .pb-tablet-3 { padding-bottom: 1rem !important; }
    .py-tablet-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .px-tablet-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* === CROSS-BROWSER COMPATIBILITY === */
/* Fix for Safari on iOS */
@supports (-webkit-touch-callout: none) {
    /* Prevent zoom on input focus */
    input, textarea, select {
        font-size: 16px !important;
    }
    
    /* Fix for Safari button rendering */
    button, .btn {
        -webkit-appearance: none;
        appearance: none;
    }
}

/* Fix for older browsers */
@supports not (gap: 1rem) {
    /* Fallback for browsers that don't support gap property */
    .btn-group > * {
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .btn-group > *:last-child {
        margin-right: 0;
    }
}

/* === PERFORMANCE OPTIMIZATION === */
/* Note: will-change should be applied dynamically via JavaScript for specific animations,
   not permanently in CSS as it can negatively impact performance */

/* Enable hardware acceleration only for active animations */
@media (prefers-reduced-motion: no-preference) {
    /* These are applied only when animations are enabled */
    .btn:hover,
    .card:hover,
    .modal.show,
    .navbar.transitioning,
    .sidebar.transitioning {
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

/* Optimize rendering for scrollable containers */
.overflow-auto,
.overflow-y-auto,
.overflow-x-auto,
.table-responsive {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Tabular numbers for columns containing counts, amounts, and dates */
.table td:not(:first-child),
.badge,
.token-balance,
[class*="count"],
[class*="amount"],
[class*="price"],
[class*="balance"] {
    font-variant-numeric: tabular-nums;
}

/* === END OF RESPONSIVE ENHANCEMENTS === */

/* =============================================================================
   ACCESSIBILITY — REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}