/* ==========================================================================
   Central do Tenista - Component Library
   Componentes visuais reutilizáveis para toda a plataforma
   ========================================================================== */

/* ==========================================================================
   App Layout (Sidebar + Content)
   ========================================================================== */

.ct-app {
    display: flex;
    min-height: 100vh;
}

.ct-sidebar {
    width: var(--ct-sidebar-width);
    background: linear-gradient(180deg, var(--ct-primary-dark) 0%, var(--ct-primary) 100%);
    color: var(--ct-white);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: transform var(--ct-transition-slow);
    overflow-y: auto;
}

.ct-sidebar-brand {
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ct-sidebar-logo-link {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.ct-sidebar-logo-link:hover,
.ct-sidebar-logo-link:focus {
    opacity: 0.92;
    outline: none;
}

.ct-sidebar-brand img.ct-sidebar-logo {
    max-width: 160px;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    /* Mesmo tratamento do sidebar legado (logo legível em fundo azul) */
    filter: brightness(0) invert(1);
}

.ct-sidebar-brand a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.ct-sidebar-brand-text {
    font-size: var(--ct-text-lg);
    font-weight: var(--ct-weight-bold);
    color: var(--ct-white);
    white-space: nowrap;
}

.ct-sidebar-nav {
    padding: var(--ct-space-4) 0;
    flex: 1;
}

.ct-sidebar-section {
    padding: var(--ct-space-2) var(--ct-space-4);
    margin-top: var(--ct-space-4);
}

.ct-sidebar-section-title {
    font-size: var(--ct-text-xs);
    font-weight: var(--ct-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.55);
    padding: 0 var(--ct-space-3);
    margin-bottom: var(--ct-space-2);
}

/* Participante: vários links no mesmo bloco — evita margin-top extra entre “seções” vazias */
.ct-sidebar-section--participante-nav {
    margin-top: var(--ct-space-3);
}
.ct-sidebar-section--participante-nav .ct-sidebar-link {
    margin-top: 0;
    margin-bottom: 0;
}

.ct-sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--ct-space-3);
    padding: var(--ct-space-3) var(--ct-space-4);
    margin: var(--ct-space-1) var(--ct-space-3);
    color: var(--ct-gray-300);
    text-decoration: none;
    font-size: var(--ct-text-sm);
    font-weight: var(--ct-weight-medium);
    border-radius: var(--ct-radius);
    transition: all var(--ct-transition-fast);
}

.ct-sidebar-link:hover {
    background: rgba(255,255,255,0.12);
    color: var(--ct-white);
}

.ct-sidebar-link.active {
    background: rgba(255,255,255,0.18);
    color: var(--ct-white);
    font-weight: var(--ct-weight-semibold);
    border-left: 3px solid var(--ct-white);
    padding-left: calc(var(--ct-space-3) - 3px);
}

button.ct-sidebar-submenu-toggle.ct-sidebar-link[aria-expanded="true"]:not(.active) {
    background: rgba(255,255,255,0.18);
    color: var(--ct-white);
    font-weight: var(--ct-weight-semibold);
    border-left: 3px solid var(--ct-white);
    padding-left: calc(var(--ct-space-4) - 3px);
}

.ct-sidebar-link.active i {
    color: var(--ct-white);
}

.ct-sidebar-link i {
    width: 20px;
    text-align: center;
    font-size: var(--ct-text-base);
    flex-shrink: 0;
}

button.ct-sidebar-submenu-toggle {
    display: flex;
    align-items: center;
    gap: var(--ct-space-3);
    width: calc(100% - 2 * var(--ct-space-3));
    margin: var(--ct-space-1) var(--ct-space-3);
    padding: var(--ct-space-3) var(--ct-space-4);
    border: none;
    background: transparent;
    color: var(--ct-gray-300);
    font: inherit;
    font-size: var(--ct-text-sm);
    font-weight: var(--ct-weight-medium);
    cursor: pointer;
    text-align: left;
    border-radius: var(--ct-radius);
    transition: all var(--ct-transition-fast);
}

button.ct-sidebar-submenu-toggle:hover {
    background: rgba(255,255,255,0.12);
    color: var(--ct-white);
}

button.ct-sidebar-submenu-toggle .ct-sidebar-submenu-chevron {
    margin-left: auto;
    width: 14px;
    font-size: var(--ct-text-xs);
    transition: transform var(--ct-transition-fast);
}

button.ct-sidebar-submenu-toggle[aria-expanded="true"] .ct-sidebar-submenu-chevron {
    transform: rotate(180deg);
}

.ct-sidebar-submenu {
    padding: 0 var(--ct-space-3) var(--ct-space-2) var(--ct-space-3);
}

.ct-sidebar-submenu[hidden] {
    display: none !important;
}

.ct-sidebar-submenu .ct-sidebar-submenu-link {
    margin-left: var(--ct-space-5);
    margin-right: var(--ct-space-2);
    padding: var(--ct-space-2) var(--ct-space-3);
    font-size: 0.88rem;
}

.ct-sidebar-submenu .ct-sidebar-submenu-link i {
    width: 18px;
    font-size: var(--ct-text-sm);
}

.ct-sidebar-badge {
    margin-left: auto;
    background: var(--ct-danger);
    color: var(--ct-white);
    font-size: 0.65rem;
    font-weight: var(--ct-weight-bold);
    padding: 2px 6px;
    border-radius: var(--ct-radius-full);
    min-width: 18px;
    text-align: center;
}

.ct-sidebar-footer {
    padding: var(--ct-space-4) var(--ct-space-6);
    border-top: 1px solid rgba(255,255,255,0.15);
}

.ct-sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--ct-space-3);
}

.ct-sidebar-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--ct-radius-full);
    background: var(--ct-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--ct-weight-semibold);
    font-size: var(--ct-text-sm);
    flex-shrink: 0;
}

.ct-sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.ct-sidebar-user-name {
    font-size: var(--ct-text-sm);
    font-weight: var(--ct-weight-semibold);
    color: var(--ct-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-sidebar-user-role {
    font-size: var(--ct-text-xs);
    color: var(--ct-white);
}

/* Main Content */
.ct-main {
    flex: 1;
    margin-left: var(--ct-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.ct-topbar {
    height: var(--ct-topbar-height);
    background: var(--ct-white);
    border-bottom: 1px solid var(--ct-gray-200);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--ct-space-8);
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Linha sutil na cor da marca (liga topo à sidebar sem peso visual) */
.ct-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ct-primary-dark) 0%, var(--ct-primary) 40%, transparent 100%);
    opacity: 0.2;
    pointer-events: none;
}

.ct-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--ct-space-4);
}

.ct-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--ct-space-4);
}

.ct-topbar-toggle {
    display: none;
    background: none;
    border: none;
    font-size: var(--ct-text-xl);
    color: var(--ct-gray-600);
    cursor: pointer;
    padding: var(--ct-space-2);
}

