/* Definir fonte padrão */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    background-color: #f3f4f6;
    overflow-x: hidden;
    max-width: 100% !important;
    width: 100% !important;
}

/* FORÇAR cor da sidebar - CRÍTICO */
.sidebar,
#sidebar,
div.sidebar {
    background-color: #00A99D !important;
}

/* Garantir que nenhum container limite a largura */
.flex-container,
main,
header {
    max-width: none !important;
    width: 100% !important;
}

/* Sobrescrever cores Tailwind para botões azuis em todas as páginas */
button.bg-blue-600,
.bg-blue-600 {
    background-color: #00A99D !important;
}

button.bg-blue-600:hover,
.bg-blue-600:hover,
button.hover\:bg-blue-700:hover,
.hover\:bg-blue-700:hover {
    background-color: #008B82 !important;
}

button.bg-blue-600:disabled,
.bg-blue-600:disabled {
    background-color: #A2E8E1 !important;
}

.text-blue-600 {
    color: #00A99D !important;
}

.focus\:ring-blue-500:focus,
.focus\:border-blue-500:focus {
    border-color: #00A99D !important;
    box-shadow: 0 0 0 2px rgba(0, 169, 157, 0.5) !important;
}

/* Estilizar a Sidebar */
.sidebar {
    /* Cor de fundo agora definida via classes Tailwind no HTML */
    color: white;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease-in-out;
}

/* Estilizar o contêiner pai (flex) */
.flex-container {
    display: flex;
    min-height: 100vh;
}

/* Estilizar o contêiner principal */
.container {
    flex: 1;
    margin-left: 0;
    background-color: #f3f4f6;
    box-sizing: border-box;
    transition: margin-left 0.3s ease-in-out;
}

/* Estilizar o Header */
header {
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 999;
}

/* Ajustar o título do header */
header h1 {
    margin-left: 0;
}

/* Mover o "Olá," e o botão "Sair" para a esquerda (em direção ao centro) */
header .flex.items-center.space-x-2 {
    position: relative;
    left: -1rem;
}

/* Estilizar o Conteúdo Principal */
main {
    flex: 1;
    width: 100%;
    padding: 1rem 0;
    box-sizing: border-box;
}

/* Estilizar a seção de login */
.login-section {
    margin-left: 16rem;
    padding: 2rem 1.5rem;
    box-sizing: border-box;
}

/* Classe para contêineres que devem ocupar toda a largura disponível */
.full-width-container {
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

/* Estilizar Cards */
.card {
    background-color: white;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    width: 100%;
    box-sizing: border-box;
}

.card p {
    font-size: 1.5rem;
    font-weight: 700;
}

.card p.text-sm {
    font-size: 0.875rem;
    color: #6B7280;
}

/* Estilizar Ícones nos Cards */
.card [data-lucide] {
    height: 1.5rem;
    width: 1.5rem;
}

/* Estilizar Seção de Ocupação das Turmas */
.occupancy-section {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 1rem 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

.occupancy-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.occupancy-section p {
    font-size: 0.875rem;
    color: #6B7280;
}

/* Estilizar Tabelas */
table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background-color: #F9FAFB;
}

th, td {
    padding: 0.75rem 1.5rem;
    text-align: left;
}

th {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6B7280;
    text-transform: uppercase;
}

tr {
    border-bottom: 1px solid #E5E7EB;
}

tr:nth-child(even) {
    background-color: #f9fafb;
}

tr:nth-child(odd) {
    background-color: white;
}

/* Estilizar Inputs e Botões */
input, select {
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    transition: none !important;
}

input:focus, select:focus {
    border-color: #00A99D;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 169, 157, 0.1);
}

button {
    transition: none !important;
}

/* Estilizar Etapas (Steps) */
.step {
    display: flex;
    align-items: center;
}

.step-circle {
    height: 2rem;
    width: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.step-line {
    flex: 1;
    height: 0.25rem;
    margin: 0 0.5rem;
}

/* Estilizar Badges */
.badge {
    display: inline-flex;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-complete {
    background-color: #D1FAE5;
    color: #059669;
}

.badge-partial {
    background-color: #FEF3C7;
    color: #D97706;
}

.badge-pending {
    background-color: #FEE2E2;
    color: #EF4444;
}

.badge-success {
    background-color: #D1FAE5;
    color: #059669;
}

.badge-primary {
    background-color: #E6F7F6;
    color: #00A99D;
}

.badge-warning {
    background-color: #FEF3C7;
    color: #D97706;
}

.badge-secondary {
    background-color: #E5E7EB;
    color: #6B7280;
}

.badge-destructive {
    background-color: #FEE2E2;
    color: #EF4444;
}

/* Estilizar Progress Bars */
.progress-bar {
    width: 100%;
    background-color: #E5E7EB;
    border-radius: 9999px;
    height: 0.625rem;
}

.progress-bar-fill {
    background-color: #00A99D;
    height: 0.625rem;
    border-radius: 9999px;
}

/* Estilização para a página de login */
.bg-login {
    background-image: url('/static/src/bg_new.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Ajustes para a página de login */
.bg-login .bg-white {
    position: relative;
    z-index: 1;
}

.bg-login .fixed {
    z-index: 10;
}

/* Estilização para a página de estatísticas (reports.html) */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 1rem;
}

.chart-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.full-width-chart-container {
    width: 100%;
    max-width: calc(100% - 3rem);
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.chart-canvas {
    width: 100% !important;
    height: 400px !important;
    display: block;
    box-sizing: border-box;
}

#alunos-por-disciplina-chart,
#alunos-por-dia-semana-chart,
#alunos-por-etapa-chart,
#alunos-por-unidade-chart {
    height: 500px !important;
}

/* Estilizar a seção de Turmas Ativas */
#ativas-tab {
    max-height: 600px;
    overflow-y: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

#active-classes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 4px 16px;
    scrollbar-width: thin;
    scrollbar-color: #7FD4CB #e5e7eb;
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Ajustar o padding interno dos cards para evitar que fiquem colados à borda esquerda */
#active-classes .card {
    width: 100%;
    min-height: 260px;
    padding: 1.25rem;
    border: 1px solid #7FD4CB;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    background-color: #f9fafb;
    transition: none !important;
}

#active-classes .card .text-gray-600 {
    color: #1f2937;
}

#active-classes .card .text-gray-500 {
    color: #374151;
}

/* Estilizar o modal */
#students-modal {
    z-index: 50;
}

