/* ========================================
   GestãoBLZ - Pagamentos e Comissões v2 (camada visual)
   Carregado depois do ui-v2.css no salarios.html. Mantém blocos, ordem,
   textos, campos, cálculos e fluxos; troca degradês, brilhos, pulsos,
   sombras coloridas, "translate" no hover e MAIÚSCULAS por cards brancos,
   cabeçalhos claros e cores chapadas (mesma linguagem de dashboard-v2,
   financeiro-v2, clientes-v2, pagamento-agendamento-v2).

   - Página: escopada em #modernMainContent (só existe no salarios.html).
   - Modais: prefixados pelos IDs. O #withdrawalReceiptModal fica dentro
     do <main>; os demais ficam fora.
   - Dinheiro: números alinhados à direita com algarismos tabulares;
     o "Saldo disponível" é o valor em destaque; débitos com "-" e
     vermelho discreto; pagar/confirmar em verde chapado.
   - Celular (<= 991px): as quatro tabelas viram cards compactos em grade;
     (<= 576px): modais viram folha presa na base, corpo rolável e rodapé
     sempre visível.
   - O salarios.css antigo usa --primary-light / --primary-hover (não
     definidos): cabeçalhos de modal e o botão "Processar pagamentos"
     ficavam branco sobre branco. Aqui tudo usa --primary-color /
     --primary-dark.
   Para voltar ao visual anterior, basta remover o <link> deste arquivo.
   ======================================== */

body[data-support-page="salarios"] {
    --sl-tint: rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.08);
    --sl-tint-strong: rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.12);
    --sl-ring: rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.15);
    --sl-green: #16a34a;
    --sl-green-dark: #15803d;
    --sl-red: #dc2626;
    --sl-red-text: #b91c1c;
    --sl-amber-text: #b45309;
    --sl-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7482' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

body[data-support-page="salarios"],
body[data-support-page="salarios"] #modernMainContent {
    background: var(--v2-page-bg);
}

#modernMainContent .content-area {
    padding: 20px 24px 32px;
    background: transparent;
}

#modernMainContent .content-area > .container-fluid {
    padding: 0;
}

#modernMainContent .support-top-actions {
    margin: 0 0 12px;
}

/* Sem animações de pulso/brilho/flutuação */
#modernMainContent .btn-gradient-primary,
#modernMainContent .btn-enhanced {
    animation: none !important;
}

#modernMainContent .btn-shine {
    display: none !important;
}

#modernMainContent .professional-avatar,
#modernMainContent .professional-avatar:hover {
    transform: none;
    box-shadow: none;
}

/* ========================================
   BARRA "RELATÓRIOS DE SALÁRIOS"
   ======================================== */
#modernMainContent .top-bar-section {
    margin-bottom: 16px !important;
}

#modernMainContent .top-bar-section .top-bar-card {
    border: 0;
    border-radius: var(--v2-card-radius);
    background: transparent;
    box-shadow: none;
}

#modernMainContent .top-bar-section .top-bar-card .card-body {
    gap: 16px !important;
    padding: 14px 16px 14px 18px;
    background: var(--v2-card-bg);
    border: 1px solid var(--v2-card-border);
    border-radius: var(--v2-card-radius);
    box-shadow: var(--v2-card-shadow);
}

#modernMainContent .top-bar-section .card-body > div:first-child {
    position: relative;
    min-width: 0;
    padding-left: 42px;
}

/* Ícone em caixinha chapada (sem mudar o HTML) */
#modernMainContent .top-bar-section .card-body > div:first-child::before {
    content: "\f1c1";
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 8px;
    background: #dc2626;
    color: #ffffff;
    font-family: "Font Awesome 6 Free";
    font-size: 13px;
    font-weight: 900;
}

#modernMainContent .top-bar-section h6 {
    margin-bottom: 2px !important;
    color: var(--v2-text);
    font-size: 15px;
    font-weight: 500 !important;
    letter-spacing: -0.005em;
    text-transform: none !important;
}

#modernMainContent .top-bar-section p.small {
    color: var(--v2-muted) !important;
    font-size: 13px;
    line-height: 1.45;
}

#modernMainContent .action-btn-compact {
    flex-shrink: 0;
    gap: 8px;
    min-height: 38px;
    padding: 7px 14px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--v2-text-2);
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: none;
    transform: none;
}

#modernMainContent .action-btn-compact:hover {
    border-color: #d5d9e0;
    background: var(--v2-surface);
    color: var(--v2-text);
    box-shadow: none;
    transform: none;
}

#modernMainContent .action-btn-compact i {
    color: #dc2626;
    font-size: 14px;
}

/* ========================================
   INDICADORES (único lugar com a listra de 3px no topo)
   6 cards: 3 por linha no computador, 2 x 3 no celular.
   ======================================== */
#modernMainContent .salary-summary-section {
    margin-bottom: 16px;
}

#modernMainContent .salary-summary-section .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}

#modernMainContent .salary-summary-section .row > [class*="col-"] {
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0;
}

#modernMainContent .salary-summary-section .row > :nth-child(1) { --v2-accent: #16a34a; }
#modernMainContent .salary-summary-section .row > :nth-child(2) { --v2-accent: #0e8fd6; }
#modernMainContent .salary-summary-section .row > :nth-child(3) { --v2-accent: #ad7f0a; }
#modernMainContent .salary-summary-section .row > :nth-child(4) { --v2-accent: #7c5cd6; }
#modernMainContent .salary-summary-section .row > :nth-child(5) { --v2-accent: #ea8a0a; }
#modernMainContent .salary-summary-section .row > :nth-child(6) { --v2-accent: #3f86d8; }

#modernMainContent .salary-summary-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 18px 18px 16px;
    background: var(--v2-card-bg);
    border: 1px solid var(--v2-card-border);
    border-radius: var(--v2-card-radius);
    box-shadow: var(--v2-card-shadow);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

#modernMainContent .salary-summary-card::before {
    height: 3px;
    border-radius: 0;
    background: var(--v2-accent);
}

#modernMainContent .salary-summary-card:hover {
    transform: none;
    border-color: #dde0e6;
    box-shadow: var(--v2-card-shadow-hover);
}

/* O 1º ícone usava --primary-light (indefinido): caixa sumia (branco sobre branco) */
#modernMainContent .salary-summary-card .summary-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 10px;
    background: var(--v2-accent) !important;
    color: #ffffff !important;
    font-size: 17px;
    box-shadow: none;
}

#modernMainContent .salary-summary-card .summary-content {
    min-width: 0;
}

#modernMainContent .salary-summary-card .summary-title {
    margin: 0 0 2px;
    color: var(--v2-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}

#modernMainContent .salary-summary-card .summary-value,
#modernMainContent #summaryTotalPagar {
    margin: 0;
    overflow: hidden;
    color: var(--v2-text);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

#modernMainContent .salary-summary-card .summary-value.is-loading,
#modernMainContent #summaryTotalPagar.is-loading {
    color: var(--v2-muted);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: 0;
}

#modernMainContent .salary-summary-card .summary-period {
    margin-top: 3px;
    color: var(--v2-muted);
    font-size: 12.5px;
    line-height: 1.35;
}

/* ========================================
   FILTROS (Profissional / Status): uma barra branca
   ======================================== */
#modernMainContent .professional-filter-wrapper {
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding: 12px 16px;
    background: var(--v2-card-bg);
    border: 1px solid var(--v2-card-border);
    border-radius: var(--v2-card-radius);
    box-shadow: var(--v2-card-shadow);
}

#modernMainContent .professional-filter {
    flex: 0 1 280px;
    min-width: 0;
    max-width: 320px;
    padding: 0 !important;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#modernMainContent .professional-filter:focus-within {
    box-shadow: none;
}

#modernMainContent .professional-filter .form-label {
    margin-bottom: 5px !important;
    color: var(--v2-text-2) !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
}

#modernMainContent .professional-filter .input-icon-group {
    position: relative;
    margin: 0;
    padding: 0;
    gap: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

#modernMainContent .professional-filter .input-icon-group > i {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--primary-color, #007bff) !important;
    font-size: 13px;
    pointer-events: none;
}

/* A seta do select sumia (background: transparent no CSS antigo) */
#modernMainContent .professional-select {
    width: 100%;
    height: 38px;
    padding: 0 34px 0 34px;
    background: #ffffff var(--sl-select-arrow) no-repeat right 12px center / 12px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#modernMainContent .professional-select:focus {
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 3px var(--sl-ring);
    outline: 0;
}

#modernMainContent .professional-select:disabled {
    background-color: var(--v2-surface);
    color: var(--v2-muted);
}

/* ========================================
   CARDS DE SEÇÃO (Valores a pagar, Carteira, Saques, Vales)
   ======================================== */
#modernMainContent .salary-section {
    margin-bottom: 16px;
    background: var(--v2-card-bg);
    border: 1px solid var(--v2-card-border);
    border-radius: var(--v2-card-radius);
    box-shadow: var(--v2-card-shadow);
}

#modernMainContent .salary-section .section-header {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 12px 16px 12px 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--v2-card-divider);
}

/* Seção recolhida: só o cabeçalho, sem a linha de baixo */
#modernMainContent .salary-section:has(> .collapse:not(.show)) .section-header {
    border-bottom-color: transparent;
}

#modernMainContent .salary-section .section-title,
#modernMainContent .salary-section--payout .section-title {
    min-width: 0;
    gap: 10px;
    color: var(--v2-text);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

#modernMainContent .salary-section .section-title > i {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--sl-sec-color, #6b7482);
    color: #ffffff;
    font-size: 13px;
}

#modernMainContent .salary-section--payout { --sl-sec-color: #16a34a; }
#modernMainContent .salary-section--wallet { --sl-sec-color: #7c5cd6; }
#modernMainContent .salary-section--withdrawals { --sl-sec-color: #0e8fd6; }
#modernMainContent .salary-section--vales { --sl-sec-color: #ea8a0a; }

#modernMainContent .salary-section .section-actions {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto;
    margin-left: auto;
}

#modernMainContent .salary-section .section-action-group {
    gap: 8px;
}

/* Recolher/expandir: quadrado discreto */
#modernMainContent .section-collapse-toggle {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--v2-muted);
    font-size: 12px;
    transform: none;
}

#modernMainContent .section-collapse-toggle:hover {
    border-color: #d5d9e0;
    background: var(--v2-surface);
    color: var(--v2-text);
}

#modernMainContent .section-collapse-toggle:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--sl-ring);
}

/* ========================================
   BOTÕES DA PÁGINA
   Principal: cor do salão chapada. Secundário: branco com borda.
   ======================================== */
/* "Processar pagamentos": era degradê com --primary-hover indefinido
   (texto branco sobre fundo branco), maiúsculas, brilho e pulso */
#modernMainContent #processPaymentBtn.btn-enhanced {
    gap: 8px;
    min-height: 36px;
    padding: 7px 14px;
    border: 1px solid var(--primary-color, #007bff);
    border-radius: 8px;
    background: var(--primary-color, #007bff);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    transform: none;
}

#modernMainContent #processPaymentBtn.btn-enhanced:hover,
#modernMainContent #processPaymentBtn.btn-enhanced:active {
    border-color: var(--primary-dark, var(--primary-color, #0062cc));
    background: var(--primary-dark, var(--primary-color, #0062cc));
    color: #ffffff;
    box-shadow: none;
    transform: none;
}

#modernMainContent #processPaymentBtn.btn-enhanced:disabled {
    opacity: 0.55;
}

#modernMainContent #processPaymentBtn i {
    margin: 0 !important;
    font-size: 13px;
    filter: none;
}

#modernMainContent #processPaymentBtn span {
    text-shadow: none;
}

body[data-support-page="salarios"] #modernMainContent .salary-section .section-actions .btn:not(.btn-enhanced),
body[data-support-page="salarios"] #modernMainContent #aplicarFiltroVales {
    gap: 7px;
    min-height: 36px;
    padding: 7px 14px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--v2-text-2);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    box-shadow: none;
    transform: none;
}

body[data-support-page="salarios"] #modernMainContent .salary-section .section-actions .btn:not(.btn-enhanced):hover {
    border-color: #d5d9e0;
    background: var(--v2-surface);
    color: var(--v2-text);
    box-shadow: none;
    transform: none;
}

body[data-support-page="salarios"] #modernMainContent .salary-section .section-actions .btn i {
    font-size: 12.5px;
}

/* Ações principais das seções: "Novo vale" e "Filtrar" na cor do salão */
body[data-support-page="salarios"] #modernMainContent #newAdvanceBtn,
body[data-support-page="salarios"] #modernMainContent #aplicarFiltroVales {
    border-color: var(--primary-color, #007bff);
    background: var(--primary-color, #007bff);
    color: #ffffff;
}

body[data-support-page="salarios"] #modernMainContent #newAdvanceBtn:hover,
body[data-support-page="salarios"] #modernMainContent #aplicarFiltroVales:hover {
    border-color: var(--primary-dark, var(--primary-color, #0062cc));
    background: var(--primary-dark, var(--primary-color, #0062cc));
    color: #ffffff;
    box-shadow: none;
    transform: none;
}

body[data-support-page="salarios"] #modernMainContent #aplicarFiltroVales {
    min-height: 38px;
}

/* ========================================
   TABELAS (base comum das quatro)
   Cabeçalho claro, sem maiúsculas; valores à direita, algarismos tabulares.
   ======================================== */
#modernMainContent .salary-table-container,
#modernMainContent .wallet-table-container,
#modernMainContent .withdrawal-table-container,
#modernMainContent .advances-table-container {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

#modernMainContent .salary-table-responsive,
#modernMainContent .wallet-table-responsive,
#modernMainContent .withdrawal-table-responsive,
#modernMainContent .advances-table-responsive {
    border: 0;
    border-radius: 0 0 var(--v2-card-radius) var(--v2-card-radius);
}

#modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) {
    margin: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    color: var(--v2-text);
    font-size: 13.5px;
}

#modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) th {
    padding: 10px 12px;
    background: var(--v2-surface) !important;
    border: 0;
    border-bottom: 1px solid var(--v2-card-divider);
    color: var(--v2-muted);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

#modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) th:first-child,
#modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td:first-child {
    padding-left: 20px !important;
}

#modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) th:last-child,
#modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td:last-child {
    padding-right: 16px;
}

#modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td {
    padding: 12px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--v2-card-divider);
    color: var(--v2-text);
    font-size: 13.5px;
    font-weight: 400;
    vertical-align: middle;
    transition: none;
}

#modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) tbody tr,
#modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) tbody tr:nth-child(even) {
    background: #ffffff;
    transition: background-color 0.12s ease;
}

#modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) tbody tr:hover {
    background: #fafbfc;
    transform: none;
    box-shadow: none;
}

#modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) tbody tr:hover > td {
    --bs-table-accent-bg: transparent;
    background: transparent;
}

#modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) tbody tr:last-child td {
    border-bottom: 0;
}

/* Linha única de aviso (carregando / vazio) */
#modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td[colspan].text-center {
    padding: 32px 16px !important;
    color: var(--v2-muted);
    font-size: 14px;
    text-align: center;
}

#modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td[colspan].text-center::before {
    content: "\f15c";
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    border-radius: 10px;
    background: var(--v2-surface);
    color: #9aa1ad;
    font-family: "Font Awesome 6 Free";
    font-size: 16px;
    font-weight: 900;
    line-height: 40px;
    text-align: center;
}

/* Profissional */
/* dashboard-content.css empilhava avatar e nome (coluna centralizada) */
#modernMainContent .professional-info {
    flex: 0 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 170px;
    text-align: left;
}

#modernMainContent .professional-avatar,
#modernMainContent .professional-avatar.mini {
    border: 0;
    background: #eef0f3;
}

#modernMainContent .salary-table--payout .professional-avatar {
    width: 36px;
    height: 36px;
}

#modernMainContent .professional-details {
    min-width: 0;
}

#modernMainContent .professional-name,
#modernMainContent :is(.wallet-table, .withdrawal-table) td[data-label="Profissional"] .fw-medium {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

#modernMainContent .professional-role,
#modernMainContent :is(.wallet-table, .withdrawal-table) td[data-label="Profissional"] small {
    color: var(--v2-muted) !important;
    font-size: 12.5px;
    line-height: 1.3;
}

#modernMainContent :is(.wallet-table, .withdrawal-table) td[data-label="Profissional"] .professional-avatar {
    width: 36px !important;
    height: 36px !important;
    margin-right: 10px !important;
}

#modernMainContent .wallet-table td[data-label="Profissional"] > .d-flex {
    padding-left: 0 !important;
}

/* ---------- Chips de status (tint + texto na cor, raio 6) ---------- */
#modernMainContent :is(.status-badge, .wallet-status-pill, .withdrawal-status-pill),
#valeDetailModal .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

#modernMainContent .salary-table--payout .status-badge {
    min-width: 0;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12.5px;
    letter-spacing: 0;
}

#modernMainContent .salary-table--payout .status-badge.is-pending,
#modernMainContent .withdrawal-status-pill.is-pending {
    background: #fffbeb;
    border-color: #fde68a;
    color: var(--sl-amber-text);
}

#modernMainContent .salary-table--payout .status-badge.is-blocked,
#modernMainContent .wallet-status-pill.is-blocked {
    background: #fef2f2;
    border-color: #fecaca;
    color: var(--sl-red-text);
}

#modernMainContent .salary-table--payout .status-badge.is-settled,
#modernMainContent .wallet-status-pill.is-empty {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #4b5563;
}

#modernMainContent .wallet-status-pill.is-available,
#modernMainContent .withdrawal-status-pill.is-completed {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: var(--sl-green-dark);
}

#modernMainContent .status-badge.deducted,
#valeDetailModal .status-badge.deducted {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #6d28d9;
}

#modernMainContent .status-badge.deducted i,
#valeDetailModal .status-badge.deducted i {
    margin: 0 !important;
    font-size: 11px;
}

/* ---------- Ações por linha: quadrados 32px ---------- */
#modernMainContent :is(.salary-actions, .wallet-actions-row, .withdrawal-actions-row) {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px !important;
}

#modernMainContent :is(.salary-actions, .wallet-actions-row, .withdrawal-actions-row) .btn,
#modernMainContent .vale-action-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    box-shadow: none;
    transform: none;
}

#modernMainContent :is(.salary-actions, .wallet-actions-row, .withdrawal-actions-row) .btn:hover:not(:disabled),
#modernMainContent .vale-action-btn:hover {
    border-color: #d5d9e0;
    background: var(--v2-surface);
    box-shadow: none;
    transform: none;
}

#modernMainContent :is(.salary-actions, .wallet-actions-row, .withdrawal-actions-row) .btn i,
#modernMainContent .vale-action-btn i {
    font-size: 13px;
}

#modernMainContent :is(.salary-actions, .wallet-actions-row) .btn span {
    font-size: 13px;
    line-height: 1;
}

/* Cor só no ícone */
#modernMainContent [data-action="salary-history"] i,
#modernMainContent [data-action="withdrawal-receipt"] i,
#modernMainContent [data-action="vale-detail"] i { color: #2563eb; }
#modernMainContent [data-action="adjustment"] i { color: #d97706; }
#modernMainContent [data-action="fee-history"] i { color: #0891b2; }
#modernMainContent [data-action="block-wallet"] i,
#modernMainContent [data-action="delete-withdrawal"] i { color: var(--sl-red); }
#modernMainContent [data-action="unlock-wallet"] i { color: var(--sl-green); }

#modernMainContent [data-action="fee-history"] span { color: #0e7490; }

/* Lançar (pagar): verde chapado; desativado fica branco/cinza */
#modernMainContent .salary-actions .btn[data-action="process-payment"] {
    min-width: 84px;
    padding: 0 12px;
    border-color: var(--sl-green);
    background: var(--sl-green);
    color: #ffffff;
}

#modernMainContent .salary-actions .btn[data-action="process-payment"] i {
    color: #ffffff;
}

#modernMainContent .salary-actions .btn[data-action="process-payment"]:hover:not(:disabled) {
    border-color: var(--sl-green-dark);
    background: var(--sl-green-dark);
}

#modernMainContent .salary-actions .btn[data-action="process-payment"]:disabled,
#modernMainContent .salary-actions .btn[data-action="process-payment"].disabled {
    border-color: var(--v2-card-border);
    background: var(--v2-surface);
    color: #9aa1ad;
    opacity: 1;
}

#modernMainContent .salary-actions .btn[data-action="process-payment"]:disabled i,
#modernMainContent .salary-actions .btn[data-action="process-payment"].disabled i {
    color: #b3b9c3;
}

/* ========================================
   TABELA "VALORES A PAGAR"
   ======================================== */
#modernMainContent .salary-table-container--payout {
    padding: 0;
    background: transparent;
}

#modernMainContent .salary-table-container--payout .salary-table-responsive {
    border: 0;
    border-radius: 0 0 var(--v2-card-radius) var(--v2-card-radius);
}

#modernMainContent .salary-table--payout {
    min-width: 1060px;
}

#modernMainContent .salary-table--payout th,
#modernMainContent .salary-table--payout td {
    padding: 12px;
}

/* Colunas de dinheiro à direita: Comissão do mês, Correções, Saldo */
#modernMainContent .salary-table--payout th:nth-child(2),
#modernMainContent .salary-table--payout th:nth-child(4),
#modernMainContent .salary-table--payout th:nth-child(5),
#modernMainContent .salary-table--payout td[data-label="Comissão do Mês"],
#modernMainContent .salary-table--payout td[data-label="Correções/Descontos"],
#modernMainContent .salary-table--payout td[data-label="Saldo Disponível"] {
    text-align: right;
}

#modernMainContent .salary-table--payout th:last-child {
    text-align: right;
}

#modernMainContent .salary-table--payout td[data-label="Comissões brutas"] {
    padding-left: 28px;
}

#modernMainContent .salary-table--payout th:nth-child(3) {
    padding-left: 28px;
}

/* Comissão do mês: número simples (antes era um chip cinza) */
#modernMainContent .salary-table--payout .salary-metric-chip {
    display: inline;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Comissões brutas: valor + % e adicionais em chips discretos */
#modernMainContent .salary-table--payout .commission-breakdown {
    gap: 5px;
    max-width: 300px;
}

#modernMainContent .salary-table--payout .commission-main-row {
    align-items: center;
    gap: 6px;
}

#modernMainContent .salary-table--payout .commission-main-value {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

#modernMainContent .salary-table--payout .commission-main-meta {
    padding: 1px 6px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-border);
    border-radius: 5px;
    color: var(--v2-muted);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
}

#modernMainContent .salary-table--payout .commission-extra-list {
    gap: 3px;
}

#modernMainContent .salary-table--payout .commission-extra-chip {
    gap: 5px;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

#modernMainContent .salary-table--payout .commission-extra-chip i {
    font-size: 10.5px;
}

#modernMainContent .salary-table--payout .commission-extra-chip.is-package {
    background: #fefce8;
    border-color: #fde68a;
    color: #854d0e;
}

#modernMainContent .salary-table--payout .commission-extra-chip.is-product {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #6d28d9;
}

#modernMainContent .salary-table--payout .commission-extra-empty {
    color: #9aa1ad;
    font-size: 12px;
}

/* Correções/descontos: "- R$" em vermelho discreto; vales num chip âmbar */
#modernMainContent .salary-table--payout .salary-deduction-chip {
    display: inline;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--sl-red-text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Sem desconto: o "-" fica cinza (antes era um chip vermelho vazio) */
#modernMainContent .salary-table--payout .salary-deduction-chip:has(+ small) {
    color: var(--v2-muted);
}

#modernMainContent .salary-table--payout td[data-label="Correções/Descontos"] small,
#modernMainContent .salary-table--payout td[data-label="Saldo Disponível"] small {
    margin-top: 3px;
    color: var(--v2-muted) !important;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
}

/* "Saques lançados: R$ ..." pode quebrar em 2 linhas (a coluna não estica) */
#modernMainContent .salary-table--payout td[data-label="Saldo Disponível"] small {
    min-width: 120px;
    white-space: normal;
}

#modernMainContent .salary-table--payout .salary-vale-chip {
    display: flex;
    gap: 5px;
    width: fit-content;
    margin: 5px 0 0 auto;
    padding: 2px 7px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 5px;
    color: #92400e;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

#modernMainContent .salary-table--payout .salary-vale-chip i {
    font-size: 10.5px;
}

/* Saldo disponível: o valor em destaque da linha */
#modernMainContent .salary-table--payout .total-amount {
    color: var(--v2-text);
    font-size: 15.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#modernMainContent .salary-table--payout .total-amount.is-positive {
    color: var(--sl-green-dark);
}

#modernMainContent .salary-table--payout .total-amount.is-negative {
    color: var(--sl-red-text);
}

#modernMainContent .salary-table--payout .total-amount.is-empty {
    color: #9aa1ad;
}

/* Linhas "carregando" (renderSalaryLoadingRows): texto + indicador discreto */
#modernMainContent .salary-loading-row td[colspan] {
    color: var(--v2-muted) !important;
    font-size: 13.5px;
}

#modernMainContent .salary-loading-row td[colspan]::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 10px;
    border: 2px solid #e1e4e9;
    border-top-color: var(--primary-color, #007bff);
    border-radius: 50%;
    vertical-align: -2px;
    animation: slSpin 0.8s linear infinite;
}

#modernMainContent .salary-loading-row .professional-avatar img {
    opacity: 0.55;
}

@keyframes slSpin {
    to { transform: rotate(360deg); }
}

/* ========================================
   CARTEIRA DIGITAL
   ======================================== */
#modernMainContent .wallet-table-container--enhanced,
#modernMainContent .withdrawal-table-container--enhanced,
#modernMainContent .advances-table-container--enhanced {
    padding: 0;
    background: transparent;
}

#modernMainContent :is(.wallet-table--enhanced, .withdrawal-table--enhanced, .advances-table--enhanced) {
    min-width: 820px;
}

#modernMainContent .wallet-table th:nth-child(3),
#modernMainContent .wallet-table td[data-label="Saldo Disponível"] {
    text-align: right;
}

#modernMainContent .wallet-table th:last-child,
#modernMainContent .withdrawal-table th:last-child,
#modernMainContent .advances-table th:last-child,
#modernMainContent .advances-table td[data-label="Ações"] {
    text-align: right;
}

#modernMainContent .wallet-table td[data-label="Última Movimentação"] {
    padding-left: 28px;
}

#modernMainContent .wallet-table th:nth-child(4) {
    padding-left: 28px;
}

#modernMainContent .wallet-balance-chip,
#modernMainContent .withdrawal-amount-chip,
#modernMainContent .vale-amount-chip {
    display: inline;
    padding: 0;
    background: none !important;
    border: 0;
    border-radius: 0;
    color: var(--v2-text);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#modernMainContent .wallet-balance-chip.is-positive {
    color: var(--sl-green-dark);
}

#modernMainContent .wallet-balance-chip.is-negative {
    color: var(--sl-red-text);
}

/* Saldo zero: cinza (JS usa is-positive para >= 0) */
#modernMainContent .wallet-table tr:has(.wallet-status-pill.is-empty) .wallet-balance-chip.is-positive {
    color: #9aa1ad;
}

#modernMainContent .wallet-last-movement {
    padding-left: 0 !important;
}

#modernMainContent .wallet-last-movement .fw-medium,
#modernMainContent .withdrawal-date .fw-medium {
    color: var(--v2-text);
    font-size: 13.5px;
    font-weight: 400 !important;
    font-variant-numeric: tabular-nums;
}

#modernMainContent .wallet-last-movement small,
#modernMainContent .withdrawal-date small {
    color: var(--v2-muted) !important;
    font-size: 12px;
}

/* ========================================
   SAQUES LANÇADOS
   ======================================== */
#modernMainContent .withdrawal-date {
    padding-left: 0 !important;
}

#modernMainContent .withdrawal-table th:nth-child(3),
#modernMainContent .withdrawal-table td[data-label="Valor"],
#modernMainContent .advances-table th:nth-child(3),
#modernMainContent .advances-table td[data-label="Valor"] {
    text-align: right;
}

#modernMainContent .withdrawal-table th:nth-child(4),
#modernMainContent .withdrawal-table td[data-label="Método"],
#modernMainContent .advances-table th:nth-child(4),
#modernMainContent .advances-table td[data-label="Motivo"] {
    padding-left: 28px;
}

#modernMainContent .withdrawal-method-chip {
    gap: 6px;
    padding: 3px 8px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-border);
    border-radius: 6px;
    color: var(--v2-text-2);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
}

#modernMainContent .withdrawal-method-chip i {
    color: var(--v2-muted);
    font-size: 11px;
}

#modernMainContent .withdrawal-actions-row {
    display: flex;
}

/* ========================================
   RELATÓRIO DE VALES
   ======================================== */
/* Filtros: faixa clara no topo da seção (sem segunda moldura) */
#modernMainContent #salaryAdvancesCollapse > .card {
    margin: 0 !important;
    background: var(--v2-surface);
    border: 0;
    border-bottom: 1px solid var(--v2-card-divider);
    border-radius: 0;
    box-shadow: none;
}

#modernMainContent #salaryAdvancesCollapse > .card > .card-body {
    padding: 12px 16px 14px 20px;
}

#modernMainContent #salaryAdvancesCollapse .row {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 10px;
}

#modernMainContent #salaryAdvancesCollapse .form-label {
    margin-bottom: 5px;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
}

