/* Garante que os painéis laterais fiquem ocultos quando em modo de tela cheia (Relatórios/Dashboard) */
    body.reports-fullscreen-active #filterSidePanel,
    body.reports-fullscreen-active #openVagasPanel {
        display: none !important;
    }

/* Botão Flutuante de Filtros */
#floatingFilterBtn {
    /* Posicionamento removido daqui para ser controlado via classes Tailwind (bottom-6 ou bottom-24) no JS */
    width: 3rem;
    height: 3rem;
    padding: 0;
    justify-content: center;
    gap: 0;
    transition: all 0.3s ease-in-out;
}

#floatingFilterBtn:hover {
    width: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    gap: 0.5rem;
}


/* Painel Lateral de Filtros */
#filterSidePanel {
    display: none; /* Escondido por padrão, JS muda para flex */
    position: fixed;
    top: 1rem;
    right: -450px; /* Começa fora da tela */
    width: 450px;
    max-width: 90vw;
    height: calc(100% - 2rem);
    background-color: #ffffff;
    box-shadow: -2px 0 15px rgba(0, 0, 0, 0.1);
    z-index: 101; /* Maior que o painel de vagas (100) */
    flex-direction: column;
    transition: right 0.3s ease-in-out;
    border-radius: 0.75rem;
    overflow: hidden;
}

#filterSidePanel.open {
    right: 1rem; /* Desliza para dentro */
}

/* --- INÍCIO: Estilos para o Painel de Filtros Fixo (Pinned) --- */
body.filter-panel-pinned #mainAgendaContainer {
    margin-right: 450px;
    transition: margin-right 0.3s ease-in-out;
}

body.filter-panel-pinned #panelOverlay {
    display: none !important;
}

#pinFilterPanelBtn.pinned {
    background-color: #e0e7ff;
    color: #4f46e5;
}

/* Ajuste responsivo para quando o painel de filtros está fixado */
@media (min-width: 768px) {
    body.filter-panel-pinned.fullscreen-agenda-active #mainAgendaContainer {
        width: calc(95% - 450px);
        margin-left: 1rem;
        margin-right: auto;
    }
}
/* --- FIM: Estilos para o Painel de Filtros Fixo (Pinned) --- */

