/* ============================================================================
   Full-screen action loader.

   One source of truth for two callers:
     • livewire/reports/shared/partials/loading-overlay.blade.php — the blade
       overlay, shown by wire:loading (reports, lead status change)
     • admin/assets/js/global-loader.js — GlobalLoader.showAndReload() /
       showAndClose() / show(), which build the same markup from JS

   These styles used to live in a <style> block inside that blade partial, which
   meant only pages including the partial had them. GlobalLoader fires on pages
   that do not, so they had to move here; the partial now links this file too.

   The rpt- prefix is kept so the existing report markup keeps working unchanged.
   Loaded globally from admin/common/script.blade.php.
   ========================================================================== */

.rpt-fullscreen-loader {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}

.rpt-loader-backdrop {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* At 0.95 the white is all but opaque, so the blur behind it never shows — the
   page reads as a blank sheet. This variant drops the veil far enough for the
   page to stay recognisable and lets the blur do the work. */
.rpt-fullscreen-loader.rpt-loader-seethrough .rpt-loader-backdrop {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* The spinner and its caption sit on the page itself in that variant, so they
   need their own contrast rather than borrowing it from the white sheet. */
.rpt-fullscreen-loader.rpt-loader-seethrough .rpt-loader-content {
    padding: 32px 44px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
}

.rpt-loader-content {
    position: relative;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.rpt-loader-spinner {
    position: relative;
    width: 64px;
    height: 64px;
}

.rpt-spinner-ring {
    position: absolute;
    width: 100%; height: 100%;
    border: 4px solid transparent;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: rpt-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    animation-delay: -0.45s;
}

.rpt-ring-2 { border-top-color: #2563eb; animation-delay: -0.3s; }
.rpt-ring-3 { border-top-color: #1d4ed8; animation-delay: -0.15s; }
.rpt-ring-4 { border-top-color: #1e40af; animation-delay: 0s; }

@keyframes rpt-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.rpt-loader-text {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    text-align: center;
    margin: 0;
}

/* Second line, e.g. "Updating your task list...". The GlobalLoader callers pass
   one; the blade overlay does not, and simply omits the element. The negative
   margin pulls it under the title, inside the container's 24px gap. */
.rpt-loader-subtext {
    margin: -16px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
}

/* GlobalLoader builds its own root node rather than relying on wire:loading to
   flip display, and fades it out on hide. */
#crm-theme-loader {
    display: flex;
    opacity: 1;
    transition: opacity 0.3s ease;
}