#modernMainContent #salaryAdvancesCollapse :is(.form-control, .form-select) {
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    border-color: var(--v2-card-border);
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--v2-text);
    font-size: 14px;
    box-shadow: none;
}

#modernMainContent #salaryAdvancesCollapse :is(.form-control, .form-select):focus {
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 3px var(--sl-ring);
}

#modernMainContent .professional-mini {
    gap: 10px;
}

#modernMainContent .professional-mini .professional-avatar.mini {
    width: 32px;
    height: 32px;
}

#modernMainContent .professional-mini .professional-name {
    font-size: 14px;
    font-weight: 500;
}

#modernMainContent .advances-table td[data-label="Data"] {
    color: var(--v2-text);
    font-size: 13.5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#modernMainContent .vale-amount-chip {
    color: var(--sl-red-text);
}

#modernMainContent .vale-amount-chip::before {
    content: "- ";
}

#modernMainContent .vale-description-text {
    display: -webkit-box;
    max-width: 320px;
    overflow: hidden;
    color: var(--v2-text-2);
    font-size: 13.5px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ========================================
   PAGINAÇÃO
   ======================================== */
#modernMainContent .table-pagination {
    gap: 8px;
    width: auto;
    margin: 0;
    padding: 10px 16px;
    background: #ffffff;
    border: 0;
    border-top: 1px solid var(--v2-card-divider);
    border-radius: 0 0 var(--v2-card-radius) var(--v2-card-radius);
}

#modernMainContent .table-pagination .page-info {
    min-width: 96px;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

body[data-support-page="salarios"] #modernMainContent .table-pagination .btn {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--v2-text-2);
    font-size: 12px;
    box-shadow: none;
    transform: none;
}

body[data-support-page="salarios"] #modernMainContent .table-pagination .btn:hover:not(:disabled) {
    border-color: #d5d9e0;
    background: var(--v2-surface);
    color: var(--v2-text);
}

body[data-support-page="salarios"] #modernMainContent .table-pagination .btn:disabled {
    opacity: 0.45;
}

/* Telas até 1599px: "Taxas" vira só o ícone (o título "Ver taxas" continua)
   para a coluna Ações caber sem rolagem lateral */
@media (max-width: 1599.98px) {
    #modernMainContent .salary-table--payout .btn[data-action="fee-history"] {
        width: 32px;
        padding: 0;
    }

    #modernMainContent .salary-table--payout .btn[data-action="fee-history"] span {
        display: none;
    }

    #modernMainContent .salary-table--payout td[data-label="Comissões brutas"],
    #modernMainContent .salary-table--payout th:nth-child(3) {
        padding-left: 16px;
    }

    #modernMainContent .salary-table--payout th,
    #modernMainContent .salary-table--payout td {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Chips longos podem quebrar em vez de alargar a tabela */
    #modernMainContent .salary-table--payout .commission-breakdown {
        max-width: 250px;
    }

    #modernMainContent .salary-table--payout :is(.commission-extra-chip, .salary-vale-chip) {
        white-space: normal;
        text-align: left;
    }

    #modernMainContent .salary-table--payout .salary-vale-chip {
        max-width: 160px;
    }

    #modernMainContent .salary-table--payout .professional-info {
        min-width: 150px;
    }
}

#modernMainContent .salary-table--payout :is(.commission-extra-chip, .salary-vale-chip) {
    align-items: flex-start;
}

#modernMainContent .salary-table--payout :is(.commission-extra-chip, .salary-vale-chip) i {
    margin-top: 3px;
}

/* ========================================
   RESPONSIVO: PÁGINA
   ======================================== */
@media (max-width: 1199.98px) {
    #modernMainContent .salary-summary-section .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Tabelas viram cards compactos em grade
   (mesmo breakpoint do salarios.css antigo) */
@media (max-width: 991.98px) {
    #modernMainContent :is(.salary-table-responsive, .wallet-table-responsive, .withdrawal-table-responsive, .advances-table-responsive) {
        padding: 12px;
        overflow: visible;
        background: var(--v2-surface);
    }

    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) {
        min-width: 0 !important;
        background: transparent;
    }

    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) thead {
        display: none;
    }

    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) tbody {
        display: block;
        width: 100%;
    }

    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) tbody tr,
    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) tbody tr:nth-child(even),
    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) tbody tr:hover {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px 0;
        width: 100%;
        margin: 0 0 10px;
        padding: 12px 14px;
        background: #ffffff;
        border: 1px solid var(--v2-card-border);
        border-radius: 10px;
        box-shadow: var(--v2-card-shadow);
    }

    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) tbody tr:last-child {
        margin-bottom: 0;
    }

    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td,
    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td:first-child,
    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td:last-child {
        display: block;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0 !important;
        border: 0 !important;
        text-align: left;
        white-space: normal;
    }

    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td::before {
        display: none;
        float: none;
        content: none;
    }

    /* Linhas de aviso (carregando / vazio) ocupam o card todo */
    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td[colspan] {
        grid-column: 1 / -1;
    }

    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td[colspan].text-center {
        padding: 12px 4px !important;
        text-align: center;
    }

    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td[colspan].text-center::before {
        display: block;
        content: "\f15c";
    }


    /* Profissional (nome + função) */
    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td[data-label="Profissional"] {
        grid-area: prof;
        align-self: center;
        padding-right: 10px !important;
    }

    #modernMainContent .professional-info {
        min-width: 0 !important;
    }

    #modernMainContent .professional-details,
    #modernMainContent :is(.wallet-table, .withdrawal-table) td[data-label="Profissional"] .d-flex > div:last-child {
        min-width: 0;
    }

    #modernMainContent .professional-name,
    #modernMainContent :is(.wallet-table, .withdrawal-table) td[data-label="Profissional"] .fw-medium,
    #modernMainContent .professional-role,
    #modernMainContent :is(.wallet-table, .withdrawal-table) td[data-label="Profissional"] small {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #modernMainContent .salary-table--payout .professional-avatar,
    #modernMainContent :is(.wallet-table, .withdrawal-table) td[data-label="Profissional"] .professional-avatar {
        width: 36px !important;
        height: 36px !important;
    }

    /* Ações: quadrados de 40px, alinhados à direita */
    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td[data-label="Ações"] {
        grid-area: acts;
        justify-self: end;
        align-self: end;
    }

    #modernMainContent :is(.salary-actions, .wallet-actions-row, .withdrawal-actions-row) {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        gap: 6px !important;
    }

    #modernMainContent :is(.salary-actions, .wallet-actions-row, .withdrawal-actions-row) .btn,
    #modernMainContent .vale-action-btn {
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        border-radius: 9px;
    }

    #modernMainContent .salary-table--payout .btn[data-action="fee-history"] {
        width: 40px;
    }

    /* Lançar: só o texto no celular, para o status caber na mesma linha */
    #modernMainContent .salary-actions .btn[data-action="process-payment"] {
        min-width: 76px;
        padding: 0 14px;
    }

    #modernMainContent .salary-actions .btn[data-action="process-payment"] i {
        display: none;
    }

    /* ---------- Valores a pagar ----------
       Nome | saldo em destaque
       Comissão do mês | correções
       status | ações */
    #modernMainContent .salary-table--payout tbody tr {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "prof saldo"
            "mes desc"
            "acts acts";
    }

    #modernMainContent .salary-table--payout td[data-label="Comissões brutas"],
    #modernMainContent .salary-table--payout td[data-label="Correções/Descontos"] :is(small, .salary-vale-chip),
    #modernMainContent .salary-table--payout td[data-label="Saldo Disponível"] small {
        display: none !important;
    }

    #modernMainContent .salary-table--payout td[data-label="Saldo Disponível"] {
        grid-area: saldo;
        align-self: center;
        text-align: right;
    }

    #modernMainContent .salary-table--payout td[data-label="Comissão do Mês"] {
        grid-area: mes;
        text-align: left;
        padding-top: 10px !important;
        border-top: 1px solid var(--v2-card-divider) !important;
    }

    #modernMainContent .salary-table--payout td[data-label="Correções/Descontos"] {
        grid-area: desc;
        padding-top: 10px !important;
        border-top: 1px solid var(--v2-card-divider) !important;
        text-align: right;
    }

    #modernMainContent .salary-table--payout td:is([data-label="Saldo Disponível"], [data-label="Comissão do Mês"], [data-label="Correções/Descontos"])::before {
        display: block;
        margin-bottom: 1px;
        color: var(--v2-muted);
        content: attr(data-label);
        font-size: 11.5px;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
    }

    #modernMainContent .salary-table--payout .salary-actions {
        gap: 5px !important;
    }

    #modernMainContent .salary-table--payout tbody tr {
        row-gap: 9px;
    }

    #modernMainContent .salary-table--payout td[data-label="Status"] .status-badge {
        padding: 3px 7px;
        font-size: 12px;
    }

    /* Status divide a linha das ações (mesma área, à esquerda) */
    #modernMainContent .salary-table--payout td[data-label="Status"] {
        grid-area: acts;
        align-self: center;
        justify-self: start;
    }

    #modernMainContent .salary-table--payout .total-amount {
        font-size: 17px;
    }

    #modernMainContent .salary-table--payout .salary-metric-chip,
    #modernMainContent .salary-table--payout .salary-deduction-chip {
        font-size: 13.5px;
    }

    /* Carregando: nome + "Calculando..." embaixo */
    #modernMainContent .salary-table--payout tbody tr.salary-loading-row {
        grid-template-areas: "prof prof";
    }

    #modernMainContent .salary-loading-row td[colspan] {
        font-size: 13px;
    }

    /* ---------- Carteira ----------
       Nome | status
       saldo + última movimentação | ações */
    #modernMainContent .wallet-table tbody tr {
        grid-template-areas:
            "prof status"
            "saldo acts"
            "last acts";
        row-gap: 2px;
    }

    #modernMainContent .wallet-table td[data-label="Profissional"] {
        margin-bottom: 8px;
    }

    #modernMainContent .wallet-table td[data-label="Status"] {
        grid-area: status;
        align-self: start;
        justify-self: end;
    }

    #modernMainContent .wallet-table td[data-label="Saldo Disponível"] {
        grid-area: saldo;
        padding-top: 10px !important;
        border-top: 1px solid var(--v2-card-divider) !important;
        text-align: left;
    }

    #modernMainContent .wallet-table td[data-label="Ações"] {
        align-self: stretch;
        justify-self: stretch;
        padding-top: 10px !important;
        border-top: 1px solid var(--v2-card-divider) !important;
    }

    #modernMainContent .wallet-table .wallet-actions-row {
        height: 100%;
        align-items: flex-end;
    }

    #modernMainContent .wallet-table td[data-label="Última Movimentação"] {
        grid-area: last;
    }

    #modernMainContent .wallet-balance-chip {
        font-size: 16px;
    }

    #modernMainContent .wallet-last-movement {
        flex-direction: row !important;
        flex-wrap: nowrap;
        white-space: nowrap;
        align-items: baseline;
        gap: 0 6px;
    }

    #modernMainContent .wallet-last-movement .fw-medium,
    #modernMainContent .wallet-last-movement small {
        color: var(--v2-muted) !important;
        font-size: 12px;
    }

    #modernMainContent .wallet-last-movement .fw-medium::before {
        content: "\f017";
        margin-right: 5px;
        font-family: "Font Awesome 6 Free";
        font-size: 11px;
        font-weight: 400;
    }

    /* ---------- Saques ----------
       Nome | valor / status
       data + método | ações */
    #modernMainContent .withdrawal-table tbody tr {
        grid-template-areas:
            "prof valor"
            "prof status"
            "date acts"
            "meth acts";
        row-gap: 4px;
    }

    #modernMainContent .withdrawal-table td[data-label="Valor"] {
        grid-area: valor;
        align-self: end;
        text-align: right;
    }

    #modernMainContent .withdrawal-table td[data-label="Status"] {
        grid-area: status;
        align-self: start;
        justify-self: end;
    }

    #modernMainContent .withdrawal-table td[data-label="Data/Hora"] {
        grid-area: date;
        align-self: end;
        margin-top: 6px;
        padding-top: 10px !important;
        border-top: 1px solid var(--v2-card-divider) !important;
    }

    #modernMainContent .withdrawal-table td[data-label="Método"] {
        grid-area: meth;
        align-self: start;
    }

    #modernMainContent .withdrawal-table td[data-label="Ações"] {
        margin-top: 6px;
        padding-top: 10px !important;
        border-top: 1px solid var(--v2-card-divider) !important;
        align-self: stretch;
        justify-self: stretch;
    }

    #modernMainContent .withdrawal-actions-row {
        justify-content: flex-end;
        height: 100%;
        align-items: flex-end;
    }

    #modernMainContent .withdrawal-date {
        flex-direction: row !important;
        align-items: baseline;
        gap: 6px;
    }

    #modernMainContent .withdrawal-amount-chip {
        font-size: 16px;
    }

    /* ---------- Vales ----------
       Nome | valor / status
       data + motivo | ações */
    #modernMainContent .advances-table tbody tr {
        grid-template-areas:
            "prof valor"
            "prof status"
            "date acts"
            "motivo acts";
        row-gap: 4px;
    }

    #modernMainContent .advances-table td[data-label="Valor"] {
        grid-area: valor;
        align-self: end;
        text-align: right;
    }

    #modernMainContent .advances-table td[data-label="Status"] {
        grid-area: status;
        align-self: start;
        justify-self: end;
    }

    #modernMainContent .advances-table td[data-label="Data"] {
        grid-area: date;
        margin-top: 6px;
        padding-top: 10px !important;
        border-top: 1px solid var(--v2-card-divider) !important;
        color: var(--v2-muted);
        font-size: 12.5px;
    }

    #modernMainContent .advances-table td[data-label="Motivo"] {
        grid-area: motivo;
        align-self: start;
    }

    #modernMainContent .advances-table td[data-label="Ações"] {
        margin-top: 6px;
        padding-top: 10px !important;
        border-top: 1px solid var(--v2-card-divider) !important;
        align-self: stretch;
        justify-self: stretch;
        text-align: right;
    }

    #modernMainContent .advances-table .vale-action-btn {
        margin-top: auto;
    }

    #modernMainContent .advances-table td[data-label="Ações"] {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }

    #modernMainContent .vale-description-text {
        max-width: none;
        -webkit-line-clamp: 1;
        font-size: 13px;
    }

    #modernMainContent .vale-amount-chip {
        font-size: 16px;
    }

    /* Linha divisória só quando há valor e aviso de vazio não */
    #modernMainContent .table-pagination {
        border-radius: 0 0 var(--v2-card-radius) var(--v2-card-radius);
    }
}

