/**
 * MattieST Core Modular Loading Indicator & Parent Block Blur Component
 * Automatically blurs the entire parent block / enclosing container of clicked elements
 * and displays a centered moving spinner overlay during asynchronous server processing (HTMX & AJAX).
 */

/* Keyframe Rotation for Universal Spinners */
@keyframes core-spinner-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes core-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 1. Entire Parent Block Blur & Interaction Lockdown */
.core-parent-loading,
form.htmx-request,
.widget-container.htmx-request,
[hx-target].htmx-request {
    position: relative !important;
    pointer-events: none !important;
    user-select: none !important;
    cursor: wait !important;
}

/* Apply smooth blur and dimmed opacity to all direct children of the parent block */
.core-parent-loading > *:not(.core-spinner-overlay),
form.htmx-request > *:not(.core-spinner-overlay),
.widget-container.htmx-request > *:not(.core-spinner-overlay),
[hx-target].htmx-request > *:not(.core-spinner-overlay) {
    filter: blur(3px) !important;
    opacity: 0.45 !important;
    transition: filter 0.25s ease, opacity 0.25s ease !important;
}

/* 2. Centered Floating Spinner Overlay on Parent Block */
.core-spinner-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 9999 !important;
    border-radius: inherit !important;
    animation: core-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.core-spinner-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 4px solid rgba(226, 232, 240, 0.9) !important;
    border-top-color: #0284c7 !important;
    animation: core-spinner-rotate 0.65s linear infinite !important;
    box-shadow: 0 4px 18px rgba(2, 132, 199, 0.25) !important;
    box-sizing: border-box !important;
}

/* Standalone Button Fallback Blur (if outside container) */
.core-is-loading {
    position: relative !important;
    pointer-events: none !important;
    cursor: wait !important;
}

.core-is-loading > * {
    filter: blur(2px) !important;
    opacity: 0.4 !important;
}