#students-modal .flex-1 {
    scrollbar-width: thin;
    scrollbar-color: #7FD4CB #e5e7eb;
}

#students-modal .flex-1::-webkit-scrollbar {
    width: 8px;
}

#students-modal .flex-1::-webkit-scrollbar-track {
    background: #e5e7eb;
    border-radius: 4px;
}

#students-modal .flex-1::-webkit-scrollbar-thumb {
    background: #7FD4CB;
    border-radius: 4px;
}

#students-modal .flex-1::-webkit-scrollbar-thumb:hover {
    background: #00A99D;
}

/* Estilização para a página de matrículas (enrollment.html) */

/* Estilo para o contêiner de filtros */
.filter-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Estilo específico para os selects dentro da grade de filtros */
.filter-select {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    text-indent: 0 !important;
}

/* Ajusta o espaço horizontal entre os selects */
.filter-grid .filter-select:nth-child(odd) {
    margin-right: 4px !important;
}

.filter-grid .filter-select:nth-child(even) {
    margin-left: 4px !important;
}

/* Toast Animation */
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(10px); }
    5% { opacity: 1; transform: translateY(0); }
    95% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(10px); }
}

/* Toast Container */
#custom-toast-container {
    position: fixed !important;
    bottom: 16px !important;
    right: 16px !important;
    z-index: 100001 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Toast Styles */
#custom-toast-container .custom-toast {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-width: 200px !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    color: white !important;
    font-size: 13px !important;
    animation: fadeInOut 6s ease-in-out forwards !important;
    line-height: 1.2 !important;
}

#custom-toast-container .custom-toast-success {
    background-color: #22c55e !important;
}

#custom-toast-container .custom-toast-error {
    background-color: #ef4444 !important;
}

#custom-toast-container .custom-toast-warning {
    background-color: #f59e0b !important;
}

#custom-toast-container .custom-toast-info {
    background-color: #16a34a !important;
}

#custom-toast-container .custom-toast-icon {
    margin-right: 6px !important;
    flex-shrink: 0 !important;
}

#custom-toast-container .custom-toast-message {
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#custom-toast-container .custom-toast-close {
    background: none !important;
    border: none !important;
    color: white !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 0 6px !important;
    flex-shrink: 0 !important;
}

/* Reset para evitar estilos indesejados do Tailwind nos botões Matricular */
#available-students button {
    all: unset;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 0.375rem !important;
    cursor: pointer !important;
    background-color: #00A99D !important;
    color: #ffffff !important;
}

#available-students button:disabled {
    background-color: #A2E8E1 !important;
    cursor: not-allowed !important;
}

#enrolled-students .bg-red-600 {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

#enrolled-students .bg-red-600:disabled {
    background-color: #dc2626 !important;
    cursor: not-allowed !important;
}

#enrolled-students .bg-red-600 [data-lucide] {
    color: #ffffff !important;
}

/* Estilização para ícones de carregamento */
[data-lucide="loader"], [data-lucide="loader-2"] {
    height: 16px !important;
    width: 16px !important;
    color: #ffffff !important;
    transform-origin: center !important;
}

[data-lucide="loader"].animate-spin, [data-lucide="loader-2"].animate-spin {
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Estilização da div do meio (Turma Selecionada) */
#selected-class-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

#selected-class-title .class-type-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    transition: none !important;
}

#selected-class-title .class-type-tag.cognitiva {
    background-color: #86efac;
}

#selected-class-title .class-type-tag.motora {
    background-color: #d8b4fe;
}

#selected-class-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #4b5563;
    flex-shrink: 0;
}

#selected-class-details .detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

#selected-class-details .detail-item [data-lucide] {
    width: 20px;
    height: 20px;
    color: #6b7280;
    flex-shrink: 0;
}

