/* Global loader overlay */
#global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    /* Use brand color from zzz_glass.css if available, fallback to dark */
    background-color: #0F2628;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* Spinning animation for the favicon */
.spinning-loader {
    width: 64px;
    height: 64px;
    animation: spin 1.5s linear infinite;
    /* Optional: add a glow effect matching the glassmorphism theme */
    filter: drop-shadow(0 0 10px rgba(80, 201, 206, 0.5));
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Hide class to be added by JS */
.loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Custom styles for dcc.Loading content loader */
.custom-content-loader {
    width: 100%;
    height: 100%;
    min-height: 200px;
    position: relative;
    /* Anchor for absolute spinner */
    /* Let clicks pass through the wrapper so they reach the sidebar below */
    pointer-events: none;
}

/* Re-enable clicks on the actual content and the spinner */
.custom-content-loader>* {
    pointer-events: auto;
}

/* Ensure the spinner container is absolutely centered over the content */
.custom-content-loader .dash-spinner {
    position: absolute !important;
    top: 50%;
    left: 50%;
    /* Sidebar width ~280px. Center relative to full screen might look offset. 
       If container is full width, 50% is center of screen. */
    transform: translate(-50%, -50%);
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 80px !important;
    height: 80px !important;
    z-index: 1021;
    /* Ensure visible over content (1020 sidebar) */
    pointer-events: auto;
    /* Spinner can block clicks if needed */
}

/* Hide the default SVG spinner but keep it from collapsing the structure if needed */
.custom-content-loader .dash-spinner svg {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute;
}

/* Add our favicon spinner via pseudo-element */
.custom-content-loader .dash-spinner::after {
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    background-image: url('/assets/favicon.ico');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: spin 1.5s linear infinite;
    filter: drop-shadow(0 0 10px rgba(80, 201, 206, 0.5));
}