.ct-content {
    flex: 1;
    padding: var(--ct-space-8);
    max-width: var(--ct-content-max-width);
    width: 100%;
}

/* Mobile sidebar */
.ct-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1039;
}

@media (max-width: 991px) {
    .ct-sidebar {
        transform: translateX(-100%);
    }

    .ct-sidebar.open {
        transform: translateX(0);
    }

    .ct-sidebar.open + .ct-sidebar-overlay {
        display: block;
    }

    .ct-main {
        margin-left: 0;
    }

    .ct-topbar-toggle {
        display: block;
    }

    .ct-content {
        padding: var(--ct-space-4);
    }
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.ct-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--ct-space-8);
    flex-wrap: wrap;
    gap: var(--ct-space-4);
}

.ct-page-title {
    font-size: var(--ct-text-2xl);
    font-weight: var(--ct-weight-bold);
    color: var(--ct-text-heading);
    line-height: var(--ct-leading-tight);
    margin: 0;
}

.ct-page-subtitle {
    font-size: var(--ct-text-sm);
    color: var(--ct-text-secondary);
    margin-top: var(--ct-space-1);
}

.ct-page-header-actions {
    align-items: center;
}

.ct-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--ct-space-2);
    font-size: var(--ct-text-sm);
    color: var(--ct-text-secondary);
    margin-bottom: var(--ct-space-2);
}

.ct-breadcrumb a {
    color: var(--ct-primary);
    text-decoration: none;
}

.ct-breadcrumb a:hover {
    text-decoration: underline;
}

.ct-breadcrumb-separator {
    color: var(--ct-gray-300);
}

/* Top bar — saída usa o mesmo padrão do painel (ct-btn-pill-muted + ct-btn-toolbar) */

/* Toolbar: use sempre com .ct-btn (corrige cascata e mantém cantos = cards) */
.ct-btn.ct-btn-toolbar {
    border-radius: var(--ct-radius-lg);
    font-weight: var(--ct-weight-semibold);
    padding: var(--ct-space-3) var(--ct-space-5);
    gap: var(--ct-space-2);
    box-shadow: none;
}

.ct-btn.ct-btn-toolbar:hover:not(:disabled) {
    box-shadow: none;
}

.ct-btn-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: var(--ct-radius-sm);
    flex-shrink: 0;
    font-size: 0.8125rem;
}

.ct-btn-primary.ct-btn-toolbar .ct-btn-action-icon {
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
}

.ct-btn-outline-primary.ct-btn-toolbar .ct-btn-action-icon {
    background: var(--ct-primary-lighter);
    color: var(--ct-primary-dark);
}

.ct-btn.ct-btn-toolbar.ct-btn-sm {
    padding: var(--ct-space-2) var(--ct-space-4);
    font-size: var(--ct-text-xs);
    font-weight: var(--ct-weight-medium);
}

.ct-btn.ct-btn-toolbar.ct-btn-sm .ct-btn-action-icon {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.7rem;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.ct-card {
    background: var(--ct-white);
    border: 1px solid var(--ct-gray-200);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow-xs);
    transition: border-color var(--ct-transition-fast);
}

.ct-card:hover {
    box-shadow: var(--ct-shadow-xs);
    border-color: var(--ct-gray-300);
}

.ct-card-header {
    padding: var(--ct-space-5) var(--ct-space-6);
    border-bottom: 1px solid var(--ct-gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ct-space-4);
}

.ct-card-title {
    font-size: var(--ct-text-lg);
    font-weight: var(--ct-weight-semibold);
    color: var(--ct-text-heading);
    margin: 0;
}

/* Ícone + título no cabeçalho de card (padrão Quadras / Início) */
.ct-card-heading-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--ct-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ct-primary-lighter);
    color: var(--ct-primary);
}
.ct-card-heading-icon i {
    font-size: 1.25rem;
    line-height: 1;
}

/* Professores (clube) — filtro no cabeçalho do card */
.ct-professores-filtro-nome {
    min-width: 260px;
    width: 300px;
    max-width: 100%;
}
@media (max-width: 576px) {
    .ct-professores-filtro-nome {
        width: 100%;
        min-width: 0;
    }
}

.ct-card-heading-icon--tone-secondary {
    background: rgba(5, 150, 105, 0.12);
    color: var(--ct-secondary);
}

.ct-card-heading-icon--tone-slate {
    background: var(--ct-gray-100);
    color: var(--ct-gray-600);
}

.ct-card-heading-icon--tone-amber {
    background: var(--ct-accent-lighter);
    color: var(--ct-warning);
}

/* Tom info — fundo azul bem claro (gráfico / métricas), alinhado ao mock de ícone da plataforma */
.ct-card-heading-icon--tone-info {
    background: var(--ct-info-light);
    color: var(--ct-info);
}

/* Cabeçalhos compactos (ex.: modal) */
.ct-card-heading-icon--sm {
    width: 40px;
    height: 40px;
    border-radius: var(--ct-radius-md);
}
.ct-card-heading-icon--sm i {
    font-size: 1.1rem;
}

.ct-card-body {
    padding: var(--ct-space-6);
}

.ct-card-footer {
    padding: var(--ct-space-4) var(--ct-space-6);
    border-top: 1px solid var(--ct-gray-100);
    background: var(--ct-gray-25);
    border-radius: 0 0 var(--ct-radius-lg) var(--ct-radius-lg);
}

/* ==========================================================================
   Stats Card (KPI)
   ========================================================================== */

.ct-stats-card {
    background: var(--ct-white);
    border: 1px solid var(--ct-gray-200);
    border-radius: var(--ct-radius-lg);
    padding: var(--ct-space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--ct-space-4);
    transition: all var(--ct-transition);
}

.ct-stats-card:hover {
    box-shadow: var(--ct-shadow-xs);
    border-color: var(--ct-gray-300);
}

/* Saldo disponível — mesmo tamanho dos outros KPIs, fundo marca e texto branco */
.ct-stats-card.ct-stats-card--balance {
    background: linear-gradient(135deg, var(--ct-primary) 0%, var(--ct-primary-dark) 100%);
    border: 1px solid color-mix(in srgb, var(--ct-primary-dark) 45%, transparent);
    color: #fff;
}
.ct-stats-card.ct-stats-card--balance:hover {
    border-color: color-mix(in srgb, var(--ct-primary-dark) 55%, transparent);
    box-shadow: var(--ct-shadow-sm);
}
.ct-stats-card.ct-stats-card--balance .ct-stats-icon.primary {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
}
.ct-stats-card.ct-stats-card--balance .ct-stats-label {
    color: rgba(255, 255, 255, 0.92);
}
.ct-stats-card.ct-stats-card--balance .ct-stats-value {
    color: #fff;
}

.ct-stats-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--ct-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ct-text-xl);
    flex-shrink: 0;
}

.ct-stats-icon.primary {
    background: var(--ct-primary-lighter);
    color: var(--ct-primary);
}