#selected-class-details .detail-item span {
    font-size: 14px;
    flex: 1;
}

/* Separador entre dados da turma e alunos matriculados */
hr.separator {
    border: none;
    border-top: 2px solid #7FD4CB;
    margin: 16px auto;
    width: 100%;
    max-width: 100%;
}

/* Garantir que o separador seja visível apenas quando #enrolled-students-wrapper não estiver escondido */
#enrolled-students-wrapper.hidden + hr.separator {
    display: none;
}

/* Estilização dos detalhes na lista de turmas (primeiro div) */
#class-list .class-item-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #6b7280;
}

#class-list .class-item-details p {
    font-size: 14px;
    margin: 0;
}

/* Estilização da tag de tipo na lista de turmas */
#class-list .class-type-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    margin-left: 8px;
}

#class-list .class-type-tag.cognitiva {
    background-color: #86efac;
}

#class-list .class-type-tag.motora {
    background-color: #d8b4fe;
}

/* Estilização para garantir consistência no scroll */
#class-list, #enrolled-students, #available-students {
    scrollbar-width: thin;
    scrollbar-color: #7FD4CB #e5e7eb;
}

#class-list::-webkit-scrollbar, #enrolled-students::-webkit-scrollbar, #available-students::-webkit-scrollbar {
    width: 8px;
}

#class-list::-webkit-scrollbar-track, #enrolled-students::-webkit-scrollbar-track, #available-students::-webkit-scrollbar-track {
    background: #e5e7eb;
    border-radius: 4px;
}

#class-list::-webkit-scrollbar-thumb, #enrolled-students::-webkit-scrollbar-thumb, #available-students::-webkit-scrollbar-thumb {
    background: #7FD4CB;
    border-radius: 4px;
}

#class-list::-webkit-scrollbar-thumb:hover, #enrolled-students::-webkit-scrollbar-thumb:hover, #available-students::-webkit-scrollbar-thumb:hover {
    background: #00A99D;
}

/* Garantir que o contêiner principal tenha altura definida */
.flex.space-x-6.h-\[calc\(100vh-120px\)\] {
    height: calc(100vh - 120px);
    display: flex;
    flex-direction: row;
    gap: 24px;
    overflow: hidden;
}

/* Estilizar a Primeira Div e a Lista de Funcionários */
.funcionarios-search-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.funcionarios-search-container .space-y-4 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#funcionarios-list {
    flex-grow: 1;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #7FD4CB #e5e7eb;
}

#funcionarios-list::-webkit-scrollbar {
    width: 8px;
}

#funcionarios-list::-webkit-scrollbar-track {
    background: #e5e7eb;
    border-radius: 4px;
}

#funcionarios-list::-webkit-scrollbar-thumb {
    background: #7FD4CB;
    border-radius: 4px;
}

#funcionarios-list::-webkit-scrollbar-thumb:hover {
    background: #00A99D;
}

/* Estilizar a Segunda Div e a Lista de Logs */
#funcionario-details {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

#funcionario-details-content {
    flex-shrink: 0;
}

/* Ajustar os botões para ficarem mais encaixados */
#funcionario-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    position: relative;
    flex-shrink: 0;
    order: 1;
}

#funcionario-logs {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    order: 2;
}

#logs-list {
    flex-grow: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #7FD4CB #e5e7eb;
}

#logs-list::-webkit-scrollbar {
    width: 8px;
}

#logs-list::-webkit-scrollbar-track {
    background: #e5e7eb;
    border-radius: 4px;
}

#logs-list::-webkit-scrollbar-thumb {
    background: #7FD4CB;
    border-radius: 4px;
}

#logs-list::-webkit-scrollbar-thumb:hover {
    background: #00A99D;
}

/* Estilizar o ícone de acessibilidade (PCD) para aparecer ao final da última linha */
#available-students .font-medium,
#enrolled-students .font-medium {
    position: relative;
    display: inline-flex;
    align-items: center;
    white-space: normal;
    padding-right: 24px;
}

.pcd-icon {
    position: absolute;
    right: 0;
    height: 16px !important;
    width: 16px !important;
    color: #00A99D !important;
    vertical-align: middle;
    margin-left: 0;
}

/* Ajustar a posição do ícone quando há quebra de linha */
#available-students .font-medium.has-line-break .pcd-icon,
#enrolled-students .font-medium.has-line-break .pcd-icon {
    right: 4px;
}

/* Estilizar botões de paginação */
#prev-page, #next-page {
    background-color: #00A99D !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 14px !important;
}

#prev-page:hover:not(:disabled), #next-page:hover:not(:disabled) {
    background-color: #008B82 !important;
}

#prev-page:disabled, #next-page:disabled {
    background-color: #A2E8E1 !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
}

/* Ajustes para páginas específicas */

/* Dashboard (dashboard.html) */
main > div.mb-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

main > div.mb-6 h2 {
    margin-left: 0;
    margin-right: 0;
}

main .grid.grid-cols-1.md\\:grid-cols-4 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Ajuste específico para a seção de Turmas Ativas no dashboard */
.bg-white.border.border-blue-400.rounded-lg.shadow-md > .grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Substituir referências à borda azul */
.border-blue-400 {
    border-color: #7FD4CB !important;
}

