/* Estilos para a página de mensalidades */
.mensalidades-page {
    padding: 20px;
}

.mensalidades-page .card {
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mensalidades-page .table th {
    font-weight: 600;
    background-color: #f8f9fa;
}

.mensalidades-page .badge {
    padding: 6px 12px;
    font-weight: 500;
}

.mensalidades-page .badge.bg-warning {
    color: #000;
}

/* Estilos para badges de status */
.badge.status-pendente {
    background-color: var(--bg-status-pending, rgba(230, 180, 0, 0.15));
    color: var(--color-status-pending, #e6b400);
}

.badge.status-pago {
    background-color: var(--bg-status-completed, rgba(76, 175, 80, 0.15));
    color: var(--color-status-completed, #4caf50);
}

.badge.status-atrasado {
    background-color: var(--bg-status-overdue, rgba(211, 47, 47, 0.15));
    color: var(--color-status-overdue, #d32f2f);
}

/* Estilos para o modal de mensalidades */
#mensalidadeModal .modal-header {
    background-color: var(--dark-surface, #1e1e1e);
    border-bottom: 1px solid var(--dark-border, rgba(255, 255, 255, 0.1));
}

#mensalidadeModal .modal-footer {
    background-color: var(--dark-surface, #1e1e1e);
    border-top: 1px solid var(--dark-border, rgba(255, 255, 255, 0.1));
}

/* Ajustes para responsividade */
@media (max-width: 768px) {
    .mensalidades-page .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .mensalidades-page .btn {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Estilos para os botões de ação */
.mensalidades-page .btn-sm {
    padding: 0.25rem 0.5rem;
    margin: 0 2px;
}

.mensalidades-page .btn-sm i {
    font-size: 0.875rem;
}