/* ==========================================================================
   TOPPERWORK - GLOBAL LOADER & PROGRESS SYSTEM
   ==========================================================================
   Phase: 1.39
   Purpose:
   - Global reusable loading interface
   - Processing state
   - Action progress
   - Upload progress foundation
   - Success transition
   - Error transition
   - Duplicate action protection support
   - Background interaction lock
   - Mobile-first
   - WebView compatible
   - Accessibility-aware
   ========================================================================== */


/* ==========================================================================
   1. GLOBAL LOADER OVERLAY
   ========================================================================== */

.tw-loader {
    position: fixed;

    inset: 0;

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

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

    width: 100%;
    max-width: 100%;

    padding: var(--spacing-md);

    background: var(--color-overlay);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    overscroll-behavior: contain;
    touch-action: none;

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


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

.tw-loader.is-active {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/* ==========================================================================
   3. LOADER CONTENT
   ========================================================================== */

.tw-loader__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 360px;
    min-width: 0;

    padding: var(--spacing-xl);

    background: var(--color-surface);

    border: 1px solid var(--color-border);

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

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

    text-align: center;

    overflow-wrap: break-word;

    outline: none;
}


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

.tw-loader__spinner {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    border: 4px solid var(--color-loader-track);
    border-top-color: var(--color-primary);

    border-radius: 50%;

    animation: topperwork-loader-spin 0.8s linear infinite;
}


@keyframes topperwork-loader-spin {

    to {
        transform: rotate(360deg);
    }

}


/* ==========================================================================
   5. TITLE
   ========================================================================== */

.tw-loader__title {
    margin-top: var(--spacing-md);

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

    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
}


/* ==========================================================================
   6. MESSAGE
   ========================================================================== */

.tw-loader__message {
    margin-top: var(--spacing-xs);

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

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

    overflow-wrap: break-word;
    word-break: break-word;
}


/* ==========================================================================
   7. GLOBAL PROGRESS
   ========================================================================== */

.tw-loader__progress {
    width: 100%;
    max-width: 280px;

    margin-top: var(--spacing-md);
}


.tw-loader__progress-track {
    width: 100%;
    height: 8px;

    overflow: hidden;

    background: var(--color-loader-track);

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


.tw-loader__progress-bar {
    display: block;

    width: 0;
    height: 100%;

    background: var(--color-primary);

    border-radius: inherit;

    transform-origin: left center;

    transition:
        width var(--transition-fast),
        background-color var(--transition-fast);
}


.tw-loader__progress-value {
    display: block;

    margin-top: var(--spacing-xs);

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

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

    line-height: var(--line-height-normal);
}


/* ==========================================================================
   8. PROGRESS STATES
   ========================================================================== */

.tw-loader.is-progress-success
    .tw-loader__progress-bar {

    background: var(--color-success);
}


.tw-loader.is-progress-success
    .tw-loader__spinner {

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


.tw-loader.is-progress-error
    .tw-loader__progress-bar {

    background: var(--color-error);
}


.tw-loader.is-progress-error
    .tw-loader__spinner {

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


/* ==========================================================================
   9. SUCCESS / ERROR STATUS
   ========================================================================== */

.tw-loader__status {
    display: none;

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

    width: 48px;
    height: 48px;

    margin-bottom: var(--spacing-sm);

    border-radius: 50%;

    font-size: 24px;
    font-weight: var(--font-weight-bold);

    line-height: 1;
}


.tw-loader__status::before {
    display: block;
}


.tw-loader.is-progress-success
    .tw-loader__status {

    display: flex;

    color: var(--color-success);

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


.tw-loader.is-progress-success
    .tw-loader__status::before {

    content: "✓";
}


.tw-loader.is-progress-success
    .tw-loader__spinner {

    display: none;
}


.tw-loader.is-progress-error
    .tw-loader__status {

    display: flex;

    color: var(--color-error);

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


.tw-loader.is-progress-error
    .tw-loader__status::before {

    content: "!";
}


.tw-loader.is-progress-error
    .tw-loader__spinner {

    display: none;
}


/* ==========================================================================
   10. GLOBAL UI LOCK
   ========================================================================== */

body.tw-ui-locked {
    overflow: hidden;
    overscroll-behavior: none;
}


body.tw-ui-locked #topperwork-app {
    user-select: none;
}


/* ==========================================================================
   11. MOBILE SAFETY
   ========================================================================== */

@media (max-width: 640px) {

    .tw-loader {
        padding:
            max(var(--spacing-md), env(safe-area-inset-top))
            max(var(--spacing-md), env(safe-area-inset-right))
            max(var(--spacing-md), env(safe-area-inset-bottom))
            max(var(--spacing-md), env(safe-area-inset-left));
    }


    .tw-loader__content {
        max-width: 100%;
        padding: var(--spacing-lg);
    }


    .tw-loader__spinner {
        width: 44px;
        height: 44px;
    }


    .tw-loader__progress {
        max-width: 100%;
    }

}


/* ==========================================================================
   12. ACCESSIBILITY
   ========================================================================== */

.tw-loader[aria-hidden="true"] {
    pointer-events: none;
}


.tw-loader[aria-hidden="false"] {
    pointer-events: auto;
}


/* ==========================================================================
   13. REDUCED MOTION
   ========================================================================== */

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

    .tw-loader {
        transition: none;
    }


    .tw-loader__spinner {
        animation: none;
    }


    .tw-loader__progress-bar {
        transition: none;
    }

}