@media (max-width: 768px) {
    #modernMainContent .content-area {
        padding: 14px 12px 24px;
    }

    #modernMainContent .salary-summary-section .row {
        gap: 10px;
    }

    /* Indicadores 2 x 3: ícone pequeno ao lado do título, valor embaixo */
    #modernMainContent .salary-summary-card {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr);
        align-items: center;
        gap: 6px 8px;
        padding: 12px 12px 11px;
    }

    #modernMainContent .salary-summary-card .summary-content {
        display: contents;
    }

    #modernMainContent .salary-summary-card .summary-icon {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
        border-radius: 7px;
        font-size: 11.5px;
    }

    #modernMainContent .salary-summary-card .summary-title {
        margin: 0;
        font-size: 12px;
        line-height: 1.25;
        text-transform: none;
        letter-spacing: 0;
    }

    #modernMainContent .salary-summary-card .summary-value,
    #modernMainContent #summaryTotalPagar {
        grid-column: 1 / -1;
        font-size: 17.5px;
        line-height: 1.2;
    }

    #modernMainContent .salary-summary-card .summary-value.is-loading,
    #modernMainContent #summaryTotalPagar.is-loading {
        font-size: 13.5px;
        line-height: 1.55;
    }

    #modernMainContent .salary-summary-card .summary-period {
        grid-column: 1 / -1;
        margin-top: -3px;
        font-size: 11.5px;
    }

    /* Barra de relatórios: texto + botão lado a lado */
    #modernMainContent .top-bar-section .top-bar-card .card-body {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 12px 12px 14px;
    }

    #modernMainContent .top-bar-section .card-body > div:first-child {
        flex: 1 1 auto;
        padding-left: 40px;
    }

    #modernMainContent .top-bar-section .card-body > div:first-child::before {
        top: 2px;
        margin-top: 0;
    }

    #modernMainContent .top-bar-section p.small {
        font-size: 12.5px;
    }

    #modernMainContent .action-btn-compact {
        min-height: 40px;
        padding: 8px 12px;
    }

    /* Filtros empilhados */
    #modernMainContent .professional-filter-wrapper {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px !important;
        padding: 12px;
    }

    #modernMainContent .professional-filter {
        max-width: none;
    }

    #modernMainContent .professional-select {
        height: 44px;
        font-size: 16px;
    }

    /* Cabeçalho das seções: título + recolher na 1ª linha; ações embaixo */
    #modernMainContent .salary-section .section-header {
        flex-wrap: wrap;
        gap: 10px;
        min-height: 0;
        padding: 12px 12px 12px 14px;
    }

    #modernMainContent .salary-section .section-title {
        flex: 1 1 0;
        font-size: 15.5px;
    }

    #modernMainContent .salary-section .section-actions {
        display: contents !important;
    }

    #modernMainContent .section-collapse-toggle {
        order: 2;
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    #modernMainContent .salary-section .section-actions > div[id] {
        order: 3;
        flex: 1 1 100%;
        gap: 8px;
    }

    #modernMainContent .salary-section .section-actions > div[id] .btn {
        flex: 1 1 0;
        width: auto;
        min-height: 42px !important;
        justify-content: center;
    }

    #modernMainContent .salary-section .section-actions > div[id] .btn:only-child {
        flex-basis: 100%;
    }

    #modernMainContent #processPaymentBtn.btn-enhanced {
        width: 100%;
        min-height: 42px;
    }

    #modernMainContent #salaryAdvancesCollapse > .card > .card-body {
        padding: 12px;
    }

    #modernMainContent #salaryAdvancesCollapse .row > .col-md-3 {
        width: 50%;
    }

    #modernMainContent #salaryAdvancesCollapse :is(.form-control, .form-select) {
        height: 44px;
        font-size: 16px;
    }

    body[data-support-page="salarios"] #modernMainContent #aplicarFiltroVales {
        min-height: 44px;
    }

    body[data-support-page="salarios"] #modernMainContent .table-pagination .btn {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 380px) {
    #modernMainContent .salary-summary-card .summary-value,
    #modernMainContent #summaryTotalPagar {
        font-size: 16px;
    }
}

/* ========================================
   MODAIS — CASCA COMUM
   Cabeçalho branco com ícone em caixinha chapada (antes: faixas azul,
   laranja, ciano, preta, cinza e degradês com --primary-light indefinido,
   que deixavam "Lançamento de pagamento" e "Lançamento em lote" com
   título branco sobre branco).
   ======================================== */
#withdrawalReceiptModal { --slm-color: #0e8fd6; }
#walletHistoryModal { --slm-color: #7c5cd6; }
#salaryReportModal { --slm-color: #dc2626; }
#salaryReportPreviewModal { --slm-color: #3f86d8; }
#salaryDetailsModal { --slm-color: #16a34a; }
#feeSyncModal { --slm-color: #0891b2; }
#paymentChoiceModal { --slm-color: #16a34a; }
#bulkPaymentModal { --slm-color: #16a34a; }
#blockProfessionalModal { --slm-color: #dc2626; }
#addAdjustmentModal { --slm-color: #d97706; }
#newValeModal { --slm-color: #ea8a0a; }
#valeDetailModal { --slm-color: #64748b; }

:is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) {
    --slm-pad-x: 20px;
    color: var(--v2-text);
}

:is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-content {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--v2-card-border) !important;
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.18);
}

:is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 14px var(--slm-pad-x);
    background: #ffffff !important;
    border-bottom: 1px solid var(--v2-card-divider) !important;
    color: var(--v2-text) !important;
}

:is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-header > div:first-child {
    min-width: 0;
}

/* Título em bloco (o texto e o nome do profissional correm juntos e podem
   quebrar linha); o ícone fica numa caixinha à esquerda */
:is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-title,
#walletHistoryModal #walletHistoryModalLabel {
    position: relative;
    display: block !important;
    min-width: 0;
    min-height: 32px;
    margin: 0;
    padding: 5px 0 4px 42px;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--v2-text) !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

:is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-title > i {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    border-radius: 8px;
    background: var(--slm-color);
    color: #ffffff !important;
    font-size: 14px;
}

#addAdjustmentModal .modal-title #modalAdjustmentProfessionalName {
    display: inline;
    max-width: none;
    white-space: normal;
}

/* Subtítulo embaixo do título, alinhado com o texto (não com o ícone) */
:is(#salaryReportPreviewModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal) .modal-header p {
    margin: 2px 0 0 42px !important;
    color: var(--v2-muted) !important;
    font-size: 13px !important;
    font-weight: 400;
    line-height: 1.4;
}

:is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-header .btn-close {
    flex: 0 0 32px;
    align-self: flex-start;
    width: 32px;
    height: 32px;
    margin: 0 -6px 0 auto;
    padding: 0;
    border-radius: 8px;
    background-size: 12px;
    filter: none !important;
    opacity: 0.55;
}

:is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-header .btn-close:hover {
    background-color: #f3f4f6;
    opacity: 0.9;
}

/* btn-close-white (fundo escuro antigo) volta ao X escuro */
:is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .btn-close-white {
    filter: none !important;
}

#addAdjustmentModal .modal-header .btn-close {
    filter: none !important;
}

:is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-body {
    padding: 18px var(--slm-pad-x);
    background: #ffffff;
    color: var(--v2-text);
    font-size: 14px;
}

:is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px var(--slm-pad-x);
    background: var(--v2-surface);
    border-top: 1px solid var(--v2-card-divider) !important;
    backdrop-filter: none;
}

:is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-footer > * {
    margin: 0;
}

/* ---------- Campos ---------- */
:is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .form-label {
    margin-bottom: 5px;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500 !important;
}

:is(#walletHistoryModal, #salaryReportModal, #salaryDetailsModal, #paymentChoiceModal, #bulkPaymentModal, #addAdjustmentModal, #newValeModal) :is(.form-control, .form-select) {
    min-height: 40px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--v2-text);
    font-size: 14px;
    box-shadow: none;
}

:is(#walletHistoryModal, #salaryReportModal, #salaryDetailsModal, #paymentChoiceModal, #bulkPaymentModal, #addAdjustmentModal, #newValeModal) .form-select {
    padding-right: 34px;
    background-image: var(--sl-select-arrow);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
}

:is(#walletHistoryModal, #salaryReportModal, #salaryDetailsModal, #paymentChoiceModal, #bulkPaymentModal, #addAdjustmentModal, #newValeModal) :is(.form-control, .form-select):focus {
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 3px var(--sl-ring);
}

:is(#walletHistoryModal, #salaryReportModal, #salaryDetailsModal, #paymentChoiceModal, #bulkPaymentModal, #addAdjustmentModal, #newValeModal) .input-group-text {
    min-width: 42px;
    justify-content: center;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px 0 0 8px;
    background: var(--v2-surface);
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
}

:is(#walletHistoryModal, #salaryReportModal, #salaryDetailsModal, #paymentChoiceModal, #bulkPaymentModal, #addAdjustmentModal, #newValeModal) .input-group > .form-control {
    border-radius: 0 8px 8px 0;
}

:is(#salaryReportModal, #addAdjustmentModal, #newValeModal, #salaryDetailsModal) .form-text,
:is(#paymentChoiceModal) .payment-partial-input small {
    color: var(--v2-muted) !important;
    font-size: 12.5px;
}

/* ---------- Botões do rodapé ---------- */
body[data-support-page="salarios"] .modal :is(.modal-footer, .bulk-payment-toolbar) .btn,
body[data-support-page="salarios"] .modal .modal-footer :is(#walletHistoryExportBtn, #walletHistoryPrintBtn, #downloadHoleriteBtn, #btnVisualizarRelatorio, #btnGerarRelatorio, #confirmPaymentBtn, #bulkPaymentConfirmBtn, #confirmBlockProfessionalBtn, #saveAdjustmentBtn, #saveValeBtn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 16px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--v2-text-2);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    box-shadow: none;
    transform: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body[data-support-page="salarios"] .modal :is(.modal-footer, .bulk-payment-toolbar) .btn:hover:not(:disabled) {
    border-color: #d5d9e0;
    background: #f3f4f6;
    color: var(--v2-text);
    box-shadow: none;
    transform: none;
}

/* O CSS antigo fixava 0.82rem por ID nos rodapés; mesmo tamanho em todos */
:is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-footer .btn {
    min-height: 38px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
}

body[data-support-page="salarios"] .modal .modal-footer .btn i {
    margin: 0 !important;
    font-size: 13px;
}

/* Ícones com cor nos secundários */
body[data-support-page="salarios"] #walletHistoryExportBtn i { color: #dc2626; }
body[data-support-page="salarios"] #walletHistoryCsvBtn i { color: #16a34a; }
body[data-support-page="salarios"] #downloadHoleriteBtn i,
body[data-support-page="salarios"] #btnVisualizarRelatorio i { color: #2563eb; }
body[data-support-page="salarios"] #walletHistoryPrintBtn i,
body[data-support-page="salarios"] #salaryReportPreviewPrintBtn i { color: var(--v2-muted); }
body[data-support-page="salarios"] #feeSyncFutureOnlyBtn { color: var(--sl-amber-text); }

/* Principal: cor do salão */
body[data-support-page="salarios"] .modal .modal-footer :is(.btn-primary, #btnGerarRelatorio),
body[data-support-page="salarios"] .modal .modal-footer #salaryReportPreviewDownloadBtn {
    border-color: var(--primary-color, #007bff);
    background: var(--primary-color, #007bff);
    color: #ffffff;
}

body[data-support-page="salarios"] .modal .modal-footer :is(.btn-primary, #btnGerarRelatorio):hover:not(:disabled) {
    border-color: var(--primary-dark, var(--primary-color, #0062cc));
    background: var(--primary-dark, var(--primary-color, #0062cc));
    color: #ffffff;
}

/* Pagar / salvar: verde chapado */
body[data-support-page="salarios"] .modal .modal-footer :is(#confirmPaymentBtn, #bulkPaymentConfirmBtn, #saveAdjustmentBtn, #saveValeBtn, .btn-success) {
    border-color: var(--sl-green);
    background: var(--sl-green);
    color: #ffffff;
}

body[data-support-page="salarios"] .modal .modal-footer :is(#confirmPaymentBtn, #bulkPaymentConfirmBtn, #saveAdjustmentBtn, #saveValeBtn, .btn-success):hover:not(:disabled) {
    border-color: var(--sl-green-dark);
    background: var(--sl-green-dark);
    color: #ffffff;
}

/* Bloquear: vermelho chapado */
body[data-support-page="salarios"] .modal .modal-footer #confirmBlockProfessionalBtn {
    border-color: var(--sl-red);
    background: var(--sl-red);
    color: #ffffff;
}

body[data-support-page="salarios"] .modal .modal-footer #confirmBlockProfessionalBtn:hover:not(:disabled) {
    border-color: #b91c1c;
    background: #b91c1c;
    color: #ffffff;
}

body[data-support-page="salarios"] .modal .modal-footer .btn:disabled {
    opacity: 0.5;
}

/* ---------- Avisos (alertas do Bootstrap) ---------- */
:is(#walletHistoryModal, #salaryDetailsModal, #feeSyncModal, #blockProfessionalModal, #addAdjustmentModal) .alert {
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none;
    font-size: 13.5px;
    line-height: 1.5;
}

:is(#walletHistoryModal, #salaryDetailsModal, #feeSyncModal, #blockProfessionalModal, #addAdjustmentModal) .alert-info {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e3a8a;
}

:is(#walletHistoryModal, #salaryDetailsModal, #feeSyncModal, #blockProfessionalModal, #addAdjustmentModal) .alert-warning {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e;
}

:is(#walletHistoryModal, #feeSyncModal, #blockProfessionalModal) .alert-info > i,
:is(#walletHistoryModal, #feeSyncModal, #blockProfessionalModal) .alert .fa-circle-info,
:is(#walletHistoryModal, #feeSyncModal, #blockProfessionalModal) .alert .fa-triangle-exclamation {
    margin-top: 2px !important;
}

/* ========================================
   MODAL: DETALHES DO SALÁRIO
   ======================================== */
#salaryDetailsModal .modal-dialog {
    max-width: 860px;
}



/* Cabeçalho do profissional: foto menor, sem anel azul */
#salaryDetailsModal .modal-body > .row.mb-4:first-child {
    --bs-gutter-y: 12px;
    align-items: center;
    margin-bottom: 18px !important;
}

#salaryDetailsModal .modal-body > .row.mb-4:first-child > .col-md-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#salaryDetailsModal .professional-photo-large {
    margin-bottom: 8px !important;
}

#salaryDetailsModal #modalSalaryPhoto {
    width: 72px !important;
    height: 72px !important;
    border: 0 !important;
    box-shadow: none !important;
}

#salaryDetailsModal #modalSalaryName {
    margin-bottom: 1px !important;
    color: var(--v2-text) !important;
    font-size: 15px;
    font-weight: 500;
}

#salaryDetailsModal #modalSalaryRole {
    color: var(--v2-muted) !important;
    font-size: 13px;
}

#salaryDetailsModal .info-card {
    height: 100%;
    padding: 14px !important;
    background: #ffffff !important;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px !important;
    box-shadow: none;
}

#salaryDetailsModal .info-card .icon-circle {
    flex: 0 0 36px;
    width: 36px !important;
    height: 36px !important;
    margin-right: 12px !important;
    border-radius: 9px !important;
    box-shadow: none;
    font-size: 14px;
}

