/** Padrão visual Waygest para modais Ant Design com formulário (criar/editar). */
.waygestFormModal {
    :global(.ant-modal-content) {
        padding: 0;
        border-radius: 12px;
        overflow: hidden;
        box-shadow:
            0 6px 16px rgba(15, 12, 20, 0.08),
            0 16px 40px rgba(15, 12, 20, 0.06);
    }

    :global(.ant-modal-header) {
        padding: 16px 24px;
        margin-bottom: 0;
        border-bottom: 1px solid var(--border, #f0f0f0);
        background: #fff;
    }

    :global(.ant-modal-title) {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
        color: var(--text-default, rgba(0, 0, 0, 0.88));
    }

    :global(.ant-modal-body) {
        padding: 20px 24px 8px;

        :global(.ant-form-item-extra),
        :global(.ant-form-item-explain) {
            font-size: 12px;
            line-height: 1.5;
            color: var(--text-subtle, rgba(0, 0, 0, 0.45));
            margin-top: 4px !important;
        }

        :global(.ant-form-item-extra) {
            min-height: auto !important;
        }
    }

    :global(.ant-modal-footer) {
        padding: 12px 24px 20px;
        margin-top: 0;
        border-top: 1px solid var(--border, #f0f0f0);
        background: #fff;

        :global(.ant-btn-default) {
            min-height: 40px;
            padding-inline: 18px;
            border-radius: 8px;
            font-weight: 500;
            border-color: color-mix(in srgb, var(--border, #d9d9d9) 90%, #000);
            background: #fff;
            color: var(--text-muted, rgba(0, 0, 0, 0.62));

            &:hover {
                border-color: color-mix(in srgb, var(--primary, #27132e) 22%, #d9d9d9);
                color: var(--text-default, rgba(0, 0, 0, 0.82));
            }
        }

        :global(.ant-btn-primary) {
            min-height: 40px;
            padding-inline: 22px;
            border-radius: 8px;
            font-weight: 600;
            box-shadow: 0 2px 8px color-mix(in srgb, var(--primary, #27132e) 22%, transparent);

            &:hover {
                box-shadow: 0 4px 14px color-mix(in srgb, var(--primary, #27132e) 28%, transparent);
            }
        }
    }
}

/** Footer customizado (ex.: botões com rótulos específicos) — reutiliza estilos dos botões do modal. */
.waygestFormModalFooter {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;

    /* Cancelar (primeiro filho) à esquerda; demais ações agrupadas à direita */
    > :first-child {
        margin-right: auto;
        flex-shrink: 0;
    }

    :global(.ant-btn-default) {
        min-height: 40px;
        padding-inline: 18px;
        flex-shrink: 0;
        border-radius: 8px;
        font-weight: 500;
        border-color: color-mix(in srgb, var(--border, #d9d9d9) 90%, #000);
        background: #fff;
        color: var(--text-muted, rgba(0, 0, 0, 0.62));

        &:hover {
            border-color: color-mix(in srgb, var(--primary, #27132e) 22%, #d9d9d9);
            color: var(--text-default, rgba(0, 0, 0, 0.82));
        }
    }

    :global(.ant-btn-primary) {
        min-height: 40px;
        padding-inline: 22px;
        margin-left: auto;
        flex-shrink: 0;
        border-radius: 8px;
        font-weight: 600;
        box-shadow: 0 2px 8px color-mix(in srgb, var(--primary, #27132e) 22%, transparent);

        &:hover {
            box-shadow: 0 4px 14px color-mix(in srgb, var(--primary, #27132e) 28%, transparent);
        }
    }
}

@media (max-width: 768px) {
    .waygestFormModal {
        :global(.ant-modal-content) {
            border-radius: 0;
        }

        :global(.ant-modal-header),
        :global(.ant-modal-body),
        :global(.ant-modal-footer) {
            padding-inline: max(16px, env(safe-area-inset-left, 0px))
                max(16px, env(safe-area-inset-right, 0px));
        }

        :global(.ant-modal-header) {
            padding-top: max(12px, env(safe-area-inset-top, 0px));
        }

        :global(.ant-modal-body) {
            padding-top: 16px;
            /* Corpo rola; safe-area fica no footer sticky do MOB-030. */
            padding-bottom: 12px;

            /* Evita zoom iOS em inputs (font < 16px). */
            :global(.ant-input),
            :global(.ant-input-affix-wrapper),
            :global(.ant-input-number-input),
            :global(.ant-select-selector),
            :global(textarea.ant-input) {
                font-size: 16px !important;
            }
        }

        :global(.ant-modal-footer) {
            z-index: 2;
            padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
            box-shadow: 0 -4px 12px rgba(15, 12, 20, 0.06);
        }
    }

    .waygestFormModalFooter {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;

        :global(.ant-btn-default),
        :global(.ant-btn-primary),
        :global(.ant-btn-link) {
            flex-shrink: 0;
            width: auto;
            min-height: 44px;
            padding-inline: 14px;
        }
    }
}