/* ==========================================================================
   TOPPERWORK - GLOBAL MODAL SYSTEM
   ==========================================================================
   Phase: 2A.1

   Purpose:
   - Global reusable modal interface
   - Semantic modal variants
   - Confirmation interface
   - Loading / processing interface
   - Progress interface
   - Non-dismissible modal foundation
   - Mobile-first
   - Android WebView compatible
   - iOS WebView compatible
   - Accessibility-aware
   ========================================================================== */


/* ==========================================================================
   1. MODAL ROOT
   ========================================================================== */

.tw-modal {
    position: fixed;
    inset: 0;

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

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

    width: 100%;
    min-width: 0;
    height: 100%;

    padding:
        calc(var(--space-4) + var(--safe-area-top))
        calc(var(--space-4) + var(--safe-area-right))
        calc(var(--space-4) + var(--safe-area-bottom))
        calc(var(--space-4) + var(--safe-area-left));

    overflow-y: auto;

    background:
        var(--color-overlay);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

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

    transition:
        opacity var(--duration-normal) var(--ease-standard),
        visibility var(--duration-normal) var(--ease-standard);
}


/* ==========================================================================
   2. ACTIVE MODAL
   ========================================================================== */

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

    pointer-events: auto;
}


/* ==========================================================================
   3. MODAL DIALOG
   ========================================================================== */

.tw-modal__dialog {
    position: relative;

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

    width: 100%;
    max-width: 28rem;
    min-width: 0;

    margin: auto;

    outline: none;

    transform:
        translateY(1rem)
        scale(0.97);

    opacity: 0;

    transition:
        transform var(--duration-normal) var(--ease-emphasized),
        opacity var(--duration-normal) var(--ease-standard);
}


/* ==========================================================================
   4. ACTIVE DIALOG
   ========================================================================== */

.tw-modal.is-active .tw-modal__dialog {
    transform:
        translateY(0)
        scale(1);

    opacity: 1;
}


/* ==========================================================================
   5. MODAL CONTENT
   ========================================================================== */

.tw-modal__content {
    position: relative;

    width: 100%;
    min-width: 0;

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

    overflow: hidden;

    text-align: center;

    background:
        var(--color-surface);

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

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

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


/* ==========================================================================
   6. MODAL ICON
   ========================================================================== */

.tw-modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 4.5rem;
    height: 4.5rem;

    margin:
        0 auto
        var(--space-5);

    flex-shrink: 0;

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

    font-size:
        2rem;

    line-height: 1;

    transition:
        transform var(--duration-normal)
        var(--ease-emphasized);
}


/* ==========================================================================
   7. ICON ANIMATION
   ========================================================================== */

.tw-modal.is-active .tw-modal__icon {
    animation:
        tw-modal-icon-enter
        var(--duration-slow)
        var(--ease-emphasized)
        both;
}


@keyframes tw-modal-icon-enter {

    0% {
        opacity: 0;

        transform:
            scale(0.65);
    }

    70% {
        opacity: 1;

        transform:
            scale(1.08);
    }

    100% {
        opacity: 1;

        transform:
            scale(1);
    }

}


/* ==========================================================================
   8. SPINNER
   ========================================================================== */

.tw-modal__spinner {
    display: none;

    width: 2.75rem;
    height: 2.75rem;

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

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

    border-radius:
        50%;

    animation:
        tw-modal-spinner-spin
        0.8s linear infinite;
}


@keyframes tw-modal-spinner-spin {

    to {
        transform:
            rotate(360deg);
    }

}


/* ==========================================================================
   9. LOADING / PROCESSING STATE
   ========================================================================== */

.tw-modal--loading .tw-modal__spinner,
.tw-modal--processing .tw-modal__spinner {
    display: block;

    margin:
        0 auto
        var(--space-5);
}


.tw-modal--loading .tw-modal__icon,
.tw-modal--processing .tw-modal__icon {
    display: none;
}


/* ==========================================================================
   10. MODAL TITLE
   ========================================================================== */

.tw-modal__title {
    margin: 0;

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

    font-family:
        var(--font-family-heading);

    font-size:
        var(--font-size-2xl);

    font-weight:
        var(--font-weight-bold);

    line-height:
        var(--line-height-heading);

    letter-spacing:
        -0.02em;
}