#salaryDetailsModal .info-card small {
    color: var(--v2-muted) !important;
    font-size: 12.5px;
    font-weight: 500;
}

#salaryDetailsModal #modalSalaryPeriod {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums;
}

#salaryDetailsModal #modalTotalLiquido {
    color: var(--sl-green-dark) !important;
    font-size: 20px;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* Período personalizado: faixa clara */
#salaryDetailsModal .modal-body > .row.g-3.mb-4 {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 10px;
    margin: 0 0 18px !important;
    padding: 4px 14px 14px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-divider);
    border-radius: 10px;
}

#salaryDetailsModal .modal-body > .row.g-3.mb-4 > .col-12:first-child small {
    color: var(--v2-text) !important;
    font-size: 13.5px;
    font-weight: 500 !important;
    letter-spacing: 0;
    text-transform: none !important;
}

#salaryDetailsModal .modal-body > .row.g-3.mb-4 > .col-12:first-child .small {
    font-size: 12.5px;
}

#salaryDetailsModal .salary-commission-note {
    gap: 8px;
    padding: 10px 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e3a8a;
    font-size: 13px;
    line-height: 1.5;
}

#salaryDetailsModal .salary-commission-note i {
    margin-top: 3px;
    color: #2563eb;
}

/* Créditos / correções: listas limpas com divisórias */
#salaryDetailsModal .modal-body > .row.g-4 {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
}

#salaryDetailsModal .card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--v2-card-border) !important;
    border-radius: 10px;
    box-shadow: none;
}

#salaryDetailsModal .card-header {
    padding: 11px 16px;
    background: #ffffff !important;
    border-bottom: 1px solid var(--v2-card-divider) !important;
    border-radius: 0 !important;
}

#salaryDetailsModal .card-header h6 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--v2-text) !important;
    font-size: 14px;
    font-weight: 500;
}

#salaryDetailsModal .card-header h6 i {
    margin: 0 !important;
    font-size: 14px;
}

#salaryDetailsModal .card.border-success .card-header h6 i { color: var(--sl-green); }
#salaryDetailsModal .card.border-danger .card-header h6 i { color: var(--sl-red); }

#salaryDetailsModal .card-body {
    display: flex;
    flex-direction: column;
    padding: 4px 16px 14px;
}

#salaryDetailsModal .card-body > hr {
    margin: 2px 0 10px;
    border-color: var(--v2-card-border);
    opacity: 1;
}

#salaryDetailsModal .salary-item {
    font-size: 13.5px;
}

/* Divisória entre itens (em cima de cada um, menos o primeiro) */
#salaryDetailsModal .salary-item > .d-flex {
    gap: 12px;
    padding: 9px 0 !important;
    border-top: 1px solid var(--v2-card-divider) !important;
    border-bottom: 0 !important;
}

#salaryDetailsModal :is(#modalProventosList, #modalDiscountsList) > .salary-item:first-child > .d-flex,
#salaryDetailsModal #modalProventosList:empty + .salary-item > .d-flex,
#salaryDetailsModal #modalProventosList:empty + .salary-item.d-none + .salary-item > .d-flex,
#salaryDetailsModal #modalProventosList:empty + .salary-item.d-none + .salary-item.d-none + .salary-item > .d-flex {
    border-top: 0 !important;
}

#salaryDetailsModal .salary-item > .d-flex > .d-flex {
    min-width: 0;
    color: var(--v2-text-2);
}

/* Marcadores: bolinha pequena (antes círculo de 16px) */
#salaryDetailsModal .salary-item .fa-circle {
    flex: 0 0 auto;
    margin-right: 9px !important;
    font-size: 7px !important;
}

#salaryDetailsModal .salary-item .d-flex > .d-flex > i:not(.fa-circle) {
    width: 16px;
    margin-right: 8px !important;
    font-size: 12px;
    text-align: center;
}

#salaryDetailsModal .salary-item .fw-bold {
    font-size: 14px;
    font-weight: 500 !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#salaryDetailsModal .salary-item .text-success { color: var(--sl-green-dark) !important; }
#salaryDetailsModal .salary-item .text-danger { color: var(--sl-red-text) !important; }

#salaryDetailsModal .salary-item .small.text-muted {
    font-size: 12px;
}

/* Linhas fixas (Comissões/Pacote/Produto) vêm depois da lista do JS */
#salaryDetailsModal #modalComissoesRow,
#salaryDetailsModal #modalPackageComissoesRow,
#salaryDetailsModal #modalProductComissoesRow {
    order: 0;
}

#salaryDetailsModal #modalProductComissoesNotes {
    max-width: 240px;
    margin-left: auto;
    line-height: 1.4;
}

#salaryDetailsModal .salary-item .border.rounded-2 {
    margin: 0 0 8px !important;
    padding: 6px 10px !important;
    background: var(--v2-surface) !important;
    border-color: var(--v2-card-divider) !important;
    border-radius: 6px !important;
    font-size: 12.5px;
}

/* Totais: linha própria, mais forte */
#salaryDetailsModal .card-body > .d-flex:last-child {
    margin-top: auto;
    padding-top: 2px;
}

#salaryDetailsModal .card-body > .d-flex:last-child > span:first-child {
    color: var(--v2-text) !important;
    font-size: 13.5px;
}

#salaryDetailsModal #modalTotalProventos,
#salaryDetailsModal #modalTotalDescontos {
    font-size: 17px !important;
    font-weight: 500 !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#salaryDetailsModal #modalTotalProventos { color: var(--sl-green-dark) !important; }
#salaryDetailsModal #modalTotalDescontos { color: var(--sl-red-text) !important; }

#salaryDetailsModal .card-body > p.text-muted {
    padding: 10px 0 2px;
    font-size: 13px !important;
}

/* Detalhamento das correções */
#salaryDetailsModal .commission-adjustment-detail {
    margin: 8px 0 10px;
    padding: 12px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-divider);
    border-radius: 8px;
}

#salaryDetailsModal .commission-adjustment-detail-header {
    margin-bottom: 8px;
    color: var(--v2-text);
    font-size: 13px;
    font-weight: 500;
}

#salaryDetailsModal .commission-adjustment-detail-header small {
    color: var(--v2-muted);
    font-size: 12px;
    font-weight: 400;
}

#salaryDetailsModal .commission-adjustment-summary {
    gap: 5px;
    margin-bottom: 8px;
}

#salaryDetailsModal :is(.commission-adjustment-summary-chip, .commission-adjustment-reason-pill) {
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
}

#salaryDetailsModal .commission-adjustment-info {
    gap: 7px;
    padding: 8px 10px;
    background: #eff6ff;
    border-color: #bfdbfe;
    border-radius: 6px;
    color: #1e3a8a;
    font-size: 12.5px;
    line-height: 1.45;
}

#salaryDetailsModal .commission-adjustment-detail-item {
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    box-shadow: none;
}

#salaryDetailsModal .commission-adjustment-detail-item + .commission-adjustment-detail-item {
    margin-top: 6px;
}

#salaryDetailsModal .commission-adjustment-title {
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}

#salaryDetailsModal :is(.commission-adjustment-meta, .commission-adjustment-note, .commission-adjustment-value-change) {
    font-size: 12px;
}

#salaryDetailsModal .commission-adjustment-detail-item strong {
    color: var(--sl-red-text);
    font-size: 13.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

#salaryDetailsModal .commission-adjustment-open-link {
    padding: 4px 8px;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 6px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 500;
}

#salaryDetailsModal .commission-adjustment-open-link:hover {
    background: var(--v2-surface);
    color: #1d4ed8;
}

#salaryDetailsModal .commission-adjustment-pagination {
    padding-top: 10px;
    font-size: 12.5px;
}

#salaryDetailsModal .commission-adjustment-page-btn {
    min-height: 30px;
    padding: 4px 10px;
    border: 1px solid var(--v2-card-border);
    border-radius: 6px;
    color: var(--v2-text-2);
    font-size: 12.5px;
    font-weight: 500;
}

/* Resultado final: valor líquido em destaque */
#salaryDetailsModal .modal-body > .row.mt-4:last-child {
    margin-top: 16px !important;
}

#salaryDetailsModal .alert.alert-primary {
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 10px;
    color: #14532d;
}

#salaryDetailsModal .alert.alert-primary > .d-flex > i {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 12px !important;
    border-radius: 9px;
    background: var(--sl-green);
    color: #ffffff;
    font-size: 15px !important;
}

#salaryDetailsModal .alert.alert-primary h6 {
    color: #14532d;
    font-size: 14.5px;
    font-weight: 500;
}

#salaryDetailsModal .alert.alert-primary small {
    color: #166534;
    font-size: 12.5px;
}

#salaryDetailsModal #modalValorFinal {
    color: var(--sl-green-dark) !important;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ========================================
   MODAL: HISTÓRICO DA CARTEIRA
   ======================================== */
#walletHistoryModal .wallet-balance-info {
    margin-bottom: 14px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    box-shadow: none;
    text-align: left;
}

#walletHistoryModal .current-balance {
    justify-content: space-between;
    gap: 12px;
}

#walletHistoryModal .balance-label {
    margin: 0;
    color: var(--v2-text-2);
    font-size: 13.5px;
    font-weight: 500;
}

#walletHistoryModal .balance-label i {
    color: #7c5cd6;
}

#walletHistoryModal .balance-value {
    color: var(--v2-text);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

#walletHistoryModal .history-filters,
#walletHistoryModal .history-custom-range {
    margin-bottom: 14px !important;
    padding: 12px 14px 14px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-divider);
    border-radius: 10px;
    box-shadow: none;
}

#walletHistoryModal .history-filters .row,
#walletHistoryModal .history-custom-range {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 10px;
}

#walletHistoryModal .history-custom-range {
    margin-right: 0;
    margin-left: 0;
    padding-top: 2px;
}

#walletHistoryModal .history-custom-range small {
    font-size: 12.5px;
}

#walletHistoryModal .history-filters .form-label,
#walletHistoryModal .history-custom-range .form-label {
    color: var(--v2-text-2);
    font-size: 13px;
}

#walletHistoryModal .wallet-history-filter-notice,
#walletHistoryModal #packageHistoryHighlight {
    margin-bottom: 14px;
    padding: 10px 14px;
    align-items: flex-start !important;
    gap: 10px !important;
}

#walletHistoryModal .wallet-history-filter-notice .small,
#walletHistoryModal #packageHistoryHighlight .small {
    font-size: 12.5px;
}

#walletHistoryModal #packageHistoryHighlight {
    background: #fefce8 !important;
    border: 1px solid #fde68a !important;
    border-radius: 10px;
}

#walletHistoryModal #packageHistoryHighlight .fa-ticket-alt {
    color: #a16207;
    font-size: 15px;
}

#walletHistoryModal #packageHistoryHighlight .text-warning {
    color: #854d0e !important;
    letter-spacing: 0;
    text-transform: none !important;
    font-size: 13px !important;
}

#walletHistoryModal .wallet-history-table {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
}

#walletHistoryModal .wallet-history-table .table-responsive {
    margin: 0;
}

#walletHistoryModal .wallet-history-grid {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 13.5px;
}

#walletHistoryModal .wallet-history-grid thead th {
    padding: 10px 12px;
    background: var(--v2-surface) !important;
    border: 0;
    border-bottom: 1px solid var(--v2-card-divider);
    color: var(--v2-muted) !important;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#walletHistoryModal .wallet-history-grid td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--v2-card-divider);
    color: var(--v2-text);
    font-size: 13.5px;
}

#walletHistoryModal .wallet-history-grid tbody tr:last-child td {
    border-bottom: 0;
}

#walletHistoryModal .wallet-history-grid tbody tr:hover {
    background: #fafbfc;
}

#walletHistoryModal .wallet-history-grid th:nth-child(5),
#walletHistoryModal .wallet-history-grid th:nth-child(6),
#walletHistoryModal .wallet-history-grid td[data-label="Valor"],
#walletHistoryModal .wallet-history-grid td[data-label="Saldo"] {
    text-align: right;
}

#walletHistoryModal .history-date-main {
    color: var(--v2-text);
    font-size: 13.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

#walletHistoryModal .history-date-relative {
    color: var(--v2-muted);
    font-size: 12px;
}

/* Serviço como texto (antes pílula colorida por serviço) */
#walletHistoryModal .service-badge {
    padding: 0;
    background: none !important;
    border-radius: 0;
    color: var(--v2-text) !important;
    font-size: 13.5px;
    font-weight: 400;
}

#walletHistoryModal .history-package-pill {
    padding: 1px 6px;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 5px;
    color: #854d0e;
    font-size: 11.5px;
    font-weight: 500;
}

#walletHistoryModal .transaction-type {
    gap: 5px;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

#walletHistoryModal .transaction-type.credit {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: var(--sl-green-dark);
}

#walletHistoryModal .transaction-type.debit {
    background: #fef2f2;
    border-color: #fecaca;
    color: var(--sl-red-text);
}

#walletHistoryModal .transaction-type i {
    font-size: 9px;
}

#walletHistoryModal .history-amount-chip,
#walletHistoryModal .history-balance-chip {
    padding: 0;
    background: none !important;
    border: 0;
    border-radius: 0;
    font-size: 13.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

#walletHistoryModal .history-amount-chip.credit { color: var(--sl-green-dark); }
#walletHistoryModal .history-amount-chip.debit { color: var(--sl-red-text); }
#walletHistoryModal .history-balance-chip { color: var(--v2-text); font-weight: 500; }

#walletHistoryModal .wallet-history-grid td[colspan].text-center {
    padding: 28px 16px;
    color: var(--v2-muted);
}

/* Resumo do período: 4 blocos brancos + fórmula */
#walletHistoryModal .history-summary {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
    margin: 0 !important;
    padding: 0;
    background: none;
    border: 0;
}

#walletHistoryModal .history-summary .summary-item {
    height: 100%;
    padding: 12px 14px;
    background: #ffffff !important;
    border: 1px solid var(--v2-card-border) !important;
    border-radius: 10px;
    box-shadow: none;
}

#walletHistoryModal .history-summary .summary-card-body {
    text-align: left !important;
}

#walletHistoryModal .history-summary .card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px !important;
    color: var(--v2-muted) !important;
    font-size: 12.5px;
    font-weight: 500;
}

#walletHistoryModal .history-summary .card-title i {
    margin: 0 !important;
    font-size: 12px;
}