/* Pesquisa de Alunos (student_list.html) */
main .border.border-blue-400 {
    padding: 1rem 1.5rem;
}

main .flex.justify-center.mb-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

main .flex.justify-center.mb-6 button {
    margin-right: 0;
}

/* Estatísticas (reports.html) */
main > div.mb-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

main > div.mb-6 h2 {
    margin-right: 0;
}

#disciplinas-tab, #dias-tab, #taxa-tab {
    padding: 1rem 1.5rem;
}

/* Presenças (reports_presences.html) */
#presences-section {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Ocorrências (reports_occurrences.html) */
#occurrences-section {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Enturmar Alunos (enrollment.html) */
.enrollment-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.enrollment-container .border.border-blue-400 {
    padding: 1rem 1.5rem;
}

/* Gerenciamento de Turmas (classes.html) */
main .bg-white.rounded-lg.shadow-md.overflow-hidden {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Frequências (frequencias.html) */
.frequencias-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.frequencias-container .border.border-blue-400 {
    padding: 1rem 1.5rem;
}

#frequencias-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Responsividade */
@media (max-width: 768px) {
    .sidebar {
        width: 16rem;
        transform: translateX(-100%);
    }

    .container {
        margin-left: 0;
        width: 100%;
    }

    header {
        width: 100%;
        padding: 1rem;
    }

    header h1 {
        margin-left: 0;
    }

    main {
        width: 100%;
        padding: 1rem;
    }

    .login-section {
        margin-left: 0;
        padding: 1rem;
    }

    .grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        padding: 1rem;
    }

    .charts-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .chart-container {
        max-width: 100%;
    }

    .full-width-chart-container {
        max-width: 100%;
        padding: 0 1rem;
    }

    .chart-canvas {
        max-width: 100%;
        height: 300px !important;
    }

    #alunos-por-disciplina-chart,
    #alunos-por-dia-semana-chart,
    #alunos-por-etapa-chart,
    #alunos-por-unidade-chart {
        height: 400px !important;
    }

    #active-classes {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        padding: 1rem;
    }

    #active-classes .card {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }

    #presences-section, #occurrences-section {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        padding: 1rem;
    }

    .enrollment-container {
        padding: 1rem !important;
    }

    .enrollment-container .border.border-blue-400 {
        padding: 1rem;
    }

    main .bg-white.rounded-lg.shadow-md.overflow-hidden {
        padding: 1rem;
    }

    .filter-grid {
        padding: 1rem !important;
    }

    main > div.mb-6 {
        padding: 1rem;
    }

    main .border.border-blue-400 {
        padding: 1rem;
    }

    #disciplinas-tab, #dias-tab, #taxa-tab {
        padding: 1rem;
    }

    main .flex.justify-center.mb-6 {
        padding: 1rem;
    }

    /* Ajustes para login em telas pequenas */
    .bg-login {
        background-image: none;
        background-color: #ffffff;
    }

    .bg-login > .flex > .bg-white {
        width: 100%;
        height: 100vh;
        padding: 1rem;
    }

    .bg-login .max-w-xs {
        margin-left: auto;
        margin-right: auto;
    }

    .bg-login .fixed {
        width: 100%;
        padding: 1rem;
    }

    /* Ajustes para frequências em telas pequenas */
    .frequencias-container {
        padding: 1rem !important;
    }

    .frequencias-container .border.border-blue-400 {
        padding: 1rem;
    }

    #frequencias-section {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        padding: 1rem;
    }
}

@media (min-width: 768px) {
    .container {
        margin-left: 16rem;
    }

    header {
        width: calc(100% - 16rem);
    }

    main {
        width: calc(100% - 16rem);
    }
}

/* Estilo para a Lista de Instrutores */
.instrutor-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.instrutor-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #fff;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: #7FD4CB #e5e7eb;
    width: 100%;
    box-sizing: border-box;
}

.instrutor-list::-webkit-scrollbar {
    width: 8px;
}

.instrutor-list::-webkit-scrollbar-track {
    background: #e5e7eb;
    border-radius: 4px;
}

.instrutor-list::-webkit-scrollbar-thumb {
    background: #7FD4CB;
    border-radius: 4px;
}

.instrutor-list::-webkit-scrollbar-thumb:hover {
    background: #00A99D;
}

.instrutor-list-item {
    display: flex;
    align-items: center;
    padding: 2px 4px;
    cursor: pointer;
}

.instrutor-list-item:hover {
    background-color: #f3f4f6;
}

.instrutor-list-item input[type="checkbox"] {
    margin: 0 4px 0 0;
    width: 16px;
    height: 16px;
}

.instrutor-list-item span {
    font-size: 14px;
    color: #374151;
    flex: 1;
    word-break: break-word;
    line-height: 1.2;
}

.instrutor-list-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.instrutor-list-button {
    background-color: #00A99D;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 12px;
}

.instrutor-list-button:disabled {
    background-color: #A2E8E1;
    color: #6b7280;
    cursor: not-allowed;
}