/* ==========================================================================
   11. MODAL MESSAGE
   ========================================================================== */

.tw-modal__message {
    margin-top:
        var(--space-3);

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

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

    font-weight:
        var(--font-weight-regular);

    line-height:
        var(--line-height-relaxed);

    overflow-wrap:
        anywhere;
}


/* ==========================================================================
   12. MODAL ACTIONS
   ========================================================================== */

.tw-modal__actions {
    display: flex;
    align-items: center;
    justify-content: center;

    gap:
        var(--space-3);

    width: 100%;

    margin-top:
        var(--space-6);

    flex-wrap: wrap;
}


.tw-modal__actions .btn {
    min-width: 7rem;
    min-height:
        var(--touch-target-min);

    justify-content: center;
}


/* ==========================================================================
   13. PROGRESS
   ========================================================================== */

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

    margin:
        var(--space-5)
        auto
        0;
}


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

    overflow: hidden;

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

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


.tw-modal__progress-bar {
    display: block;

    width: 0;
    height: 100%;

    background:
        var(--color-primary);

    border-radius:
        inherit;

    transition:
        width var(--duration-normal)
        var(--ease-standard);
}


.tw-modal__progress-value {
    display: block;

    margin-top:
        var(--space-2);

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

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

    font-weight:
        var(--font-weight-medium);
}


/* ==========================================================================
   14. SUCCESS
   ========================================================================== */

.tw-modal--success .tw-modal__icon {
    color:
        var(--color-success);

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

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

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


.tw-modal--success .tw-modal__content::before {
    background:
        var(--color-success);
}


/* ==========================================================================
   15. ERROR
   ========================================================================== */

.tw-modal--error .tw-modal__icon {
    color:
        var(--color-error);

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

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

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


.tw-modal--error .tw-modal__content::before {
    background:
        var(--color-error);
}


/* ==========================================================================
   16. WARNING
   ========================================================================== */

.tw-modal--warning .tw-modal__icon {
    color:
        var(--color-warning);

    background:
        var(--color-warning-bg);

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

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


.tw-modal--warning .tw-modal__content::before {
    background:
        var(--color-warning);
}


/* ==========================================================================
   17. INFO
   ========================================================================== */

.tw-modal--info .tw-modal__icon {
    color:
        var(--color-info);

    background:
        var(--color-info-bg);

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

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


.tw-modal--info .tw-modal__content::before {
    background:
        var(--color-info);
}


/* ==========================================================================
   18. CONFIRM
   ========================================================================== */

.tw-modal--confirm .tw-modal__icon {
    color:
        var(--color-accent);

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

    border:
        1px solid
        var(--color-accent-soft-strong);

    box-shadow:
        0 8px 24px
        var(--color-glow-accent);
}


.tw-modal--confirm .tw-modal__content::before {
    background:
        var(--color-accent);
}


/* ==========================================================================
   19. LOADING / PROCESSING ACCENT
   ========================================================================== */

.tw-modal--loading .tw-modal__content::before,
.tw-modal--processing .tw-modal__content::before {
    background:
        var(--color-primary);
}


/* ==========================================================================
   20. MODAL TOP ACCENT
   ========================================================================== */

.tw-modal__content::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 6rem;
    height: 0.25rem;

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

    transform:
        translateX(-50%);

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


/* ==========================================================================
   21. MOBILE
   ========================================================================== */

@media (max-width: 479px) {

    .tw-modal {
        align-items: flex-end;
    }


    .tw-modal__dialog {
        max-width: none;

        margin: 0;
    }


    .tw-modal__content {
        padding:
            var(--space-7)
            var(--space-5);

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


    .tw-modal__actions {
        flex-direction: column-reverse;

        align-items: stretch;
    }


    .tw-modal__actions .btn {
        width: 100%;
    }


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

}


/* ==========================================================================
   22. TABLET
   ========================================================================== */

@media (min-width: 480px) {

    .tw-modal__content {
        padding:
            var(--space-8);
    }

}


/* ==========================================================================
   23. REDUCED MOTION
   ========================================================================== */

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

    .tw-modal,
    .tw-modal__dialog,
    .tw-modal__icon,
    .tw-modal__progress-bar {
        transition: none;
    }


    .tw-modal.is-active .tw-modal__icon {
        animation: none;
    }


    .tw-modal__spinner {
        animation: none;
    }

}