/* Meu Palcco — componente modal canônico consolidado. */

/* === Consolidado de public_html/assets/css/components/modal-runtime.css === */
/* Modal */
body.has-open-modal {
    overflow: hidden;
}
.modal[hidden] {
    display: none !important;
}
.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 20px;
}

/* Confirmações destrutivas devem permanecer acima de modais de módulos, como a Agenda. */
#globalActionConfirmModal {
    z-index: 13000 !important;
}
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 12, 31, .48);
    backdrop-filter: blur(4px);
}
.modal-card {
    position: relative;
    width: min(460px, 100%);
    display: grid;
    gap: 16px;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 24px 70px rgba(20,12,31,.24);
}
.action-confirm-card {
    width: min(480px, 100%);
    gap: 18px;
    padding: 26px;
    border: 1px solid rgba(109, 40, 217, .14);
    background:
        radial-gradient(circle at top left, rgba(249, 115, 22, .10), transparent 13rem),
        #fff;
}
.action-confirm-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--accent);
    background: linear-gradient(135deg, rgba(249, 115, 22, .14), rgba(109, 40, 217, .12));
}
.action-confirm-copy h2 {
    color: var(--text);
    font-size: 1.2rem;
}
.action-confirm-message {
    color: var(--muted);
    margin-top: 6px;
    line-height: 1.55;
}
.action-confirm-submit {
    background: linear-gradient(135deg, var(--accent), var(--primary));
    box-shadow: 0 12px 28px rgba(109, 40, 217, .18);
}
.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.modal-header p {
    color: var(--muted);
    font-size: .86rem;
    margin-top: 3px;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 1180px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .panel-title-row,
    .modal-header {
        align-items: flex-start;
    }
    .modal-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}