.instrutor-list-button:hover:not(:disabled) {
    background-color: #008B82;
}

/* Estilo para a Lista de Alunos */
.aluno-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.aluno-list {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background-color: #fff;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: #7FD4CB #e5e7eb;
    width: 100%;
    box-sizing: border-box;
}

.aluno-list::-webkit-scrollbar {
    width: 8px;
}

.aluno-list::-webkit-scrollbar-track {
    background: #e5e7eb;
    border-radius: 4px;
}

.aluno-list::-webkit-scrollbar-thumb {
    background: #7FD4CB;
    border-radius: 4px;
}

.aluno-list::-webkit-scrollbar-thumb:hover {
    background: #00A99D;
}

.aluno-list-item {
    display: flex;
    align-items: center;
    padding: 2px 4px;
}

.aluno-list-item:hover {
    background-color: #f3f4f6;
}

.aluno-list-item span {
    font-size: 14px;
    color: #374151;
    flex: 1;
    word-break: break-word;
    line-height: 1.2;
}

.aluno-list-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.aluno-list-button {
    background-color: #00A99D;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 12px;
}

.aluno-list-button:disabled {
    background-color: #A2E8E1;
    color: #6b7280;
    cursor: not-allowed;
}

.aluno-list-button:hover:not(:disabled) {
    background-color: #008B82;
}

/* Estilização para botões de matrícula desabilitados */
#available-students button.disabled-class {
    background-color: #A2E8E1 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Botões de frequência - Nova implementação */
.btn-frequencia {
    width: 100%;
    padding: 0.4rem 0.6rem;
    font-weight: 600;
    font-size: 0.75rem;
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.btn-frequencia:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-frequencia:active:not(:disabled) {
    transform: translateY(0);
}

.btn-frequencia:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-frequencia-blue {
    background-color: #2563eb;
}

.btn-frequencia-blue:hover:not(:disabled) {
    background-color: #1d4ed8;
}

/* Animação de spin para SVG (igual student_list) */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Estilização para os cards de frequência */
#frequencias-disponiveis-section .card,
#frequencias-realizadas-section .card {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: none !important;
    overflow: visible !important;
}

#frequencias-disponiveis-section .card button,
#frequencias-realizadas-section .card button {
    margin-top: auto;
    flex-shrink: 0;
}

/* Ajustar o layout da grade para 5 colunas */
#frequencias-disponiveis-section,
#frequencias-realizadas-section {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

/* Estilizar mensagem de vazio */
#frequencias-disponiveis-empty,
#frequencias-realizadas-empty {
    grid-column: 1 / -1;
    padding: 1rem;
    font-size: 1rem;
}

/* Ajustes de responsividade */
@media (max-width: 1200px) {
    #frequencias-disponiveis-section,
    #frequencias-realizadas-section {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    #frequencias-disponiveis-section,
    #frequencias-realizadas-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    #frequencias-disponiveis-section,
    #frequencias-realizadas-section {
        grid-template-columns: 1fr;
    }
}

/* Estilização para a página de perfis */
.perfis-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.perfis-container .card {
    padding: 1rem 1.5rem;
}

#perfis-list table {
    width: 100%;
    border-collapse: collapse;
}

#perfis-list th, #perfis-list td {
    padding: 0.75rem;
    text-align: left;
}

#perfis-list th {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6B7280;
    text-transform: uppercase;
}

#perfis-list tr {
    border-bottom: 1px solid #E5E7EB;
}

#perfis-list tr:nth-child(even) {
    background-color: #f9fafb;
}

#perfis-list tr:nth-child(odd) {
    background-color: white;
}

/* Estilização base para modais genéricos (evitar conflitos com modais específicos) */
.modal-content {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #d1d5db;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 0;
    position: relative;
}

.modal-content-narrow {
    width: 420px;
    max-width: 420px;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.modal-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-field-with-icon {
    display: flex;
    flex-direction: column;
}

.input-with-icon {
    display: flex;
    align-items: center;
}

.label-input-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.modal-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 4px;
}

.modal-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 1rem;
    outline: none;
}

.modal-input-narrow {
    width: 350px;
}

.modal-input:focus {
    border-color: #00A99D;
    box-shadow: 0 0 0 2px rgba(0, 169, 157, 0.5);
}

.icon-align {
    position: static;
    margin-top: 24px;
}

.modal-footer {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.modal-button {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
}

.modal-button-cancel {
    background-color: #d1d5db;
    color: #374151;
}

.modal-button-cancel:hover {
    background-color: #9ca3af;
}

.modal-button-save {
    background-color: #00A99D;
    color: #fff;
    display: inline-flex;
    align-items: center;
}

.modal-button-save:hover {
    background-color: #008B82;
}

/* Estilo do Modal de Confirmação */
.modal-backdrop {
    animation: backdropFadeIn 0.3s ease-out forwards;
}

.modal-backdrop.closing {
    animation: backdropFadeOut 0.2s ease-in forwards;
}

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

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

.modal-panel {
    animation: panelFadeIn 0.3s ease-out forwards;
}

.modal-panel.closing {
    animation: panelFadeOut 0.2s ease-in forwards;
}

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

@media (min-width: 640px) {
    @keyframes panelFadeIn {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}

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

@media (min-width: 640px) {
    @keyframes panelFadeOut {
        from {
            opacity: 1;
            transform: scale(1);
        }
        to {
            opacity: 0;
            transform: scale(0.95);
        }
    }
}

#edit-confirm-modal .size-12,
#delete-confirm-modal .size-12,
#forgot-password-modal .size-12 {
    width: 48px;
    height: 48px;
}

@media (min-width: 640px) {
    #edit-confirm-modal .size-10,
    #delete-confirm-modal .size-10,
    #forgot-password-modal .size-10 {
        width: 40px;
        height: 40px;
    }
}

