:root {
            --azul-principal: #1E3A8A;
            --azul-secundario: #3B82F6;
            --amarelo-principal: #F59E0B;
            --amarelo-secundario: #FBBF24;
        }
        body { background-color: #f8f9fa; font-family: "Segoe UI", Tahoma, sans-serif; }

        /* LOGIN */
        .login-container { background: linear-gradient(135deg, var(--azul-principal), var(--azul-secundario)); height: 100vh; display: flex; justify-content: center; align-items: center; }
        .login-card { background: white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); padding: 30px; width: 380px; }
        .login-card h2 { color: var(--azul-principal); text-align:center; margin-bottom: 25px; }

        /* NAVBAR */
        .navbar-custom { background: var(--azul-principal); }
        .nav-link { color: white !important; margin-right: 5px; border-radius: 5px; }
        .nav-link.active, .nav-link:hover { background: var(--azul-secundario); }

        /* PÁGINAS */
        .content { padding: 20px; height: calc(100vh - 56px); overflow-y: auto; }
        .page { display: none; }
        .page.active { display:block; }

        /* DASHBOARD */
        .card-dashboard { border-radius: 10px; color: white; text-align:center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: transform 0.3s; }
        .card-dashboard:hover { transform: translateY(-5px); }

        /* PLANILHA - MELHORIAS SIGNIFICATIVAS PARA VISUALIZAÇÃO */
        #spreadsheet-page .card-body { 
            overflow-x: auto; 
            overflow-y: auto; 
            max-width: 100%;
            padding: 0;
        }
        
        #leads-table { 
            font-size: 0.75rem; 
            width: auto; 
            min-width: 100%;
            table-layout: auto;
            margin-bottom: 0;
        }
        
        #leads-table th, #leads-table td { 
            padding: 6px 8px; 
            white-space: nowrap;
            vertical-align: middle; 
            max-width: 180px;
            overflow: hidden;
            text-overflow: ellipsis;
            border: 1px solid #dee2e6;
        }
        
        #leads-table thead th { 
            position: sticky; 
            top: 0; 
            background: var(--azul-principal) !important; 
            color: white; 
            z-index: 2; 
            font-weight: 600;
            border-bottom: 2px solid #dee2e6;
        }
        
        #leads-table tbody tr:nth-child(even) {
            background-color: rgba(0, 0, 0, 0.02);
        }
        
        #leads-table tbody tr:hover {
            background-color: rgba(0, 123, 255, 0.1);
        }
        
        /* Melhorar a visualização em telas menores */
        @media (max-width: 1600px) {
            #leads-table {
                font-size: 0.7rem;
            }
            #leads-table th, #leads-table td {
                padding: 4px 6px;
                max-width: 150px;
            }
        }
        
        @media (max-width: 1400px) {
            #leads-table {
                font-size: 0.65rem;
            }
            #leads-table th, #leads-table td {
                padding: 3px 5px;
                max-width: 130px;
            }
        }
        
        /* Container da tabela com controles de rolagem */
        .table-container {
            position: relative;
            max-height: 65vh;
            overflow: auto;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
        }
        
        /* Indicador de rolagem horizontal */
        .scroll-indicator {
            position: sticky;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            text-align: center;
            padding: 5px;
            font-size: 0.8rem;
            z-index: 3;
            display: none;
        }

        /* GRÁFICOS */
        .chart-container { width:100%; max-width:700px; margin: 0 auto; }

        /* BOTÕES */
        .btn-primary { background: var(--azul-principal); border: none; }
        .btn-primary:hover { background: var(--azul-secundario); }

        .coordinator-course-badge { background-color: var(--amarelo-principal); color: white; padding:5px 10px; border-radius:20px; font-size:0.9rem; margin-left:10px; }
        .edit-total-btn { position:absolute; right:10px; top:10px; }
        .edit-total-form { display:none; }
        .conversion-by-course { margin-top:20px; padding:15px; background-color:#f8f9fa; border-radius:10px; }
        .course-conversion-card { margin-bottom:15px; }

        /* small helper for admin units grid */
        .unit-card { cursor:pointer; min-height:120px; }

        /* CORREÇÃO PARA UPLOAD */
        #upload-status {
            display: block !important;
        }

        #upload-page .card-body {
            display: block !important;
        }

        #upload-page.active {
          display: block !important;
        }

        /* ✅ ESTILOS PARA COORDENADORES */
        .coordinator-view .filter-course {
          display: none !important;
        }

        .coordinator-course-info {
          background: linear-gradient(135deg, var(--amarelo-principal), var(--amarelo-secundario));
          color: white;
          padding: 8px 15px;
          border-radius: 20px;
          font-weight: bold;
          margin-left: 10px;
        }

        /* Ocultar filtros de curso para coordenadores */
        body.coordinator-role #filter-course,
        body.coordinator-role #dashboard-course-filter,
        body.coordinator-role #chart-course-filter,
        body.coordinator-role #conversion-course-filter {
          display: none !important;
        }

        body.coordinator-role label[for="filter-course"],
        body.coordinator-role label[for="dashboard-course-filter"],
        body.coordinator-role label[for="chart-course-filter"],
        body.coordinator-role label[for="conversion-course-filter"] {
          display: none !important;
        }

        /* Loading spinner */
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* MELHORIAS PARA A VISUALIZAÇÃO DA PLANILHA */
        .table-responsive {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
        }
        
        /* Cabeçalho fixo para melhor navegação */
        .table-fixed-header {
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        /* Botão de ação com tamanho fixo */
        .action-btn {
            min-width: 70px;
        }