#walletHistoryModal .summary-item--opening .card-title i { color: #64748b; }
#walletHistoryModal .summary-item--credit .card-title i { color: var(--sl-green); }
#walletHistoryModal .summary-item--debit .card-title i { color: var(--sl-red); }
#walletHistoryModal .summary-item--net .card-title i { color: #7c5cd6; }

#walletHistoryModal .history-summary .summary-value {
    margin: 0;
    color: var(--v2-text) !important;
    font-size: 18px;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

#walletHistoryModal .history-summary .summary-item--credit .summary-value { color: var(--sl-green-dark) !important; }
#walletHistoryModal .history-summary .summary-item--debit .summary-value { color: var(--sl-red-text) !important; }

#walletHistoryModal .history-summary .summary-item--net {
    background: #f5f3ff !important;
    border-color: #ddd6fe !important;
}

#walletHistoryModal .history-balance-formula {
    padding: 9px 12px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-divider);
    border-radius: 8px;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ========================================
   MODAL: RELATÓRIO DE SALÁRIOS
   ======================================== */
#salaryReportModal .modal-dialog {
    max-width: 620px;
}

#salaryReportModal .mb-4 {
    margin-bottom: 16px !important;
}

/* Período: controle segmentado */
#salaryReportModal .btn-group {
    gap: 4px;
    padding: 4px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
}

#salaryReportModal .btn-group > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent;
    color: var(--v2-text-2);
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: none;
}

#salaryReportModal .btn-group > .btn:hover {
    background: #eef0f3;
    color: var(--v2-text);
}

#salaryReportModal .btn-group > .btn-check:checked + .btn {
    background: #ffffff;
    color: var(--primary-color, #007bff);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 0 0 1px var(--v2-card-border);
}

/* Formato: opções selecionáveis (borda + tint da cor do salão + ✓) */
#salaryReportModal .formato-opcoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#salaryReportModal .formato-item.mt-2 {
    margin-top: 0 !important;
}

#salaryReportModal .formato-item .btn-outline-secondary {
    position: relative;
    height: 100%;
    padding: 12px 36px 12px 14px;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    color: var(--v2-text);
    box-shadow: none;
    transform: none;
}

#salaryReportModal .formato-item .btn-outline-secondary:hover {
    background: var(--v2-surface);
    border-color: #d5d9e0;
    box-shadow: none;
    transform: none;
}

#salaryReportModal .formato-item .btn-check:checked + .btn-outline-secondary {
    background: var(--sl-tint);
    border-color: var(--primary-color, #007bff);
    color: var(--v2-text);
    box-shadow: 0 0 0 1px var(--primary-color, #007bff);
}

#salaryReportModal .formato-item .btn-check:checked + .btn-outline-secondary i.text-success { color: var(--sl-green) !important; }
#salaryReportModal .formato-item .btn-check:checked + .btn-outline-secondary i.text-danger { color: var(--sl-red) !important; }

#salaryReportModal .formato-item .btn-check:checked + .btn-outline-secondary::after {
    content: "\f00c";
    position: absolute;
    top: 50%;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border-radius: 50%;
    background: var(--primary-color, #007bff);
    color: #ffffff;
    font-family: "Font Awesome 6 Free";
    font-size: 10px;
    font-weight: 900;
}

#salaryReportModal .formato-item .fa-2x {
    width: 28px;
    margin-right: 12px !important;
    font-size: 24px;
    text-align: center;
}

#salaryReportModal .formato-item .fw-bold {
    font-size: 14px;
}

#salaryReportModal .formato-item small {
    display: block;
    color: var(--v2-muted) !important;
    font-size: 12.5px;
    line-height: 1.35;
    white-space: normal;
}

/* ========================================
   MODAL: PRÉVIA DO RELATÓRIO
   ======================================== */
#salaryReportPreviewModal .salary-report-preview-surface {
    display: flex;
    flex-direction: column;
}

#salaryReportPreviewModal .modal-header .modal-title {
    font-size: 16px;
}

#salaryReportPreviewModal .salary-report-preview-period {
    margin: 2px 0 0 42px;
    color: var(--v2-muted);
    font-size: 13px;
    font-weight: 400;
}

#salaryReportPreviewModal .salary-report-preview-body {
    background: #eceef2;
}

#salaryReportPreviewModal .salary-report-preview-loading {
    gap: 12px;
    background: var(--v2-surface);
    color: var(--v2-text-2);
    font-size: 14px;
}

#salaryReportPreviewModal .salary-report-preview-loading .spinner-border {
    width: 28px;
    height: 28px;
    border-width: 3px;
    color: var(--primary-color, #007bff) !important;
}

#salaryReportPreviewModal .salary-report-preview-actions .btn {
    order: 0 !important;
    grid-column: auto !important;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
}

/* ========================================
   MODAL: TAXAS DA COMISSÃO (sincronizar retroativo)
   ======================================== */
#feeSyncModal .modal-body > .alert-info {
    margin-bottom: 18px;
    padding: 12px 14px;
}

#feeSyncModal .modal-body > .alert-info i {
    color: #2563eb;
}

#feeSyncModal #feeSyncModalSummary {
    line-height: 1.6;
}

#feeSyncModal .fee-sync-section > .d-flex {
    margin-bottom: 8px !important;
}

#feeSyncModal .fee-sync-section h6 {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
}

#feeSyncModal .fee-sync-section .small.text-muted {
    font-size: 12.5px;
}

#feeSyncModal .fee-sync-section.mt-4 {
    margin-top: 18px !important;
}

#feeSyncModal .list-group {
    overflow: hidden;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
}

#feeSyncModal .list-group-item,
#feeSyncModal .fee-sync-item {
    margin: 0;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid var(--v2-card-divider);
    border-radius: 0;
    color: var(--v2-text);
    font-size: 13.5px;
}

#feeSyncModal .list-group-item:last-child {
    border-bottom: 0;
}

#feeSyncModal .list-group-item.text-muted {
    padding: 16px 14px;
    color: var(--v2-muted) !important;
    text-align: center;
}

#feeSyncModal .fee-sync-item .fw-semibold {
    font-size: 13.5px;
}

#feeSyncModal .fee-sync-item .small {
    font-size: 12px;
    line-height: 1.45;
}

#feeSyncModal .fee-sync-item .text-end .fw-bold {
    font-size: 14px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#feeSyncModal .fee-sync-item .text-danger { color: var(--sl-red-text) !important; }
#feeSyncModal .fee-sync-item .text-success { color: var(--sl-green-dark) !important; }

#feeSyncModal #feeSyncModalEstimatedAlert {
    margin-bottom: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
}

/* ========================================
   MODAL: LANÇAMENTO DE PAGAMENTO (total / parcial)
   ======================================== */
#paymentChoiceModal .modal-dialog {
    max-width: 640px;
}

#paymentChoiceModal .payment-choice-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-divider);
    border-radius: 10px;
}

#paymentChoiceModal .payment-label,
#bulkPaymentModal .bulk-label,
#blockProfessionalModal .block-label {
    color: var(--v2-muted);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#paymentChoiceModal .payment-professional-name {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--v2-text);
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#paymentChoiceModal .payment-amount-card {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    text-align: right;
}

#paymentChoiceModal .payment-amount {
    color: var(--sl-green-dark);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#paymentChoiceModal .payment-amount-card small {
    font-size: 12px;
}

#paymentChoiceModal .payment-choice-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

#paymentChoiceModal .payment-option-card {
    position: relative;
    gap: 2px;
    min-height: 0;
    height: 100%;
    padding: 12px 36px 12px 14px;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    box-shadow: none;
    transform: none;
}

#paymentChoiceModal .payment-option-card:hover {
    border-color: #d5d9e0;
    background: var(--v2-surface);
    box-shadow: none;
    transform: none;
}

#paymentChoiceModal .payment-option input:checked + .payment-option-card {
    background: var(--sl-tint);
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 1px var(--primary-color, #007bff);
}

#paymentChoiceModal .payment-option input:checked + .payment-option-card::after {
    content: "\f00c";
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color, #007bff);
    color: #ffffff;
    font-family: "Font Awesome 6 Free";
    font-size: 10px;
    font-weight: 900;
}

#paymentChoiceModal .payment-option .option-title {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
}

#paymentChoiceModal .payment-option .option-value {
    color: var(--v2-text);
    font-size: 16px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

#paymentChoiceModal #paymentTypePartial + .payment-option-card .option-value {
    color: var(--v2-text-2);
    font-size: 14px;
    font-weight: 500;
}

#paymentChoiceModal .payment-option .option-desc {
    color: var(--v2-muted);
    font-size: 12.5px;
}

#paymentChoiceModal .payment-partial-input {
    padding: 12px 14px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-divider);
    border-radius: 10px;
}

#paymentChoiceModal .payment-partial-input .input-group {
    margin-bottom: 4px;
}

#paymentChoiceModal .payment-choice-footer {
    justify-content: space-between;
    flex-wrap: nowrap;
}

#paymentChoiceModal .payment-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    font-size: 12.5px;
}

#paymentChoiceModal .payment-summary .text-muted {
    font-size: 12.5px;
    font-weight: 500;
}

#paymentChoiceModal .payment-summary-amount {
    color: var(--v2-text);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#paymentChoiceModal .payment-actions,
#bulkPaymentModal .bulk-payment-actions {
    gap: 8px;
}

/* ========================================
   MODAL: LANÇAMENTO EM LOTE
   ======================================== */
#bulkPaymentModal .modal-dialog {
    max-width: 900px;
}

#bulkPaymentModal .bulk-payment-toolbar {
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-divider);
    border-radius: 10px;
}

#bulkPaymentModal .bulk-total-card {
    gap: 0;
}

#bulkPaymentModal .bulk-total-card strong {
    color: var(--v2-text);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

#bulkPaymentModal .bulk-payment-list {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
}

#bulkPaymentModal .bulk-payment-list > .text-center {
    padding: 24px 16px;
    color: var(--v2-muted) !important;
}

#bulkPaymentModal .bulk-payment-item {
    grid-template-columns: minmax(0, 1.2fr) minmax(120px, 0.6fr) minmax(250px, 1fr);
    gap: 16px;
    padding: 12px 16px;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid var(--v2-card-divider);
    border-radius: 0;
    box-shadow: none;
}

#bulkPaymentModal .bulk-payment-item:last-child {
    border-bottom: 0;
}

#bulkPaymentModal .bulk-professional {
    min-width: 0;
}

#bulkPaymentModal .bulk-professional .bulk-name {
    overflow: hidden;
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#bulkPaymentModal .bulk-professional .bulk-role {
    color: var(--v2-muted);
    font-size: 12.5px;
}

#bulkPaymentModal .bulk-amount {
    gap: 0;
    text-align: right;
}

#bulkPaymentModal .bulk-amount strong {
    color: var(--sl-green-dark);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#bulkPaymentModal .bulk-options {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 6px 14px;
}

#bulkPaymentModal .bulk-options .form-check {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 0;
    padding: 0;
    font-size: 13.5px;
}

#bulkPaymentModal .bulk-options .form-check-input {
    float: none;
    margin: 0;
}

#bulkPaymentModal .form-check-input:checked {
    background-color: var(--primary-color, #007bff);
    border-color: var(--primary-color, #007bff);
}

#bulkPaymentModal .form-check-input:focus {
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 3px var(--sl-ring);
}

#bulkPaymentModal .bulk-partial-input {
    grid-column: 1 / -1;
}

#bulkPaymentModal .bulk-partial-input :is(.form-control, .input-group-text) {
    min-height: 36px;
    font-size: 13.5px;
}

#bulkPaymentModal .bulk-partial-input .form-control:disabled {
    background: var(--v2-surface);
}

#bulkPaymentModal .bulk-payment-footer {
    justify-content: space-between;
    flex-wrap: nowrap;
}

#bulkPaymentModal .bulk-payment-footer > .text-muted {
    font-size: 12.5px !important;
}

body[data-support-page="salarios"] #bulkPaymentModal #bulkPaymentSelectAll {
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    transform: none;
}

/* ========================================
   MODAL: BLOQUEAR PROFISSIONAL
   ======================================== */
#blockProfessionalModal .modal-dialog {
    max-width: 560px;
}

#blockProfessionalModal .block-professional-card {
    gap: 12px;
    padding: 14px 16px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-divider);
    border-radius: 10px;
}

#blockProfessionalModal .block-professional-card h4 {
    margin: 2px 0 0;
    overflow-wrap: anywhere;
    color: var(--v2-text);
    font-size: 17px;
    font-weight: 500;
}

#blockProfessionalModal #blockProfessionalRole {
    font-size: 13px;
}

#blockProfessionalModal .block-alert {
    gap: 10px;
    padding: 10px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #7f1d1d;
    font-size: 13.5px;
}

#blockProfessionalModal .block-alert i {
    margin-top: 2px;
    color: var(--sl-red);
    font-size: 14px;
}

#blockProfessionalModal .alert-warning {
    margin-top: 12px !important;
    padding: 10px 12px;
}

/* ========================================
   MODAIS: AJUSTE, NOVO VALE, DETALHE DO VALE, COMPROVANTE
   ======================================== */

#addAdjustmentModal .modal-body > .row.mb-4 {
    margin-bottom: 14px !important;
}

/* Provento / Desconto: segmentado com cor semântica */
#addAdjustmentModal .btn-group {
    gap: 4px;
    padding: 4px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
}

#addAdjustmentModal .btn-group .btn,
#addAdjustmentModal .btn-group .btn + .btn {
    min-height: 36px;
    margin: 0;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent;
    color: var(--v2-text-2);
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: none;
}

#addAdjustmentModal .btn-group .btn:hover {
    background: #eef0f3;
    color: var(--v2-text);
}

#addAdjustmentModal .btn-check:checked + .btn-outline-success {
    background: #ffffff;
    color: var(--sl-green-dark);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 0 0 1px #bbf7d0;
}

#addAdjustmentModal .btn-check:checked + .btn-outline-danger {
    background: #ffffff;
    color: var(--sl-red-text);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 0 0 1px #fecaca;
}

#addAdjustmentModal .modal-body > .mt-4 {
    margin-top: 16px !important;
}

#addAdjustmentModal .alert.alert-info {
    margin: 0;
    padding: 12px 14px;
    background: var(--v2-surface) !important;
    border: 1px solid var(--v2-card-divider) !important;
    border-radius: 10px;
    color: var(--v2-text-2);
}

#addAdjustmentModal .alert.alert-info > i {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 12px !important;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    font-size: 13px !important;
}

#addAdjustmentModal .alert.alert-info h6 {
    margin-bottom: 2px !important;
    color: var(--v2-text);
    font-size: 13.5px;
    font-weight: 500;
}

#addAdjustmentModal .alert.alert-info small {
    font-size: 13px;
}

#addAdjustmentModal #previewValue {
    color: var(--v2-text);
    font-variant-numeric: tabular-nums;
}