/* Aviso visual de novo contato recebido pelo checklist público. */
.new-contact-alert-modal { z-index: 12100; }
.new-contact-alert-card {
    width: min(520px, 100%);
    gap: 18px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(109, 40, 217, .16);
    background:
        radial-gradient(circle at top left, rgba(249, 115, 22, .13), transparent 15rem),
        radial-gradient(circle at top right, rgba(109, 40, 217, .12), transparent 16rem),
        #fff;
}
.new-contact-alert-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--primary));
}
.new-contact-alert-card__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(109, 40, 217, .12);
    border-radius: 12px;
    color: var(--muted);
    background: rgba(255,255,255,.82);
    cursor: pointer;
}
.new-contact-alert-card__close:hover,
.new-contact-alert-card__close:focus-visible {
    color: var(--primary);
    border-color: rgba(109, 40, 217, .24);
    outline: none;
}
.new-contact-alert-card__icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 19px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--primary));
    box-shadow: 0 14px 30px rgba(109, 40, 217, .20);
}
.new-contact-alert-card__copy { padding-right: 34px; }
.new-contact-alert-card__copy > span {
    display: inline-flex;
    margin-bottom: 7px;
    color: var(--primary);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.new-contact-alert-card__copy h2 {
    margin: 0 0 7px;
    color: var(--text);
    font-size: 1.35rem;
    font-weight: 600;
}
.new-contact-alert-card__copy p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}
.new-contact-alert-card__details {
    display: grid;
    gap: 0;
    margin: 0;
    border: 1px solid #eadff2;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,.78);
}
.new-contact-alert-card__details > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px;
}
.new-contact-alert-card__details > div + div { border-top: 1px solid #eee6f4; }
.new-contact-alert-card__details dt {
    color: var(--muted);
    font-size: .78rem;
}
.new-contact-alert-card__details dd {
    min-width: 0;
    margin: 0;
    color: var(--text);
    font-size: .88rem;
    font-weight: 600;
    overflow-wrap: normal;
}
.new-contact-alert-card__actions { justify-content: flex-end; }
@media (max-width: 560px) {
    .new-contact-alert-card { padding: 24px 18px 18px; }
    .new-contact-alert-card__details > div { grid-template-columns: 1fr; gap: 4px; }
    .new-contact-alert-card__actions { grid-template-columns: 1fr; }
    .new-contact-alert-card__actions .button { width: 100%; }
}

/* Novo contato -> Ver evento: o iframe precisa substituir o aviso anterior e ficar
   acima de filtros, dropdowns e demais camadas da página sem depender de repaint. */
.iframe-modal--topbar-opportunity {
    z-index: 12200 !important;
    isolation: isolate;
}

.iframe-modal--topbar-opportunity > .iframe-modal__backdrop {
    z-index: 0 !important;
    background: rgba(20, 9, 42, .62);
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.iframe-modal--topbar-opportunity > .iframe-modal__dialog {
    z-index: 1 !important;
    background: #fff;
    isolation: isolate;
}

/* === Consolidado de public_html/assets/css/components/modal-runtime.css === */
/* v137 — Modal responsivo à altura da viewport.
   Regra: shell do modal fica preso dentro da viewport; cabeçalho permanece visível;
   a área de formulário é a única região rolável e as ações ficam no fluxo normal,
   no fim do formulário, sem rodapé flutuante/sticky. */
:root {
    --palcco-modal-gap-block: clamp(10px, 2dvh, 22px);
    --palcco-modal-gap-inline: clamp(10px, 2vw, 22px);
    --palcco-modal-radius: 18px;
}

html:has(body.has-open-modal),
body.has-open-modal,
body:has(.modal:not([hidden])),
body:has(.iframe-modal:not([hidden])),
body:has(.import-modal:not([hidden])),
body:has(.finance-entry-modal:not([hidden])),
body:has(.calendar-item-modal:not([hidden])),
body:has(.pix-qr-modal:not([hidden])) {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* A camada externa nunca rola. O diálogo é que se limita à viewport. */
.modal,
.iframe-modal,
.import-modal,
.finance-entry-modal,
.calendar-item-modal,
.pix-qr-modal {
    box-sizing: border-box;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding-top: max(var(--palcco-modal-gap-block), env(safe-area-inset-top)) !important;
    padding-right: max(var(--palcco-modal-gap-inline), env(safe-area-inset-right)) !important;
    padding-bottom: max(var(--palcco-modal-gap-block), env(safe-area-inset-bottom)) !important;
    padding-left: max(var(--palcco-modal-gap-inline), env(safe-area-inset-left)) !important;
    overscroll-behavior: none;
}

.modal[hidden],
.iframe-modal[hidden],
.import-modal[hidden],
.finance-entry-modal[hidden],
.calendar-item-modal[hidden],
.pix-qr-modal[hidden] {
    display: none !important;
}

.modal-backdrop,
.iframe-modal__backdrop,
.import-modal__backdrop,
.finance-entry-modal__backdrop,
.calendar-item-modal__backdrop,
.pix-qr-modal__backdrop {
    position: absolute !important;
    inset: 0 !important;
}

/* Shell: tamanho natural quando cabe; nunca ultrapassa a altura disponível. */
.modal > .modal-card,
.iframe-modal > .iframe-modal__dialog,
.import-modal > .import-modal__card,
.finance-entry-modal > .finance-entry-modal__dialog,
.calendar-item-modal > .calendar-item-modal__card,
.pix-qr-modal > .pix-qr-modal__card {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - var(--palcco-modal-gap-block) - var(--palcco-modal-gap-block)) !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: var(--palcco-modal-radius) !important;
}

/* Diálogos que já trabalham em colunas preservam o header e entregam o restante ao body. */
.modal > .modal-card,
.iframe-modal > .iframe-modal__dialog,
.import-modal > .import-modal__card,
.finance-entry-modal > .finance-entry-modal__dialog,
.calendar-item-modal > .calendar-item-modal__card,
.pix-qr-modal > .pix-qr-modal__card {
    display: flex !important;
    flex-direction: column !important;
}

/* Cabeçalhos e fechamentos permanecem no shell; ações de formulário ficam no fim do conteúdo. */
.modal-header,
.services-modal-header,
.accounts-modal-header,
.iframe-modal__header,
.import-modal__header,
.finance-entry-modal__header,
.calendar-item-modal__header,
.pix-qr-modal__header {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    z-index: 8 !important;
}

/* Formulários sem wrapper de body: o próprio formulário é a única área rolável. */
.modal > .modal-card > form,
.services-modal-card > .services-form,
.accounts-modal-card > .accounts-form,
.settings-account-modal__card > .settings-account-modal__form,
.import-modal__card > .import-modal__form {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Import preview também é a região central rolável. */
.import-modal__card > .import-modal__form,
.import-modal__card > .import-preview {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Forms com body/footer próprios: o FORM inteiro é a única região rolável.
   Assim o botão Salvar permanece no fim do formulário e só aparece ao chegar ao final. */
.finance-entry-form,
.calendar-item-form {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.finance-entry-form__body,
.calendar-item-form__body {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Regra global: ações de formulários em modal nunca ficam sticky/fixed/flutuantes.
   Elas fazem parte do fluxo normal e permanecem no fim do conteúdo rolável. */
.finance-entry-form__footer,
.calendar-item-form__actions,
.services-modal-actions,
.accounts-modal-actions,
.settings-account-modal__actions,
.import-modal__actions,
.modal-card > form > .modal-actions {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    flex: none !important;
    box-shadow: none !important;
}

/* Iframes: o header pertence ao shell e o frame ocupa somente o espaço restante. */
.iframe-modal__dialog {
    width: min(1220px, 100%) !important;
    min-height: 0 !important;
}

.iframe-modal__frame {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* Documento carregado dentro dos modais em iframe: exatamente uma rolagem, em .content. */
html:has(body.app-modal-body),
body.app-modal-body {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

body.app-modal-body .app-shell,
body.app-modal-body .main-area {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

body.app-modal-body .content {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
}

body.app-modal-body .company-form,
body.app-modal-body .company-form.panel,
body.app-modal-body .company-form--event-modal,
body.app-modal-body .module-form,
body.app-modal-body .event-modal-only-form,
body.app-modal-body .company-form-tabs,
body.app-modal-body .company-form-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

body.app-modal-body :is(
    .form-actions,
    .form-actions--safe,
    .company-modal-wizard-actions,
    .event-modal-only-actions
) {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    /* Safe area fica como espaço final do formulário, não como rodapé flutuante. */
    margin-bottom: max(0px, env(safe-area-inset-bottom)) !important;
}

/* Altura curta: ocupa quase toda a viewport, sem reduzir tipografia ou inputs. */
@media (max-height: 700px) {
    :root {
        --palcco-modal-gap-block: 6px;
        --palcco-modal-gap-inline: 8px;
        --palcco-modal-radius: 14px;
    }

    .modal > .modal-card,
    .iframe-modal > .iframe-modal__dialog,
    .import-modal > .import-modal__card,
    .finance-entry-modal > .finance-entry-modal__dialog,
    .calendar-item-modal > .calendar-item-modal__card,
    .pix-qr-modal > .pix-qr-modal__card {
        height: calc(100dvh - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
    }
}

/* Mobile: respeita safe areas e usa a viewport dinâmica; continua sem dupla rolagem. */
@media (max-width: 720px) {
    :root {
        --palcco-modal-gap-block: 6px;
        --palcco-modal-gap-inline: 6px;
        --palcco-modal-radius: 16px;
    }

    .modal > .modal-card,
    .iframe-modal > .iframe-modal__dialog,
    .import-modal > .import-modal__card,
    .finance-entry-modal > .finance-entry-modal__dialog,
    .calendar-item-modal > .calendar-item-modal__card,
    .pix-qr-modal > .pix-qr-modal__card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 720px) and (max-height: 760px) {
    :root {
        --palcco-modal-gap-block: 0px;
        --palcco-modal-gap-inline: 0px;
        --palcco-modal-radius: 0px;
    }

    .modal,
    .iframe-modal,
    .import-modal,
    .finance-entry-modal,
    .calendar-item-modal,
    .pix-qr-modal {
        padding-top: env(safe-area-inset-top) !important;
        padding-right: env(safe-area-inset-right) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        padding-left: env(safe-area-inset-left) !important;
    }

    .modal > .modal-card,
    .iframe-modal > .iframe-modal__dialog,
    .import-modal > .import-modal__card,
    .finance-entry-modal > .finance-entry-modal__dialog,
    .calendar-item-modal > .calendar-item-modal__card,
    .pix-qr-modal > .pix-qr-modal__card {
        height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        border-radius: 0 !important;
    }
}

/* O painel Reportar é modal semântico e segue a mesma regra de viewport.
   Importante: a camada adaptativa não pode sobrescrever o atributo hidden. */
.report-panel[hidden],
.report-panel-backdrop[hidden] {
    display: none !important;
}

body.report-panel-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.report-panel:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    max-height: var(--report-panel-max-height, min(620px, calc(100dvh - 28px))) !important;
}

.report-panel__header {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 8 !important;
}

.report-panel__form {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.report-panel__actions {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    padding-top: 10px;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
}

@media (min-width: 821px) {
    .report-panel__actions {
        position: sticky !important;
        right: auto !important;
        bottom: -18px !important;
        left: auto !important;
        z-index: 6 !important;
        margin: 4px -18px -18px !important;
        padding: 12px 18px 18px !important;
        border-top: 1px solid var(--line) !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 -10px 24px rgba(34, 25, 47, .06) !important;
        backdrop-filter: blur(8px);
    }

    .report-panel__actions .button {
        min-height: 48px !important;
        white-space: nowrap !important;
    }
}

/* Modais sem formulário também mantêm a ação fora da rolagem quando necessário. */
.action-confirm-card .action-confirm-copy,
.new-contact-alert-card__details {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.action-confirm-card > .modal-actions,
.new-contact-alert-card > .modal-actions {
    flex: 0 0 auto;
}

@media (max-height: 700px) {
    .report-panel {
        top: max(6px, env(safe-area-inset-top)) !important;
        bottom: max(6px, env(safe-area-inset-bottom)) !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* === Consolidado de public_html/assets/css/components/modal-runtime.css === */
/* v139 — Todos os diálogos do Meu Palcco preservam cantos arredondados,
   inclusive quando ocupam quase toda a viewport em telas baixas/mobile. */
:root {
    --palcco-modal-radius-global: 18px;
}

:is(
    .modal > .modal-card,
    .iframe-modal > .iframe-modal__dialog,
    .import-modal > .import-modal__card,
    .finance-entry-modal > .finance-entry-modal__dialog,
    .calendar-item-modal > .calendar-item-modal__card,
    .pix-qr-modal > .pix-qr-modal__card,
    .report-panel,
    .support-image-preview__dialog
) {
    border-radius: var(--palcco-modal-radius-global) !important;
    overflow: hidden !important;
}

/* O seletor de gêneros vira bottom sheet no mobile, mas continua sendo um modal
   e por isso mantém os quatro cantos arredondados. */
@media (max-width: 700px) {
    .music-genre-multi__panel:not([hidden]) {
        left: max(6px, env(safe-area-inset-left)) !important;
        right: max(6px, env(safe-area-inset-right)) !important;
        bottom: max(6px, env(safe-area-inset-bottom)) !important;
        border-radius: 16px !important;
    }
}

@media (max-height: 700px) {
    :root {
        --palcco-modal-radius-global: 14px;
    }
}

@media (max-width: 720px) {
    :root {
        --palcco-modal-radius-global: 16px;
    }
}

@media (max-width: 720px) and (max-height: 760px) {
    :root {
        --palcco-modal-radius-global: 14px;
    }

    /* A camada v137 zerava o raio quando o modal ocupava quase 100dvh.
       Esta regra final preserva cantos arredondados sem reduzir o conteúdo. */
    :is(
        .modal > .modal-card,
        .iframe-modal > .iframe-modal__dialog,
        .import-modal > .import-modal__card,
        .finance-entry-modal > .finance-entry-modal__dialog,
        .calendar-item-modal > .calendar-item-modal__card,
        .pix-qr-modal > .pix-qr-modal__card,
        .report-panel,
        .support-image-preview__dialog
    ) {
        border-radius: var(--palcco-modal-radius-global) !important;
    }
}