/* Shared glass shell for pages rendered by <app-layout>. Page content stays local. */
body.app-shell-glass-page {
    --glass-surface: rgba(255, 255, 255, 0.52);
    --glass-surface-strong: rgba(255, 255, 255, 0.72);
    --glass-surface-soft: rgba(255, 255, 255, 0.34);
    --glass-border: rgba(255, 255, 255, 0.58);
    --glass-shadow: 0 22px 52px rgba(74, 92, 122, 0.16);
    --glass-shadow-soft: 0 12px 28px rgba(74, 92, 122, 0.12);
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(14, 191, 193, 0.2), transparent 28%),
        radial-gradient(circle at top right, rgba(142, 165, 255, 0.2), transparent 24%),
        linear-gradient(180deg, #f3fbfb 0%, #f7fafd 42%, #edf4f9 100%);
    background-attachment: fixed;
    position: relative;
    overflow-x: hidden;
}

body.app-shell-glass-page::before,
body.app-shell-glass-page::after {
    content: '';
    position: fixed;
    width: 32rem;
    height: 32rem;
    pointer-events: none;
    z-index: 0;
    filter: blur(14px);
    opacity: 0.64;
}

body.app-shell-glass-page::before {
    top: 5rem;
    right: -10rem;
    background: radial-gradient(circle, rgba(14, 191, 193, 0.18), transparent 68%);
}

body.app-shell-glass-page::after {
    bottom: -8rem;
    left: 16rem;
    background: radial-gradient(circle, rgba(142, 165, 255, 0.16), transparent 70%);
}

body.app-shell-glass-page .main-content,
body.app-shell-glass-page .main-wrapper,
body.app-shell-glass-page .app-container {
    position: relative;
    z-index: 1;
}

body.app-shell-glass-page .mobile-header,
body.app-shell-glass-page .sidebar,
body.app-shell-glass-page .theme-switcher,
body.app-shell-glass-page .notification-icon-container,
body.app-shell-glass-page .header-user-info,
body.app-shell-glass-page .user-expanded,
body.app-shell-glass-page .org-selected,
body.app-shell-glass-page .org-dropdown,
body.app-shell-glass-page .mobile-user-profile,
body.app-shell-glass-page .notification-dropdown,
body.app-shell-glass-page .app-footer,
body.app-shell-glass-page .footer-modal {
    background: var(--glass-surface);
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

body.app-shell-glass-page .sidebar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(235, 242, 242, 0.42));
    border-right-color: var(--glass-border);
    box-shadow: 18px 0 40px rgba(85, 106, 136, 0.12);
}

body.app-shell-glass-page .logo-section,
body.app-shell-glass-page .org-switcher-section,
body.app-shell-glass-page .mobile-user-profile {
    background: transparent;
    border-bottom-color: rgba(12, 49, 74, 0.08);
}

body.app-shell-glass-page .nav-submenu {
    background: rgba(255, 255, 255, 0.14);
}

body.app-shell-glass-page .nav-item:hover,
body.app-shell-glass-page .nav-subitem:hover {
    background: rgba(255, 255, 255, 0.34);
}

body.dark-mode.app-shell-glass-page {
    --glass-surface: rgba(24, 31, 41, 0.7);
    --glass-surface-strong: rgba(27, 35, 46, 0.82);
    --glass-surface-soft: rgba(28, 36, 48, 0.56);
    --glass-border: rgba(117, 145, 182, 0.18);
    --glass-shadow: 0 24px 44px rgba(5, 10, 18, 0.32);
    --glass-shadow-soft: 0 12px 28px rgba(5, 10, 18, 0.24);
    background:
        radial-gradient(circle at top left, rgba(14, 191, 193, 0.12), transparent 28%),
        radial-gradient(circle at top right, rgba(142, 165, 255, 0.12), transparent 24%),
        linear-gradient(180deg, #131a22 0%, #17212b 42%, #101821 100%);
}

body.dark-mode.app-shell-glass-page .sidebar,
body.dark-mode.app-shell-glass-page .app-footer,
body.dark-mode.app-shell-glass-page .mobile-header {
    background: linear-gradient(180deg, rgba(20, 27, 36, 0.74), rgba(16, 21, 29, 0.58));
    border-color: var(--glass-border);
}

@media (max-width: 768px) {
    body.app-shell-glass-page::before,
    body.app-shell-glass-page::after {
        width: 20rem;
        height: 20rem;
    }
}