.ct-stats-icon.success {
    background: var(--ct-success-light);
    color: var(--ct-success);
}

.ct-stats-icon.warning {
    background: var(--ct-warning-light);
    color: var(--ct-warning);
}

.ct-stats-icon.danger {
    background: var(--ct-danger-light);
    color: var(--ct-danger);
}

.ct-stats-icon.info {
    background: var(--ct-info-light);
    color: var(--ct-info);
}

.ct-stats-content {
    flex: 1;
    min-width: 0;
}

.ct-stats-label {
    font-size: var(--ct-text-sm);
    color: var(--ct-text-secondary);
    font-weight: var(--ct-weight-medium);
    margin-bottom: var(--ct-space-1);
}

.ct-stats-value {
    font-size: var(--ct-text-2xl);
    font-weight: var(--ct-weight-bold);
    color: var(--ct-text-heading);
    line-height: 1;
}

.ct-stats-change {
    display: inline-flex;
    align-items: center;
    gap: var(--ct-space-1);
    font-size: var(--ct-text-xs);
    font-weight: var(--ct-weight-medium);
    margin-top: var(--ct-space-2);
    padding: 2px 8px;
    border-radius: var(--ct-radius-full);
}

.ct-stats-change.up {
    color: var(--ct-success);
    background: var(--ct-success-light);
}

.ct-stats-change.down {
    color: var(--ct-danger);
    background: var(--ct-danger-light);
}

/* Singular aliases used in admin/club/participant views */
.ct-stat-card { background: var(--ct-white); border: 1px solid var(--ct-gray-200); border-radius: var(--ct-radius-lg); padding: var(--ct-space-5); display: flex; align-items: center; gap: var(--ct-space-4); transition: border-color var(--ct-transition-fast), box-shadow var(--ct-transition-fast); height: 100%; }
.ct-stat-card:hover { box-shadow: var(--ct-shadow-xs); border-color: var(--ct-gray-300); }
.ct-stat-icon { width: 44px; height: 44px; border-radius: var(--ct-radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--ct-text-lg); flex-shrink: 0; }

.ct-stat-icon--primary {
    background: var(--ct-primary-lighter);
    color: var(--ct-primary-dark);
}

/* Destaque em azul (marca), alternativa ao verde em KPIs */
.ct-stat-icon--secondary {
    background: var(--ct-secondary-lighter);
    color: var(--ct-secondary);
}

.ct-stat-icon--warning {
    background: var(--ct-warning-light);
    color: var(--ct-warning);
}

.ct-stat-icon--muted {
    background: var(--ct-gray-100);
    color: var(--ct-gray-600);
}

.ct-stat-icon--success {
    background: var(--ct-success-light);
    color: var(--ct-success);
}

/* Sucesso em modal / feedback (tons do DS, sem hex solto nas views) */
.ct-feedback-success-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--ct-space-4);
    background: var(--ct-success-light);
    border-radius: var(--ct-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-feedback-success-icon i {
    font-size: 2rem;
    color: var(--ct-success);
}
.ct-stat-info { flex: 1; min-width: 0; }
.ct-stat-value { font-size: var(--ct-text-xl); font-weight: var(--ct-weight-bold); color: var(--ct-text-heading); line-height: 1.2; }
.ct-stat-label { font-size: var(--ct-text-xs); color: var(--ct-text-secondary); font-weight: var(--ct-weight-medium); margin-top: var(--ct-space-1); }

/* Painel do Clube — título de página igual ao “Painel do Clube” em todas as seções */
.ct-main--clube .ct-page-title,
.ct-clube-dashboard .ct-page-title {
    color: var(--ct-gray-700);
    font-weight: var(--ct-weight-semibold);
}

/* Painel do Clube — cinzas e ícones KPI 48px (mesmo ritmo do Participante) */
.ct-clube-dashboard .ct-stat-icon {
    width: 48px;
    height: 48px;
}
.ct-clube-dashboard .ct-stat-icon i {
    font-size: 1.25rem;
    line-height: 1;
}
.ct-clube-dashboard .ct-stat-value {
    color: var(--ct-gray-700);
    font-weight: var(--ct-weight-semibold);
}
.ct-clube-dashboard .ct-card-title {
    color: var(--ct-gray-700);
}
.ct-clube-dashboard .table thead th {
    color: var(--ct-text-secondary);
    font-weight: var(--ct-weight-medium);
}
.ct-clube-dashboard .table tbody td strong {
    color: var(--ct-gray-700);
    font-weight: var(--ct-weight-semibold);
}
.ct-clube-dashboard .mb-3 .fw-semibold {
    color: var(--ct-gray-600);
}

/* ==========================================================================
   Badges
   ========================================================================== */

.ct-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ct-space-1);
    padding: 3px 10px;
    font-size: var(--ct-text-xs);
    font-weight: var(--ct-weight-semibold);
    border-radius: var(--ct-radius-full);
    white-space: nowrap;
}

.ct-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--ct-radius-full);
    flex-shrink: 0;
}

.ct-badge-success, .ct-badge-ativo, .ct-badge-pago, .ct-badge-confirmada, .ct-badge-concluido {
    background: var(--ct-success-light);
    color: var(--ct-success);
}
.ct-badge-success .ct-badge-dot { background: var(--ct-success); }

.ct-badge-warning, .ct-badge-pendente, .ct-badge-atrasada {
    background: var(--ct-warning-light);
    color: var(--ct-warning);
}
.ct-badge-warning .ct-badge-dot { background: var(--ct-warning); }

.ct-badge-danger, .ct-badge-cancelado, .ct-badge-cancelada, .ct-badge-inadimplente, .ct-badge-rejeitado {
    background: var(--ct-danger-light);
    color: var(--ct-danger);
}
.ct-badge-danger .ct-badge-dot { background: var(--ct-danger); }

.ct-badge-info, .ct-badge-agendado, .ct-badge-agendada, .ct-badge-trial {
    background: var(--ct-info-light);
    color: var(--ct-info);
}
.ct-badge-info .ct-badge-dot { background: var(--ct-info); }

.ct-badge-neutral, .ct-badge-inativo, .ct-badge-rascunho {
    background: var(--ct-gray-100);
    color: var(--ct-gray-600);
}
.ct-badge-neutral .ct-badge-dot { background: var(--ct-gray-400); }

.ct-badge-primary {
    background: var(--ct-primary-lighter);
    color: var(--ct-primary);
}
.ct-badge-primary .ct-badge-dot { background: var(--ct-primary); }

/* ==========================================================================
   Tables
   ========================================================================== */

.ct-table-wrapper {
    background: var(--ct-white);
    border: 1px solid var(--ct-gray-200);
    border-radius: var(--ct-radius-lg);
    overflow: hidden;
}

.ct-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ct-text-sm);
}

