/**
 * LAYOUT SYSTEM
 * =============
 * 
 * Page Structure and Layout Components
 * These classes handle the overall page structure, content areas,
 * and the page navigation system.
 */

/* Page system - controls which page is visible */
.page {
    display: none; /* Hide all pages by default */
}

    .page.active {
        display: block; /* Show only the active page */
    }

/* Main content overlay - provides glassmorphism effect over background */
.content-overlay {
    background: var(--bg-overlay);
    backdrop-filter: blur(10px); /* Creates the blur effect */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Hover effect for interactive cards */
.card-hover {
    transition: all 0.3s ease;
}

    .card-hover:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

/* Theme background highlight areas */
.theme-bg-tint {
    background: var(--bg-tint);
    border-radius: 1rem;
    padding: 1.5rem;
}