/* public/css/public_style.css */

/*--------------------------------------------------------------
# Variáveis CSS (Reutilizando do seu public_layout.php se houver)
--------------------------------------------------------------*/
:root {
    --cor-azul-principal-cmpa: #003366;
    --cor-azul-secundario-cmpa: #005c9e;
    --cor-texto-sobre-azul: #ffffff;
    --cor-cinza-claro-fundo: #f8f9fa; /* Bootstrap light */
    --cor-cinza-bordas: #dee2e6;     /* Bootstrap default border color */
    --cor-texto-principal: #212529;  /* Bootstrap dark text */
    --cor-texto-secundario: #6c757d; /* Bootstrap secondary text */
    --bs-primary: #0d6efd; /* Cor primária padrão do Bootstrap, ajuste se necessário */
    --bs-primary-dark: #0a58ca; /* Variação mais escura do primário */
    --bs-secondary: #6c757d;
}

/*--------------------------------------------------------------
# Estilos Gerais
--------------------------------------------------------------*/
body, html {
    font-family: 'Montserrat', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

body {
    background-color: #f4f7f9; /* Fundo global ligeiramente azulado/acinzentado */
    color: var(--cor-texto-principal);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

main.container {
    flex-grow: 1;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; /* Um pouco menos pesado que 700 para um look mais suave */
    color: var(--cor-azul-principal-cmpa); /* Títulos com a cor principal */
}

a {
    color: var(--cor-azul-secundario-cmpa);
    text-decoration: none;
}
a:hover {
    color: var(--cor-azul-principal-cmpa);
    text-decoration: underline;
}

/*--------------------------------------------------------------
# Header (Estilos do public_layout.php são mais específicos e prevalecem)
--------------------------------------------------------------*/
/* Os estilos de header do public_layout.php são mais detalhados.
   Este bloco pode ser removido ou usado para overrides muito específicos se necessário.
   Seu public_layout.php já lida bem com o header. */

/*--------------------------------------------------------------
# Cards
--------------------------------------------------------------*/
.card {
    border: 1px solid var(--cor-cinza-bordas);
    margin-bottom: 1.5rem; /* Bootstrap usa $card-spacer-y, geralmente 1rem ou 1.5rem */
    border-radius: 0.375rem; /* Bootstrap .rounded */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header {
    background-color: var(--cor-cinza-claro-fundo);
    color: var(--cor-texto-secundario);
    border-bottom: 1px solid var(--cor-cinza-bordas);
    padding: 0.75rem 1.25rem; /* Padding padrão do Bootstrap */
    font-weight: 500;
}
.card-title {
     color: var(--cor-azul-principal-cmpa);
}

/*--------------------------------------------------------------
# FullCalendar (Público e Admin podem compartilhar, ou ter versões)
--------------------------------------------------------------*/
.fc {
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif; /* Montserrat como primária */
    font-size: 0.9em; /* Levemente menor para encaixar mais info */
}

/* Cabeçalho do Calendário */
.fc .fc-header-toolbar {
    margin-bottom: 1.5em;
    background-color: #ffffff; /* Fundo branco para o header */
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.06); /* Sombra mais suave */
    border: 1px solid var(--cor-cinza-bordas);
}

.fc .fc-toolbar-title {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--cor-azul-principal-cmpa);
}

/* Botões do Calendário */
.fc .fc-button {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: #fff;
    text-transform: none;
    font-size: 0.85rem;
    padding: 0.375rem 0.75rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.fc .fc-button:hover,
.fc .fc-button:active,
.fc .fc-button:focus {
    background-color: #5a6268; /* Um pouco mais escuro no hover */
    border-color: #545b62;
    color: #fff;
    box-shadow: none;
}
.fc .fc-button-primary { /* Botão "today" e visualizações ativas */
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.fc .fc-button-primary:hover,
.fc .fc-button-primary:active,
.fc .fc-button-primary:focus {
    background-color: var(--bs-primary-dark);
    border-color: var(--bs-primary-dark);
}
.fc .fc-button-primary:disabled {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.fc .fc-button-primary:not(:disabled).fc-button-active, /* View ativa */
.fc .fc-button-primary:not(:disabled):active {
    background-color: var(--bs-primary-dark);
    border-color: var(--bs-primary-dark);
}


/* Eventos no Calendário */
.fc-event {
    border-radius: 3px; /* Mais sutil */
    padding: 2px 4px;
    font-size: 0.8rem; /* Ajustado para melhor encaixe */
    cursor: pointer;
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
    border-width: 1px;
    border-style: solid;
    /* A cor da borda e do fundo são definidas pelo FullCalendar com base nos dados do evento */
}
.fc-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.fc-daygrid-event {
    margin-top: 2px; /* Espaçamento entre eventos no mesmo dia */
    margin-bottom: 2px;
}
.fc-daygrid-event .fc-event-main {
    padding: 2px 4px; /* Reduz o padding interno em visualização de mês */
}

/* Conteúdo interno do evento */
.fc-event-main-content {
    display: flex;
    align-items: center;
    gap: 4px; /* Espaço entre ícones/bolinha e texto */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fc-event-title { /* O contêiner do título */
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-grow: 1; /* Permite que o título ocupe o espaço restante */
}

/* Ícones e Bolinha dentro do evento */
.fc-event-indicators {
    display: flex;
    align-items: center;
    gap: 3px; /* Espaço entre bolinha e ícone de status */
    flex-shrink: 0; /* Não encolher */
}
.sector-dot { /* Bolinha de cor do tipo de evento */
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.1); /* Borda sutil na bolinha */
}
.status-icon { /* Ícone de status (confirmado, cancelado, etc.) */
    font-size: 0.85em;
    line-height: 1;
}

/* View de Lista */
.fc-list-event-dot {
    border-color: var(--bs-secondary) !important; /* Cor padrão para a bolinha da lista */
}
.fc-list-event-title a {
    color: var(--cor-azul-principal-cmpa); /* Título do evento na lista */
    font-weight: 500;
}
.fc-list-event-title a:hover {
    color: var(--cor-azul-secundario-cmpa);
}

/* Carregamento do Calendário */
#calendar-loading {
    text-align: center;
    padding: 30px 15px;
    color: var(--cor-texto-secundario);
}
#calendar-loading .spinner-border {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--bs-primary);
}
#calendar-loading p {
    margin-top: 0.75rem;
    font-size: 0.95rem;
}

/*--------------------------------------------------------------
# Modal de Detalhes do Evento
--------------------------------------------------------------*/
#eventoModal .modal-header {
    background-color: var(--bs-primary);
    color: white;
    border-bottom: none; /* Remove borda padrão se não gostar */
}
#eventoModal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Torna o X branco */
    opacity: 0.75;
}
#eventoModal .modal-header .btn-close:hover {
    opacity: 1;
}
#eventoModal .modal-title {
    font-weight: 500;
    font-size: 1.15rem;
}
#eventoModal .modal-body strong {
    color: var(--cor-azul-principal-cmpa); /* Destaque para os labels */
    font-weight: 500;
}
#eventoModal .modal-body p {
    margin-bottom: 0.75rem; /* Espaçamento entre parágrafos no modal */
}
#eventoModal .modal-body p i.bi { /* Ícones dentro do modal */
    color: var(--bs-primary); /* Ícones com a cor primária */
    margin-right: 0.3rem;
    font-size: 1.1em;
}
#eventoModal #modalDescricao {
    background-color: var(--cor-cinza-claro-fundo);
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.9rem;
    max-height: 200px;
    overflow-y: auto;
}

