/*
 * Universal Background Color CSS
 * Ensures consistent background color across all pages
 * Background Color: #F5F5F7 (Apple-inspired light gray)
 */

:root {
    --background-color: #F5F5F7;
    --page-background: #F5F5F7;
    --main-background: #F5F5F7;
    --body-background: #F5F5F7;
    --app-background: #F5F5F7;
    --universal-bg: #F5F5F7;
}

/* 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;
}