/* NOVO: Estilo para o conteúdo do modal de alerta/ajuda */
        #customAlertMessage,
        #mainHelpContent {
            /* Adicionamos o #mainHelpContent aqui */
            max-height: 60vh;
            /* Altura máxima de 60% da tela */
            overflow-y: auto;
            /* Adiciona barra de rolagem vertical se o conteúdo ultrapassar */
            padding-right: 1rem;
            /* Espaço para a barra de rolagem não sobrepor o texto */
            line-height: 1.6;
            /* Aumenta o espaçamento entre as linhas do texto */
        }

        /* Garante que o modal de compromissos fique na frente de outros modais, como o de relatórios */
        #appointmentModal {
            z-index: 102;
        }

        /* --- INÍCIO: Estilo para o título do card de vaga (Layout Compacto) --- */
        .vaga-card-title {
            white-space: nowrap;
            /* Impede que o texto quebre para a próxima linha */
            overflow: hidden;
            /* Esconde o texto que transborda o container */
            text-overflow: ellipsis;
            /* Adiciona "..." no final do texto cortado */
            max-width: 250px;
            /* Define uma largura máxima para o título */
        }

        /* --- FIM: Estilo para o título do card de vaga --- */

        /* --- INÍCIO: Estilos para o Painel Flutuante e Pílulas de Atividade --- */
        .activity-pill {
            background-color: #eef2ff;
            /* indigo-50 */
            border: 1px solid #c7d2fe;
            /* indigo-200 */
            color: #4f46e5;
            /* indigo-600 */
            padding: 0.375rem 0.75rem;
            /* py-1.5 px-3 */
            border-radius: 0.75rem;
            /* Borda um pouco menos arredondada para acomodar o texto */
            margin-bottom: 0.5rem;
            font-size: 0.75rem;
            /* text-xs */
            line-height: 1.2;
            cursor: pointer;
            transition: background-color 0.2s;
            display: block;
            /* Garante que a pílula se comporte como um bloco */
            text-align: center;
            /* Centraliza o texto */
        }

        .activity-pill:hover {
            background-color: #e0e7ff;
            /* indigo-100 */
        }

        .activity-pill .title-line {
            font-weight: 600;
            /* semibold */
            display: block;
            /* --- INÍCIO DA ADIÇÃO --- */
            white-space: nowrap;
            /* Impede a quebra de linha */
            overflow: hidden;
            /* Esconde o que transborda */
            text-overflow: ellipsis;
            /* Adiciona "..." */
            /* --- FIM DA ADIÇÃO --- */
        }

        .activity-pill .interpreter-line {
            font-size: 0.7rem;
            /* ~11px */
            color: #4b5563;
            /* gray-600 */
            display: block;
            margin-top: 2px;
        }

        /* Botão Flutuante (Toast) */
        #floatingVagasBtn {
            position: fixed;
            bottom: 1.5rem;
            /* Começa VISÍVEL na tela */
            right: 1.5rem;
            z-index: 90;
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
            opacity: 1;
            transform: scale(1);
        }

        #floatingVagasBtn.hidden {
            opacity: 0;
            transform: scale(0.9);
            pointer-events: none;
            /* Impede cliques quando escondido */
        }

        /* --- INÍCIO: Estilos para o Botão Flutuante de Vagas --- */
        #floatingVagasBtn {
            /* Estado padrão (apenas ícone) */
            width: 3rem;
            /* 48px */
            height: 3rem;
            /* 48px */
            padding: 0;
            justify-content: center;
            gap: 0;
            /* Adiciona uma transição suave para todas as propriedades */
            transition: all 0.3s ease-in-out;
        }

        #floatingVagasBtn span:not(#vagasNotificationBadge) {
            /* Esconde o texto "Vagas Abertas" por padrão */
            display: none;
        }

        /* NOVO: Efeito de expansão ao passar o mouse */
        #floatingVagasBtn:hover {
            width: auto;
            /* Largura automática para caber o texto */
            padding-left: 1.25rem;
            /* 20px */
            padding-right: 1.25rem;
            /* 20px */
            gap: 0.5rem;
            /* Espaço entre o ícone e o texto */
        }

        /* NOVO: Mostra o texto ao passar o mouse */
        #floatingVagasBtn:hover span:not(#vagasNotificationBadge) {
            display: inline;
        }

        /* --- FIM: Estilos para o Botão Flutuante de Vagas --- */

        /* --- INÍCIO: Estilos para o Painel Lateral de Vagas --- */
        #openVagasPanel {
            display: none;
            /* NOVO: Garante que o painel comece totalmente escondido */
            position: fixed;
            top: 1rem;
            right: -450px;
            width: 450px;
            max-width: 90vw;
            height: calc(100% - 2rem);
            background-color: #f9fafb;
            box-shadow: -2px 0 15px rgba(0, 0, 0, 0.1);
            z-index: 100;
            flex-direction: column;
            transition: right 0.3s ease-in-out;
            border-radius: 0.75rem;
            overflow: hidden;
        }

        #openVagasPanel.open {
            right: 1rem;
            /* Desliza para dentro, mantendo a margem direita */
        }

        /* Overlay para escurecer o fundo quando o painel está aberto */
        #panelOverlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 99;
            transition: opacity 0.3s ease-in-out;
        }

        #panelOverlay.active {
            display: block;
        }

        /* --- FIM: Estilos para o Painel Lateral de Vagas --- */

        /* --- INÍCIO: Estilos para o Painel Fixo (Pinned) --- */
        body.panel-pinned #mainAgendaContainer {
            margin-right: 450px;
            /* Largura do painel */
            transition: margin-right 0.3s ease-in-out;
        }

        body.panel-pinned #panelOverlay {
            display: none !important;
            /* Garante que o overlay suma */
        }

        #pinVagasPanelBtn.pinned {
            background-color: #e0e7ff;
            /* Cor de fundo para indicar que está ativo */
            color: #4f46e5;
            /* Cor do ícone */
        }

        /* --- FIM: Estilos para o Painel Fixo (Pinned) --- */

        /* --- INÍCIO: Estilos para o Feed de Atividade e Animações (Fase 2) --- */
        #activityFeedContainer {
            /* A altura agora será controlada pelo container pai */
            overflow-y: auto;
            /* Permite a rolagem interna */
        }


        .feed-item {
            font-size: 0.8rem;
            /* 12.8px */
            padding: 0.5rem 0;
            border-bottom: 1px solid #e5e7eb;
            /* gray-200 */
        }

        .feed-item:last-child {
            border-bottom: none;
        }

        /* Animação para o card quando uma vaga é aceita */
        @keyframes flash-green {
            0% {
                background-color: #f9fafb;
            }

            /* Cor de fundo original do painel */
            50% {
                background-color: #dcfce7;
            }

            /* green-100 */
            100% {
                background-color: #f9fafb;
            }
        }

        .card-accepted {
            animation: flash-green 1s ease-out;
        }

        .card-fade-out {
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
            opacity: 0;
            transform: scale(0.95);
        }

        /* --- FIM: Estilos para o Feed de Atividade e Animações --- */

        /* --- INÍCIO: Estilos para Destaque de Linha (Fase 3) --- */
        @keyframes highlight-row {
            0% {
                background-color: transparent;
            }

            50% {
                background-color: #fef9c3;
            }

            /* Tailwind yellow-100 */
            100% {
                background-color: transparent;
            }
        }

        .row-highlighted {
            animation: highlight-row 2s ease-out;
        }

        /* --- FIM: Estilos para Destaque de Linha --- */

        .wide-report-active .print-header {
            text-align: left;
        }

        .wide-report-active .report-sticky-summary {
            text-align: left;
        }

        /* Alvo: A célula da tabela (td) que contém os botões de ação */
        #interpreterProfilesTableBody td:last-child {
            vertical-align: middle;
            /* Força o alinhamento vertical de todo o conteúdo da célula ao centro */
        }

        /* Alvo: O container (div) que agrupa os botões */
        #interpreterProfilesTableBody td:last-child>div {
            display: flex;
            align-items: center;
            /* Garante o alinhamento dos itens flex */
        }

        /* Alvo: A célula da tabela (td) que contém os botões de ação */
        #interpreterProfilesTableBody td:last-child {
            vertical-align: middle;
            /* Força o alinhamento vertical de todo o conteúdo da célula ao centro */
        }

        #syncHistoryModal {
            z-index: 105;
            /* Garante que ele apareça na frente do modal de configurações (que tem z-index 50) */
        }

        /* --- ESTILOS PARA O BOTÃO DE HISTÓRICO DE SINCRONIZAÇÃO --- */

        /* Estilo para o botão quando HÁ histórico (ativo) */
        .view-sync-history-btn.has-history {
            color: #3B82F6;
            /* Azul, cor primária média */
            cursor: pointer;
        }

        .view-sync-history-btn.has-history:hover {
            color: #2A3A7D;
            /* Azul escuro no hover */
        }

        /* Estilo para o botão quando NÃO HÁ histórico (inativo) */
        .view-sync-history-btn.no-history {
            color: #9CA3AF;
            /* Cinza claro */
            cursor: not-allowed;
            opacity: 0.5;
        }

        /* Estilo para o item destacado na navegação por teclado */
        .active-item {
            background-color: #DBEAFE !important;
            /* Azul bem claro */
        }

        .interpreter-container-disabled {
            background-color: #f3f4f6;
            /* cinza claro */
            pointer-events: none;
            /* Desabilita cliques */
        }

        .interpreter-container-disabled .tag-close {
            display: none;
            /* Esconde o 'x' para remover a tag */
        }

        /* --- ESTILOS PARA O SELETOR DE INTÉRPRETES --- */
        .tag-pill {
            display: inline-flex;
            align-items: center;
            background-color: #E0E7FF;
            /* Cor azul clara, do tema */
            color: #3730A3;
            /* Cor azul escura, do tema */
            border-radius: 9999px;
            padding: 2px 8px;
            font-size: 0.8rem;
            font-weight: 500;
            margin: 2px;
        }

        .tag-close {
            margin-left: 6px;
            cursor: pointer;
            font-weight: bold;
        }

        .tag-close:hover {
            color: #EF4444;
            /* Vermelho */
        }

        /* --- INÍCIO: Truncamento de texto para colunas largas no modo desktop --- */
        #listViewContainer td[data-label="Intérprete(s)"],
        #listViewContainer td[data-label="Título"] {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* --- FIM: Truncamento de texto --- */


        /* =================================================================== */
        /* == INÍCIO: Cabeçalho Fixo para a Lista de Compromissos (v5.2)    == */
        /* =================================================================== */

        /* 1. Garante que o container da lista não crie seu próprio scroll vertical.
           (Esta parte permanece igual à v5, que funcionou) */
        body.fullscreen-agenda-active #listViewContainer {
            max-height: none !important;
            overflow: visible !important;
            position: relative;
        }

        /* 2. Faz o título "Meus Compromissos" grudar no topo do container de rolagem */
        #agendaTitle {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 20;
            background-color: white;
            border-bottom: 1px solid #e5e7eb;
            min-width: 100%;
        }

        /* 3. Faz o cabeçalho da tabela grudar logo abaixo do título */
        #listViewContainer thead {
            position: -webkit-sticky;
            position: sticky;
            /* O valor de 'top' deve ser a altura do #agendaTitle (aprox. 53px). */
            top: 53px;
            z-index: 10;
            background-color: #f9fafb;
        }

        /* 4. Remove o padding do topo do container de rolagem (<main>)
           Isso é necessário para que os cabeçalhos da lista grudem no topo. */
        body.fullscreen-agenda-active #mainAgendaContainer>main {
            padding-top: 0 !important;
        }

        /* 5. AJUSTE FINO: Adiciona uma margem no topo do PRIMEIRO elemento
           dentro do <main> (o container dos botões), restaurando o espaçamento. */
        body.fullscreen-agenda-active #mainAgendaContainer>main>div:first-child {
            margin-top: 1.5rem;
            /* Equivalente ao p-6 do Tailwind */
        }

        /* =================================================================== */
        /* == FIM: Cabeçalho Fixo                                           == */
        /* =================================================================== */

        /* NOVO: Contêiner principal para a rolagem horizontal da agenda */
        .main-scroll-container {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            /* Melhora a rolagem em iOS */
        }

        @media (max-width: 768px),
        (max-height: 500px) {

            /* --- Regras para a Lista Principal de Compromissos --- */
            #listViewContainer {
                max-width: 100%;
                display: grid;
                /* Adicione esta linha */
                grid-template-columns: 1fr;
                /* Adicione esta linha */
            }

            #listViewContainer table {
                width: auto;
                white-space: nowrap;
            }

            #listViewContainer thead {
                position: -webkit-sticky;
                position: sticky;
                left: 0;
            }

            /* --- Outras regras gerais para telas pequenas --- */
            #agendaTitle.text-2xl {
                font-size: 1.25rem;
                line-height: 1.75rem;
            }

            #agendaTitle.text-lg {
                font-size: 1rem;
                line-height: 1.5rem;
            }

            .fc .fc-toolbar.fc-header-toolbar {
                flex-direction: column;
                gap: 0.5rem;
                align-items: center;
            }

            .fc .fc-toolbar-chunk {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 0.5rem;
            }

            .fc-timeGridWeek-view .fc-col-header-cell-cushion {
                font-size: 0.75em !important;
                font-weight: 400 !important;
            }

            #settingsModal nav {
                flex-wrap: wrap;
                justify-content: flex-start;
                gap: 0.5rem;
            }

            #settingsModal nav .settings-tab-btn {
                padding: 0.4rem 0.8rem;
                font-size: 0.8rem;
            }
        }

        /* --- REGRAS ESPECÍFICAS PARA O LAYOUT RESPONSIVO DOS RELATÓRIOS --- */
        @media (max-width: 768px) {

            /* Garante que o container principal dos relatórios não tenha rolagem horizontal */
            .reports-page-content {
                overflow-x: hidden;
            }

            /* Garante que o container da tabela possa rolar horizontalmente se necessário */
            #reportContent .overflow-auto {
                overflow-x: auto;
            }

            /* NOVO: Permite quebra de linha nos botões das abas de relatório em telas pequenas */
            #reportsModal .report-tab-btn {
                white-space: normal;
                /* Permite a quebra de linha */
                text-align: center;
                /* Centraliza o texto quebrado */
            }
        }


        /* =================================================================== */
        /* == INÍCIO: Layout de Cartões para a Tabela Principal (REVISADO)  == */
        /* =================================================================== */
        @media (max-width: 768px) {
            #listViewContainer {
                display: block;
            }

            #listViewContainer {
                max-height: none;
                overflow-y: visible;
            }

            #listViewContainer thead {
                display: none;
            }

            #listViewContainer tr {
                display: block;
                border: 1px solid #e5e7eb;
                border-radius: 0.75rem;
                margin-bottom: 1rem;
                padding: 1rem;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
                background-color: #fff;
            }

            /* AJUSTE PRINCIPAL: Fonte aumentada e espaçamento ajustado para melhor leitura */
            #listViewContainer td {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                padding: 0.35rem 0.25rem;
                /* Aumentado de 0.25rem para dar mais respiro */
                border-bottom: 1px dotted #f3f4f6;
                font-size: 0.95rem;
                /* Aumentado de 0.8rem para 0.95rem (aprox 15px) */
                line-height: 1.5;
                /* Aumentado de 1.4 para 1.5 */
                text-align: left;
            }

            #listViewContainer td:last-child {
                border-bottom: 0;
                justify-content: center;
                padding-top: 1rem;
            }

            #listViewContainer td::before {
                content: attr(data-label);
                font-weight: 600;
                padding-right: 0.5rem;
                color: var(--cor-primaria-escura);
                flex-shrink: 0;
                /* O label herdará o tamanho da fonte da célula, mantendo a proporção */
            }

            /* AJUSTE SECUNDÁRIO: Padding do título e intérpretes */
            #listViewContainer td[data-label="Intérprete(s)"],
            #listViewContainer td[data-label="Título"] {
                display: block;
                text-align: left;
                white-space: normal;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
            }

            #listViewContainer td[data-label="Intérprete(s)"]::before,
            #listViewContainer td[data-label="Título"]::before {
                display: block;
                margin-bottom: 0.25rem;
            }

            /* Campos de data/hora */
            #listViewContainer td[data-label="Data"] input,
            #listViewContainer td[data-label="Hora Início"] input,
            #listViewContainer td[data-label="Hora Término"] input {
                white-space: normal;
                font-size: 0.95rem;
                /* Garante que os inputs também tenham a fonte maior */
            }

            #listViewContainer td[data-label="Data"],
            #listViewContainer td[data-label="Hora Início"],
            #listViewContainer td[data-label="Hora Término"] {
                display: block;
            }

            #listViewContainer td[data-label="Ações"] {
                display: block;
                text-align: center;
            }
        }


        /* =================================================================== */
        /* == FIM: Layout de Cartões (REVISADO)                             == */
        /* =================================================================== */

        /* ========================================================= */
        /* == CONTROLE FINAL DE VISIBILIDADE DOS FILTROS == */
        /* ========================================================= */

        /* Por padrão, esconde todas as linhas de filtro que vamos controlar */
        #reportsModal #reportDateFilterRow,
        #reportsModal #reportTextFilterRow {
            display: none;
        }

        /* Regra para a aba 'Performance Intérpretes': */
        #reportsModal[data-active-tab="performance"] #reportDateFilterRow {
            display: flex !important;
            /* Força a exibição da linha de data */
        }

        #reportsModal[data-active-tab="performance"] #reportTextFilterRow {
            display: flex !important;
            /* Força a exibição da linha de filtros de texto */
        }

        #reportsModal[data-active-tab="performance"] #text-interpreter-filter-container {
            display: none !important;
            /* Esconde o filtro de texto/select de intérprete */
        }

        #reportsModal[data-active-tab="performance"] #checklist-interpreter-filter-container {
            display: block !important;
            /* MOSTRA O FILTRO DE CHECKLIST */
        }

        /* Regra para TODAS as outras abas: */
        #reportsModal:not([data-active-tab="performance"]) #reportDateFilterRow,
        #reportsModal:not([data-active-tab="performance"]) #reportTextFilterRow {
            display: flex !important;
        }

        /* Garante que a tabela do painel admin tenha um layout fixo */
        #adminModal table {
            table-layout: auto;
            width: 100%;
        }

        /* ESTILOS ISOLADOS PARA O SWITCH DA PÁGINA PRINCIPAL */
        .switch-label .switch-track {
            transition: background-color 0.2s ease-in-out;
        }

        .switch-label .switch-knob {
            transition: transform 0.2s ease-in-out;
        }

        /* Regra geral: QUANDO um checkbox escondido está MARCADO... */
        input[type="checkbox"]:checked+.switch-label .switch-track {
            background-color: var(--cor-primaria-media);
            /* ...muda a cor do fundo. */
        }

        input[type="checkbox"]:checked+.switch-label .switch-knob {
            transform: translateX(1.25rem);
            transform: translateX(1.125rem);
            /* 1.25rem (w-5) -> 1.125rem (w-4.5) */
        }

        /* ========================================================= */
        /* == CONTROLE DE VISIBILIDADE DOS FILTROS DOS RELATÓRIOS == */
        /* ========================================================= */

        /* Por padrão, esconde as linhas de filtro dentro do modal de relatórios */
        #reportsModal #reportDateFilterRow,
        #reportsModal #reportTextFilterRow {
            display: none;
        }

        /* Quando uma aba é clicada, o JS adicionará um atributo 'data-active-tab' ao modal. */
        /* Estas regras mostram os filtros corretos com base nesse atributo. */

        /* Para a maioria das abas, mostra AMBAS as linhas de filtro */
        #reportsModal[data-active-tab="empresa"] #reportDateFilterRow,
        #reportsModal[data-active-tab="empresa"] #reportTextFilterRow,
        #reportsModal[data-active-tab="interprete"] #reportDateFilterRow,
        #reportsModal[data-active-tab="interprete"] #reportTextFilterRow,
        #reportsModal[data-active-tab="lucratividade_analitica"] #reportDateFilterRow,
        #reportsModal[data-active-tab="lucratividade_analitica"] #reportTextFilterRow,
        #reportsModal[data-active-tab="lucratividade_sintetica"] #reportDateFilterRow,
        #reportsModal[data-active-tab="lucratividade_sintetica"] #reportTextFilterRow,
        #reportsModal[data-active-tab="pagamento"] #reportDateFilterRow,
        #reportsModal[data-active-tab="pagamento"] #reportTextFilterRow,
        #reportsModal[data-active-tab="faturamento"] #reportDateFilterRow,
        #reportsModal[data-active-tab="faturamento"] #reportTextFilterRow,
        #reportsModal[data-active-tab="performance_cliente"] #reportDateFilterRow,
        #reportsModal[data-active-tab="performance_cliente"] #reportTextFilterRow {
            display: flex;
        }

        /* Para a aba 'Performance Intérpretes', mostra APENAS a linha de datas (o filtro de texto será trocado pelo de checklist) */
        #reportsModal[data-active-tab="performance"] #reportDateFilterRow {
            display: flex;
        }


        /* Regra para a aba 'Performance Intérpretes': mostra APENAS a linha de data */
        #reportsModal[data-active-tab="performance"] #reportDateFilterRow {
            display: flex;
        }

        /* Regra para TODAS as outras abas: mostra AMBAS as linhas de filtro */
        #reportsModal:not([data-active-tab="performance"]) #reportDateFilterRow,
        #reportsModal:not([data-active-tab="performance"]) #reportTextFilterRow {
            display: flex;
            /
        }

        /* --- INÍCIO: Estilos para as Abas do Modal de Configurações --- */
        .report-tab-btn,
        .settings-tab-btn {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            /* text-sm */
            font-weight: 500;
            border-bottom: 2px solid transparent;
            color: #6b7280;
            /* gray-500 */
            transition: all 0.2s ease-in-out;
            cursor: pointer;
        }

        .report-tab-btn.active,
        .settings-tab-btn.active {
            color: var(--cor-primaria-media);
            border-color: var(--cor-primaria-media);
        }

        .report-tab-btn:hover:not(.active),
        .settings-tab-btn:hover:not(.active) {
            color: var(--cor-primaria-escura);
        }

        .settings-tab-content {
            display: none;
        }

        .settings-tab-content.active {
            display: block;
        }

        /* --- FIM: Estilos para as Abas --- */


        /* ... dentro da tag <style> ... */
        .vagas-tab-btn {
            border-color: transparent;
            color: #6b7280;
            /* gray-500 */
        }

        .vagas-tab-btn:hover {
            border-color: #d1d5db;
            /* gray-300 */
            color: #4b5563;
            /* gray-600 */
        }

        .vagas-tab-btn.active {
            border-color: var(--cor-primaria-media);
            color: var(--cor-primaria-media);
        }

        .vagas-tab-content.hidden {
            display: none;
        }


        /* NOVO: Garante que o cabeçalho dos relatórios fique em uma única linha */
        #reportsModal #reportContent .mb-4.text-center p.text-xl {
            white-space: nowrap;
            /* Impede a quebra de linha */
            overflow: hidden;
            /* Esconde o conteúdo que transborda */
            text-overflow: ellipsis;
            /* Adiciona reticências (...) ao texto cortado */
            max-width: 100%;
            /* Garante que o elemento ocupe no máximo 100% da largura disponível */
        }

        /* ==================================================================== */
        /* == FORÇA A REMOÇÃO DA BARRA DE ROLAGEM HORIZONTAL NOS RELATÓRIOS == */
        /* ==================================================================== */
        .reports-page-content {
            overflow-x: hidden;
        }

        /* Cores baseadas na imagem "Fundo Serviir.png" */
        :root {
            --cor-primaria-escura: #2A3A7D;
            /* Azul escuro/anil da imagem */
            --cor-primaria-media: #3B82F6;
            /* Azul médio para botões (Tailwind blue-500 como fallback) */
            --cor-secundaria-clara: #4FC0E8;
            /* Azul ciano/turquesa da imagem */
            --cor-destaque-vermelho: #EF5350;
            /* Vermelho/coral (Tailwind red-500) */
            --cor-fundo-secao-clara: #FDF6E3;
            /* Bege/creme bem claro, se necessário, ou usar brancos/cinzas */
            --cor-texto-sobre-escuro: #FFFFFF;
            --cor-texto-sobre-claro: #1F2937;
            /* Tailwind gray-800 */
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6;
            /* Tailwind gray-100 - Fundo geral */
        }

        .body-no-scroll {
            overflow: hidden;
        }

        /* --- INÍCIO: Estilos para o Modal de Relatórios em Tela Cheia --- */

        /* Quando a classe de ativação está no body, o modal de relatórios... */
        body.reports-fullscreen-active #reportsModal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            max-width: 100vw;
            max-height: 100vh;
            padding: 0;
            margin: 0;
            border-radius: 0;
            box-shadow: none;
            background-color: #f3f4f6;
            /* Mesma cor de fundo da sua aplicação */
        }

        /* ...e o seu conteúdo interno... */
        body.reports-fullscreen-active #reportsModal .modal-content {
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            padding: 0;
            border-radius: 0;
            box-shadow: none;
            display: flex;
            flex-direction: column;
        }

        /* Mostra o novo cabeçalho da "página" de relatórios */
        body.reports-fullscreen-active .reports-page-header {
            display: flex;
        }

        /* --- FIM: Estilos para o Modal de Relatórios em Tela Cheia --- */

        /* --- INÍCIO: AJUSTE RESPONSIVO PARA RELATÓRIOS EM TELA CHEIA --- */
        /* Garante que em telas menores (mobile), o modal ocupe 100% da tela,
        removendo margens e paddings que podem ser aplicados por outras regras. */
        @media (max-width: 768px) {
            body.reports-fullscreen-active #reportsModal {
                padding: 0 !important;
                margin: 0 !important;
            }

            body.reports-fullscreen-active #reportsModal .modal-content-fullscreen {
                width: 100%;
                height: 100%;
                max-width: 100%;
                max-height: 100%;
                padding: 0;
                border-radius: 0;
                box-shadow: none;
                display: flex;
                flex-direction: column;
            }
        }

        /* --- FIM: AJUSTE RESPONSIVO --- */

        /* Garante que o modal de criar usuário fique na frente do Painel Admin */
        #adminCreateUserModal {
            z-index: 105;
        }

        /* --- FIM DA CORREÇÃO --- */
        .modal {
            display: none;
            /* Hidden by default, JavaScript will change to flex */
            position: fixed;
            z-index: 100;
            left: 0;
            top: 0;
            width: 100vw;
            /* Garante 100% da largura da viewport */
            height: 100vh;
            /* Garante 100% da altura da viewport */
            overflow: auto;
            /* Permite rolagem se o conteúdo for maior que a tela */
            background-color: rgba(0, 0, 0, 0.5);
            /* Fundo escuro */
            align-items: center;
            /* Centraliza verticalmente o conteúdo */
            justify-content: center;
            /* Centraliza horizontalmente o conteúdo */
        }


        .modal-content {
            background-color: #ffffff;
            /* margin: auto; <-- REMOVIDO para permitir que o flexbox do pai centralize */
            padding: 20px;
            border-radius: 8px;
            width: 90%;
            max-width: 600px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }


        .modal-content-lg {
            max-width: 1200px !important;
        }

        .modal-content-fullscreen {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            /* Força os filhos a respeitarem os cantos arredondados */

            /* Layout para Desktop (com margens) */
            position: absolute;
            top: 1.7vh;
            bottom: 3vh;
            left: 1vw;
            right: 1vw;
        }

        /* --- INÍCIO DA CORREÇÃO --- */
        /* Layout para Telas Pequenas (Mobile) */
        @media (max-width: 768px) {
            .modal-content-fullscreen {
                /* Força a ocupar 100% da tela, removendo margens e bordas */
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                height: 100%;
                border-radius: 0;
                box-shadow: none;
            }
        }

        /* --- FIM DA CORREÇÃO --- */


        .login-modal-content {
            /* Specific for login modal */
            max-width: 400px;
        }

        .modal-close-btn {
            transition: transform 0.2s;
        }

        .modal-close-btn:hover {
            transform: scale(1.1);
        }

        /* NOVO: Garante que alertas e confirmações fiquem por cima de outros modais */
        #customAlertModal,
        #customConfirmModal {
            z-index: 110;
        }

        .table-cell-truncate {
            max-width: 150px;
            /* Adjust as needed */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .table-cell-id {
            max-width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .table-cell-actions {
            width: 220px;
            /* Adjusted width for more action buttons */
        }

        .report-cell-truncate {
            max-width: 120px;
            /* Largura máxima da célula */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Custom scrollbar for appointment list */
        .appointments-container::-webkit-scrollbar {
            width: 8px;
        }

        .appointments-container::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .appointments-container::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }

        .appointments-container::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Ensure select dropdowns are visible */
        select {
            -webkit-appearance: menulist-button;
            -moz-appearance: menulist-button;
            appearance: menulist-button;
            background-color: white;
            /* Ensure background for visibility */
            border: 1px solid #d1d5db;
            /* Tailwind gray-300 */
            padding: 0.5rem 0.75rem;
            /* py-2 px-3 */
            border-radius: 0.375rem;
            /* Tailwind rounded-md */
            line-height: 1.5rem;
            /* Ensure consistent height with inputs */
            height: calc(1.5rem + 1rem + 2px);
            /* Match input height: line-height + padding-y + border-y */
        }

        input[type="text"],
        input[type="date"],
        input[type="url"],
        input[type="number"],
        input[type="time"],
        input[type="email"],
        input[type="password"] {
            /* py-2 px-3 */
            line-height: 1.5rem;
            /* Ensure consistent height with selects */
            height: calc(1.5rem + 1rem + 2px);
            /* Match select height */
        }

        textarea {
            padding: 0.5rem 0.75rem;
            line-height: 1.5rem;
        }

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

        input[type="number"] {
            -moz-appearance: textfield;
            appearance: textfield;
            /* Firefox */
        }

        .filter-item {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

        .filter-item label {
            margin-bottom: 0.25rem;
            /* Tailwind mb-1 */
        }

        .filter-item input[type="text"],
        .filter-item input[type="date"],
        .filter-item input[type="number"],
        .filter-item select,
        .filter-item button {
            width: 100%;
            height: calc(1.5rem + 1rem + 2px + 2px);
            /* Input line-height + padding-y + border-y + small adjustment */
        }

        #clientFilterPanel input[type="checkbox"],
        #interpreterMultiSelectPanel input[type="checkbox"] {
            height: auto;
            width: auto;
        }


        .filter-item select {
            /* Specific height for select to match button */
            height: calc(1.5rem + 1rem + 2px + 2px);
        }


        /* FullCalendar custom styling */
        #calendarContainer {
            background-color: white;
            padding: 1rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .fc .fc-toolbar-title {
            font-size: 1.25em;
            /* Tailwind text-xl */
            color: var(--cor-primaria-escura);
        }

        .fc .fc-button {
            background-color: var(--cor-primaria-media);
            border-color: var(--cor-primaria-media);
            color: var(--cor-texto-sobre-escuro);
            text-transform: capitalize;
            font-weight: 500;
            padding: 0.5em 1em;
            border-radius: 0.375rem;
        }

        .fc .fc-button:hover {
            background-color: var(--cor-primaria-escura);
            border-color: var(--cor-primaria-escura);
        }

        .fc .fc-button-primary:disabled {
            background-color: #9ca3af;
            border-color: #9ca3af;
        }

        .fc-event {
            cursor: pointer;
        }

        .fc-event:hover {
            opacity: 0.8;
        }

        .view-toggle-button.active {
            background-color: var(--cor-primaria-escura) !important;
            color: var(--cor-texto-sobre-escuro);
        }

        .view-toggle-button:disabled {
            background-color: #9ca3af;
            cursor: not-allowed;
            opacity: 0.7;
        }

        .share-list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid #e5e7eb;
        }

        .share-list-item:last-child {
            border-bottom: none;
        }

        .app-logo {
            height: 50px;
            width: auto;
            margin-right: 1rem;
        }

        #mainAgendaContainer.hidden {
            display: none;
        }

        .quantity-control button {
            width: 2.5rem;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .report-sticky-header {
            position: -webkit-sticky;
            position: sticky;
            position: sticky;
            top: 0;
            /* Fixa o cabeçalho no topo do container de rolagem */
            z-index: 10;
            /* Garante que o cabeçalho fique por cima do conteúdo da tabela */
        }

        .report-sticky-summary {
            position: -webkit-sticky;
            position: sticky;
            background-color: #ffffff;
            /* Fundo branco para não ser transparente */
            padding-top: 1rem;
            /* Espaçamento superior */
            border-top: 2px solid #e5e7eb;
            /* Linha divisória superior */
            margin-top: 1rem;
            /* Adicionado para criar um espaço visual após a tabela */
            box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
            /* Sombra para dar efeito de elevação */
        }

        /* --- INÍCIO: Estilos para o Modal de Visualização de Impressão --- */
        #printPreviewModal .modal-content {
            max-width: 95vw;
            /* Aumenta a largura do modal */
            max-height: 95vh;
            /* Aumenta a altura do modal */
            width: 95vw;
            height: 95vh;
            background-color: #f3f4f6;
            /* Fundo cinza, igual ao da página de relatórios */
            padding: 1rem;
            /* Adiciona um pequeno espaçamento interno */
        }

        #printPreviewContent {
            background-color: white;
            /* O conteúdo interno fica em um "cartão" branco */
            padding: 1.5rem;
            /* Espaçamento interno do cartão */
            border-radius: 0.5rem;
            /* Bordas arredondadas */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            /* Sombra suave */
            height: 100%;
            overflow-y: auto;
            /* Garante a rolagem se o conteúdo for grande */
        }

        /* --- FIM: Estilos para o Modal de Visualização de Impressão --- */

        /* NOVO: Estilos para a funcionalidade de impressão */
        .print-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            border-bottom: 2px solid #e5e7eb;
            margin-bottom: 1rem;
            background-color: white;
        }

        .print-header img {
            height: 40px;
        }

        .print-header h4 {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--cor-primaria-escura);
            text-align: right;
        }

        /* ========================================================================
        ESTILOS FINAIS PARA IMPRESSÃO E GERAÇÃO DE PDF
        ======================================================================== */

        @media print {

            /* 1. Esconde tudo na página, exceto o modal do relatório */
            body>*:not(#reportsModal) {
                display: none !important;
            }

            /* 2. Esconde os controles do modal (cabeçalho, abas, botões, etc.) */
            .no-print,
            #reportsModal header,
            #reportsModal nav,
            #reportsModal [role="dialog"]>div>div:last-child

            /* Div dos botões Cancelar/Baixar */
                {
                display: none !important;
            }

            /* 3. Reseta o layout do modal e dos containers para ocupar a página inteira */
            #reportsModal,
            #reportsModal [role="dialog"],
            #reportsModal [role="dialog"]>div,
            #reportContent,
            #reportContent>.overflow-auto {
                display: block !important;
                width: 100% !important;
                height: auto !important;
                max-height: none !important;
                overflow: visible !important;
                /* Remove QUALQUER barra de rolagem */
                box-shadow: none !important;
                border: none !important;
                background: transparent !important;
                padding: 0 !important;
                margin: 0 !important;
            }

            /* 4. ## REGRAS AGRESSIVAS PARA A TABELA ## */
            #reportContent table {
                table-layout: auto !important;
                /* Deixa o navegador se esforçar para ajustar as colunas */
                width: 100% !important;
                font-size: 7pt !important;
                /* Fonte bem pequena para caber mais */
                border-collapse: collapse !important;
                page-break-inside: auto;
            }

            /* 5. Cabeçalho se repete em toda página */
            #reportContent thead {
                display: table-header-group !important;
            }

            /* 6. Células com menos espaçamento e quebra de palavra forçada */
            #reportContent th,
            #reportContent td {
                padding: 2px 3px !important;
                border: 1px solid #ccc;
                /* Adiciona uma borda fina para melhor visualização */
                word-break: break-word;
                /* Quebra palavras se necessário */
            }

            /* 7. Evita quebras no meio de uma linha ou do rodapé */
            #reportContent tr,
            .report-sticky-summary {
                page-break-inside: avoid !important;
            }

            /* 8. Garante que o rodapé com os totais não tenha fundo e fique no fluxo */
            .report-sticky-summary {
                position: static !important;
                background: none !important;
                border-top: 2px solid #333;
                margin-top: 10px;
            }
        }

        @media (max-height: 500px) and (max-width: 920px) {
            .report-sticky-summary {
                position: static !important;
                /* Força a remoção do 'sticky' */
                box-shadow: none;
                margin-top: 1rem;
                border-top: 2px solid #e5e7eb;
            }
        }

        /* --- Título Principal --- */
        /* Alvo: O H3 dentro do modal do admin */
        #adminModal h3 {
            font-size: 1.25rem;
            /* Equivalente a text-xl do Tailwind */
            line-height: 1.75rem;
        }

        /* --- Cabeçalho da Tabela --- */
        /* Alvo: As células de cabeçalho (th) dentro do painel */
        #adminModal thead th {
            padding-top: 0.5rem;
            /* py-2 */
            padding-bottom: 0.5rem;
            /* py-2 */
            font-size: 0.75rem;
            /* text-xs, para garantir */
        }

        /* --- Corpo da Tabela --- */
        /* Alvo: As células de dados (td) dentro do painel */
        #adminModal tbody td {
            padding-top: 0.75rem;
            /* py-3 */
            padding-bottom: 0.75rem;
            /* py-3 */
            font-size: 0.875rem;
            /* text-sm, este é o ajuste principal */
        }

        /* --- Ícones de Ação --- */
        /* Garante que os ícones nos botões não fiquem pequenos demais */
        #adminModal tbody button {
            font-size: 1rem;
            /* Mantém os ícones com um bom tamanho para clique */
        }

        .coluna-id-relatorio {
            width: 50px !important;
            /* Define uma largura fixa e pequena */
        }

        #batchProgressModal {
            z-index: 105;
        }

        /* Alinha o contêiner do cabeçalho do preview à esquerda para relatórios largos */
        .wide-report-view .print-header-container {
            justify-content: flex-start !important;
        }

        /* Alarga o rodapé de totais e alinha seu conteúdo à esquerda */
        .wide-report-view .report-sticky-summary {
            max-width: 100% !important;
            /* Faz o container do rodapé ocupar mais espaço */
            margin-left: 0;
            margin-right: auto;
        }

        .wide-report-view .report-sticky-summary>div {
            justify-content: flex-start !important;
            /* Alinha os itens do rodapé à esquerda */
        }

        /*
  CSS para animar a seta do painel de filtros
*/
        #filterToggleBtn.expanded #filterArrow {
            transform: rotate(180deg);
        }

        /*
CSS para animar a seta do painel do dashboard
*/
        #dashboardToggleBtn.expanded #dashboardArrow {
            transform: rotate(180deg);
        }

        /*
          CSS para animar a seta do painel de regras de arredondamento
        */
        #roundingRulesToggleBtn.expanded #roundingRulesArrow {
            transform: rotate(180deg);
        }

        /*
  CSS para animar a seta do painel de regras de arredondamento
  Adicionado !important para forçar a aplicação
*/
        #roundingRulesToggleBtn.expanded #roundingRulesArrow {
            transform: rotate(180deg) !important;
        }

        /* =================================================================== */
        /* == INÍCIO: ESTILOS PARA BOTÕES EXPANSÍVEIS DO PAINEL ADMIN      == */
        /* =================================================================== */

        /* ESTILO PADRÃO (MOBILE-FIRST): Botões redondos que expandem no hover */
        .admin-expand-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 2.5rem;
            /* 40px */
            width: 2.5rem;
            /* 40px, tamanho inicial só para o ícone */
            padding: 0.5rem;
            border-radius: 9999px;
            /* Totalmente redondo */
            overflow: hidden;
            white-space: nowrap;
            transition: width 0.3s ease-in-out, background-color 0.2s;
        }

        .admin-expand-btn .btn-text {
            width: 0;
            opacity: 0;
            margin-left: 0;
            transition: width 0.2s ease-in-out, opacity 0.2s ease-in-out, margin-left 0.2s;
        }

        /* Efeito de expansão no hover (para mobile e touch, o foco também ativa) */
        .admin-expand-btn:hover,
        .admin-expand-btn:focus {
            width: auto;
            padding-left: 0.75rem;
            padding-right: 1rem;
        }

        .admin-expand-btn:hover .btn-text,
        .admin-expand-btn:focus .btn-text {
            width: auto;
            opacity: 1;
            margin-left: 0.5rem;
        }

        /* NOVO: ESTILO PARA DESKTOP (telas com 768px ou mais) */
        @media (min-width: 768px) {
            .admin-expand-btn {
                /* Botão já começa expandido */
                width: auto;
                padding-left: 0.75rem;
                padding-right: 1rem;
            }

            .admin-expand-btn .btn-text {
                /* Texto já começa visível */
                width: auto;
                opacity: 1;
                margin-left: 0.5rem;
            }

            /* Remove a animação de largura no hover para desktop, pois já está expandido */
            .admin-expand-btn:hover,
            .admin-expand-btn:focus {
                width: auto;
            }
        }

        /* =================================================================== */
        /* == FIM: ESTILOS PARA BOTÕES EXPANSÍVEIS DO PAINEL ADMIN        == */
        /* =================================================================== */

        /* =================================================================== */
        /* == INÍCIO: AJUSTE RESPONSIVO PARA BOTÕES DE AÇÃO PRINCIPAIS      == */
        /* =================================================================== */
        @media (max-width: 768px) {

            /* 1. Container dos botões: define uma grade 2x2 e espaçamento */
            .main-actions-container {
                display: grid;
                gap: 0.0em;
                /* Espaçamento entre os botões */
                width: 100;
                /* Garante que o container ocupe a largura total disponível */
            }

            /* 2. Botões individuais: garante que ocupem o espaço disponível no grid */
            .main-actions-container button {
                width: 90%;
                /* Ocupa toda a largura da coluna do grid */
                padding-left: 0.1rem;
                padding-right: 0.1rem;
                font-size: 0.7rem;
                white-space: wrap;
                /* Evita que o texto do botão quebre */
            }
        }

        /* =================================================================== */
        /* == FIM: AJUSTE RESPONSIVO                                        == */
        /* =================================================================== */

        /* =================================================================== */
        /* == INÍCIO: Layout de Tela Cheia para a Agenda Principal (v9)     == */
        /* =================================================================== */

        /* 1. Garante que o body ocupe toda a tela quando a agenda estiver ativa */
        html.fullscreen-agenda-active {
            height: 100%;
            overflow: hidden;
        }

        body.fullscreen-agenda-active {
            height: 100%;
            overflow: hidden;
        }

        /* 2. Transforma o body em um container flex para posicionar a agenda e o rodapé */
        body.fullscreen-agenda-active {
            display: flex;
            flex-direction: column;
            /* Empilha a agenda e o rodapé verticalmente */
        }

        /* 3. Garante que o container da agenda ocupe o espaço disponível */
        body.fullscreen-agenda-active #mainAgendaContainer {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
            /* Correção crucial para o flexbox no Firefox/Safari */
        }

        /* 4. Estilos para o "cartão" flutuante (APENAS DESKTOP) */
        @media (min-width: 768px) {
            body.fullscreen-agenda-active #mainAgendaContainer {
                background-color: #ffffff;
                border-radius: 0.5rem;
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                overflow: hidden;
                flex-shrink: 0;
                flex-grow: 0;

                /* --- INÍCIO DA ALTERAÇÃO --- */
                /* Removemos width, height e margin e usamos as 4 propriedades abaixo */
                /* Agora você pode ajustar cada valor de forma independente */
                position: absolute;
                top: 1rem;
                /* Margem superior */
                bottom: 2rem;
                /* Margem inferior (espaço para o rodapé) */
                left: 1vw;
                /* Margem esquerda */
                right: 1vw;
                /* Margem direita */
                /* --- FIM DA ALTERAÇÃO --- */
            }
        }

        /* 5. Garante que o cabeçalho não encolha */
        body.fullscreen-agenda-active #mainAgendaContainer>header {
            flex-shrink: 0;
        }

        /* 6. Transforma o <main> no container de rolagem principal DENTRO do cartão/container */
        body.fullscreen-agenda-active #mainAgendaContainer>main {
            flex-grow: 1;
            overflow-y: auto;
            /* A rolagem acontece aqui! */
        }

        /* 7. Remove a altura máxima da lista, pois agora o <main> controla a rolagem */
        body.fullscreen-agenda-active #listViewContainer {
            max-height: none;
        }

        /* 8. Estiliza o rodapé para que ele se posicione corretamente */
        body.fullscreen-agenda-active footer {
            margin-top: auto;
            flex-shrink: 0;
            background-color: transparent;
        }

        /* 9. CORREÇÃO CRÍTICA: Faz o painel de vagas empurrar o layout corretamente (APENAS DESKTOP) */
        @media (min-width: 768px) {
            body.panel-pinned.fullscreen-agenda-active #mainAgendaContainer {
                width: calc(95% - 450px);
                margin-left: 1rem;
                margin-right: auto;
            }
        }

        /* =================================================================== */
        /* == FIM: Layout de Tela Cheia para a Agenda Principal (v9)        == */
        /* =================================================================== */

        /* =================================================================== */
        /* == INÍCIO DA SOLUÇÃO: Correção Definitiva do Rodapé Flutuante   == */
        /* =================================================================== */

        /* 
          1. Transforma o <body> em um container flexível que organiza 
             seus filhos (o wrapper de conteúdo e o rodapé) em uma coluna.
        */
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            /* Garante que o corpo ocupe no mínimo a altura total da tela. */
        }

        /*
          2. A classe 'flex-grow' que adicionamos no HTML faz com que o 
             container do conteúdo (#page-content-wrapper) cresça para ocupar 
             todo o espaço vertical disponível, empurrando o rodapé para baixo.
        */
        .flex-grow {
            flex-grow: 1;
        }

        /* =================================================================== */
        /* == INÍCIO DA SOLUÇÃO: Alinhamento à Esquerda no Modo Responsivo   == */
        /* =================================================================== */

        /*
          Esta regra se aplica apenas em telas com largura máxima de 768px (modo móvel).
          Ela força TODAS as células (td) da lista de compromissos a se alinharem à esquerda,
          sobrescrevendo qualquer classe 'text-center' que venha do HTML.
        */
        @media (max-width: 768px) {
            #listViewContainer td {
                text-align: left !important;
            }

            /*
              Força também o conteúdo dos inputs (Data, Início, Término) a se alinhar à esquerda.
            */
            #listViewContainer td input {
                text-align: left !important;
            }


        }

        /* --- Estilos do Tour Guiado (Shepherd.js) --- */
        .shepherd-element {
            background: #fff;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            border: 1px solid #e5e7eb;
            max-width: 400px;
            font-family: 'Inter', sans-serif;
            z-index: 9999;
            /* Garante que fique acima de tudo */
        }

        .shepherd-header {
            background: #f9fafb;
            border-bottom: 1px solid #e5e7eb;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            padding: 0.75rem 1rem;
        }

        .shepherd-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--cor-primaria-escura);
        }

        .shepherd-text {
            padding: 1rem;
            font-size: 0.875rem;
            color: #374151;
            line-height: 1.5;
        }

        .shepherd-footer {
            padding: 0.75rem 1rem;
            border-top: 1px solid #e5e7eb;
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
        }

        .shepherd-button {
            background: var(--cor-primaria-media);
            color: white;
            border: none;
            border-radius: 0.375rem;
            padding: 0.5rem 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .shepherd-button:hover {
            background: var(--cor-primaria-escura);
        }

        .shepherd-button-secondary {
            background: #e5e7eb;
            color: #374151;
        }

        .shepherd-button-secondary:hover {
            background: #d1d5db;
        }


        /* =================================================================== */
        /* == ESTILOS DAS ABAS DE RELATÓRIOS (PÍLULAS COLORIDAS)             == */
        /* =================================================================== */
        
        /* Estilo base do botão de aba */
        .report-tab-btn {
            transition: all 0.2s ease-in-out;
            border-radius: 9999px; /* Garante o formato de pílula */
        }
        
        /* --- Grupo Operacional (Cinza/Slate) --- */
        .report-tab-btn[data-group="operacional"].active {
            background-color: #475569 !important; /* slate-600 */
            color: white !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border-color: transparent;
        }
        
        /* --- Grupo Lucratividade (Verde/Emerald) --- */
        .report-tab-btn[data-group="lucratividade"].active {
            background-color: #059669 !important; /* emerald-600 */
            color: white !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border-color: transparent;
        }
        
        /* --- Grupo Faturamento (Azul) --- */
        .report-tab-btn[data-group="faturamento"].active {
            background-color: #2563eb !important; /* blue-600 */
            color: white !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border-color: transparent;
        }
        
        /* --- Grupo Pagamento (Laranja) --- */
        .report-tab-btn[data-group="pagamento"].active {
            background-color: #ea580c !important; /* orange-600 */
            color: white !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border-color: transparent;
        }
        
        /* --- Grupo Performance (Roxo) --- */
        .report-tab-btn[data-group="performance"].active {
            background-color: #9333ea !important; /* purple-600 */
            color: white !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border-color: transparent;
        }
        
        /* =================================================================== */
        /* == AJUSTES RESPONSIVOS PARA O MODAL DE IMPRESSÃO (MOBILE RETRATO) == */
        /* =================================================================== */
        @media (max-width: 768px) and (orientation: portrait) {
            /* Seleciona o rodapé do modal onde estão os botões */
            #printPreviewModal .modal-content-fullscreen > div:last-child {
                justify-content: center !important;
                flex-wrap: wrap !important;
                gap: 0.5rem !important;
                padding: 0.75rem !important;
            }
        
            /* Remove a margem esquerda aplicada pela classe space-x-3 do Tailwind */
            #printPreviewModal .modal-content-fullscreen > div:last-child > :not([hidden]) ~ :not([hidden]) {
                margin-left: 0 !important;
            }
        
            /* Ajusta o estilo dos botões */
            #printPreviewModal .modal-content-fullscreen > div:last-child button {
                font-size: 0.7rem !important; /* Diminui o tamanho da fonte */
                padding: 0.5rem 0.25rem !important; /* Ajusta o preenchimento */
                flex: 1 1 45% !important; /* Faz os botões ocuparem aprox. metade da largura (2 por linha) */
                margin: 0 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                white-space: normal !important; /* Permite quebra de linha no texto do botão se necessário */
                line-height: 1.1 !important;
                text-align: center !important;
                height: auto !important; /* Permite altura variável */
                min-height: 2.5rem !important; /* Altura mínima para toque */
            }
        }