/*
 * Universal Background Color CSS
 * Ensures consistent background color across all pages
 * Background Color: #F5F5F7 (Apple-inspired light gray)
 * Enhanced with white blur overlay for frosted glass effect
 */

:root {
    --background-color: #F5F5F7;
    --page-background: #F5F5F7;
    --main-background: #F5F5F7;
    --body-background: #F5F5F7;
    --app-background: #F5F5F7;
    --universal-bg: #F5F5F7;
    --white-overlay: rgba(255, 255, 255, 0.85);
    --form-background: #FFFFFF;
    --form-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --form-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.08);
}

/* Apply consistent background to key elements with highest priority */
html,
body,
.main-container,
.page-container,
.content-wrapper,
.main-content,
main {
    background-color: var(--background-color) !important;
}

/* Override any conflicting background colors */
body.bg-gray-50,
body.bg-f5f4f8,
body.bg-f9fafb,
.bg-gray-50,
.bg-f5f4f8,
.bg-f9fafb {
    background-color: var(--background-color) !important;
}

/* Ensure consistent background for common container classes */
.container,
.wrapper,
.app-container,
.layout-container {
    background-color: var(--background-color);
}

/* Override inline styles and Tailwind CSS background classes */
body[style*="background"],
.bg-white,
.bg-gray-100,
.bg-gray-200 {
    background-color: white !important;
}

/* Override any commonly used CSS framework backgrounds */
.sidebar + .main-content,
.content,
.dashboard,
.page-wrapper {
    background-color: var(--background-color) !important;
}

/* Ensure scrollbar track matches background */
::-webkit-scrollbar-track {
    background: var(--background-color);
}

/* For Safari and WebKit browsers */
@supports (-webkit-appearance: none) {
    body {
        background-color: var(--background-color) !important;
    }
}

/* CSS cascade override for maximum priority */
html * {
    --bg: var(--background-color);
}

/* Force background color inheritance for layout elements */
.min-h-screen,
.h-screen,
.vh-100 {
    background-color: var(--background-color) !important;
}

/* Frosted Glass Background Overlay Effect */
.frosted-overlay,
.blur-overlay {
    position: relative;
    background: var(--white-overlay);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Main page wrapper with blur overlay */
.page-wrapper::before,
.main-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white-overlay);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: -1;
}

/* Form styling with pure white and subtle shadows */
form,
.form-container,
.login-form,
.card,
.bg-white {
    background-color: var(--form-background) !important;
    box-shadow: var(--form-shadow);
    border-radius: 12px;
    transition: box-shadow 0.3s ease;
}

form:hover,
.form-container:hover,
.login-form:hover,
.card:hover {
    box-shadow: var(--form-shadow-hover);
}

/* Enhanced form backdrop */
.form-wrapper {
    position: relative;
    background: var(--form-background);
    box-shadow: var(--form-shadow);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}