#newValeModal .vale-preview {
    margin-top: 16px !important;
    padding: 12px 14px !important;
    background: var(--v2-surface) !important;
    border: 1px solid var(--v2-card-divider);
    border-radius: 10px !important;
    box-shadow: none;
}

#newValeModal .vale-preview p.small {
    margin-bottom: 4px !important;
    color: var(--v2-muted) !important;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none !important;
}

#newValeModal .vale-preview p.fw-semibold {
    color: var(--v2-text-2);
    font-size: 13.5px;
    font-weight: 400 !important;
    line-height: 1.5;
}

#newValeModal #valePreviewValue {
    color: var(--sl-red-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

#valeDetailModal .modal-dialog {
    max-width: 480px;
}

#valeDetailModal .vale-detail-card {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#valeDetailModal .vale-detail-card p.text-muted.small {
    margin-bottom: 2px !important;
    color: var(--v2-muted) !important;
    font-size: 12.5px;
    font-weight: 500;
}

#valeDetailModal #detailProfessionalName {
    margin-bottom: 14px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--v2-card-divider);
    color: var(--v2-text);
    font-size: 17px;
    font-weight: 500;
}

#valeDetailModal #detailValeAmount {
    color: var(--sl-red-text);
    font-size: 20px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

#valeDetailModal #detailValeDate {
    color: var(--v2-text) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
}

#valeDetailModal .vale-detail-card .mt-3 {
    margin-top: 12px !important;
    padding-top: 12px;
    border-top: 1px solid var(--v2-card-divider);
}

#valeDetailModal #detailValeReason {
    font-size: 14px;
}

#valeDetailModal #detailValeNotes {
    font-size: 13.5px !important;
}

body[data-support-page="salarios"] #valeDetailModal .modal-footer .btn-sm {
    min-height: 38px;
}

/* Comprovante de saque */
#withdrawalReceiptModal .modal-dialog {
    max-width: 820px;
}

#withdrawalReceiptModal .modal-body > .row {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
    align-items: stretch !important;
}

#withdrawalReceiptModal .withdrawal-receipt-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 20px 16px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-divider);
    border-radius: 10px;
    box-shadow: none;
}

#withdrawalReceiptModal .withdrawal-receipt-card > p.text-uppercase {
    color: var(--v2-muted) !important;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none !important;
}

#withdrawalReceiptModal #receiptAmount {
    margin: 0;
    color: var(--v2-text);
    font-size: 30px;
    font-weight: 500 !important;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

#withdrawalReceiptModal .receipt-status {
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#withdrawalReceiptModal .receipt-status.bg-success {
    background: #f0fdf4 !important;
    border-color: #bbf7d0;
    color: var(--sl-green-dark) !important;
}

#withdrawalReceiptModal .receipt-status.bg-warning {
    background: #fffbeb !important;
    border-color: #fde68a;
    color: var(--sl-amber-text) !important;
}

#withdrawalReceiptModal #receiptMethod {
    font-size: 14px;
}

#withdrawalReceiptModal .withdrawal-receipt-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    box-shadow: none;
}

#withdrawalReceiptModal .withdrawal-receipt-detail .text-muted.small,
#withdrawalReceiptModal .withdrawal-receipt-detail span.text-muted {
    color: var(--v2-muted) !important;
    font-size: 12.5px;
    font-weight: 500;
}

#withdrawalReceiptModal .withdrawal-receipt-detail strong,
#withdrawalReceiptModal #receiptLegend {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

#withdrawalReceiptModal #receiptNote {
    color: var(--v2-text-2);
    font-size: 13.5px;
}

#withdrawalReceiptModal .modal-footer.border-0 {
    padding-top: 12px !important;
}

/* ========================================
   RESPONSIVO: MODAIS
   ======================================== */
@media (max-width: 991.98px) {
    /* Histórico da carteira: linhas viram cards compactos
       Data | valor / Serviço | tipo / Cliente | saldo após */
    #walletHistoryModal .wallet-history-table {
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    #walletHistoryModal .wallet-history-grid tbody tr,
    #walletHistoryModal .wallet-history-grid tbody tr:hover {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "data valor"
            "servico tipo"
            "cliente saldo";
        align-items: center;
        gap: 4px 12px;
        margin: 0 0 8px;
        padding: 10px 12px;
        background: #ffffff;
        border: 1px solid var(--v2-card-border);
        border-radius: 10px;
        box-shadow: none;
    }

    #walletHistoryModal .wallet-history-grid td,
    #walletHistoryModal .wallet-history-grid td[data-label="Data"] {
        width: auto;
        margin: 0;
        padding: 0;
        border: 0;
        text-align: left;
    }

    #walletHistoryModal .wallet-history-grid td::before {
        display: none;
        content: none;
    }

    #walletHistoryModal .wallet-history-grid td[data-label="Data"] { grid-area: data; }
    #walletHistoryModal .wallet-history-grid td[data-label="Serviço"] { grid-area: servico; width: auto !important; min-width: 0; }
    #walletHistoryModal .wallet-history-grid td[data-label="Cliente"] {
        grid-area: cliente;
        overflow: hidden;
        color: var(--v2-muted);
        font-size: 12.5px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    #walletHistoryModal .wallet-history-grid td[data-label="Tipo"] { grid-area: tipo; justify-self: end; }
    #walletHistoryModal .wallet-history-grid td[data-label="Valor"] { grid-area: valor; text-align: right; }
    #walletHistoryModal .wallet-history-grid td[data-label="Saldo"] {
        grid-area: saldo;
        color: var(--v2-muted);
        font-size: 12px;
        text-align: right;
    }

    #walletHistoryModal .wallet-history-grid td[data-label="Saldo"]::before {
        display: inline;
        content: "Saldo ";
        float: none;
        margin: 0;
        color: var(--v2-muted);
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
    }

    #walletHistoryModal .wallet-history-grid td[data-label="Saldo"] .history-balance-chip {
        font-size: 12.5px;
    }

    #walletHistoryModal .history-date-cell {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
    }

    #walletHistoryModal .wallet-history-grid td[data-label="Serviço"] .service-badge {
        display: inline;
        white-space: normal;
    }

    #walletHistoryModal .history-package-pill {
        margin: 0 0 0 4px;
    }

    #walletHistoryModal .history-amount-chip {
        font-size: 14.5px;
    }

    #walletHistoryModal .wallet-history-grid td[colspan].text-center {
        grid-column: 1 / -1;
        text-align: center;
    }

    #bulkPaymentModal .bulk-payment-item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px 12px;
    }

    #bulkPaymentModal .bulk-options {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    #salaryDetailsModal .modal-body > .row.mb-4:first-child > .col-md-3 {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-areas: "foto nome" "foto cargo";
        align-items: center;
        column-gap: 12px;
        text-align: left !important;
    }

    #salaryDetailsModal .professional-photo-large {
        grid-area: foto;
        margin: 0 !important;
    }

    #salaryDetailsModal #modalSalaryPhoto {
        width: 48px !important;
        height: 48px !important;
    }

    #salaryDetailsModal #modalSalaryName { grid-area: nome; align-self: end; }
    #salaryDetailsModal #modalSalaryRole { grid-area: cargo; align-self: start; }

    #salaryDetailsModal .modal-body > .row.mb-4:first-child .row.g-3 {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }

    #salaryDetailsModal .modal-body > .row.mb-4:first-child .row.g-3 > .col-md-6 {
        width: 50%;
    }

    #salaryDetailsModal .info-card {
        padding: 10px !important;
    }

    #salaryDetailsModal .info-card .icon-circle {
        display: none !important;
    }

    #salaryDetailsModal #modalSalaryPeriod {
        font-size: 13px;
    }

    #salaryDetailsModal #modalTotalLiquido {
        font-size: 17px;
    }

    #salaryDetailsModal .alert.alert-primary {
        flex-wrap: wrap;
    }

    #salaryDetailsModal #modalValorFinal {
        margin-left: 48px !important;
        font-size: 22px;
    }

    #salaryDetailsModal #modalProductComissoesNotes {
        max-width: 180px;
    }

    #walletHistoryModal .history-summary > .col-sm-6 {
        width: 50%;
    }

    #walletHistoryModal .history-summary .summary-value {
        font-size: 16px;
    }

    #walletHistoryModal .history-summary .card-title {
        font-size: 12px;
    }

    #walletHistoryModal .current-balance {
        flex-wrap: wrap;
    }

    #walletHistoryModal .balance-value {
        font-size: 20px;
    }

    #withdrawalReceiptModal #receiptAmount {
        font-size: 26px;
    }
}

/* CELULAR (<= 576px): folha presa na base da tela,
   corpo rolável e rodapé sempre visível */
@media (max-width: 576px) {
    :is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) {
        --slm-pad-x: 16px;
    }

    :is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-dialog {
        display: flex;
        align-items: flex-end;
        width: 100%;
        max-width: none !important;
        height: 100%;
        min-height: 100%;
        margin: 0 !important;
    }

    :is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal).fade .modal-dialog {
        transform: translateY(32px);
    }

    :is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal).show .modal-dialog {
        transform: none;
    }

    :is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border: 0 !important;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(16, 24, 40, 0.16);
    }

    /* Prévia do relatório: folha alta (o iframe precisa de espaço) */
    #salaryReportPreviewModal .salary-report-preview-surface {
        height: calc(100dvh - 8px);
    }

    :is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) :is(.modal-header, .modal-footer) {
        flex-shrink: 0;
    }

    :is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        padding: 14px var(--slm-pad-x) 16px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    :is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-header {
        min-height: 0;
        padding: 12px var(--slm-pad-x);
    }

    :is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-title,
    #walletHistoryModal #walletHistoryModalLabel {
        font-size: 15.5px;
    }

    :is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-title,
    #walletHistoryModal #walletHistoryModalLabel {
        min-height: 30px;
        padding: 5px 0 3px 40px;
        line-height: 1.3;
    }

    :is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-title > i {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    :is(#salaryReportPreviewModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal) .modal-header p,
    #salaryReportPreviewModal .salary-report-preview-period {
        margin-left: 40px !important;
        font-size: 12.5px !important;
    }

    :is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-header .btn-close {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        margin-top: -3px;
    }

    /* Rodapé: "Cancelar/Fechar" compacto + ação principal larga */
    :is(#withdrawalReceiptModal, #walletHistoryModal, #salaryReportModal, #salaryReportPreviewModal, #salaryDetailsModal, #feeSyncModal, #paymentChoiceModal, #bulkPaymentModal, #blockProfessionalModal, #addAdjustmentModal, #newValeModal, #valeDetailModal) .modal-footer {
        flex-wrap: nowrap;
        padding: 10px var(--slm-pad-x);
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    body[data-support-page="salarios"] .modal .modal-footer .btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
        white-space: normal;
        line-height: 1.2;
    }

    body[data-support-page="salarios"] .modal .modal-footer .btn[data-bs-dismiss="modal"]:not(:only-child) {
        flex: 0 0 auto;
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    /* Só "Fechar": botão inteiro */
    body[data-support-page="salarios"] .modal .modal-footer .btn:only-child {
        flex: 1 1 100%;
    }

    /* Rodapés com resumo (pagamento / lote): valor em cima, botões embaixo */
    #paymentChoiceModal .payment-choice-footer,
    #bulkPaymentModal .bulk-payment-footer {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    #paymentChoiceModal .payment-summary {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        width: 100%;
    }

    #paymentChoiceModal .payment-summary-amount {
        font-size: 18px;
    }

    #bulkPaymentModal .bulk-payment-footer > .text-muted {
        width: 100%;
        font-size: 12px !important;
    }

    #paymentChoiceModal .payment-actions,
    #bulkPaymentModal .bulk-payment-actions {
        display: flex;
        width: 100%;
    }

    body[data-support-page="salarios"] .modal :is(.payment-actions, .bulk-payment-actions) .btn-outline-secondary {
        flex: 0 0 auto !important;
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    /* Histórico: 4 ações em grade 2 x 2 (na mesma ordem) */
    #walletHistoryModal .modal-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    body[data-support-page="salarios"] #walletHistoryModal .modal-footer .btn,
    body[data-support-page="salarios"] #walletHistoryModal .modal-footer .btn[data-bs-dismiss="modal"]:not(:only-child) {
        min-height: 42px !important;
    }

    /* Relatório: Cancelar compacto, Visualizar e Baixar dividem o resto */
    body[data-support-page="salarios"] #salaryReportModal .modal-footer .btn i,
    body[data-support-page="salarios"] #salaryReportPreviewModal .modal-footer .btn i {
        display: none;
    }

    /* Taxas: 3 ações — Fechar compacto */
    body[data-support-page="salarios"] #feeSyncModal .modal-footer .btn {
        font-size: 13px;
    }

    /* Campos: 44px e fonte 16px (evita zoom do iPhone) */
    :is(#walletHistoryModal, #salaryReportModal, #salaryDetailsModal, #paymentChoiceModal, #bulkPaymentModal, #addAdjustmentModal, #newValeModal) :is(.form-control, .form-select, .input-group-text) {
        min-height: 44px;
        font-size: 16px;
    }

    #salaryDetailsModal .modal-body > .row.g-3.mb-4 > .col-md-6,
    #salaryReportModal #salaryReportIntervalGroup .col-md-6 {
        width: 50%;
    }

    #salaryReportModal #salaryReportIntervalGroup .row {
        --bs-gutter-x: 10px;
    }

    #salaryReportModal .formato-opcoes {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    #salaryReportModal .formato-item .btn-outline-secondary {
        padding: 10px 36px 10px 12px;
    }

    #paymentChoiceModal .payment-choice-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 12px 14px;
    }

    #paymentChoiceModal .payment-amount-card {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        column-gap: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--v2-card-divider);
        text-align: left;
    }

    #paymentChoiceModal .payment-amount {
        font-size: 22px;
    }

    #paymentChoiceModal .payment-amount-card small {
        width: 100%;
    }

    #paymentChoiceModal .payment-choice-options {
        gap: 8px;
    }

    #paymentChoiceModal .payment-option-card {
        padding: 10px 32px 10px 12px;
    }

    #paymentChoiceModal .payment-option input:checked + .payment-option-card::after {
        top: 10px;
        right: 10px;
    }

    #paymentChoiceModal .payment-option .option-value {
        font-size: 14.5px;
    }

    #paymentChoiceModal .payment-option .option-desc {
        font-size: 12px;
        line-height: 1.35;
    }

    #bulkPaymentModal .bulk-payment-toolbar {
        flex-wrap: nowrap;
        padding: 10px 12px;
    }

    #bulkPaymentModal .bulk-total-card strong {
        font-size: 19px;
    }

    body[data-support-page="salarios"] #bulkPaymentModal #bulkPaymentSelectAll {
        min-height: 40px;
        white-space: normal;
        line-height: 1.2;
    }

    #bulkPaymentModal .bulk-payment-item {
        padding: 12px;
    }

    #bulkPaymentModal .bulk-options .form-check-input {
        width: 20px;
        height: 20px;
    }

    #bulkPaymentModal .bulk-options .form-check {
        min-height: 32px;
    }

    #bulkPaymentModal .bulk-partial-input :is(.form-control, .input-group-text) {
        min-height: 44px;
        font-size: 16px;
    }

    #addAdjustmentModal .btn-group .btn {
        min-height: 40px;
    }

    #addAdjustmentModal .modal-body .row.g-3 {
        --bs-gutter-y: 12px;
    }

    #withdrawalReceiptModal .withdrawal-receipt-card {
        padding: 16px;
    }

    #withdrawalReceiptModal .withdrawal-receipt-card .mt-3 {
        margin-top: 10px !important;
    }

    #withdrawalReceiptModal .modal-body > .row {
        --bs-gutter-y: 10px;
    }

    #withdrawalReceiptModal .modal-body .d-flex.flex-column.gap-3 {
        gap: 10px !important;
    }

    #withdrawalReceiptModal #receiptKeyInfoRow {
        --bs-gutter-x: 10px;
    }

    #salaryDetailsModal .card-body {
        padding: 2px 14px 12px;
    }

    #salaryDetailsModal .commission-adjustment-detail-item {
        flex-direction: column;
        gap: 6px;
    }

    #salaryDetailsModal .commission-adjustment-side {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }

    #salaryDetailsModal .commission-adjustment-open-link {
        min-height: 32px;
    }

    #salaryDetailsModal .commission-adjustment-page-btn {
        min-height: 36px;
    }

    #feeSyncModal .fee-sync-item > .d-flex {
        flex-wrap: nowrap !important;
    }

    #feeSyncModal .fee-sync-item > .d-flex > div:first-child {
        min-width: 0;
    }

    #feeSyncModal .fee-sync-item > .d-flex > .text-end {
        flex-shrink: 0;
        max-width: 42%;
    }
}