#edit-confirm-modal .bg-blue-100 {
    background-color: #D5F3F0;
}

#delete-confirm-modal .bg-red-100 {
    background-color: #FEE2E2;
}

#forgot-password-modal .bg-yellow-100 {
    background-color: #FEF3C7;
}

#edit-confirm-modal .text-blue-600 {
    color: #00A99D;
}

#delete-confirm-modal .text-red-600 {
    color: #EF4444;
}

#forgot-password-modal .text-yellow-600 {
    color: #D97706;
}

#edit-confirm-modal .bg-blue-600,
#forgot-password-modal .bg-blue-600 {
    background-color: #00A99D;
}

#delete-confirm-modal .bg-red-600 {
    background-color: #EF4444;
}

#edit-confirm-modal .hover\:bg-blue-500:hover,
#forgot-password-modal .hover\:bg-blue-500:hover {
    background-color: #008B82;
}

#delete-confirm-modal .hover\:bg-red-500:hover {
    background-color: #DC2626;
}

#edit-confirm-modal .bg-gray-50,
#delete-confirm-modal .bg-gray-50,
#forgot-password-modal .bg-gray-50 {
    background-color: #F9FAFB;
}

#edit-confirm-modal .text-gray-900,
#delete-confirm-modal .text-gray-900,
#forgot-password-modal .text-gray-900 {
    color: #1F2937;
}

#edit-confirm-modal .text-gray-500,
#delete-confirm-modal .text-gray-500,
#forgot-password-modal .text-gray-500 {
    color: #6B7280;
}

/* Estilização do Modal de Frequência */
#frequencia-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    overflow: hidden;
}

#frequencia-modal .modal-content {
    background-color: #fff;
    padding: 24px;
    border: 1px solid #d1d5db;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    margin: 0;
    transform: none;
    position: static;
    top: auto !important;
}

#frequencia-modal .modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: #1f2937;
}

#frequencia-modal .modal-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#frequencia-modal .modal-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 4px;
}

#frequencia-modal .modal-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}

#frequencia-modal .modal-input:focus {
    border-color: #00A99D;
    box-shadow: 0 0 0 2px rgba(0, 169, 157, 0.2);
}

#frequencia-modal .modal-footer {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

#frequencia-modal .modal-button {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

#frequencia-modal .modal-button-cancel {
    background-color: #d1d5db;
    color: #374151;
}

#frequencia-modal .modal-button-cancel:hover {
    background-color: #b0b7c3;
}

#frequencia-modal .modal-button-save {
    background-color: #00A99D;
    color: #fff;
}

#frequencia-modal .modal-button-save:hover {
    background-color: #008B82;
}

/* Estilização do Modal de Confirmação */
#confirm-frequencia-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    overflow: hidden;
}

#confirm-frequencia-modal .modal-panel {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    overflow: hidden;
    animation: panelFadeIn 0.3s ease-out forwards;
}

#confirm-frequencia-modal .modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: backdropFadeIn 0.3s ease-out forwards;
}

#confirm-frequencia-modal .modal-backdrop.closing {
    animation: backdropFadeOut 0.2s ease-in forwards;
}

#confirm-frequencia-modal .modal-panel.closing {
    animation: panelFadeOut 0.2s ease-in forwards;
}

#confirm-frequencia-modal .size-12 {
    width: 48px;
    height: 48px;
}

@media (min-width: 640px) {
    #confirm-frequencia-modal .size-10 {
        width: 40px;
        height: 40px;
    }
}

#confirm-frequencia-modal .bg-blue-100 {
    background-color: #D5F3F0;
}

#confirm-frequencia-modal .text-blue-600 {
    color: #00A99D;
}

#confirm-frequencia-modal .bg-blue-600 {
    background-color: #00A99D;
}

#confirm-frequencia-modal .hover\:bg-blue-500:hover {
    background-color: #008B82;
}

#confirm-frequencia-modal .bg-gray-50 {
    background-color: #f9fafb;
}

#confirm-frequencia-modal .text-gray-900 {
    color: #1f2937;
}

#confirm-frequencia-modal .text-gray-500 {
    color: #6b7280;
}

/* Impedir rolagem do body quando o modal está aberto */
body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

/* Animações */
@keyframes backdropFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