.ct-table thead {
    background: var(--ct-gray-50);
    border-bottom: 1px solid var(--ct-gray-200);
}

.ct-table th {
    padding: var(--ct-space-3) var(--ct-space-4);
    text-align: left;
    font-weight: var(--ct-weight-semibold);
    color: var(--ct-text-secondary);
    font-size: var(--ct-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.ct-table td {
    padding: var(--ct-space-4);
    border-bottom: 1px solid var(--ct-gray-100);
    color: var(--ct-text-body);
    vertical-align: middle;
}

.ct-table tbody tr:last-child td {
    border-bottom: none;
}

.ct-table tbody tr {
    transition: background var(--ct-transition-fast);
}

.ct-table tbody tr:hover {
    background: var(--ct-gray-25);
}

.ct-table-cell-main {
    font-weight: var(--ct-weight-medium);
    color: var(--ct-text-heading);
}

.ct-table-actions {
    display: flex;
    align-items: center;
    gap: var(--ct-space-2);
}

.ct-table-empty {
    text-align: center;
    padding: var(--ct-space-16) var(--ct-space-8);
    color: var(--ct-gray-400);
}

.ct-table-empty i {
    font-size: 3rem;
    margin-bottom: var(--ct-space-4);
    display: block;
}

.ct-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ct-space-2);
    padding: var(--ct-space-3) var(--ct-space-4);
    font-size: var(--ct-text-sm);
    font-weight: var(--ct-weight-semibold);
    font-family: var(--ct-font-sans);
    border-radius: var(--ct-radius-lg);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--ct-transition-fast), border-color var(--ct-transition-fast), color var(--ct-transition-fast);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
    box-shadow: none;
}

.ct-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ct-btn:focus-visible {
    outline: 2px solid var(--ct-primary-light);
    outline-offset: 2px;
}

.ct-btn-sm {
    padding: var(--ct-space-2) var(--ct-space-3);
    font-size: var(--ct-text-xs);
    font-weight: var(--ct-weight-medium);
}

.ct-btn-lg {
    padding: var(--ct-space-4) var(--ct-space-6);
    font-size: var(--ct-text-base);
}

.ct-btn-primary {
    background: var(--ct-primary);
    color: var(--ct-white);
    border-color: var(--ct-primary);
}

.ct-btn-primary:hover:not(:disabled) {
    background: var(--ct-primary-dark);
    border-color: var(--ct-primary-dark);
    color: var(--ct-white);
}

/* Secundário = outline neutro (padrão institucional) */
.ct-btn-secondary {
    background: var(--ct-white);
    color: var(--ct-text-secondary);
    border-color: var(--ct-gray-300);
}

.ct-btn-secondary:hover:not(:disabled) {
    background: var(--ct-gray-50);
    color: var(--ct-gray-800);
    border-color: var(--ct-gray-400);
}

/* Primário em contorno — hierarquia abaixo do preenchido */
.ct-btn-outline-primary {
    background: var(--ct-white);
    color: var(--ct-primary);
    border-color: rgba(var(--ct-primary-rgb), 0.45);
}

.ct-btn-outline-primary:hover:not(:disabled) {
    background: var(--ct-primary-lighter);
    color: var(--ct-primary-dark);
    border-color: var(--ct-primary);
}

/**
 * Ação sólida primária — mesmo padrão do botão "Buscar" na home pública:
 * fundo azul marca, texto e ícone brancos, cantos arredondados, peso forte.
 * Uso: <button class="ct-btn-solid-action"> / <a class="ct-btn-solid-action" href="...">
 */
.ct-btn-solid-action,
a.ct-btn-solid-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    font-family: var(--ct-font-sans, 'Roboto', system-ui, sans-serif);
    color: #fff !important;
    background: var(--ct-primary);
    border: none;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.ct-btn-solid-action:hover {
    background: var(--ct-primary-dark);
    color: #fff !important;
    transform: translateY(-1px);
}

.ct-btn-solid-action:active {
    transform: translateY(0);
}

.ct-btn-solid-action:focus-visible {
    outline: 2px solid var(--ct-primary-light);
    outline-offset: 2px;
}

.ct-btn-solid-action i {
    color: #fff !important;
    font-size: 0.9rem;
}

button.ct-btn-solid-action:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Neutro: ações secundárias sem cor de marca */
.ct-btn-neutral {
    background: var(--ct-white);
    color: var(--ct-text-secondary);
    border-color: var(--ct-gray-300);
}

.ct-btn-neutral:hover:not(:disabled) {
    background: var(--ct-gray-50);
    color: var(--ct-gray-800);
    border-color: var(--ct-gray-400);
}

/* Sucesso = confirmações pontuais (não é cor principal da UI) */
.ct-btn-success {
    background: var(--ct-success);
    color: var(--ct-white);
    border-color: var(--ct-success);
}

.ct-btn-success:hover:not(:disabled) {
    background: #14532d;
    border-color: #14532d;
}

.ct-btn-danger {
    background: var(--ct-danger);
    color: var(--ct-white);
    border-color: var(--ct-danger);
}

.ct-btn-danger:hover:not(:disabled) {
    background: #B91C1C;
}

.ct-btn-ghost {
    background: transparent;
    color: var(--ct-text-secondary);
    border-color: transparent;
}

.ct-btn-ghost:hover:not(:disabled) {
    background: var(--ct-gray-100);
    color: var(--ct-gray-800);
}

.ct-btn-icon {
    padding: var(--ct-space-2);
    width: 36px;
    height: 36px;
    border-radius: var(--ct-radius-lg);
}

.ct-btn-icon.ct-btn-sm {
    width: 28px;
    height: 28px;
    padding: var(--ct-space-1);
}

/* Variante “pill” = mesmo raio/padding do .ct-btn base (mantém classe por compatibilidade) */
.ct-btn.ct-btn-pill {
    border-radius: var(--ct-radius-lg);
}

.ct-btn.ct-btn-pill > i:first-child {
    font-size: 0.9375rem;
    line-height: 1;
}

.ct-btn.ct-btn-toolbar.ct-btn-pill {
    padding: var(--ct-space-3) var(--ct-space-5);
}

.ct-btn.ct-btn-toolbar.ct-btn-sm.ct-btn-pill {
    padding: var(--ct-space-2) var(--ct-space-4);
    font-size: var(--ct-text-xs);
}

/* Secundário neutro (equivalente ao “botão claro” de referência, com cinzas da marca) */
.ct-btn-pill-muted {
    background: var(--ct-gray-100);
    color: var(--ct-text-secondary);
    border-color: var(--ct-gray-200);
}

.ct-btn-pill-muted:hover:not(:disabled) {
    background: var(--ct-gray-200);
    color: var(--ct-gray-700);
    border-color: var(--ct-gray-300);
}

.ct-btn-primary.ct-btn-pill:hover:not(:disabled) {
    color: var(--ct-white);
}

/* ==========================================================================
   Form Controls
   ========================================================================== */