/* ========================================
   LISTAS NO CELULAR v2 (25/09/2026)
   Mesmo desenho nas 4 listas (a pagar, carteira, saques, vales):
   1ª linha  foto + nome (1 linha) + função ......... status
   números   até 3 valores lado a lado (rótulo pequeno em cima)
   rodapé    ações "fantasma" à direita (Lançar à esquerda),
             separadas por uma divisória sutil
   Sobrescreve o layout de cards de ≤ 991px só no celular.
   ======================================== */
@media (max-width: 767.98px) {
    #modernMainContent :is(.salary-table-responsive, .wallet-table-responsive, .withdrawal-table-responsive, .advances-table-responsive) {
        padding: 10px;
    }

    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) tbody tr,
    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) tbody tr:nth-child(even),
    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) tbody tr:hover {
        column-gap: 0;
        row-gap: 0;
        margin-bottom: 10px;
        padding: 12px 14px;
        border-radius: 12px;
    }

    /* Nome: 15px, uma linha; função em cinza logo abaixo */
    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td[data-label="Profissional"] {
        align-self: center;
        margin: 0;
        padding-right: 10px !important;
    }

    #modernMainContent .salary-table--payout .professional-name,
    #modernMainContent :is(.wallet-table, .withdrawal-table) td[data-label="Profissional"] .fw-medium,
    #modernMainContent .advances-table .professional-mini .professional-name {
        overflow: hidden;
        color: var(--v2-text);
        font-size: 15px;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #modernMainContent .salary-table--payout .professional-role,
    #modernMainContent :is(.wallet-table, .withdrawal-table) td[data-label="Profissional"] small {
        color: var(--v2-muted) !important;
        font-size: 13px;
        line-height: 1.3;
    }

    #modernMainContent .salary-table--payout .professional-avatar,
    #modernMainContent :is(.wallet-table, .withdrawal-table) td[data-label="Profissional"] .professional-avatar {
        flex: 0 0 36px;
        width: 36px !important;
        height: 36px !important;
        margin-right: 10px !important;
    }

    #modernMainContent .salary-table--payout .professional-info {
        gap: 0;
    }

    /* Status: sempre na 1ª linha, à direita */
    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td[data-label="Status"] {
        grid-area: status;
        align-self: center;
        justify-self: end;
    }

    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table) td[data-label="Status"] :is(.status-badge, .wallet-status-pill, .withdrawal-status-pill) {
        padding: 3px 8px;
        font-size: 12px;
    }

    /* Números: rótulo pequeno + valor 14px, com divisória em cima */
    #modernMainContent .salary-table--payout td:is([data-label="Saldo Disponível"], [data-label="Comissão do Mês"], [data-label="Correções/Descontos"]),
    #modernMainContent .wallet-table td:is([data-label="Saldo Disponível"], [data-label="Última Movimentação"]),
    #modernMainContent .withdrawal-table td:is([data-label="Valor"], [data-label="Data/Hora"], [data-label="Método"]) {
        align-self: stretch;
        margin: 0;
        padding: 10px 0 0 !important;
        border-top: 0 !important;
        color: var(--v2-text);
        font-size: 14px;
        font-weight: 500;
        text-align: left;
    }

    /* Divisória acima dos números: uma linha inteira (o gap entre
       colunas não a interrompe) */
    #modernMainContent :is(.salary-table--payout, .wallet-table, .withdrawal-table, .advances-table) tbody tr:not(:has(> td[colspan]))::before {
        content: "";
        grid-area: sep;
        height: 1px;
        margin-top: 12px;
        background: var(--v2-card-divider);
    }

    #modernMainContent .salary-table--payout td:is([data-label="Saldo Disponível"], [data-label="Comissão do Mês"], [data-label="Correções/Descontos"])::before,
    #modernMainContent .wallet-table td:is([data-label="Saldo Disponível"], [data-label="Última Movimentação"])::before,
    #modernMainContent .withdrawal-table td:is([data-label="Valor"], [data-label="Data/Hora"], [data-label="Método"])::before {
        display: block;
        margin-bottom: 2px;
        color: var(--v2-muted);
        font-size: 11.5px;
        font-weight: 400;
        line-height: 1.3;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
    }

    /* Ações: linha própria, divisória sutil, botões fantasma 34px */
    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td[data-label="Ações"] {
        grid-area: acts;
        align-self: stretch;
        justify-self: stretch;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 10px 0 0;
        padding: 10px 0 0 !important;
        border-top: 1px solid var(--v2-card-divider) !important;
    }

    #modernMainContent :is(.salary-actions, .wallet-actions-row, .withdrawal-actions-row) {
        flex: 1 1 auto;
        justify-content: flex-end;
        align-items: center !important;
        height: auto !important;
        gap: 2px !important;
    }

    #modernMainContent :is(.salary-actions, .wallet-actions-row, .withdrawal-actions-row) .btn:not([data-action="process-payment"]),
    #modernMainContent .vale-action-btn,
    #modernMainContent :is(.salary-actions, .wallet-actions-row, .withdrawal-actions-row) .btn:not([data-action="process-payment"]):hover:not(:disabled),
    #modernMainContent .vale-action-btn:hover {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: var(--v2-muted);
    }

    #modernMainContent :is(.salary-actions, .wallet-actions-row, .withdrawal-actions-row) .btn:not([data-action="process-payment"]) i,
    #modernMainContent .vale-action-btn i {
        color: var(--v2-muted);
        font-size: 14px;
    }

    #modernMainContent :is([data-action="block-wallet"], [data-action="delete-withdrawal"]) i {
        color: var(--sl-red) !important;
    }

    #modernMainContent .salary-table--payout .btn[data-action="fee-history"] span {
        display: none;
    }

    /* Lançar: ação principal, texto pequeno à esquerda do rodapé */
    #modernMainContent .salary-actions .btn[data-action="process-payment"] {
        order: -1;
        min-width: 0;
        height: 34px;
        min-height: 34px;
        margin-right: auto;
        padding: 0 14px;
        border-radius: 9px;
    }

    #modernMainContent .salary-actions .btn[data-action="process-payment"] i {
        display: inline-block;
        font-size: 12px;
    }

    /* ---------- Valores a pagar ---------- */
    #modernMainContent .salary-table--payout tbody tr {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
        column-gap: 10px !important;
        grid-template-areas:
            "prof prof status"
            "sep sep sep"
            "saldo mes desc"
            "acts acts acts";
    }

    #modernMainContent .salary-table--payout td[data-label="Saldo Disponível"] { grid-area: saldo; }
    #modernMainContent .salary-table--payout td[data-label="Comissão do Mês"] { grid-area: mes; }

    #modernMainContent .salary-table--payout td[data-label="Correções/Descontos"] {
        grid-area: desc;
        padding-right: 0 !important;
        text-align: right;
    }

    #modernMainContent .salary-table--payout td[data-label="Saldo Disponível"]::before { content: "Saldo"; }
    #modernMainContent .salary-table--payout td[data-label="Comissão do Mês"]::before { content: "Comissão do mês"; }
    #modernMainContent .salary-table--payout td[data-label="Correções/Descontos"]::before { content: "Descontos"; }

    #modernMainContent .salary-table--payout .total-amount {
        font-size: 15px;
    }

    #modernMainContent .salary-table--payout :is(.salary-metric-chip, .salary-deduction-chip) {
        padding: 0;
        background: none;
        border: 0;
        font-size: 14px;
    }

    #modernMainContent .salary-deduction-prefix {
        display: none;
    }

    #modernMainContent .salary-table--payout tbody tr.salary-loading-row {
        grid-template-areas: "prof prof prof";
    }

    #modernMainContent .salary-table--payout tbody tr.salary-loading-row td[colspan] {
        grid-column: 1 / -1;
        margin-top: 8px;
        color: var(--v2-muted);
    }

    /* ---------- Carteira ---------- */
    #modernMainContent .wallet-table tbody tr {
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 10px !important;
        grid-template-areas:
            "prof status"
            "sep sep"
            "saldo last"
            "acts acts";
    }

    #modernMainContent .wallet-table td[data-label="Profissional"] {
        margin-bottom: 0;
    }

    #modernMainContent .wallet-table td[data-label="Saldo Disponível"] { grid-area: saldo; }

    #modernMainContent .wallet-table td[data-label="Última Movimentação"] {
        grid-area: last;
        padding-right: 0 !important;
        text-align: right;
    }

    #modernMainContent .wallet-table td[data-label="Saldo Disponível"]::before { content: "Saldo"; }
    #modernMainContent .wallet-table td[data-label="Última Movimentação"]::before { content: "Última movimentação"; }

    #modernMainContent .wallet-balance-chip {
        padding: 0;
        font-size: 15px;
    }

    #modernMainContent .wallet-table .wallet-last-movement {
        display: block !important;
        padding-left: 0 !important;
    }

    #modernMainContent .wallet-last-movement .fw-medium {
        color: var(--v2-text) !important;
        font-size: 14px;
        font-weight: 500 !important;
    }

    #modernMainContent .wallet-last-movement .fw-medium::before {
        content: none;
    }

    #modernMainContent .wallet-last-movement small {
        display: none;
    }

    /* ---------- Saques ---------- */
    #modernMainContent .withdrawal-table tbody tr {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 10px !important;
        grid-template-areas:
            "prof prof status"
            "sep sep sep"
            "valor date meth"
            "acts acts acts";
    }

    #modernMainContent .withdrawal-table td[data-label="Valor"] { grid-area: valor; }
    #modernMainContent .withdrawal-table td[data-label="Data/Hora"] { grid-area: date; }

    #modernMainContent .withdrawal-table td[data-label="Método"] {
        grid-area: meth;
        padding-right: 0 !important;
        text-align: right;
    }

    #modernMainContent .withdrawal-table td[data-label="Valor"]::before { content: "Valor"; }
    #modernMainContent .withdrawal-table td[data-label="Data/Hora"]::before { content: "Data"; }
    #modernMainContent .withdrawal-table td[data-label="Método"]::before { content: "Método"; }

    #modernMainContent .withdrawal-amount-chip {
        font-size: 15px;
        font-weight: 500;
    }

    #modernMainContent .withdrawal-table .withdrawal-date {
        display: block !important;
        padding-left: 0 !important;
    }

    #modernMainContent .withdrawal-table .withdrawal-date .fw-medium {
        font-weight: 500 !important;
    }

    #modernMainContent .withdrawal-table .withdrawal-date small {
        display: none;
    }

    #modernMainContent .withdrawal-table .withdrawal-method-chip {
        padding: 0;
        background: none;
        border: 0;
        color: var(--v2-text);
        font-size: 14px;
    }

    #modernMainContent .withdrawal-table .withdrawal-method-chip i {
        display: none;
    }

    /* ---------- Vales ----------
       O status é sempre "Descontado": no celular o valor ocupa o lugar dele.
       2ª linha: data · motivo, com o botão de detalhes à direita. */
    #modernMainContent .advances-table tbody tr {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-areas:
            "prof prof valor"
            "sep sep sep"
            "date motivo acts";
    }

    #modernMainContent .advances-table td[data-label="Status"] {
        display: none !important;
    }

    #modernMainContent .advances-table .professional-mini {
        min-width: 0;
    }

    #modernMainContent .advances-table td[data-label="Valor"] {
        grid-area: valor;
        align-self: center;
        text-align: right;
    }

    #modernMainContent .advances-table .vale-amount-chip {
        padding: 0;
        font-size: 15px;
        font-weight: 500;
    }

    #modernMainContent .advances-table td:is([data-label="Data"], [data-label="Motivo"]) {
        align-self: center;
        margin: 0;
        padding: 8px 0 0 !important;
        border-top: 0 !important;
        color: var(--v2-muted);
        text-align: left;
        font-size: 13px;
        font-weight: 400;
    }

    #modernMainContent .advances-table td[data-label="Data"] {
        grid-area: date;
    }

    #modernMainContent .advances-table td[data-label="Data"]::after {
        content: "·";
        margin: 0 6px;
        color: #b4bac4;
    }

    #modernMainContent .advances-table td[data-label="Motivo"] {
        grid-area: motivo;
    }

    #modernMainContent .advances-table .vale-description-text {
        display: block;
        overflow: hidden;
        color: var(--v2-muted);
        font-size: 13px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #modernMainContent .advances-table td[data-label="Ações"] {
        align-self: center;
        margin: 0;
        padding: 8px 0 0 6px !important;
        border-top: 0 !important;
    }

    /* Linhas de aviso (carregando / vazio) */
    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) tbody tr:has(> td[colspan].text-center) {
        grid-template-areas: none;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #modernMainContent :is(.salary-table, .wallet-table, .withdrawal-table, .advances-table) td[colspan].text-center {
        color: var(--v2-muted);
        font-size: 13px;
    }

    /* Paginação compacta e centralizada */
    #modernMainContent .table-pagination {
        justify-content: center;
        padding: 10px 12px;
    }

    body[data-support-page="salarios"] #modernMainContent .table-pagination .btn {
        width: 34px;
        height: 34px;
    }
}