/*--------------------------------------------------------------
# Estilos para a Visualização em Lista de Eventos (Público)
--------------------------------------------------------------*/
/* Card de Filtros */
.card.shadow-sm.mb-4 .card-header[style*="--cor-cinza-claro-fundo"] {
    /* Este seletor é muito específico, idealmente use uma classe. */
    /* Se você definir --cor-cinza-claro-fundo no :root, pode usar:
       background-color: var(--cor-cinza-claro-fundo);
    */
    background-color: #e9ecef !important; /* Exemplo, já que a var não está no :root deste CSS */
    color: var(--cor-texto-principal);
}
.card.shadow-sm.mb-4 .form-label {
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}
.card.shadow-sm.mb-4 .form-select-sm,
.card.shadow-sm.mb-4 .form-control-sm {
    font-size: 0.85rem;
}

/* Cards da Listagem de Eventos */
.public-event-list .card-header { /* Se adicionar uma classe wrapper como 'public-event-list' */
    font-size: 1rem;
}
.public-event-list .card-body.small p {
    font-size: 0.875rem; /* Tamanho do texto dentro do card */
    margin-bottom: 0.3rem;
}
.public-event-list .card-body.small strong {
    font-weight: 500;
}
.public-event-list .event-description-public {
    font-size: 0.85rem !important; /* Sobrescreve o inline style se necessário */
    line-height: 1.5;
}


/*--------------------------------------------------------------
# FullCalendar Mobile Refinements
--------------------------------------------------------------*/

@media (max-width: 767.98px) { /* Abaixo de md */
    .fc {
        font-size: 0.85em; /* Reduzir um pouco a fonte base do calendário no mobile */
    }

    .fc .fc-header-toolbar {
        padding: 0.5rem 0.75rem; /* Menor padding no header toolbar */
        margin-bottom: 1em;
    }

    .fc .fc-toolbar-title {
        font-size: 1.2em; /* Título do mês/ano um pouco menor */
    }

    .fc .fc-button {
        font-size: 0.75rem; /* Botões menores */
        padding: 0.3rem 0.6rem;
    }

    /* Para a view de lista, que é o padrão mobile */
    .fc-list-event { /* Cada item da lista */
        padding: 8px 10px;
    }
    .fc-list-event-time {
        font-size: 0.9em;
        font-weight: 500;
        /* Talvez uma cor diferente para o horário */
    }
    .fc-list-event-title {
        font-size: 1em;
    }
    .fc-list-event-title .small { /* Detalhes do local na lista */
        font-size: 0.8em;
    }


    /* Se estiver usando dayGridMonth no mobile, pode ser necessário ajustar os eventos */
    .fc-daygrid-event {
        padding: 1px 3px; /* Menor padding para eventos no mês */
        font-size: 0.75em; /* Texto do evento menor */
    }
    .fc-daygrid-event .fc-event-main-content {
        gap: 2px; /* Menor espaço entre ícone e texto */
    }
    .sector-dot {
        width: 6px;
        height: 6px;
    }
    .status-icon {
        font-size: 0.8em;
    }
}

@media (max-width: 575.98px) { /* Abaixo de sm (ainda menor) */
    .fc .fc-toolbar-title {
        font-size: 1.1em;
    }
    .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) { /* Chunk do título */
        text-align: center; /* Forçar centralização se quebrar */
    }


    /* Ajustes mais finos para o modal em telas pequenas, se necessário */
    #eventoModal .modal-dialog {
        margin: 0.5rem; /* Menor margem nas laterais */
    }
    #eventoModal .modal-content {
        font-size: 0.9rem;
    }
    #eventoModal .modal-title {
        font-size: 1.1rem;
    }
}