/* ==========================================================================
   Eesier Modal (design system component)
   JS: wwwroot/js/modal.js (Modal.open(url) / [data-modal])

   Tema: claro por padrão; a variante escura ativa com a classe "dark" no
   próprio overlay OU em qualquer ancestral. Todas as cores fluem pelas
   variáveis --emo-* (o consumidor pode sobrescrevê-las para retemar).
   ========================================================================== */


/* OVERLAY */

/* Native dialog variant for Razor content already present in the document. */
.eesier-dialog {
    /* The keyboard changes the visual viewport, not necessarily 100dvh (iOS). */
    position: fixed;
    inset-block-start: var(--emo-viewport-top, 0px);
    inset-block-end: calc(100% - var(--emo-viewport-top, 0px) - var(--emo-viewport-height, 100dvh));
    margin-block: var(--emo-dialog-margin, auto) auto;
    padding: 0;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-standard, 12px);
    color: var(--color-ink, #0f172a);
    background: var(--color-surface, #ffffff);
    max-width: calc(100vw - var(--space-large, 48px));
    /* The keyboard never shrinks the dialog: its height is capped by the stable small viewport. */
    max-height: calc(100vh - var(--space-large, 48px));
    max-height: calc(100svh - var(--space-large, 48px));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-padding-block: var(--space-small, 12px);
}
.eesier-dialog::backdrop {
    background: color-mix(in srgb, var(--color-canvas-dark, #0a1628) 55%, transparent);
    backdrop-filter: blur(var(--space-tight, 6px));
}
.eesier-dialog.dark, .dark .eesier-dialog {
    color: var(--color-text-on-dark, #ffffff);
    background: var(--color-surface-dark, #101f38);
    border-color: var(--color-border-on-dark, rgba(255, 255, 255, 0.12));
}

.modal-overlay {
    --emo-surface: var(--color-surface, #ffffff);
    --emo-border: var(--color-border, #e2e8f0);
    --emo-muted: var(--color-muted, #475569);
    --emo-hover: var(--color-palette-primary-surface, #eef7ff);
    --emo-spinner: var(--color-palette-secondary, #4fbefe);
    --emo-spinner-track: var(--color-border, #e2e8f0);
    --emo-danger: var(--color-danger, #ef4444);
    --emo-scrim: color-mix(in srgb, var(--color-canvas-dark, #0a1628) 55%, transparent);

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--emo-scrim);
    backdrop-filter: blur(var(--space-tight, 6px));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion-quick, 0.18s) var(--ease-state, ease-in-out), visibility var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}

.modal-overlay.dark,
.dark .modal-overlay {
    --emo-surface: var(--color-surface-dark, #101f38);
    --emo-border: var(--color-border-on-dark, rgba(255, 255, 255, 0.12));
    --emo-muted: var(--color-muted-on-dark, rgba(255, 255, 255, 0.6));
    --emo-hover: color-mix(in srgb, var(--color-palette-secondary, #4fbefe) 15%, transparent);
    --emo-spinner-track: var(--color-border-on-dark, rgba(255, 255, 255, 0.12));
    --emo-scrim: color-mix(in srgb, var(--color-canvas-dark, #0a1628) 75%, transparent);
}

.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}


/* CONTAINER */

.modal-overlay .modal-container {
    background: var(--emo-surface);
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 var(--space-tight) var(--space-medium) color-mix(in srgb, var(--color-canvas-dark, #0a1628) 15%, transparent);
    border-radius: var(--radius-standard);
    overflow: hidden;
}


/* HEADER */

.modal-overlay .modal-container .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-small);
    border-bottom: 1px solid var(--emo-border);
    min-height: var(--control-square-size, 72px);
}

.modal-overlay .modal-container .modal-header .modal-back,
.modal-overlay .modal-container .modal-header .modal-close {
    width: var(--control-height);
    height: var(--control-height);
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill, 999px);
    transition: background-color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out), transform var(--motion-standard, 0.36s) var(--ease-travel, cubic-bezier(0.22, 1, 0.36, 1));
}

.modal-overlay .modal-container .modal-header .modal-back:hover,
.modal-overlay .modal-container .modal-header .modal-close:hover {
    background: var(--emo-hover);
}

.modal-overlay .modal-container .modal-header .modal-back:active,
.modal-overlay .modal-container .modal-header .modal-close:active {
    transform: scale(0.9);
    transition-duration: var(--motion-press, 0.09s);
}

.modal-overlay .modal-container .modal-header .modal-back:focus-visible,
.modal-overlay .modal-container .modal-header .modal-close:focus-visible {
    outline: 2px solid var(--color-palette-primary, #1c91e4);
    outline-offset: 2px;
}

.modal-overlay .modal-container .modal-header .modal-back svg,
.modal-overlay .modal-container .modal-header .modal-close svg {
    width: var(--icon-size);
    height: var(--icon-size);
    color: var(--emo-muted);
    transition: transform var(--motion-standard, 0.36s) var(--ease-travel, cubic-bezier(0.22, 1, 0.36, 1));
}

/* NO HOVER, O × GIRA UM QUARTO DE VOLTA (MESMO GESTO DO LIMPAR DA BUSCA) E A
   SETA DE VOLTAR ACENA NA DIREÇÃO DO GESTO. */

.modal-overlay .modal-container .modal-header .modal-close:hover svg {
    transform: rotate(90deg);
}

.modal-overlay .modal-container .modal-header .modal-back:hover svg {
    transform: translateX(calc(var(--space-tight, 6px) * -0.5));
}

.modal-overlay .modal-container .modal-header .modal-close {
    margin-left: auto;
}


/* CONTENT */

.modal-overlay .modal-container .modal-content {
    padding: var(--space-medium);
    overflow: auto;
    flex: 1;
}


/* LOADING */

.modal-overlay .modal-container .modal-loading {
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-large);
    min-width: calc(var(--space-medium) * 12);
    min-height: calc(var(--space-large) * 4);
}

/* O SPINNER É O DO SISTEMA (.eesier-spinner, states.css) — O MODAL SÓ VESTE A
   PRÓPRIA MEDIDA E A PRÓPRIA TINTA NAS VARIÁVEIS DA INSTÂNCIA. EXIGE
   states.css CARREGADO JUNTO COM ESTE ARQUIVO. */

.modal-overlay .modal-container .modal-loading .eesier-spinner {
    --esp-size: var(--space-medium, 24px);
    --esp-border: 3px;

    border-color: var(--emo-spinner-track);
    border-top-color: var(--emo-spinner);
}


/* ERROR */

.modal-overlay .modal-container .modal-error {
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-large);
    min-width: calc(var(--space-medium) * 12);
    min-height: calc(var(--space-large) * 4);
}

.modal-overlay .modal-container .modal-error .modal-error-message {
    color: var(--emo-danger);
    text-align: center;
}


/* ANIMATIONS — ENTRADAS VIAJAM COM --ease-travel (PARTEM RÁPIDO, ASSENTAM
   SUAVE); SAÍDAS SÃO MAIS CURTAS (--motion-quick): O QUE VAI EMBORA NÃO PEDE
   ATENÇÃO. A ESCALA PARTE DE 0.96 — PRESENÇA, NÃO ESPETÁCULO. */

.modal-overlay .modal-container.animated {
    animation-duration: var(--motion-standard, 0.36s);
    animation-timing-function: var(--ease-travel, cubic-bezier(0.22, 1, 0.36, 1));
    animation-fill-mode: both;
}

.modal-overlay .modal-container.zoomOut,
.modal-overlay .modal-container.slideOutLeft,
.modal-overlay .modal-container.slideOutRight {
    animation-duration: var(--motion-quick, 0.18s);
    animation-timing-function: var(--ease-state, ease-in-out);
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(var(--space-tight, 6px));
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes zoomOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.96);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(calc(var(--space-medium, 24px) * -1));
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(var(--space-medium, 24px));
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(calc(var(--space-medium, 24px) * -1));
        opacity: 0;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(var(--space-medium, 24px));
        opacity: 0;
    }
}

.modal-overlay .modal-container.zoomIn {
    animation-name: zoomIn;
}

.modal-overlay .modal-container.zoomOut {
    animation-name: zoomOut;
}

.modal-overlay .modal-container.slideInLeft {
    animation-name: slideInLeft;
}

.modal-overlay .modal-container.slideInRight {
    animation-name: slideInRight;
}

.modal-overlay .modal-container.slideOutLeft {
    animation-name: slideOutLeft;
}

.modal-overlay .modal-container.slideOutRight {
    animation-name: slideOutRight;
}


.eesier-dialog .eesier-dialog__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--control-height, 48px);
    width: var(--control-height, 48px);
    height: var(--control-height, 48px);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-palette-primary, #1c91e4);
    cursor: pointer;
}

.eesier-dialog .eesier-dialog__close svg {
    width: var(--icon-size, 16px);
    height: var(--icon-size, 16px);
    transition: transform var(--motion-standard, 0.36s) var(--ease-travel, ease);
}

.eesier-dialog .eesier-dialog__close:is(:hover, :focus-visible) svg { transform: rotate(90deg); }
.eesier-dialog .eesier-dialog__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

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

    .eesier-dialog .eesier-dialog__close svg { transition: none; transform: none; }

    .modal-overlay,
    .modal-overlay .modal-container.animated {
        transition: none;
        animation-duration: 0.01s;
    }

    .modal-overlay {
        backdrop-filter: none;
    }
}