/* css/club-calendar.css */
table.calendar-table .calendar-month .calendar-table th, table.calendar-table .calendar-month .calendar-table td {
    font-size: 0.85rem;
}
table.calendar-table .calendar-month .calendar-table td {
    vertical-align: top;
}
table.calendar-table td ul li {
    max-width: 150px;
}
table.calendar-table .event-link {
	color: #009688;
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
}
table.calendar-table .calendar-month h6 {
    text-transform: capitalize;
}
/* Cabeçalho de cada mês */
.calendar-month .month-header {
  background-color: #f8f9fa;
  border-radius: 6px;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

/* Mês atual com cor diferente */
.calendar-month.current-month .month-header {
  background-color: #BFE7E5; /* tom suave esverdeado/azulado */
  border: 1px solid #c3e4e3;
}

/* ==== Estilos suaves para o calendário ==== */

/* Força layout fixo e evita que o conteúdo expanda as colunas */
table.calendar-table {
  width: 100%;
  table-layout: fixed;
}

/* Células dos dias (base) */
table.calendar-table td[data-date] {
  vertical-align: top;
  padding: 6px;
  height: 70px;
  background: transparent;
  color: #444444; /* texto geral suave */
}

/* Número do dia, seleciona o small que tens */
table.calendar-table td[data-date] small.fw-semibold.day,
table.calendar-table td[data-date] small.day {
  color: #444444; /* número dos dias menos negro */
  font-weight: 600;
  display: inline-block;
}

/* Dia sem eventos, aparência desativada */
table.calendar-table td.empty {
  color: #bfbfbf;
  background: transparent;
}

/* Texto das linhas de evento */
table.calendar-table .event-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0b7b76; /* tom suave, parecido com o teu verde/azulado */
  text-decoration: none;
  font-size: 12px;
  line-height: 1.1;
  overflow: hidden;
  flex-direction: column;
}

/* Círculo do ícone */
table.calendar-table .calendar-event-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #007179;
  flex-shrink: 0;
  padding: 2px;
}

/* Imagem do ícone */
table.calendar-table .calendar-event-icon img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* Dia actual, destaque suave */
.calendar-table td.today small.days {
  display: inline-block;
  background-color: #BFE7E5;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  font-weight: 500;
}

/* Cabeçalho dos dias da semana */
table.calendar-table thead th {
  color: #6c757d;
  font-weight: 600;
  font-size: 0.85rem;
}
	  
/* Forçar colunas equilibradas e evitar que o conteúdo alargue as células */
table.calendar-table {
  width: 100%;
  table-layout: fixed; /* isto torna as colunas fixas e evita que o conteúdo force largura */
}

/* Cada célula ocupa uma fração da largura, e o overflow é cortado */
table.calendar-table td {
  vertical-align: top;
  overflow: hidden;
  padding: 6px;
  height: 70px; /* manteres a tua altura */
}

/* Limpar estilos da lista */
table.calendar-table td ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Item do evento */
table.calendar-table td ul li {
    margin-bottom: 5px;
    padding-top: 5px;
}

/* Link do evento como flex, ícone + texto */
table.calendar-table .event-link {
    display: flex;
    gap: 4px;
    color: #009688;
    text-decoration: none;
    font-size: 10px;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    align-items: flex-start;
}

/* Círculo com ícone */
table.calendar-table .calendar-event-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #009F98;
    flex-shrink: 0; /* não encolhe */
}

/* A própria imagem */
table.calendar-table .calendar-event-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Texto ao lado do círculo */
table.calendar-table .event-text {
  min-width: 0; /* essencial para truncamento funcionar dentro de flex */
  overflow: hidden;
  text-overflow: ellipsis;
  color: #2f4f4f;
  white-space: normal;
}

@media (max-width: 767px) {
    table.calendar-table .event-link { max-width:90px; }
}