@charset "UTF-8";

/* =====================================================================
   OLLATOEDU ECOSYS
   Loading Component
   =====================================================================

   File:
   assets/css/components/loading.css

   Phase:
   Phase 6 - Component CSS

   Purpose:
   - Style page-level loading overlays
   - Style inline loading indicators
   - Style button loading states
   - Support accessible loading text
   - Support reduced-motion preferences
   - Support forced-colour environments
   - Hide loading UI in print

   Dependencies:
   - assets/css/style.css
   - assets/css/website.css
   - assets/css/responsive.css

   Component markup will later be rendered by:
   website/components/loading.php

   Behaviour will later be implemented by:
   assets/js/components/loading.js
   ===================================================================== */


/* =====================================================================
   1. GLOBAL LOADING OVERLAY
   ===================================================================== */

.loading {
    position: fixed;
    inset: 0;

    z-index: var(--z-modal);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: var(--space-6);

    background-color:
        rgb(255 255 255 / 0.88);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity var(--transition-base),
        visibility var(--transition-base);
}


/* =====================================================================
   2. ACTIVE STATE
   ===================================================================== */

.loading.is-active {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/* =====================================================================
   3. LOADING PANEL
   ===================================================================== */

.loading__panel {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: var(--space-4);

    width: min(
        100%,
        20rem
    );

    padding:
        var(--space-6);

    text-align: center;

    color: var(--color-text);

    background-color: var(--color-white);

    border:
        var(--border-width)
        solid
        var(--color-border);

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-lg);
}


/* =====================================================================
   4. SPINNER
   ===================================================================== */

.loading__spinner {
    display: inline-block;

    width: 2.75rem;
    height: 2.75rem;

    border:
        3px
        solid
        var(--color-primary-100);

    border-top-color:
        var(--color-primary-600);

    border-radius: 50%;

    animation:
        ollatoedu-loading-spin
        0.8s
        linear
        infinite;
}


/* =====================================================================
   5. SPINNER ANIMATION
   ===================================================================== */

@keyframes ollatoedu-loading-spin {

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


/* =====================================================================
   6. TITLE
   ===================================================================== */

.loading__title {
    margin: 0;

    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);

    color: var(--color-heading);
}


/* =====================================================================
   7. MESSAGE
   ===================================================================== */

.loading__message {
    margin: 0;

    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);

    color: var(--color-text-muted);
}


/* =====================================================================
   8. INLINE LOADING
   ===================================================================== */

.loading-inline {
    display: inline-flex;
    align-items: center;

    gap: var(--space-2);

    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
}


/* =====================================================================
   9. INLINE SPINNER
   ===================================================================== */

.loading-inline__spinner {
    display: inline-block;

    flex: 0 0 auto;

    width: 1rem;
    height: 1rem;

    border:
        2px
        solid
        currentColor;

    border-right-color:
        transparent;

    border-radius: 50%;

    animation:
        ollatoedu-loading-spin
        0.75s
        linear
        infinite;
}


/* =====================================================================
   10. INLINE TEXT
   ===================================================================== */

.loading-inline__text {
    display: inline-block;
}


/* =====================================================================
   11. SECTION LOADING
   ===================================================================== */

.loading-section {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 10rem;

    padding: var(--space-8);

    background-color: var(--color-background-soft);

    border:
        var(--border-width)
        solid
        var(--color-border);

    border-radius: var(--radius-lg);
}


/* =====================================================================
   12. SECTION LOADING CONTENT
   ===================================================================== */

.loading-section__content {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: var(--space-3);

    text-align: center;
}


/* =====================================================================
   13. SECTION SPINNER
   ===================================================================== */

.loading-section__spinner {
    display: inline-block;

    width: 2rem;
    height: 2rem;

    border:
        3px
        solid
        var(--color-primary-100);

    border-top-color:
        var(--color-primary-600);

    border-radius: 50%;

    animation:
        ollatoedu-loading-spin
        0.8s
        linear
        infinite;
}


/* =====================================================================
   14. SECTION MESSAGE
   ===================================================================== */

