.wpfm-container {
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 24px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.wpfm-header {
    margin-bottom: 24px;
}

.wpfm-title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
}

.wpfm-subtitle {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

/* Notices / Feedback */
.wpfm-notice {
    padding: 12px 16px;
    margin-bottom: 20px;
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: 4px;
}

.wpfm-notice p {
    margin: 0;
    font-size: 14px;
}

.wpfm-notice-success {
    background-color: #f0fdf4;
    border-color: #22c55e;
    color: #15803d;
}

.wpfm-notice-error {
    background-color: #fef2f2;
    border-color: #ef4444;
    color: #b91c1c;
}

.wpfm-grid {
    display: grid;
    gap: 16px;
}

.wpfm-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wpfm-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 768px) {
    .wpfm-grid-3,
    .wpfm-grid-4 {
        grid-template-columns: 1fr;
    }
}

.wpfm-card {
    padding: 16px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.wpfm-card-label {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 6px;
}

.wpfm-card-value {
    font-size: 20px;
    font-weight: 600;
    color: #0f172a;
}

.wpfm-card--payable {
    border-left: 4px solid #f97373;
}

.wpfm-card--receivable {
    border-left: 4px solid #22c55e;
}

.wpfm-card--balance {
    border-left: 4px solid #3b82f6;
}

.wpfm-panel {
    margin-top: 24px;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f9fafb;
}

.wpfm-panel-header h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
}

.wpfm-panel-header p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}

.wpfm-panel-body {
    margin-top: 16px;
}

.wpfm-form .wpfm-field {
    margin-bottom: 12px;
}

.wpfm-field label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    color: #0f172a;
}

.wpfm-field input,
.wpfm-field select,
.wpfm-field textarea {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 14px;
}

.wpfm-actions {
    margin-top: 12px;
    text-align: right;
}

.wpfm-btn {
    display: inline-block;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 14px;
    cursor: pointer;
}

.wpfm-btn--primary {
    background: #2563eb;
    color: #ffffff;
}

.wpfm-btn--primary:hover {
    background: #1d4ed8;
}

.wpfm-table-wrapper {
    overflow-x: auto;
}

.wpfm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.wpfm-table th,
.wpfm-table td {
    border-bottom: 1px solid #e2e8f0;
    padding: 8px 10px;
    text-align: left;
}

.wpfm-table th {
    background: #f1f5f9;
    font-weight: 600;
}

/* Destaque quando algum bloco está em modo edição */
.wpfm-card--editing {
    background: #f5f5ff;          /* leve roxo/azulado */
    border: 1px solid #c7d2fe;
    box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.25);
}

/* Título em modo edição */
.wpfm-card-title--editing {
    color: #1d4ed8;
}

/* Seção "Aplicar alterações em" */
.wpfm-section--apply-scope {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px dashed #e5e7eb;
    background: #f9fafb;
}

.wpfm-section--apply-scope .wpfm-section-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.wpfm-radio-inline {
    display: inline-flex;
    align-items: center;
    margin-right: 1.5rem;
    gap: 0.35rem;
    font-size: 0.95rem;
}

/* Textos de ajuda (explicação abaixo dos campos) */
.wpfm-help-text {
    font-size: 0.82rem;
    font-style: italic;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* =======================================
   Destaque quando estiver EDITANDO
   ======================================= */

/* Card do formulário em modo edição */
.wpfm-panel--form.wpfm-panel--editing {
    background-color: #eef2ff !important;     /* mais visível */
    border: 1px solid #c7d2fe !important;
    box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.18) !important;
}

/* Título em modo edição (opcional) */
.wpfm-panel--form.wpfm-panel--editing .wpfm-panel-header h3 {
    color: #1d4ed8 !important;
}

/* Pequeno “badge” opcional para indicar edição (caso queira) */
.wpfm-panel--form.wpfm-panel--editing .wpfm-panel-header h3::after {
    content: " – editando";
    font-size: 0.8rem;
    font-weight: 500;
    color: #4b5563;
}

/* =======================================
   Bloco "Aplicar alterações em"
   ======================================= */

.wpfm-section {
    margin-top: 1.5rem;
}

/* Caixa de destaque para o escopo de edição da recorrência */
.wpfm-section--scope {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px dashed #e5e7eb;
    background: #f9fafb;
}

/* Título da seção */
.wpfm-section--scope .wpfm-section-title {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

/* Container dos rádios */
.wpfm-section--scope .wpfm-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

/* Cada opção de rádio */
.wpfm-section--scope .wpfm-radio-option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: #111827;
}

.wpfm-section--scope .wpfm-radio-option input[type="radio"] {
    accent-color: #1d4ed8; /* cor do “check” do radio (browsers modernos) */
}


/* =======================================
   Textos de ajuda / explicações
   ======================================= */

.wpfm-help-text {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.4;
    color: #6b7280;
}

/* Se quiser deixar um pouco mais afastado dos campos abaixo */
.wpfm-field .wpfm-help-text:last-child {
    margin-bottom: 0.15rem;
}


/* =======================================
   Links “perigosos” (ex.: Excluir recorrência)
   ======================================= */

.wpfm-link--danger {
    color: #b91c1c;
    font-size: 0.85rem;
}

.wpfm-link--danger:hover,
.wpfm-link--danger:focus {
    color: #dc2626;
    text-decoration: underline;
}


/* =======================================
   Pequenos ajustes em tabelas de lançamentos
   (opcional, mas ajuda na leitura)
   ======================================= */

/* Deixa as ações um pouco mais “arrumadas” em múltiplas linhas */
.wpfm-table td:last-child {
    white-space: nowrap;
}

.wpfm-table td:last-child a {
    display: inline-block;
    margin-bottom: 0.15rem;
}