.ct-form-group {
    margin-bottom: var(--ct-space-5);
}

.ct-label {
    display: block;
    font-size: var(--ct-text-sm);
    font-weight: var(--ct-weight-medium);
    color: var(--ct-text-body);
    margin-bottom: var(--ct-space-2);
}

.ct-label-required::after {
    content: ' *';
    color: var(--ct-danger);
}

.ct-input {
    width: 100%;
    padding: var(--ct-space-2) var(--ct-space-3);
    font-size: var(--ct-text-sm);
    font-family: var(--ct-font-sans);
    color: var(--ct-text-body);
    background: var(--ct-white);
    border: 1px solid var(--ct-gray-300);
    border-radius: var(--ct-radius);
    transition: all var(--ct-transition-fast);
    line-height: 1.5;
}

.ct-input:focus {
    outline: none;
    border-color: var(--ct-primary);
    box-shadow: 0 0 0 3px rgba(var(--ct-primary-rgb), 0.1);
}

.ct-input::placeholder {
    color: var(--ct-gray-400);
}

.ct-input.error {
    border-color: var(--ct-danger);
}

.ct-input.error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.ct-input-lg {
    padding: var(--ct-space-3) var(--ct-space-4);
    font-size: var(--ct-text-base);
}

.ct-input-icon-wrapper {
    position: relative;
}

.ct-input-icon-wrapper .ct-input {
    padding-left: 2.5rem;
}

.ct-input-icon-wrapper i {
    position: absolute;
    left: var(--ct-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ct-gray-400);
    font-size: var(--ct-text-sm);
}

select.ct-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

textarea.ct-input {
    resize: vertical;
    min-height: 80px;
}

.ct-form-helper {
    font-size: var(--ct-text-xs);
    color: var(--ct-text-tertiary);
    margin-top: var(--ct-space-1);
}

.ct-form-error {
    font-size: var(--ct-text-xs);
    color: var(--ct-danger);
    margin-top: var(--ct-space-1);
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.ct-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--ct-space-3);
    padding: var(--ct-space-4);
    border-radius: var(--ct-radius-lg);
    font-size: var(--ct-text-sm);
    border: 1px solid transparent;
}

.ct-alert-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.ct-alert-success {
    background: var(--ct-success-light);
    color: var(--ct-success);
    border-color: rgba(22, 101, 52, 0.2);
}

.ct-alert-warning {
    background: var(--ct-warning-light);
    color: var(--ct-warning);
    border-color: rgba(180, 83, 9, 0.22);
}

.ct-alert-danger {
    background: var(--ct-danger-light);
    color: var(--ct-danger);
    border-color: rgba(185, 28, 28, 0.22);
}

.ct-alert-info {
    background: var(--ct-info-light);
    color: var(--ct-info);
    border-color: rgba(3, 105, 161, 0.22);
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.ct-empty-state {
    text-align: center;
    padding: var(--ct-space-16) var(--ct-space-8);
}

.ct-empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--ct-space-6);
    background: var(--ct-gray-100);
    border-radius: var(--ct-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--ct-gray-400);
}

.ct-empty-state-title {
    font-size: var(--ct-text-lg);
    font-weight: var(--ct-weight-semibold);
    color: var(--ct-text-heading);
    margin-bottom: var(--ct-space-2);
}

.ct-empty-state-text {
    font-size: var(--ct-text-sm);
    color: var(--ct-text-secondary);
    max-width: 400px;
    margin: 0 auto var(--ct-space-6);
}

/* ==========================================================================
   Filter Bar
   ========================================================================== */

.ct-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--ct-space-3);
    padding: var(--ct-space-4) var(--ct-space-6);
    background: var(--ct-white);
    border: 1px solid var(--ct-gray-200);
    border-radius: var(--ct-radius-lg);
    box-shadow: none;
    margin-bottom: var(--ct-space-6);
    flex-wrap: wrap;
}

.ct-filter-search {
    flex: 1;
    min-width: 200px;
}

.ct-filter-select {
    min-width: 160px;
}

.ct-filter-date {
    min-width: 140px;
}

/* ==========================================================================
   Modals
   ========================================================================== */

.ct-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--ct-space-4);
    animation: ctFadeIn var(--ct-transition);
}

.ct-modal-backdrop.show {
    display: flex;
}

.ct-modal {
    background: var(--ct-white);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow-lg);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    animation: ctSlideUp var(--ct-transition-slow);
}

.ct-modal-lg { max-width: 720px; }
.ct-modal-xl { max-width: 960px; }

.ct-modal-header {
    padding: var(--ct-space-6);
    border-bottom: 1px solid var(--ct-gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ct-space-4);
}

.ct-modal-header__title-row {
    display: flex;
    align-items: center;
    gap: var(--ct-space-3);
    min-width: 0;
    flex: 1;
}

.ct-modal-title {
    font-size: var(--ct-text-lg);
    font-weight: var(--ct-weight-semibold);
    margin: 0;
    color: var(--ct-text-heading);
}

/* Mesmo cinza dos títulos de card na Visão geral (.ct-clube-dashboard .ct-card-title) */
.ct-modal-title--panel-clube {
    color: var(--ct-gray-700);
    font-weight: var(--ct-weight-semibold);
}

.ct-modal-close {
    background: none;
    border: none;
    font-size: var(--ct-text-xl);
    color: var(--ct-gray-400);
    cursor: pointer;
    padding: var(--ct-space-1);
    border-radius: var(--ct-radius);
    transition: all var(--ct-transition-fast);
}

.ct-modal-close:hover {
    background: var(--ct-gray-100);
    color: var(--ct-gray-600);
}

.ct-modal-body {
    padding: var(--ct-space-6);
}

.ct-modal-footer {
    padding: var(--ct-space-4) var(--ct-space-6);
    border-top: 1px solid var(--ct-gray-100);
    display: flex;
    justify-content: flex-end;
    gap: var(--ct-space-3);
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */

.ct-toast-container {
    position: fixed;
    top: var(--ct-space-6);
    right: var(--ct-space-6);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: var(--ct-space-3);
}

.ct-toast {
    display: flex;
    align-items: center;
    gap: var(--ct-space-3);
    padding: var(--ct-space-4);
    background: var(--ct-white);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow-md);
    min-width: 320px;
    max-width: 480px;
    animation: ctSlideInRight var(--ct-transition-slow);
    border-left: 4px solid;
}

.ct-toast-success { border-left-color: var(--ct-success); }
.ct-toast-danger { border-left-color: var(--ct-danger); }
.ct-toast-warning { border-left-color: var(--ct-warning); }
.ct-toast-info { border-left-color: var(--ct-info); }

.ct-toast-icon {
    flex-shrink: 0;
    font-size: var(--ct-text-lg);
}