@media (min-width: 640px) {
    @keyframes panelFadeIn {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}

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

@media (min-width: 640px) {
    @keyframes panelFadeOut {
        from {
            opacity: 1;
            transform: scale(1);
        }
        to {
            opacity: 0;
            transform: scale(0.95);
        }
    }
}

/* Estilização específica para o modal de recuperação de senha */
#forgot-password-modal .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Estilização para a página de relatórios de alunos */
.reports-alunos-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.reports-alunos-container .card {
    padding: 1rem 1.5rem;
}

#report-table-container {
    overflow-x: auto;
}

#report-table {
    width: 100%;
    border-collapse: collapse;
}

#report-table th, #report-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #E5E7EB;
}

#report-table th {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6B7280;
    text-transform: uppercase;
}

#report-table tr:nth-child(even) {
    background-color: #f9fafb;
}

#report-table tr:nth-child(odd) {
    background-color: white;
}

/* Responsividade */
@media (max-width: 768px) {
    .reports-alunos-container {
        padding: 1rem !important;
    }

    .reports-alunos-container .card {
        padding: 1rem;
    }

    #report-table-container {
        padding: 1rem;
    }
}

/* Estilização específica para o modal de confirmação de remoção de matrícula */
#unenroll-confirmation-modal .modal {
    display: none;
    position: fixed;
    z-index: 1000; /* Camada base do modal */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

#unenroll-confirmation-modal .modal-backdrop {
    z-index: 1000; /* Acima dos inputs, abaixo do painel */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: backdropFadeIn 0.3s ease-out forwards;
}

#unenroll-confirmation-modal .modal-backdrop.closing {
    animation: backdropFadeOut 0.2s ease-in forwards;
}

/* Garantir que o painel do modal fique acima do backdrop */
#unenroll-confirmation-modal .modal-panel {
    z-index: 1001; /* Um nível acima do backdrop */
    position: relative;
}

/* Garantir que o contêiner do painel tenha z-index suficiente */
#unenroll-confirmation-modal .fixed.inset-0 {
    z-index: 1001; /* Alinhado com o painel */
}

/* Reduzir z-index dos contêineres de input para evitar sobreposição */
.enrollment-container .relative {
    z-index: 10; /* Baixo o suficiente para ficar abaixo do modal */
}

/* Ajustar inputs e select específicos */
#class-search, #student-search-available, #student-unit-filter {
    z-index: 10;
}

/* Ajustar z-index da sidebar e header para ficar abaixo do modal */
.sidebar {
    z-index: 900; /* Abaixo do modal */
}

header {
    z-index: 899; /* Abaixo do modal e da sidebar */
}

#unenroll-confirmation-modal .size-12 {
    width: 48px;
    height: 48px;
}

@media (min-width: 640px) {
    #unenroll-confirmation-modal .size-10 {
        width: 40px;
        height: 40px;
    }
}

#unenroll-confirmation-modal .bg-red-100 {
    background-color: #FEE2E2;
}

#unenroll-confirmation-modal .text-red-600 {
    color: #EF4444;
}

#unenroll-confirmation-modal .bg-red-600 {
    background-color: #EF4444;
}

#unenroll-confirmation-modal .hover\:bg-red-700:hover {
    background-color: #DC2626;
}

#unenroll-confirmation-modal .bg-gray-50 {
    background-color: #F9FAFB;
}

#unenroll-confirmation-modal .text-gray-900 {
    color: #1F2937;
}

#unenroll-confirmation-modal .text-gray-500 {
    color: #6B7280;
}

#unenroll-confirmation-modal .bg-red-300 {
    background-color: #FCA5A5; /* Cor para botão Remover desabilitado */
}

#unenroll-confirmation-modal .cursor-not-allowed {
    cursor: not-allowed;
}

#unenroll-confirmation-modal select#unenroll-reason {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.875rem;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    background-color: #FFFFFF;
    color: #374151;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236B7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.6-3.6%205.4-7.8%205.4-12.8%200-5-1.8-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

#unenroll-confirmation-modal select#unenroll-reason:focus {
    border-color: #00A99D;
    box-shadow: 0 0 0 2px rgba(0, 169, 157, 0.2);
    outline: none;
}

/* Garantir que mensagens de erro sejam consistentes */
#unenroll-confirmation-modal #unenroll-error-message .bg-red-100 {
    background-color: #FEE2E2;
    padding: 12px;
    margin-top: 12px;
    border-radius: 4px;
    font-size: 0.875rem;
}

#unenroll-confirmation-modal #unenroll-error-message .border-red-500 {
    border-left-width: 4px;
    border-color: #EF4444;
}

#unenroll-confirmation-modal #unenroll-error-message .text-red-700 {
    color: #B91C1C;
    font-weight: 500;
}

/* Ajustar o layout do contêiner de erro */
#unenroll-confirmation-modal #unenroll-error-message {
    margin-top: 12px;
}

/* Ajustar o botão Remover quando desabilitado */
#unenroll-confirmation-modal #unenroll-confirm-btn:disabled {
    background-color: #FCA5A5 !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

/* Garantir texto branco no botão Remover do modal */
#unenroll-confirmation-modal #unenroll-confirm-btn {
    color: #ffffff !important;
}

