/* Define a cor de fundo padrão e a fonte, para consistência com o app */
body {
    background-color: #E6F0FF; /* azulClaroFundo */
    font-family: 'Inter', sans-serif;
}

/* Classe helper para esconder/mostrar seções */
.hidden {
    display: none;
}

/* * [INÍCIO DA REFATORAÇÃO - Fade Suave do Modal]
 * Adicionamos transições de opacidade e transformação.
 */

/* Estilos para o Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;

    /* Define o estado inicial (fechado) e a transição */
    opacity: 0;
    transition: opacity 200ms ease-in-out;
}

/* [NOVO] Estado aberto para o overlay (controlado via JS) */
.modal-overlay.is-open {
    opacity: 1;
}

.modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    width: 90%;
    max-width: 500px; /* Padrão */
    max-height: 90vh;
    overflow-y: auto;

    /* Define o estado inicial (fechado) e a transição */
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
}

/* [NOVO] Estado aberto para o conteúdo (controlado via JS) */
.modal-overlay.is-open .modal-content {
    opacity: 1;
    transform: scale(1);
}

/* [FIM DA REFATORAÇÃO] */


/* [NOVO] Classe para modal maior (Configurações) */
.modal-content-large {
    max-width: 700px; /* Mais largo para abas */
}

/* [NOVO] Estilos para as Abas do Modal de Configurações */
.settings-tab-button {
    padding: 0.75rem 0.25rem;
    white-space: nowrap;
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem;
    font-weight: 500;
    border-bottom-width: 2px;
    border-color: transparent;
    color: #6B7280; /* text-gray-500 */
    outline: none;
    transition: all 0.2s ease-in-out;
}

.settings-tab-button:hover {
    border-color: #D1D5DB; /* text-gray-300 */
    color: #374151; /* text-gray-700 */
}

.settings-tab-button.active {
    border-color: #2563EB; /* border-blue-600 */
    color: #2563EB; /* text-blue-600 */
}

/*
 * [INÍCIO DA REFATORAÇÃO]
 * Transições suaves e altura mínima para abas (Relatórios e Configurações)
 */

/* 1. Aplica a transição de fade para AMBOS os tipos de abas */
.tab-content,
.settings-tab-content {
    transition: opacity 0.15s ease-in-out;
}

/* 2. Define a altura mínima para o container das abas do modal (evita o "pulo") */
.settings-tab-content {
    min-height: 400px; 
}

/* 3. [CORRIGIDO] Classe de fade genérica (usada por relatorios.js e settings.js) */
/* Substitui a antiga classe .tab-content.is-fading */
.is-fading {
    opacity: 0;
}

/* [FIM DA REFATORAÇÃO] */


#reports-content-container {
    /* Define uma altura mínima para evitar o "pulo" da página */
    /* Ajuste este valor se a sua tabela de plantões for mais alta */
    min-height: 450px; 
}

/* [INÍCIO DA REFATORAÇÃO - Fade Suave do Painel de Notificações] */

/* O painel é posicionado via JS, mas podemos adicionar transições */
#notification-panel {
    /* Define a transição para opacidade e transformação */
    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;

    /* Garante que o painel de notificações fique acima de outros elementos */
    z-index: 1050; 

    /* Estado inicial (fechado/escondido) */
    opacity: 0;
    /* Leve encolhimento e sobe um pouco para um efeito "pop" */
    transform: scale(0.95) translateY(-10px);
    
    /* Garante que a origem da transformação seja o canto superior direito */
    transform-origin: top right;
}

/* [NOVO] Classe de estado "aberto" */
#notification-panel.is-open {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* [FIM DA REFATORAÇÃO] */

/* Garante que o modal principal fique acima do painel de notificação */
.modal-overlay {
    z-index: 1100;
}


/* Estilo para os itens da lista de notificação */
#notification-list li {
    transition: background-color 0.2s ease-in-out;
}

#notification-list li:last-child {
    border-bottom: none;
}

/* Estilo para o <select> dentro do painel de notificação */
#notification-list select {
    /* Garante que o select se pareça com os outros inputs */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%2Mxmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22none%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20stroke%3D%22%236b7280%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m6%208%204%204%204-4%22%2OF%3E%3C%2Fsvg%3E');
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem; /* Espaço para a seta */
}

/* [INÍCIO DA REFATORAÇÃO - Fade Suave da Página (Dashboard/Financeiro)] */

/* 1. Define a transição para as seções principais */
/* Duração maior (300ms) para uma transição de página inteira */
#dashboard-section,
#finance-section {
    transition: opacity 600ms ease-in-out;
}

/* 2. A classe .is-fading (definida acima) será usada para o fade-out */

/* [FIM DA REFATORAÇÃO] */