.loading-section__message {
    margin: 0;

    font-size: var(--font-size-sm);

    color: var(--color-text-muted);
}


/* =====================================================================
   15. BUTTON LOADING STATE
   ===================================================================== */

.btn.is-loading {
    position: relative;

    cursor: wait;

    pointer-events: none;
}


/* =====================================================================
   16. BUTTON CONTENT WHILE LOADING
   ===================================================================== */

.btn.is-loading
.btn__label,
.btn.is-loading
.btn__icon {
    opacity: 0;
}


/* =====================================================================
   17. BUTTON LOADING SPINNER
   ===================================================================== */

.btn.is-loading::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 1rem;
    height: 1rem;

    margin:
        -0.5rem
        0
        0
        -0.5rem;

    border:
        2px
        solid
        currentColor;

    border-right-color:
        transparent;

    border-radius: 50%;

    animation:
        ollatoedu-loading-spin
        0.75s
        linear
        infinite;
}


/* =====================================================================
   18. FORM SUBMITTING STATE
   ===================================================================== */

form.is-submitting {
    position: relative;
}


/* =====================================================================
   19. OPTIONAL FORM LOADING OVERLAY
   ===================================================================== */

.form-loading-overlay {
    position: absolute;
    inset: 0;

    z-index: var(--z-overlay);

    display: none;
    align-items: center;
    justify-content: center;

    padding: var(--space-6);

    background-color:
        rgb(255 255 255 / 0.82);

    border-radius: inherit;
}


form.is-submitting
.form-loading-overlay {
    display: flex;
}


/* =====================================================================
   20. FORM LOADING CONTENT
   ===================================================================== */

.form-loading-overlay__content {
    display: inline-flex;
    align-items: center;

    gap: var(--space-3);

    padding:
        var(--space-3)
        var(--space-4);

    color: var(--color-text);

    background-color: var(--color-white);

    border:
        var(--border-width)
        solid
        var(--color-border);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);
}


/* =====================================================================
   21. FORM LOADING SPINNER
   ===================================================================== */

.form-loading-overlay__spinner {
    display: inline-block;

    width: 1.1rem;
    height: 1.1rem;

    border:
        2px
        solid
        var(--color-primary-100);

    border-top-color:
        var(--color-primary-600);

    border-radius: 50%;

    animation:
        ollatoedu-loading-spin
        0.75s
        linear
        infinite;
}


/* =====================================================================
   22. FORM LOADING TEXT
   ===================================================================== */

.form-loading-overlay__text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);

    color: var(--color-text);
}


/* =====================================================================
   23. SKELETON FOUNDATION
   ===================================================================== */

.loading-skeleton {
    position: relative;

    overflow: hidden;

    background-color: var(--color-grey-100);

    border-radius: var(--radius-sm);
}


/* =====================================================================
   24. SKELETON SHIMMER
   ===================================================================== */

.loading-skeleton::after {
    content: "";

    position: absolute;
    inset: 0;

    transform:
        translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgb(255 255 255 / 0.55) 50%,
            transparent 100%
        );

    animation:
        ollatoedu-loading-shimmer
        1.4s
        ease-in-out
        infinite;
}


/* =====================================================================
   25. SKELETON ANIMATION
   ===================================================================== */

@keyframes ollatoedu-loading-shimmer {

    to {
        transform:
            translateX(100%);
    }
}


/* =====================================================================
   26. SKELETON TEXT
   ===================================================================== */

.loading-skeleton--text {
    width: 100%;
    height: 0.9rem;
}


.loading-skeleton--text-sm {
    width: 65%;
    height: 0.75rem;
}


/* =====================================================================
   27. SKELETON TITLE
   ===================================================================== */

.loading-skeleton--title {
    width: 70%;
    height: 1.5rem;
}


/* =====================================================================
   28. SKELETON IMAGE
   ===================================================================== */

.loading-skeleton--image {
    width: 100%;

    aspect-ratio: 16 / 9;
}


/* =====================================================================
   29. SKELETON CIRCLE
   ===================================================================== */

.loading-skeleton--circle {
    width: 3rem;
    height: 3rem;

    border-radius: 50%;
}


