/* =========================================================
   QBox Infrastructure - Enterprise Modal System
   Depends on:
   - core/foundation.css
========================================================= */
/* =========================================================
   MODAL OVERLAY
========================================================= */
.modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal,1050);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(15,23,42,.55);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}

    .modal.open {
        display: flex;
        opacity: 1;
        visibility: visible;
    }

.modal.hidden {
    display: none;
}

/* =========================================================
   DIALOG
========================================================= */

.modal-dialog {
    width: 100%;
    max-width: 720px;
    margin: 0;
}

.modal-sm {
    max-width: 480px;
}

.modal-md {
    max-width: 640px;
}

.modal-lg {
    max-width: 860px;
}

.modal-xl {
    max-width: 1100px;
}

.modal-full {
    max-width: 95vw;
}

/* =========================================================
   CONTENT
========================================================= */

.modal-content {
    display: flex;
    flex-direction: column;
    background: var(--surface-0);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(15,23,42,.18);
    animation: modal-enter .22s ease;
}

/* =========================================================
   HEADER
========================================================= */

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-0);
}

.modal-header-left {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.modal-subtitle {
    font-size: .875rem;
    color: var(--text-secondary);
}

.modal-close {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: .2s;
}

    .modal-close:hover {
        background: var(--surface-2);
        color: var(--brand-primary);
    }

/* =========================================================
   BODY
========================================================= */

.modal-body {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    max-height: 75vh;
}

/* =========================================================
   FOOTER
========================================================= */

.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-1);
}

/* =========================================================
   FORM LAYOUT
========================================================= */

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.modal-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1rem;
}

.modal-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border-subtle);
}

.modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 1.5rem;
}

.modal-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1.5rem;
}

.modal-field {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

    .modal-field label {
        font-size: .875rem;
        font-weight: 500;
        color: var(--text-primary);
    }

    .modal-field input,
    .modal-field select,
    .modal-field textarea {
        width: 100%;
    }

/* =========================================================
   DIVIDER
========================================================= */

.modal-divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 0;
}

/* =========================================================
   LOADING
========================================================= */

.modal-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(2px);
}

/* =========================================================
   BUTTON LOADING
========================================================= */

.btn.is-loading {
    position: relative;
    pointer-events: none;
    opacity: .8;
}

    .btn.is-loading > * {
        visibility: hidden;
    }

    .btn.is-loading::after {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,.35);
        border-top-color: #fff;
        animation: spin .6s linear infinite;
    }

.btn-outline.is-loading::after,
.btn-secondary.is-loading::after {
    border: 2px solid var(--border-default);
    border-top-color: var(--brand-primary);
}

/* =========================================================
   SPINNER
========================================================= */

.spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-default);
    border-top-color: var(--brand-primary);
    animation: spin .6s linear infinite;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 992px) {

    .modal {
        padding: 1rem;
    }

    .modal-dialog {
        max-width: 100%;
    }
}

@media (max-width: 768px) {

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1.25rem;
    }

    .modal-grid,
    .modal-grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {

    .modal {
        align-items: flex-end;
        padding: 0;
    }

    .modal-dialog {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .modal-content {
        border-radius: 18px 18px 0 0;
    }

    .modal-body {
        max-height: 65vh;
    }
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes spin {

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

@keyframes modal-enter {

    from {
        opacity: 0;
        transform: translateY(20px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}