.ct-toast-success .ct-toast-icon { color: var(--ct-success); }
.ct-toast-danger .ct-toast-icon { color: var(--ct-danger); }
.ct-toast-warning .ct-toast-icon { color: var(--ct-warning); }
.ct-toast-info .ct-toast-icon { color: var(--ct-info); }

.ct-toast-content { flex: 1; }

.ct-toast-title {
    font-weight: var(--ct-weight-semibold);
    font-size: var(--ct-text-sm);
    color: var(--ct-text-heading);
}

.ct-toast-message {
    font-size: var(--ct-text-xs);
    color: var(--ct-text-secondary);
    margin-top: 2px;
}

.ct-toast-close {
    background: none;
    border: none;
    color: var(--ct-gray-400);
    cursor: pointer;
    padding: var(--ct-space-1);
    font-size: var(--ct-text-base);
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.ct-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ct-gray-200);
    border-top-color: var(--ct-primary);
    border-radius: var(--ct-radius-full);
    animation: ctSpin 0.6s linear infinite;
}

.ct-spinner-lg {
    width: 36px;
    height: 36px;
    border-width: 3px;
}

.ct-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

.ct-skeleton {
    background: linear-gradient(90deg, var(--ct-gray-100) 25%, var(--ct-gray-200) 50%, var(--ct-gray-100) 75%);
    background-size: 200% 100%;
    animation: ctShimmer 1.5s ease infinite;
    border-radius: var(--ct-radius);
}

.ct-skeleton-text {
    height: 14px;
    margin-bottom: var(--ct-space-2);
}

.ct-skeleton-title {
    height: 24px;
    width: 60%;
    margin-bottom: var(--ct-space-3);
}

/* ==========================================================================
   Calendar / Schedule
   ========================================================================== */

.ct-calendar {
    background: var(--ct-white);
    border: 1px solid var(--ct-gray-200);
    border-radius: var(--ct-radius-lg);
    overflow: hidden;
}

.ct-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ct-space-4) var(--ct-space-6);
    border-bottom: 1px solid var(--ct-gray-200);
}

.ct-calendar-title {
    font-size: var(--ct-text-lg);
    font-weight: var(--ct-weight-semibold);
    color: var(--ct-text-heading);
}

.ct-calendar-nav {
    display: flex;
    gap: var(--ct-space-2);
}

.ct-time-grid {
    display: grid;
    grid-template-columns: 80px repeat(var(--ct-calendar-cols, 1), 1fr);
    gap: 1px;
    background: var(--ct-gray-200);
}

.ct-time-label {
    background: var(--ct-gray-50);
    padding: var(--ct-space-2) var(--ct-space-3);
    font-size: var(--ct-text-xs);
    color: var(--ct-text-secondary);
    text-align: right;
    font-weight: var(--ct-weight-medium);
}

.ct-time-slot {
    background: var(--ct-white);
    padding: var(--ct-space-1);
    min-height: 60px;
    position: relative;
    cursor: pointer;
    transition: background var(--ct-transition-fast);
}

.ct-time-slot:hover {
    background: var(--ct-primary-lighter);
}

.ct-time-slot.occupied {
    cursor: default;
}

.ct-time-slot.blocked {
    background: var(--ct-gray-100);
    cursor: not-allowed;
}

.ct-slot-event {
    padding: var(--ct-space-1) var(--ct-space-2);
    border-radius: var(--ct-radius-sm);
    font-size: var(--ct-text-xs);
    font-weight: var(--ct-weight-medium);
    line-height: 1.3;
}

.ct-slot-event.reserva {
    background: var(--ct-primary-lighter);
    color: var(--ct-primary-dark);
    border-left: 3px solid var(--ct-primary);
}

.ct-slot-event.aula {
    background: var(--ct-primary-lighter);
    color: var(--ct-primary-dark);
    border-left: 3px solid var(--ct-primary);
}

.ct-slot-event.torneio {
    background: var(--ct-accent-lighter);
    color: #92400E;
    border-left: 3px solid var(--ct-accent);
}

.ct-slot-event.bloqueio {
    background: var(--ct-gray-200);
    color: var(--ct-gray-600);
    border-left: 3px solid var(--ct-gray-400);
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.ct-tabs {
    display: flex;
    border-bottom: 2px solid var(--ct-gray-200);
    gap: 0;
    overflow-x: auto;
}

.ct-tab {
    padding: var(--ct-space-3) var(--ct-space-5);
    font-size: var(--ct-text-sm);
    font-weight: var(--ct-weight-medium);
    color: var(--ct-text-secondary);
    border: none;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--ct-transition-fast);
}

.ct-tab:hover {
    color: var(--ct-text-body);
}

.ct-tab.active {
    color: var(--ct-primary);
    border-bottom-color: var(--ct-primary);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.ct-pagination {
    display: flex;
    align-items: center;
    gap: var(--ct-space-1);
}

.ct-pagination-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ct-gray-200);
    background: var(--ct-white);
    border-radius: var(--ct-radius-button);
    font-size: var(--ct-text-sm);
    color: var(--ct-gray-600);
    cursor: pointer;
    transition: all var(--ct-transition-fast);
}

.ct-pagination-btn:hover:not(:disabled) {
    background: var(--ct-gray-50);
    border-color: var(--ct-gray-300);
}

.ct-pagination-btn.active {
    background: var(--ct-primary);
    color: var(--ct-white);
    border-color: var(--ct-primary);
}