/* =====================================================================
   30. SKELETON GROUP
   ===================================================================== */

.loading-skeleton-group {
    display: flex;
    flex-direction: column;

    gap: var(--space-3);
}


/* =====================================================================
   31. FULLSCREEN STATE
   ===================================================================== */

body.is-loading {
    overflow: hidden;
}


/* =====================================================================
   32. ACCESSIBILITY / LIVE REGION
   ===================================================================== */

.loading__status {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip:
        rect(
            0,
            0,
            0,
            0
        );

    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;
}


/* =====================================================================
   33. DARK SURFACE VARIANT
   ===================================================================== */

.loading--dark {
    background-color:
        rgb(15 23 42 / 0.72);
}


.loading--dark
.loading__panel {
    color: var(--color-white);

    background-color: var(--color-primary-900);

    border-color:
        rgb(255 255 255 / 0.12);
}


.loading--dark
.loading__title {
    color: var(--color-white);
}


.loading--dark
.loading__message {
    color:
        rgb(255 255 255 / 0.72);
}


.loading--dark
.loading__spinner {
    border-color:
        rgb(255 255 255 / 0.22);

    border-top-color:
        var(--color-white);
}


/* =====================================================================
   34. TRANSPARENT VARIANT
   ===================================================================== */

.loading--transparent {
    background-color:
        rgb(255 255 255 / 0.46);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* =====================================================================
   35. MOBILE
   ===================================================================== */

@media (max-width: 47.9375rem) {

    .loading {
        padding:
            var(--space-4);
    }


    .loading__panel {
        width:
            min(
                100%,
                18rem
            );

        padding:
            var(--space-5);
    }


    .loading__spinner {
        width:
            2.5rem;
        height:
            2.5rem;
    }


    .loading-section {
        min-height:
            8rem;

        padding:
            var(--space-6);
    }
}


/* =====================================================================
   36. VERY SMALL MOBILE
   ===================================================================== */

@media (max-width: 23.9375rem) {

    .loading__panel {
        padding:
            var(--space-4);
    }


    .loading__message {
        font-size:
            var(--font-size-xs);
    }
}


/* =====================================================================
   37. REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {

    .loading {
        transition:
            none;
    }


    .loading__spinner,
    .loading-inline__spinner,
    .loading-section__spinner,
    .btn.is-loading::after,
    .form-loading-overlay__spinner {
        animation-duration:
            1.5s;
    }


    .loading-skeleton::after {
        animation:
            none;

        display:
            none;
    }
}


/* =====================================================================
   38. REDUCED DATA
   ===================================================================== */

@media (prefers-reduced-data: reduce) {

    .loading {
        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }


    .loading-skeleton::after {
        display:
            none;
    }
}


/* =====================================================================
   39. FORCED COLOURS / HIGH CONTRAST
   ===================================================================== */

@media (forced-colors: active) {

    .loading {
        background:
            Canvas;
    }


    .loading__panel,
    .loading-section,
    .form-loading-overlay__content {
        color:
            CanvasText;

        background:
            Canvas;

        border-color:
            CanvasText;

        box-shadow:
            none;
    }


    .loading__spinner,
    .loading-inline__spinner,
    .loading-section__spinner,
    .btn.is-loading::after,
    .form-loading-overlay__spinner {
        border-color:
            CanvasText;

        border-top-color:
            Highlight;
    }


    .loading-skeleton {
        background:
            CanvasText;
    }


    .loading-skeleton::after {
        display:
            none;
    }
}


/* =====================================================================
   40. PRINT
   ===================================================================== */

@media print {

    .loading,
    .loading-inline,
    .loading-section,
    .form-loading-overlay,
    .loading-skeleton {
        display:
            none !important;
    }


    .btn.is-loading::after {
        display:
            none !important;
    }


    .btn.is-loading
    .btn__label,
    .btn.is-loading
    .btn__icon {
        opacity:
            1 !important;
    }
}


/* =====================================================================
   END OF OLLATOEDU ECOSYS LOADING COMPONENT
   ===================================================================== */