/* ==========================================================
   AYW DESIGN SYSTEM
   COMPONENTS / MODALS

   Responsabilidades:
   - backdrop;
   - modal base;
   - cabeçalho, corpo e rodapé;
   - tamanhos;
   - botão fechar;
   - diálogo de confirmação;
   - estado ocupado;
   - bloqueio de rolagem;
   - responsividade;
   - acessibilidade estrutural.

   Não inclui:
   - drawer;
   - bottom sheet;
   - carregamento visual próprio;
   - formulários próprios;
   - botões próprios.

   Dependências:
   - tokens.css;
   - components/buttons.css;
   - components/forms.css;
   - components/loaders.css.
   ========================================================== */


/* ==========================================================
   BACKDROP

   O backdrop controla:
   - posicionamento;
   - sobreposição;
   - entrada e saída;
   - alinhamento do modal;
   - áreas seguras do dispositivo.
   ========================================================== */

   .ayw-modal-backdrop {
    --ayw-modal-backdrop-padding-x: var(--ayw-space-3);
    --ayw-modal-backdrop-padding-y: var(--ayw-space-3);

    --ayw-modal-backdrop-bg: var(--ayw-overlay);
    --ayw-modal-backdrop-blur: 6px;

    position: fixed;
    inset: 0;
    z-index: var(--ayw-z-modal-backdrop);

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

    width: 100%;
    height: 100%;

    padding:
        calc(
            var(--ayw-modal-backdrop-padding-y) +
            env(safe-area-inset-top)
        )
        var(--ayw-modal-backdrop-padding-x)
        calc(
            var(--ayw-modal-backdrop-padding-y) +
            env(safe-area-inset-bottom)
        );

    overflow-x: hidden;
    overflow-y: auto;

    background: var(--ayw-modal-backdrop-bg);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    backdrop-filter:
        blur(
            var(--ayw-modal-backdrop-blur)
        );

    -webkit-backdrop-filter:
        blur(
            var(--ayw-modal-backdrop-blur)
        );

    overscroll-behavior: contain;

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

.ayw-modal-backdrop.is-open,
.ayw-modal-backdrop[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}

.ayw-modal-backdrop[hidden] {
    display: none;
}


/* ==========================================================
   MODAL BASE

   As variáveis internas permitem criar tamanhos e variações
   sem repetir a estrutura principal.
   ========================================================== */

.ayw-modal {
    --ayw-modal-width: 680px;

    --ayw-modal-max-height:
        min(
            92vh,
            calc(
                100dvh -
                var(--ayw-space-6) -
                env(safe-area-inset-top) -
                env(safe-area-inset-bottom)
            )
        );

    --ayw-modal-border-width: 1px;
    --ayw-modal-border-color: var(--ayw-border);

    --ayw-modal-radius: var(--ayw-radius-xl);

    --ayw-modal-bg: var(--ayw-surface);
    --ayw-modal-color: var(--ayw-text);

    --ayw-modal-shadow: var(--ayw-shadow-lg);

    --ayw-modal-header-padding: var(--ayw-space-5);
    --ayw-modal-body-padding: var(--ayw-space-5);

    --ayw-modal-footer-padding-y: var(--ayw-space-4);
    --ayw-modal-footer-padding-x: var(--ayw-space-5);
    --ayw-modal-footer-bg: var(--ayw-bg-soft);

    position: relative;

    display: flex;
    flex-direction: column;

    width: min(100%, var(--ayw-modal-width));
    max-width: 100%;
    max-height: var(--ayw-modal-max-height);

    overflow: hidden;

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

    border-radius: var(--ayw-modal-radius);

    background: var(--ayw-modal-bg);
    color: var(--ayw-modal-color);

    box-shadow: var(--ayw-modal-shadow);

    opacity: 0;

    transform:
        translateY(24px)
        scale(0.98);

    transition:
        opacity var(--ayw-transition-base),
        transform var(--ayw-transition-base);
}

.ayw-modal-backdrop.is-open .ayw-modal,
.ayw-modal-backdrop[aria-hidden="false"] .ayw-modal {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* ==========================================================
   TAMANHOS
   ========================================================== */

.ayw-modal-xs {
    --ayw-modal-width: 360px;
}

.ayw-modal-sm {
    --ayw-modal-width: 440px;
}

.ayw-modal-md {
    --ayw-modal-width: 680px;
}

.ayw-modal-lg {
    --ayw-modal-width: 920px;
}

.ayw-modal-xl {
    --ayw-modal-width: 1120px;
}


/* ==========================================================
   VARIAÇÕES VISUAIS
   ========================================================== */

.ayw-modal-flat {
    --ayw-modal-shadow: none;
}

.ayw-modal-borderless {
    --ayw-modal-border-width: 0;
}

.ayw-modal-elevated {
    --ayw-modal-shadow: var(--ayw-shadow-xl);
}


/* ==========================================================
   CABEÇALHO
   ========================================================== */

.ayw-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    flex: 0 0 auto;

    min-width: 0;

    gap: var(--ayw-space-4);

    padding: var(--ayw-modal-header-padding);

    border-bottom:
        1px
        solid
        var(--ayw-modal-border-color);

    background: var(--ayw-modal-bg);
}

.ayw-modal-header-main {
    flex: 1 1 auto;

    min-width: 0;
}

.ayw-modal-eyebrow {
    display: block;

    margin:
        0
        0
        var(--ayw-space-2);

    color: var(--ayw-primary);

    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-bold);
    line-height: var(--ayw-line-height-normal);
    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.ayw-modal-title {
    margin: 0;

    color: var(--ayw-text);

    font-size: var(--ayw-font-size-xl);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: var(--ayw-line-height-tight);

    overflow-wrap: anywhere;
}

.ayw-modal-description {
    max-width: 680px;

    margin:
        var(--ayw-space-2)
        0
        0;

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

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

    overflow-wrap: anywhere;
}


/* ==========================================================
   BOTÃO FECHAR

   Esta classe controla somente dimensões e posicionamento.

   Estrutura recomendada:

   <button
       type="button"
       class="ayw-btn ayw-btn-icon ayw-btn-ghost
              ayw-modal-close"
       aria-label="Fechar"
   >
       ...
   </button>

   A aparência principal pertence a buttons.css.
   ========================================================== */

.ayw-modal-close {
    flex: 0 0 auto;

    width: 40px;
    min-width: 40px;
    height: 40px;

    margin: calc(var(--ayw-space-1) * -1);
}


/* ==========================================================
   COMPATIBILIDADE DO BOTÃO FECHAR

   Mantém a classe antiga funcional mesmo quando ayw-btn não
   for aplicada. Novos templates devem usar buttons.css.
   ========================================================== */

.ayw-modal-close:not(.ayw-btn) {
    display: inline-grid;
    place-items: center;

    padding: 0;

    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-md);

    background: var(--ayw-surface);
    color: var(--ayw-text-muted);

    cursor: pointer;

    font: inherit;
    line-height: 1;

    appearance: none;

    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;

    transition:
        border-color var(--ayw-transition-fast),
        background-color var(--ayw-transition-fast),
        color var(--ayw-transition-fast),
        transform var(--ayw-transition-fast);
}