/* Em telas pequenas, quebra melhor as ações */
@media (max-width: 768px) {
    .wpfm-section--scope {
        padding: 0.85rem 1rem;
    }

    .wpfm-section--scope .wpfm-radio-group {
        flex-direction: column;
        gap: 0.5rem;
    }

    .wpfm-table td:last-child {
        white-space: normal;
    }
}

.wpfm-panel {
    border-radius: 1rem;
    background: #ffffff;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}

/* Painel da lista com um pouco mais de respiro em cima */
.wpfm-panel--list {
    margin-top: 1.25rem;
}

/* ---------- Modal de visualização (forçado) ---------- */

body .wpfm-modal {
    position: fixed !important;
    inset: 0 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
}

body .wpfm-modal.wpfm-modal--open,
body .wpfm-modal[aria-hidden="false"] {
    display: flex !important;
}

body .wpfm-modal__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.35) !important;
}

body .wpfm-modal__dialog {
    position: relative !important;
    max-width: 640px !important;
    width: 90% !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25) !important;
    padding: 24px 28px !important;
    z-index: 1 !important;
}

body .wpfm-modal__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
}

body .wpfm-modal__close {
    border: 0 !important;
    background: transparent !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: #64748b !important;
}

body .wpfm-modal__body {
    font-size: 14px !important;
    color: #0f172a !important;
}

body .wpfm-modal__list {
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 160px 1fr !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
}

body .wpfm-modal__list dt {
    font-weight: 600 !important;
    color: #64748b !important;
}

body .wpfm-modal__list dd {
    margin: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 4px 0 !important;
}

/* Header do detalhamento + botões de exportação */
.wpfm-panel-header--reports {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* Em telas menores, empilha o título e os botões */
@media (max-width: 768px) {
    .wpfm-panel-header--reports {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Header do detalhamento (onde ficam os botões de exportação) */
.wpfm-panel-header--reports {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* Deixa os formulários (cada botão) lado a lado */
.wpfm-panel-header--reports form {
    display: inline-block !important;
    margin: 0 8px 0 0 !important;
}

/* Garante o formato "pílula" nos botões de exportação */
.wpfm-panel-header--reports .wpfm-btn {
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-size: 14px;
}

/* Botão de exportação com contorno vermelho e fundo branco */
.wpfm-panel-header--reports .wpfm-btn--export {
    border: 1px solid #ff4b6a !important;
    background-color: #ffffff !important;
    color: #ff4b6a !important;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

/* Hover: leve preenchido */
.wpfm-panel-header--reports .wpfm-btn--export:hover {
    background-color: rgba(255, 75, 106, 0.06) !important;
}

/* ================================
Relatórios – botões de exportação
================================ */

/* Header do bloco de detalhamento + exportações */
.wpfm-panel-header--reports {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}

/* Container dos botões (lado a lado) */
.wpfm-export-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

/* Forms inline, para não virarem blocos cheios */
.wpfm-inline-form {
display: inline-block;
margin: 0;
}

/* Botão de exportação: pill com contorno vermelho */
.wpfm-btn.wpfm-btn--export {
border-radius: 999px;
border: 1px solid #ff4b6a !important;
background-color: #ffffff !important;
color: #ff4b6a !important;
font-weight: 500;
padding: 8px 18px;
line-height: 1.2;
}

/* Hover: leve preenchimento */
.wpfm-btn.wpfm-btn--export:hover {
background-color: rgba(255, 75, 106, 0.08) !important;
}

/* Container dos botões: lado a lado, alinhados à esquerda
.wpfm-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

 Forms inline dentro do container de exportação
   .wpfm-export-actions form,x
   .wpfm-inline-form {
   display: inline-block !important;
   margin: 0 !important;
}

/* Botão de exportação: mesmo formato do .wpfm-btn, mas com contorno vermelho 
/*.wpfm-btn--export {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    border: 1px solid #ff4b6a !important;
    background-color: #ffffff !important;
    color: #ff4b6a !important;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
   .wpfm-btn--export:hover {
   background-color: rgba(255, 75, 106, 0.06) !important;
}

/* =====================================================
   Saldos e anexos
   ===================================================== */
.wpfm-panel-header--balances {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.wpfm-btn--ghost {
    background: transparent;
    color: #0f172a;
    border: 1px solid #cbd5e1;
}

.wpfm-card--balance-dark {
    border-left: 4px solid #0ea5e9;
    background: linear-gradient(135deg, #0ea5e9, #1e3a8a);
    color: #fff;
}

.wpfm-balance-value.wpfm-is-hidden {
    color: #cbd5e1;
    filter: none !important;
    letter-spacing: 2px;
}

.wpfm-attachments {
    list-style: disc;
    margin: 8px 0 0 18px;
    padding: 0;
}

.wpfm-attachments li {
    margin-bottom: 4px;
}

.wpfm-attachment-remove {
    border: none;
    background: none;
    color: #b91c1c;
    font-size: 12px;
    text-decoration: underline dotted;
    margin-left: 8px;
    cursor: pointer;
}

.wpfm-inline-error {
    display: inline-block;
    margin-left: 8px;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 600;
}

.wpfm-combobox {
    position: relative;
}
.wpfm-combobox-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    margin-bottom: 6px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239aa5b1' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center;
    appearance: none;
}
.wpfm-combobox-list {
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.08);
    display: none;
}
.wpfm-combobox-list.is-open {
    display: block;
}
.wpfm-combobox-item {
    padding: 8px 10px;
    cursor: pointer;
}
.wpfm-combobox-item:hover {
    background: #f8fafc;
}
.wpfm-combobox select {
    display: none !important;
}