/* Garantir texto branco no estado desabilitado */
#unenroll-confirmation-modal #unenroll-confirm-btn:disabled {
    color: #ffffff !important;
}

/* Garantir cor branca para o ícone */
#unenroll-confirmation-modal #unenroll-confirm-btn [data-lucide] {
    color: #ffffff !important;
}

/* Garantir fundo azul e texto branco no botão Sair */
#logout-button {
    background-color: #00A99D !important;
    color: #ffffff !important;
}

#logout-button:hover {
    background-color: #008B82 !important;
    color: #ffffff !important;
}

#logout-button:active {
    background-color: #00756E !important;
    color: #ffffff !important;
}

/* Evitar conflitos em enrollment.html */
body.no-scroll-enrollment #logout-button {
    background-color: #00A99D !important;
    color: #ffffff !important;
}

/* Desativar rolamento vertical apenas na página enrollment.html */
body.no-scroll-enrollment {
    overflow-y: hidden !important;
}

/* Estilização para o modal de confirmação de presenças */
#confirm-presence-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    overflow: hidden;
}

#confirm-presence-modal .modal-panel {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    overflow: hidden;
    animation: panelFadeIn 0.3s ease-out forwards;
}

#confirm-presence-modal .modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: backdropFadeIn 0.3s ease-out forwards;
}

#confirm-presence-modal .modal-backdrop.closing {
    animation: backdropFadeOut 0.2s ease-in forwards;
}

#confirm-presence-modal .modal-panel.closing {
    animation: panelFadeOut 0.2s ease-in forwards;
}

#confirm-presence-modal .size-12 {
    width: 48px;
    height: 48px;
}

@media (min-width: 640px) {
    #confirm-presence-modal .size-10 {
        width: 40px;
        height: 40px;
    }
}

#confirm-presence-modal .bg-blue-100 {
    background-color: #D5F3F0;
}

#confirm-presence-modal .text-blue-600 {
    color: #00A99D;
}

#confirm-presence-modal .bg-blue-600 {
    background-color: #00A99D;
}

#confirm-presence-modal .hover\:bg-blue-500:hover {
    background-color: #008B82;
}

#confirm-presence-modal .bg-gray-50 {
    background-color: #f9fafb;
}

#confirm-presence-modal .text-gray-900 {
    color: #1f2937;
}

#confirm-presence-modal .text-gray-500 {
    color: #6b7280;
}

#confirm-presence-modal .bg-blue-300 {
    background-color: #7FD4CB;
}

/* Ajustes específicos do tema para Sistema de Governança Educacional */
.text-sistema-title {
    color: #00A99D !important;
}

.bg-sistema-primary {
    background-color: #00A99D !important;
}

.bg-sistema-light {
    background-color: #D5F3F0 !important;
}

.bg-sistema-dark {
    background-color: #008B82 !important;
}

.border-sistema {
    border-color: #7FD4CB !important;
}

.sistema-shadow {
    box-shadow: 0 4px 6px rgba(0, 169, 157, 0.1) !important;
}

/* Estilização do rodapé para o tema do Sistema de Governança Educacional */
.footer-sistema {
    background-color: #E8F8F6 !important;
}

/* Estilização de opções desabilitadas no select */
select option:disabled {
    color: #9ca3af !important;
    background-color: #f3f4f6 !important;
    font-style: italic;
}

/* Scroll suave nos modais */
.max-h-\[70vh\] {
    scrollbar-width: thin;
    scrollbar-color: #00A99D #f3f4f6;
}

.max-h-\[70vh\]::-webkit-scrollbar {
    width: 8px;
}

.max-h-\[70vh\]::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

.max-h-\[70vh\]::-webkit-scrollbar-thumb {
    background: #00A99D;
    border-radius: 4px;
}

.max-h-\[70vh\]::-webkit-scrollbar-thumb:hover {
    background: #008B82;
}

/* ============================================
   SKELETON LOADING ANIMATION
   ============================================ */

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.skeleton-loading {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #e0e0e0 20%,
        #f0f0f0 40%,
        #f0f0f0 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
    border-radius: 4px;
}

/* ============================================
   TOAST ANIMATIONS
   ============================================ */

@keyframes toast-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast-enter {
    animation: toast-slide-in 0.3s ease-out;
}

.toast-exit {
    animation: toast-slide-out 0.2s ease-in;
}

/* ============================================
   EMPLOYEE TABS (Modal de Ponto Eletrônico)
   ============================================ */

.employee-tab {
    transition: all 0.2s ease-in-out;
}

.employee-tab.active {
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.tab-content {
    animation: fadeIn 0.3s ease-in-out;
    min-height: 500px;
}

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

/* ============================================
   STUDENT TABS (Modal de Novo Aluno)
   ============================================ */

.new-student-tab {
    transition: all 0.2s ease-in-out;
    border-bottom: 2px solid transparent;
    color: var(--color-gray-600);
}

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

.new-student-tab:hover:not(.active) {
    background-color: var(--color-gray-100);
    color: var(--color-gray-900);
}

.new-student-tab-content {
    animation: fadeIn 0.3s ease-in-out;
}

.new-student-tab-content.hidden {
    display: none;
}