.ayw-modal-close:not(.ayw-btn):hover {
    border-color: var(--ayw-primary-border);

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

    transform: translateY(-1px);
}

.ayw-modal-close:not(.ayw-btn):active {
    transform: translateY(0);
}

.ayw-modal-close:not(.ayw-btn):focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;
}

.ayw-modal-close svg,
.ayw-modal-close img {
    display: block;

    width: 1em;
    height: 1em;
}


/* ==========================================================
   CORPO
   ========================================================== */

.ayw-modal-body {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    padding: var(--ayw-modal-body-padding);

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;

    scrollbar-gutter: stable;

    -webkit-overflow-scrolling: touch;
}

.ayw-modal-body-flush,
.ayw-modal-body.is-flush {
    padding: 0;
}

.ayw-modal-body-compact {
    --ayw-modal-body-padding: var(--ayw-space-4);
}

.ayw-modal-body-comfortable {
    --ayw-modal-body-padding: var(--ayw-space-6);
}


/* ==========================================================
   CONTEÚDO DO CORPO
   ========================================================== */

.ayw-modal-content {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: var(--ayw-space-5);
}

.ayw-modal-section {
    min-width: 0;
}

.ayw-modal-section + .ayw-modal-section {
    padding-top: var(--ayw-space-5);

    border-top: 1px solid var(--ayw-border);
}

.ayw-modal-section-title {
    margin:
        0
        0
        var(--ayw-space-3);

    color: var(--ayw-text);

    font-size: var(--ayw-font-size-md);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: var(--ayw-line-height-tight);
}

