/* ============================================
   SHADOW CONTAINMENT FIX - COMPREHENSIVE
   ============================================ */

/* ============================================
   1. HEADER & NAV - Keep glass, remove box-shadow
   ============================================ */

.universal-welcome-header {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(1px) saturate(40%) !important;
    -webkit-backdrop-filter: blur(1px) !important;
    box-shadow: none !important;
}

.navigation-menu {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(1px) saturate(40%) !important;
    -webkit-backdrop-filter: blur(1px) !important;
    box-shadow: none !important;
}

/* ============================================
   2. THEME DROPDOWN
   ============================================ */

.theme-selector {
    position: relative;
    z-index: 10;
}

.theme-dropdown {
    z-index: 99999 !important;
}

/* ============================================
   3. NAV LINKS - No shadows
   ============================================ */

.nav-link,
.nav-link:hover,
.nav-link.active,
.nav-link.admin-link,
.header-btn-logout,
.header-btn-logout:hover,
.header-sync-indicator {
    box-shadow: none !important;
}

/* ============================================
   4. UPDATES PANEL - Semi-transparent solid bg
   No backdrop-filter = won't capture external shadows
   ============================================ */

.updates-panel-container {
    /* Semi-transparent solid background instead of backdrop-filter */
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Keep its own shadow */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] .updates-panel-container {
    background: rgba(30, 35, 44, 0.92) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

/* ============================================
   5. FUNCTION CARDS - Very tight shadows
   ============================================ */

.function-cards {
    isolation: isolate;
}

.function-card {
    /* Small base shadow */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    /* No transition to prevent flash on click */
}

.function-card:hover {
    /* Tight shadow + border highlight instead of large spreading shadow */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(0, 86, 166, 0.3) !important;
}

[data-theme="dark"] .function-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .function-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(79, 195, 247, 0.3) !important;
}

/* ============================================
   6. STAT ITEMS - Very tight shadows
   ============================================ */

.info-stats {
    isolation: isolate;
}

.stat-item,
.stat-button {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    /* No transition to prevent flash on click */
}

.stat-item:hover,
.stat-button:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .stat-item,
[data-theme="dark"] .stat-button {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .stat-item:hover,
[data-theme="dark"] .stat-button:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* MOBILE: Disable all transitions to prevent flash */
@media (max-width: 992px) {
    .function-card,
    .stat-item,
    .stat-button,
    .info-stats,
    .function-cards {
        transition: none !important;
        box-shadow: none !important;
    }
    
    /* CRITICAL: Disable browser default tap highlight that causes white flash */
    .function-card,
    .stat-item,
    .stat-button,
    a.stat-item,
    a.stat-button,
    .nav-link,
    .btn-function,
    a {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        outline: none !important;
    }
}

/* ============================================
   8. ANTI-FLASH FIX - Prevent white flash on navigation
   The backdrop-filter can cause white flashes during page transitions
   ============================================ */

/* Force solid background during active/focus states to prevent flash */
.stat-item:active,
.stat-button:active,
.stat-item:focus,
.stat-button:focus,
a.stat-item:active,
a.stat-button:active {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
}

[data-theme="dark"] .stat-item:active,
[data-theme="dark"] .stat-button:active,
[data-theme="dark"] .stat-item:focus,
[data-theme="dark"] .stat-button:focus,
[data-theme="dark"] a.stat-item:active,
[data-theme="dark"] a.stat-button:active {
    background: rgba(30, 35, 44, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
}

.function-card:active,
.function-card:focus,
a.function-card:active {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
}

[data-theme="dark"] .function-card:active,
[data-theme="dark"] .function-card:focus,
[data-theme="dark"] a.function-card:active {
    background: rgba(30, 35, 44, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
}

/* Prevent flash in navigation menu items */
.nav-link:active,
.nav-link:focus {
    transition: none !important;
}

/* ============================================
   7. DASHBOARD RIGHT COLUMN - Same treatment
   ============================================ */

.dashboard-right-column {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .dashboard-right-column {
    background: rgba(30, 35, 44, 0.92) !important;
}