.ct-pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes ctFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ctSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ctSlideInRight {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

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

@keyframes ctShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   Modal — Realizar saque (clube)
   ========================================================================== */

.ct-modal-saque .ct-modal-saque__content {
    border: none;
    border-radius: var(--ct-radius-xl);
    box-shadow: var(--ct-shadow-lg);
    overflow: hidden;
}

.ct-modal-saque .ct-modal-saque__header {
    background: var(--ct-primary);
    color: var(--ct-white);
    border-bottom: none;
    padding: var(--ct-space-5) var(--ct-space-6);
}

.ct-modal-saque .ct-modal-saque__header .modal-title.ct-modal-saque__title,
.ct-modal-saque .ct-modal-saque__header .modal-title {
    font-size: var(--ct-text-lg);
    font-weight: var(--ct-weight-medium);
    letter-spacing: 0.01em;
    color: var(--ct-white) !important;
}

.ct-modal-saque .ct-modal-saque__body {
    padding: var(--ct-space-6);
}

.ct-modal-saque .ct-modal-saque__success {
    padding: var(--ct-space-8) var(--ct-space-6);
}

.ct-modal-saque .ct-modal-saque__saldo {
    display: flex;
    align-items: center;
    gap: var(--ct-space-4);
    padding: var(--ct-space-5);
    margin-bottom: var(--ct-space-6);
    background: var(--ct-gray-25);
    border: 1px solid var(--ct-gray-200);
    border-radius: var(--ct-radius-lg);
}

.ct-modal-saque .ct-modal-saque__saldo .ct-stat-value {
    font-size: var(--ct-text-2xl);
    font-weight: var(--ct-weight-bold);
    color: var(--ct-text-heading);
    font-variant-numeric: tabular-nums;
}

.ct-modal-saque .ct-modal-saque__pixbox {
    display: block;
    width: 100%;
    padding: var(--ct-space-3) var(--ct-space-4);
    font-size: var(--ct-text-sm);
    font-family: var(--ct-font-mono);
    color: var(--ct-text-body);
    line-height: var(--ct-leading-normal);
    word-break: break-all;
    background: var(--ct-gray-50);
    border: 1px solid var(--ct-gray-200);
    border-radius: var(--ct-radius);
}

.ct-modal-saque .ct-modal-saque__footer {
    border-top: 1px solid var(--ct-gray-200);
    background: var(--ct-gray-25);
    padding: var(--ct-space-4) var(--ct-space-6);
    gap: var(--ct-space-3);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ct-modal-saque input[type="number"].ct-input::-webkit-outer-spin-button,
.ct-modal-saque input[type="number"].ct-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ct-modal-saque input[type="number"].ct-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ==========================================================================
   Modal — Formulários do painel do clube (ex.: usuários em Configurações)
   Alinhado ao ct-modal-saque: header primário, corpo e rodapé do DS
   ========================================================================== */

.ct-modal-clube-form .ct-modal-clube-form__content {
    border: none;
    border-radius: var(--ct-radius-xl);
    box-shadow: var(--ct-shadow-lg);
    overflow: hidden;
}

.ct-modal-clube-form .ct-modal-clube-form__header {
    background: var(--ct-primary);
    color: var(--ct-white);
    border-bottom: none;
    padding: var(--ct-space-5) var(--ct-space-6);
}

.ct-modal-clube-form .ct-modal-clube-form__title {
    font-size: var(--ct-text-lg);
    font-weight: var(--ct-weight-semibold);
    letter-spacing: 0.01em;
    color: var(--ct-white) !important;
    margin: 0;
}

.ct-modal-clube-form .ct-modal-clube-form__body {
    padding: var(--ct-space-6);
    background: var(--ct-white);
}

.ct-modal-clube-form .ct-modal-clube-form__footer {
    border-top: 1px solid var(--ct-gray-200);
    background: var(--ct-gray-25);
    padding: var(--ct-space-4) var(--ct-space-6);
    gap: var(--ct-space-3);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ==========================================================================
   Modal — Recarga de créditos (participante / financeiro)
   Alinhado ao DS: cards, ct-btn, tokens --ct-primary
   ========================================================================== */

.ct-modal-recarga__dialog {
    max-width: 440px;
}

.ct-modal-recarga__content {
    border: none;
    border-radius: var(--ct-radius-xl);
    box-shadow: var(--ct-shadow-lg);
    overflow: hidden;
}

.ct-modal-recarga__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ct-space-4);
    padding: var(--ct-space-6);
    padding-bottom: var(--ct-space-4);
    border-bottom: 1px solid var(--ct-gray-100);
    background: var(--ct-white);
}

.ct-modal-recarga__headliner {
    display: flex;
    align-items: center;
    gap: var(--ct-space-3);
    min-width: 0;
}

.ct-modal-recarga__head-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--ct-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ct-primary-lighter);
    color: var(--ct-primary);
    font-size: 1.25rem;
    line-height: 1;
}

.ct-modal-recarga__head-icon--pix {
    background: var(--ct-info-light);
    color: var(--ct-info);
}

.ct-modal-recarga__head-icon--success {
    background: var(--ct-success-light);
    color: var(--ct-success);
}

.ct-modal-recarga__title {
    margin: 0;
    font-size: var(--ct-text-lg);
    font-weight: var(--ct-weight-semibold);
    color: var(--ct-text-heading);
    line-height: var(--ct-leading-tight);
}

.ct-modal-recarga__close {
    opacity: 0.65;
    margin-top: 2px;
}

.ct-modal-recarga__close:hover {
    opacity: 1;
}

.ct-modal-recarga__body {
    padding: var(--ct-space-6);
    padding-top: var(--ct-space-5);
}

.ct-modal-recarga__clube-solo {
    display: flex;
    align-items: flex-start;
    gap: var(--ct-space-2);
    font-size: var(--ct-text-sm);
    color: var(--ct-text-secondary);
    padding: var(--ct-space-3) var(--ct-space-4);
    background: var(--ct-gray-50);
    border: 1px solid var(--ct-gray-200);
    border-radius: var(--ct-radius-lg);
}

.ct-modal-recarga__clube-solo i {
    color: var(--ct-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

.ct-modal-recarga__select {
    border-color: var(--ct-gray-300);
    border-radius: var(--ct-radius);
    font-size: var(--ct-text-sm);
    padding: var(--ct-space-2) var(--ct-space-3);
    color: var(--ct-text-body);
}

.ct-modal-recarga__select:focus {
    border-color: var(--ct-primary);
    box-shadow: 0 0 0 3px rgba(var(--ct-primary-rgb), 0.1);
}

.ct-modal-recarga__money .ct-modal-recarga__money-prefix {
    background: var(--ct-gray-100);
    border-color: var(--ct-gray-300);
    color: var(--ct-text-secondary);
    font-size: var(--ct-text-sm);
    font-weight: var(--ct-weight-medium);
    border-radius: var(--ct-radius) 0 0 var(--ct-radius);
}

.ct-modal-recarga__money .ct-modal-recarga__money-input {
    border-radius: 0 var(--ct-radius) var(--ct-radius) 0;
    font-variant-numeric: tabular-nums;
}

.ct-modal-recarga__money:focus-within .ct-modal-recarga__money-prefix {
    border-color: var(--ct-primary);
}

.ct-modal-recarga__footer {
    border-top: 1px solid var(--ct-gray-100);
    background: var(--ct-gray-25);
    padding: var(--ct-space-4) var(--ct-space-6);
    gap: var(--ct-space-3);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ct-modal-recarga__footer--qr {
    justify-content: flex-end;
}

.ct-modal-recarga__footer--center {
    justify-content: center;
}

.ct-modal-recarga #recargaBtnGerar .recarga-btn-text {
    display: inline-flex;
    align-items: center;
    gap: var(--ct-space-2);
}

.ct-modal-recarga #recargaBtnGerar .recarga-btn-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--ct-space-2);
}

/* Passo QR */
.ct-modal-recarga__body--qr {
    text-align: center;
    padding-top: var(--ct-space-5);
}

.ct-modal-recarga__qr-label {
    font-size: var(--ct-text-xs);
    font-weight: var(--ct-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ct-text-tertiary);
    margin-bottom: var(--ct-space-1);
}

.ct-modal-recarga__qr-amount {
    font-size: var(--ct-text-3xl);
    font-weight: var(--ct-weight-bold);
    color: var(--ct-text-heading);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--ct-space-5);
    line-height: var(--ct-leading-tight);
}