.ayw-modal-section-text {
    margin: 0;

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

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


/* ==========================================================
   RODAPÉ

   Os botões pertencem a buttons.css.
   Este bloco controla apenas layout e posicionamento.
   ========================================================== */

.ayw-modal-footer {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column-reverse;
    align-items: stretch;

    min-width: 0;

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

    padding:
        var(--ayw-modal-footer-padding-y)
        var(--ayw-modal-footer-padding-x)
        calc(
            var(--ayw-modal-footer-padding-y) +
            env(safe-area-inset-bottom)
        );

    border-top:
        1px
        solid
        var(--ayw-modal-border-color);

    background: var(--ayw-modal-footer-bg);
}

.ayw-modal-footer > .ayw-btn {
    width: 100%;
}

.ayw-modal-footer-main,
.ayw-modal-footer-actions {
    display: flex;
    flex-direction: column;

    min-width: 0;

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

.ayw-modal-footer-main {
    flex: 1 1 auto;
}

.ayw-modal-footer-actions {
    flex: 0 0 auto;
}


/* ==========================================================
   MODAL DE CONFIRMAÇÃO
   ========================================================== */

.ayw-modal-confirm {
    --ayw-modal-width: 480px;

    --ayw-modal-confirm-icon-bg: var(--ayw-primary-soft);
    --ayw-modal-confirm-icon-color: var(--ayw-primary);
}

.ayw-modal-confirm .ayw-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding-top: var(--ayw-space-8);
    padding-bottom: var(--ayw-space-8);

    text-align: center;
}

.ayw-modal-confirm-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 64px;
    height: 64px;

    margin-bottom: var(--ayw-space-5);

    overflow: hidden;

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

    background: var(--ayw-modal-confirm-icon-bg);
    color: var(--ayw-modal-confirm-icon-color);

    box-shadow: var(--ayw-shadow-xs);

    font-size: 1.6rem;
    line-height: 1;
}

.ayw-modal-confirm-icon svg,
.ayw-modal-confirm-icon img {
    display: block;

    width: 1em;
    height: 1em;
}

.ayw-modal-confirm-icon img {
    object-fit: contain;
}

.ayw-modal-confirm-title {
    margin: 0;

    color: var(--ayw-text);

    font-size: var(--ayw-font-size-xl);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: var(--ayw-line-height-tight);

    overflow-wrap: anywhere;
}

.ayw-modal-confirm-text {
    max-width: 420px;

    margin:
        var(--ayw-space-3)
        0
        0;

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

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

    overflow-wrap: anywhere;
}


/* ==========================================================
   VARIAÇÕES SEMÂNTICAS DA CONFIRMAÇÃO
   ========================================================== */

.ayw-modal-confirm.is-danger,
.ayw-modal-confirm-danger {
    --ayw-modal-confirm-icon-bg: var(--ayw-danger-soft);
    --ayw-modal-confirm-icon-color: var(--ayw-danger);
}

.ayw-modal-confirm.is-warning,
.ayw-modal-confirm-warning {
    --ayw-modal-confirm-icon-bg: var(--ayw-warning-soft);
    --ayw-modal-confirm-icon-color: var(--ayw-warning);
}

.ayw-modal-confirm.is-success,
.ayw-modal-confirm-success {
    --ayw-modal-confirm-icon-bg: var(--ayw-success-soft);
    --ayw-modal-confirm-icon-color: var(--ayw-success);
}

.ayw-modal-confirm.is-info,
.ayw-modal-confirm-info {
    --ayw-modal-confirm-icon-bg: var(--ayw-info-soft);
    --ayw-modal-confirm-icon-color: var(--ayw-info);
}


/* ==========================================================
   ESTADO OCUPADO

   O modal apenas bloqueia a interação.

   O conteúdo visual deve usar loaders.css:

   <div class="ayw-loading-overlay">
       <span class="ayw-spinner"></span>
   </div>
   ========================================================== */

.ayw-modal[aria-busy="true"] {
    cursor: wait;
}

.ayw-modal[aria-busy="true"]
.ayw-modal-header,
.ayw-modal[aria-busy="true"]
.ayw-modal-body,
.ayw-modal[aria-busy="true"]
.ayw-modal-footer {
    pointer-events: none;
}

.ayw-modal[aria-busy="true"]
.ayw-modal-header > :not(.ayw-modal-close),
.ayw-modal[aria-busy="true"]
.ayw-modal-body > *,
.ayw-modal[aria-busy="true"]
.ayw-modal-footer > * {
    opacity: 0.55;
}

.ayw-modal > .ayw-loading-overlay {
    z-index: 5;

    border-radius: inherit;
}


/* ==========================================================
   MODAL SEM CABEÇALHO OU RODAPÉ
   ========================================================== */

.ayw-modal-no-header .ayw-modal-body {
    padding-top: var(--ayw-space-6);
}

