/* Importação da fonte Inter do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Define a fonte padrão para todo o corpo do documento */
body {
    font-family: 'Inter', sans-serif;
}

/* Esconde a barra de rolagem para elementos com a classe .overflow-y-auto em navegadores WebKit (Chrome, Safari, Opera) */
.overflow-y-auto::-webkit-scrollbar {
    display: none;
}
/* Esconde a barra de rolagem para elementos com a classe .overflow-y-auto em IE e Edge, e para Firefox */
.overflow-y-auto {
    -ms-overflow-style: none; /* IE e Edge */
    scrollbar-width: none;    /* Firefox */
}

/* Estilos específicos para o layout do calendário (grid de dias) */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 colunas de igual largura */
    /* Usar flex-grow para que o grid ocupe o espaço disponível no seu contentor flex */
    /* O overflow-y-auto no elemento pai (#content-area) ou neste próprio elemento gerirá o scroll */
    flex-grow: 1; /* Permite que o grid se estenda */
    overflow-y: auto; /* Permite scroll vertical se o conteúdo exceder a altura do grid */
    border-top: 1px solid #e5e7eb; /* Borda superior para separar o cabeçalho do calendário */
}

/* Estilos para cada célula (dia) do calendário */
.calendar-day {
    padding: 8px; /* Espaçamento interno */
    border: 1px solid #e5e7eb; /* Bordas para separar os dias */
    display: flex;
    flex-direction: column; /* Conteúdo empilhado verticalmente */
    cursor: pointer; /* Indica que é clicável */
    transition: background-color 0.2s; /* Transição suave na cor de fundo ao passar o rato */
    overflow: hidden; /* Esconde conteúdo que transborda */
    height: auto; /* Altura flexível */
    min-height: 100px; /* Altura mínima para cada célula do dia */
}

/* Estilo para o dia atual */
.calendar-day.today-day {
    background-color: #e0e7ff; /* Fundo azul claro para o dia atual */
    border-color: #4f46e5; /* Borda azul mais escura */
    box-shadow: 0 0 0 2px #6366f1 inset; /* Anel azul interior */
}
/* Estilo para o número do dia atual para o tornar mais visível */
.calendar-day.today-day .day-number {
    font-weight: 700; /* Negrito */
    color: #4f46e5; /* Cor do texto azul */
}


/* Estilo ao passar o rato sobre um dia do calendário */
.calendar-day:not(.today-day):hover {
    background-color: #f9fafb; /* Cor de fundo mais clara ao passar o rato */
}

/* Estilo para o número do dia dentro da célula do calendário */
.calendar-day .day-number {
    font-weight: 600; /* Negrito */
    font-size: 1.125rem; /* Tamanho do texto */
    color: #374151; /* Cor do texto */
}

/* Estilos para a lista de eventos dentro de cada dia do calendário */
.calendar-day .event-list {
    margin-top: 4px; /* Espaçamento superior */
    display: flex;
    flex-direction: column;
    gap: 2px; /* Espaçamento entre os eventos */
    overflow-y: auto; /* Permite scroll vertical para muitos eventos */
    max-height: 100px; /* Limita a altura da lista de eventos */
}

/* Estilo para cada evento individual dentro da lista de eventos do calendário */
.calendar-event {
    font-size: 0.75rem; /* Texto pequeno */
    font-weight: 500; /* Peso médio da fonte */
    border-radius: 0.375rem; /* Cantos arredondados */
    padding: 2px 4px; /* Espaçamento interno */
    white-space: nowrap; /* Impede que o texto quebre linha */
    overflow: hidden; /* Esconde texto que excede a largura */
    text-overflow: ellipsis; /* Adiciona "..." para texto cortado */
    color: white; /* Cor do texto branca para contrastar com a cor de fundo do evento */
}

/* As seguintes regras também escondem a barra de rolagem para elementos com max-h-full e overflow-y-auto */
.max-h-full::-webkit-scrollbar {
    display: none;
}
.max-h-full {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Estilos para o menu fixo inferior */
nav {
    position: fixed; /* Torna o menu fixo */
    bottom: 0; /* Alinha-o à parte inferior */
    width: 100%; /* Ocupa toda a largura */
    left: 0;
    right: 0;
    padding-bottom: env(safe-area-inset-bottom); /* Para compatibilidade com dispositivos móveis */
    /* Estilos para o fundo semi-transparente e arredondado */
    /* backdrop-filter e -webkit-backdrop-filter aplicam um efeito de blur ao que está por trás */
    background-color: rgba(255, 255, 255, 0.85); /* Fundo branco com 85% de opacidade */
    -webkit-backdrop-filter: blur(5px); /* Efeito de blur para fundo (compatibilidade WebKit) */
    backdrop-filter: blur(5px); /* Efeito de blur para fundo */
    border-top-left-radius: 1.5rem; /* Canto superior esquerdo arredondado */
    border-top-right-radius: 1.5rem; /* Canto superior direito arredondado */
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave para levantar o menu */
    z-index: 51; /* Garante que fica por cima do conteúdo e de elementos com z-index 50 (como modais antigos) */
}