.ct-modal-recarga__qr-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ct-space-4);
    margin-bottom: var(--ct-space-5);
    background: var(--ct-white);
    border: 1px solid var(--ct-gray-200);
    border-radius: var(--ct-radius-lg);
    box-shadow: var(--ct-shadow-xs);
}

.ct-modal-recarga__qr-img {
    display: block;
    max-width: 220px;
    width: 100%;
    height: auto;
    border-radius: var(--ct-radius);
}

.ct-modal-recarga__qr-hint {
    font-size: var(--ct-text-sm);
    color: var(--ct-text-secondary);
    margin-bottom: var(--ct-space-2);
    text-align: left;
}

.ct-modal-recarga__copy-row {
    margin-bottom: var(--ct-space-5);
}

.ct-modal-recarga__copy-input {
    text-align: left;
    font-size: var(--ct-text-xs);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ct-modal-recarga__copy-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    flex-shrink: 0;
    padding-left: var(--ct-space-4);
    padding-right: var(--ct-space-4);
}

.ct-modal-recarga__polling {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ct-space-2);
    flex-wrap: wrap;
    font-size: var(--ct-text-sm);
    color: var(--ct-text-secondary);
    margin: 0 auto;
}

.ct-modal-recarga__polling .ct-modal-recarga__spinner {
    color: var(--ct-primary);
    border-color: currentColor;
    border-right-color: transparent;
}

.ct-modal-recarga__polling--timeout {
    color: var(--ct-warning);
}

.ct-modal-recarga__polling--timeout i {
    flex-shrink: 0;
}

/* Sucesso */
.ct-modal-recarga__body--success {
    padding-top: var(--ct-space-8);
    padding-bottom: var(--ct-space-8);
}

.ct-modal-recarga__success-icon {
    font-size: 3.5rem;
    line-height: 1;
    color: var(--ct-success);
    margin-bottom: var(--ct-space-4);
}

.ct-modal-recarga__success-title {
    font-size: var(--ct-text-xl);
    font-weight: var(--ct-weight-semibold);
    color: var(--ct-text-heading);
    margin-bottom: var(--ct-space-2);
}

.ct-modal-recarga__success-msg {
    font-size: var(--ct-text-sm);
    color: var(--ct-text-secondary);
}

/* ==========================================================================
   Print Utilities
   ========================================================================== */

@media print {
    .ct-sidebar, .ct-topbar, .ct-btn, .ct-filter-bar {
        display: none !important;
    }

    .ct-main {
        margin-left: 0 !important;
    }

    .ct-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ==========================================================================
   Aliases: Aulas / Professores form + modal classes → sistema ct-* existente
   ========================================================================== */

/* Overlay de modal (abre via display:flex inline pelo JS) */
.ct-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--ct-space-4);
    box-sizing: border-box;
    overflow-y: auto;
    animation: ctFadeIn var(--ct-transition);
}

/* Labels de formulário */
.ct-form-label {
    display: block;
    font-size: var(--ct-text-sm);
    font-weight: var(--ct-weight-medium);
    color: var(--ct-text-body);
    margin-bottom: var(--ct-space-2);
}

/* Inputs e textareas */
.ct-form-control {
    width: 100%;
    padding: var(--ct-space-2) var(--ct-space-3);
    font-size: var(--ct-text-sm);
    font-family: var(--ct-font-sans);
    color: var(--ct-text-body);
    background: var(--ct-white);
    border: 1px solid var(--ct-gray-300);
    border-radius: var(--ct-radius);
    transition: all var(--ct-transition-fast);
    line-height: 1.5;
    box-sizing: border-box;
}

.ct-form-control:focus {
    outline: none;
    border-color: var(--ct-primary);
    box-shadow: 0 0 0 3px rgba(var(--ct-primary-rgb), 0.1);
}

.ct-form-control::placeholder {
    color: var(--ct-gray-400);
}

.ct-form-control--error,
.ct-form-control.error {
    border-color: var(--ct-danger);
}

.ct-form-control--error:focus,
.ct-form-control.error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Tamanho pequeno (filtros inline) */
.ct-form-control-sm {
    padding: 0.3rem 0.6rem;
    font-size: var(--ct-text-xs);
}

/* Selects */
.ct-form-select {
    width: 100%;
    padding: var(--ct-space-2) 2.5rem var(--ct-space-2) var(--ct-space-3);
    font-size: var(--ct-text-sm);
    font-family: var(--ct-font-sans);
    color: var(--ct-text-body);
    background: var(--ct-white)
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")
        no-repeat right 0.5rem center / 1.5em 1.5em;
    border: 1px solid var(--ct-gray-300);
    border-radius: var(--ct-radius);
    transition: all var(--ct-transition-fast);
    line-height: 1.5;
    appearance: none;
    box-sizing: border-box;
    cursor: pointer;
}

.ct-form-select:focus {
    outline: none;
    border-color: var(--ct-primary);
    box-shadow: 0 0 0 3px rgba(var(--ct-primary-rgb), 0.1);
}

.ct-form-select.ct-form-control-sm {
    padding: 0.3rem 2.2rem 0.3rem 0.6rem;
    font-size: var(--ct-text-xs);
}

/* Mensagem de feedback de erro */
.ct-form-feedback {
    font-size: var(--ct-text-xs);
    color: var(--ct-danger);
    margin-top: var(--ct-space-1);
    display: none;
}

.ct-form-feedback:not(:empty) {
    display: block;
}

/* Grupo com prefixo (ex.: R$) */
.ct-input-group {
    display: flex;
    align-items: stretch;
}

.ct-input-group .ct-form-control {
    border-radius: 0 var(--ct-radius) var(--ct-radius) 0;
    flex: 1 1 auto;
    min-width: 0;
}

.ct-input-group-text {
    display: flex;
    align-items: center;
    padding: var(--ct-space-2) var(--ct-space-3);
    font-size: var(--ct-text-sm);
    color: var(--ct-text-secondary);
    background: var(--ct-gray-50);
    border: 1px solid var(--ct-gray-300);
    border-right: none;
    border-radius: var(--ct-radius) 0 0 var(--ct-radius);
    white-space: nowrap;
}

/* Checkbox + label alinhados */
.ct-check-wrapper {
    display: flex;
    align-items: center;
    gap: var(--ct-space-2);
    cursor: pointer;
}

.ct-form-check {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--ct-primary);
    flex-shrink: 0;
}

/* Avatar circular (usado na tabela de professores) */
.ct-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ct-radius-full);
    background: var(--ct-gray-100);
    color: var(--ct-gray-600);
    font-weight: var(--ct-weight-semibold);
    font-size: var(--ct-text-sm);
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    line-height: 1;
}

.ct-avatar-sm {
    width: 30px;
    height: 30px;
    font-size: var(--ct-text-xs);
}

.ct-avatar-lg {
    width: 48px;
    height: 48px;
    font-size: var(--ct-text-base);
}