.ayw-modal-no-footer .ayw-modal-body {
    padding-bottom:
        calc(
            var(--ayw-modal-body-padding) +
            env(safe-area-inset-bottom)
        );
}


/* ==========================================================
   BLOQUEIO DE ROLAGEM
   ========================================================== */

html.ayw-modal-open,
body.ayw-modal-open {
    overflow: hidden;
}

body.ayw-modal-open {
    touch-action: none;

    overscroll-behavior: none;
}


/* ==========================================================
   MOBILE COMPACTO
   ========================================================== */

@media (max-width: 374px) {
    .ayw-modal-backdrop {
        --ayw-modal-backdrop-padding-x: var(--ayw-space-2);
        --ayw-modal-backdrop-padding-y: var(--ayw-space-2);
    }

    .ayw-modal {
        --ayw-modal-header-padding: var(--ayw-space-4);
        --ayw-modal-body-padding: var(--ayw-space-4);

        --ayw-modal-footer-padding-y: var(--ayw-space-3);
        --ayw-modal-footer-padding-x: var(--ayw-space-4);

        --ayw-modal-radius: var(--ayw-radius-lg);
    }

    .ayw-modal-confirm .ayw-modal-body {
        padding-top: var(--ayw-space-6);
        padding-bottom: var(--ayw-space-6);
    }

    .ayw-modal-confirm-icon {
        width: 56px;
        height: 56px;

        font-size: 1.4rem;
    }
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 768px) {
    .ayw-modal-backdrop {
        --ayw-modal-backdrop-padding-x: var(--ayw-space-6);
        --ayw-modal-backdrop-padding-y: var(--ayw-space-6);

        align-items: center;
    }

    .ayw-modal {
        --ayw-modal-max-height:
            min(
                90vh,
                calc(
                    100dvh -
                    var(--ayw-space-12)
                )
            );

        --ayw-modal-header-padding: var(--ayw-space-6);
        --ayw-modal-body-padding: var(--ayw-space-6);

        --ayw-modal-footer-padding-y: var(--ayw-space-4);
        --ayw-modal-footer-padding-x: var(--ayw-space-6);
    }

    .ayw-modal-footer {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;

        padding:
            var(--ayw-modal-footer-padding-y)
            var(--ayw-modal-footer-padding-x);
    }

    .ayw-modal-footer > .ayw-btn {
        width: auto;
    }

    .ayw-modal-footer-main {
        flex-direction: row;
        align-items: center;
    }

    .ayw-modal-footer-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .ayw-modal-footer-actions > .ayw-btn {
        width: auto;
    }
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 992px) {
    .ayw-modal-lg,
    .ayw-modal-xl {
        --ayw-modal-header-padding: var(--ayw-space-8);
        --ayw-modal-body-padding: var(--ayw-space-8);

        --ayw-modal-footer-padding-y: var(--ayw-space-5);
        --ayw-modal-footer-padding-x: var(--ayw-space-8);
    }
}


/* ==========================================================
   MOVIMENTO REDUZIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .ayw-modal-backdrop,
    .ayw-modal,
    .ayw-modal-close:not(.ayw-btn) {
        transition: none;
    }

    .ayw-modal {
        transform: none;
    }

    .ayw-modal-backdrop.is-open .ayw-modal,
    .ayw-modal-backdrop[aria-hidden="false"] .ayw-modal {
        transform: none;
    }
}


/* ==========================================================
   DIÁLOGO GERENCIADOR

   Estrutura compartilhada por fluxos complexos como busca,
   edição e gerenciamento de coleções.
   ========================================================== */

.ayw-manager-dialog {
    width: min(760px, calc(100% - 28px));
    max-height: min(82vh, 760px);
    padding: 0;
    border: 0;
    border-radius: var(--ayw-radius-xl);
    background: var(--ayw-surface);
    color: var(--ayw-text);
    box-shadow: var(--ayw-shadow-xl);
}

.ayw-manager-dialog-sm {
    width: min(560px, calc(100% - 28px));
}

.ayw-manager-dialog::backdrop {
    background: var(--ayw-overlay);
    backdrop-filter: blur(3px);
}

.ayw-manager-dialog-head {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    justify-content: space-between;
    gap: var(--ayw-space-5);
    padding: var(--ayw-space-6);
    border-bottom: 1px solid var(--ayw-border);
    background: var(--ayw-surface);
}

.ayw-manager-dialog-body {
    display: grid;
    gap: var(--ayw-space-5);
    padding: var(--ayw-space-5) var(--ayw-space-6) var(--ayw-space-6);
}