/* Estilo principal do calendário */
#calendar {
    max-width: 100%;
    /* margin: 30px auto; */
    /* padding: 10px; */
    background: #0f131c;
    border: 1px solid #0f131c;
    /* ✅ v74: min-height padrão (mantém tamanho após carregar) */
    min-height: 600px;
    /* ✅ v73: min-height voltou (mantém tamanho do calendário após carregar) */
}

/* Estilo dos eventos */
.fc-event {
    font-size: 13px;
    padding: 2px 4px;
    border-radius: 4px;
    background-color: #161b28;
    color: #a58348;
    border: none;
}

/* Bolinha piscando em verde */
.fc-list-event-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #28a745; /* verde */
    animation: blinkGreen 1s infinite;
    display: inline-block;
}

@keyframes blinkGreen {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
}

/* Tooltip com imagem e descrição */
.tooltip-content img {
    width: 100%;
    max-height: 100px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 5px;
}
.tooltip-content p {
    font-size: 12px;
    color: #333;
}
.tooltip-content .view-more {
    margin-top: 5px;
    padding: 5px 10px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

/* Estilo do modal fullscreen */
.event-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 80px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* scroll interno se precisar */
    background-color: rgba(0,0,0,0.6);
}
.modal-content {
    background-color: #fff;
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    /* 🔽 deixa o modal maior e ainda responsivo */
    width: clamp(320px, 92vw, 980px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    position: relative;
}
.close-button {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}
.go-server {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 15px;
    background: #007bff;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
}

/* 🔽 banners grandes dentro do modal nunca “estouram” a tela */
.modal-content img,
.event-modal .modal-banner {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(56vh, 520px);
    object-fit: contain;     /* mostra a imagem inteira */
    margin: 0 auto 12px;
    border-radius: 8px;
}

/* Botão abaixo do calendário */
.calendar-action-button {
    display: block;
    width: fit-content;
    margin: 20px auto;
    padding: 12px 24px;
    background-color: #28a745;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}
.calendar-action-button:hover {
    background-color: #218838;
}


/* =========================================================================
 * [NOVO] Dashboard / Estatísticas (UI premium, dark + glass)
 * - Prefixo "sec-" para não conflitar com o tema/FullCalendar
 * ========================================================================= */
.sec-calwrap {
  max-width: 100%;

  /*
   * [ALTERAÇÃO - ORDEM DO LAYOUT (DESKTOP + MOBILE)]
   * Objetivo: fazer o bloco de estatísticas/cards (print 1) ficar ABAIXO do calendário/eventos (print 2)
   * em TODAS as telas.
   *
   * Técnica: transformamos o wrapper em flex-column e usamos "order" nos 3 filhos diretos:
   * 1) #sec-next-start-slot  (slot do NEXT START)  -> fica no topo
   * 2) #calendar             (FullCalendar)        -> fica no meio
   * 3) #sec-dashboard        (cards/estatísticas)  -> fica abaixo
   *
   * Observação: isso não altera o FullCalendar internamente (evita "bug" de layout);
   * apenas reordena os blocos do shortcode.
   */
  display: flex;
  flex-direction: column;
}

/*
 * [NOVO] Ordem global do shortcode
 * - Mantém o "NEXT START" no topo.
 * - Mantém o calendário logo abaixo.
 * - Deixa o dashboard (cards do print 1) por último.
 */
.sec-calwrap #calendar { order: 1; flex: 0 0 auto; }
.sec-calwrap #sec-dashboard { order: 2; }
.sec-dashboard { margin: 12px 0 18px; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #e5e7eb; }
.sec-stats-grid {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 10px;margin-bottom: 10px;}
@media (max-width: 1000px){ .sec-stats-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 520px){ .sec-stats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.sec-stat-card {
  background: rgba(17,24,39,.55);
  border: 1px solid rgba(148,163,184,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.sec-stat-label { font-size: 12px; color: rgba(229,231,235,.78); letter-spacing: .02em; }
.sec-stat-value { font-size: 20px; font-weight: 900; margin-top: 2px; }

.sec-muted { color: rgba(229,231,235,.72); font-size: 12px; }

.sec-dashboard-foot { display:flex; gap: 10px; align-items:center; justify-content:flex-end; margin-top: 10px; flex-wrap: wrap; }
.sec-foot-value { color: rgba(243,244,246,.88); font-weight: 800; font-size: 12px; }

/* [ALTERAÇÃO - v68] REMOVIDO: estilos do bloco de métricas (visualizações/cliques no rodapé)
 * - Pedido: remover a opção de "Visualizações no site" e "Cliques no link".
 * - Como o HTML do bloco foi removido no PHP, estes estilos ficaram sem uso.
 */


@media (max-width: 980px) {
  .sec-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ============================================================
 * [NOVO - SCROLLBAR MAIS SUAVE + CORREÇÃO DE SOBREPOSIÇÃO NA LISTA]
 * - Mesmo existindo CSS inline (para vencer cache), mantemos aqui
 *   também para ficar "editável" e fácil de manter.
 * - Escopo: SOMENTE dentro do #calendar.
 * ============================================================ */
#calendar .sec-calendar-scroll{
  scrollbar-width: thin !important; /* Firefox */
  scrollbar-color: rgba(165,131,72,.60) rgba(17,24,39,.25) !important; /* Firefox */
  scrollbar-gutter: stable;
}
#calendar .sec-calendar-scroll::-webkit-scrollbar{ width: 7px !important; }
#calendar .sec-calendar-scroll::-webkit-scrollbar-track{
  background: rgba(17,24,39,.25) !important;
  border-radius: 999px !important;
}
#calendar .sec-calendar-scroll::-webkit-scrollbar-thumb{
  background: rgba(165,131,72,.50) !important;
  border-radius: 999px !important;
  /* ✅ v80: borda menor para scrollbar mais "clean" */
  border: 1px solid rgba(17,24,39,.25) !important;
}
#calendar .sec-calendar-scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(165,131,72,.72) !important;
}

/* Evita "evento passando por cima" (stacking + fundo opaco no modo lista) */
#calendar .fc-scroller,
#calendar .fc-scroller-liquid-absolute{
  isolation: isolate !important;
  position: relative !important;
}
#calendar .fc-list-day{ position: relative !important; z-index: 5 !important; }
#calendar .fc-list-day-cushion{
  background: rgba(17,24,39,.92) !important;

  /* ✅ v83: evita o dia (Sexta-feira/Sábado) ficar colado/cortado na direita */
  padding-left: 14px !important;
  padding-right: 18px !important;

  /* ============================================================
   * ✅ v78: REMOVER "sticky" do cabeçalho do dia no modo LIST
   * - Problema: ao rolar a lista, o cabeçalho do dia/data ficava fixo.
   * - Fix: além de stickyHeaderDates:false no JS, forçamos CSS para garantir
   *   que nenhum tema/minificação reintroduza position:sticky.
   * ============================================================ */
  position: static !important;
  top: auto !important;
}

/* ============================================================
 * ✅ v83: Ajuste do cabeçalho do dia (List View)
 * - Problema: o texto do dia (ex: "Sexta-feira") fica colado no canto direito e pode cortar.
 * - Solução: dar "respiro" no texto da direita e impedir quebra estranha.
 * ============================================================ */
#calendar .fc-list-day-side-text{
  margin-left: auto !important;   /* mantém alinhado à direita */
  padding-left: 12px !important;  /* espaço entre data e dia */
  padding-right: 2px !important;  /* respiro antes da borda */
  white-space: nowrap !important; /* evita quebrar e "bugar" layout */
  text-align: right !important;
  box-sizing: border-box !important;
}

/* ✅ v83: garante que a data e o dia respeitem o espaço do container */
#calendar .fc-list-day-text,
#calendar .fc-list-day-side-text{
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#calendar .fc-list-event td{
  background: rgba(15,19,28,.92) !important;
  position: relative !important;
  z-index: 1 !important;
}
#calendar .fc-list-event:hover td{
  /* ✅ v81: Removido o “barra dourada” no hover
   * - No v80/v79, o box-shadow inset 3px aparecia em CADA <td>,
   *   gerando várias linhas verticais douradas entre as colunas.
   * - Agora: mantemos apenas um brilho sutil (sem linhas).
   */
  filter: brightness(1.06);
  box-shadow: none !important;
}

/* ============================================================
 * ✅ ADICIONAR v33: Destaque visual para eventos do DIA (HOJE)
 * Pedido:
 * - "dar um destaque melhor em cores do evento que vai começar no dia"
 *
 * Como funciona:
 * - O JS marca os eventos com classes:
 *   - .ts50-event-today-upcoming  => hoje e ainda vai começar
 *   - .ts50-event-today-started   => hoje e já começou/passou
 * - Também marca o cabeçalho do dia na LIST VIEW:
 *   - .ts50-list-day-today
 * ============================================================ */

/* Cabeçalho do dia (linha com a data) quando for HOJE */
#calendar .fc-list-day.ts50-list-day-today .fc-list-day-cushion{
  /* ✅ ALTERAÇÃO v34:
   * - Pedido: não usar fundo branco/clarinho no dia destacado.
   * - Mantém o "dourado" original (não sobrescreve background).
   * - Só adiciona brilho/contorno para destacar sem quebrar layout.
   */
  box-shadow:
    inset 4px 0 0 rgba(172,145,91,.85),
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 8px 18px rgba(0,0,0,.35) !important;
}

/* ✅ ADICIONAR v53: Badge "TODAY" ao lado da DATA (no cabeçalho do dia)
 * - Pedido: "coloca esse today ao lado na data".
 * - O JS injeta <span class="ts50-badge-today-date">TODAY</span> dentro do
 *   elemento .fc-list-day-text (texto da data).
 * - Como fica dentro do mesmo "item" da data, não empurra o layout do cabeçalho.
 */
#calendar .ts50-badge-today-date{
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
  white-space: nowrap;

  /* ✅ v54: vermelho mais forte (pedido do Nando)
     - Aumentei a opacidade do fundo e da borda para ficar bem mais “vivo”.
     - Mantive o estilo premium (pill + glow leve) sem estourar o layout. */
  background: rgba(255, 59, 48, .38);
  border: 1px solid rgba(255, 59, 48, .95);
  box-shadow: 0 0 14px rgba(255, 59, 48, .35);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Evento de HOJE que AINDA vai começar (destaque mais forte) */
#calendar .fc-list-event.ts50-event-today-upcoming td{
  background: rgba(255,59,48,.10) !important;
}
#calendar .fc-list-event.ts50-event-today-upcoming td.fc-list-event-time{
  box-shadow: inset 4px 0 0 rgba(255,59,48,.95) !important;
}
#calendar .fc-list-event.ts50-event-today-upcoming .fc-list-event-title a,
#calendar .fc-list-event.ts50-event-today-upcoming .ts50-list-event-title{
  font-weight: 800 !important;
  text-shadow: 0 0 14px rgba(255,59,48,.25) !important;
}

/* Evento de HOJE que JÁ começou / já passou (destaque verde mais suave) */
#calendar .fc-list-event.ts50-event-today-started td{
  background: rgba(0,255,0,.06) !important;
}
#calendar .fc-list-event.ts50-event-today-started td.fc-list-event-time{
  box-shadow: inset 4px 0 0 rgba(0,255,0,.85) !important;
}
#calendar .fc-list-event.ts50-event-today-started .fc-list-event-title a,
#calendar .fc-list-event.ts50-event-today-started .ts50-list-event-title{
  text-shadow: 0 0 14px rgba(0,255,0,.18) !important;
}


/* ============================================================
 * [NOVO - VISUAL PREMIUM DO HEADER (BOTÕES + SELECTS)]
 * - Você pediu para deixar a área do topo mais bonita (Criar + filtros + navegação)
 * - Importante: escopo SOMENTE dentro do #calendar para não afetar outros lugares
 * ============================================================ */
/* ✅ v61 FIX (IMPORTANTE):
   - Seu #calendar já TEM a classe .fc (no próprio elemento), então o seletor antigo
     "#calendar .fc .…" NÃO BATIA (porque ele procurava um .fc filho).
   - Resultado: os estilos premium dos botões nunca aplicavam.
   - Correção: removi o ".fc" intermediário e deixei escopado só em #calendar.
*/
#calendar .fc-header-toolbar{
  margin: 0 0 12px 0 !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(17,24,39,.70), rgba(15,19,28,.52)) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0,0,0,.30);
}

#calendar .fc-header-toolbar .fc-toolbar-chunk{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Botões nativos do FullCalendar (today / prev / next) */
#calendar .fc-button{
  height: 30px !important; /* v67: mais fino (pedido) */
  padding: 0 10px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(172,145,91,.34) !important;
  background: rgba(17,24,39,.62) !important;
  color: rgba(243,244,246,.94) !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 10px !important;
  line-height: 1 !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.14);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

/* ✅ v61: botão TODAY (dourado premium) */
#calendar .fc-today-button{
  background: linear-gradient(180deg, rgba(201,169,109,.98), rgba(172,145,91,.98)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(10,14,22,.92) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.26);
}

/* ✅ v61: prev/next como botões de ícone (quadradinhos) */
#calendar .fc-prev-button,
#calendar .fc-next-button{
  width: 32px !important; /* v67: acompanha altura */
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
}

/* Ícones um pouco maiores e centralizados */
#calendar .fc-button .fc-icon{
  font-size: 1.1em !important;
  margin: 0 !important;
}
#calendar .fc-button:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.24);
}
#calendar .fc-button:active{
  transform: translateY(0px);
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
}
#calendar .fc-button:disabled{
  opacity: .45 !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Wrapper dos seus controles customizados */
#calendar .sec-fc-controls{
  display:flex;
  align-items:center;
  gap: 12px; /* [ALTERAÇÃO] um pouco mais de respiro entre grupos */
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
 * [NOVO - GRUPOS DO TOPO]
 * - Pedido: "Criar separado e os outros dois juntos"
 * - .sec-fc-controls__filters “gruda” os 2 selects lado a lado
 * - Em telas menores, voltamos para o layout normal (ver media query)
 * ============================================================ */
#calendar .sec-fc-controls__create{ flex: 0 0 auto; }
#calendar .sec-fc-controls__notify{ flex: 0 0 auto; }

#calendar .sec-fc-controls__filters{
  display:flex;
  align-items:center;
  gap: 0;          /* [ALTERAÇÃO] sem espaço entre os 2 selects */
  flex-wrap: nowrap;
}

/* “Gruda” os selects (borda compartilhada e radius correto) */
#calendar .sec-fc-controls__filters .sec-fc-select{
  border-radius: 0;
  min-width: 180px; /* [ALTERAÇÃO] garante legibilidade e reduz quebra */
}

#calendar .sec-fc-controls__filters .sec-fc-select:first-child{
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

#calendar .sec-fc-controls__filters .sec-fc-select:last-child{
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  margin-left: -1px; /* [ALTERAÇÃO] evita “dupla borda” no meio */
}

/* Botões customizados (Criar / Receber todos) */
#calendar .sec-fc-btn{
  height: 34px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(17,24,39,.55);
  color: rgba(243,244,246,.92);
  font-weight: 950;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
#calendar .sec-fc-btn:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.24);
}
#calendar .sec-fc-btn:active{
  transform: translateY(0px);
}

#calendar .sec-fc-btn--primary{
  background: linear-gradient(to right, rgba(165,131,72,.95), rgba(217,164,65,.95));
  border-color: rgba(217,164,65,.35);
  color: #0b0f17;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
#calendar .sec-fc-btn--ghost{
  background: rgba(51,65,85,.55);
  border-color: rgba(71,85,105,.55);
}

/* Selects customizados */
#calendar .sec-fc-select{
  height: 34px;
  min-width: 140px;
  padding: 0 36px 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(17,24,39,.55);
  color: rgba(243,244,246,.92);
  font-weight: 900;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(243,244,246,.85) 50%),
    linear-gradient(135deg, rgba(243,244,246,.85) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* [ALTERAÇÃO] Força uma seta "▼" visível no <select>, mesmo quando o tema/browsers removem o background-image.
   Motivo: alguns temas aplicam "background: ..." ou "background-image: none" nos selects e a seta some.
   Solução: seta via SVG inline com !important (não depende do wrapper). */
#calendar select.sec-fc-select{
  background-color: rgba(17,24,39,.55) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23F3F4F6' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 12px) 50% !important;
  background-size: 16px 16px !important;
  padding-right: 40px; /* [ALTERAÇÃO] Garante espaço para a seta */
}
#calendar select.sec-fc-select::-ms-expand{ display:none; }


#calendar .sec-fc-select:hover{filter: brightness(1.08);}
#calendar .sec-fc-select:focus{
  border-color: rgba(217,164,65,.55);
  box-shadow: 0 0 0 3px rgba(217,164,65,.14), 0 10px 22px rgba(0,0,0,.22);
}

/* Responsivo: em telas menores deixa quebrar linha sem ficar apertado */
@media (max-width: 680px){
  #calendar .sec-fc-select{ min-width: 120px; flex: 1 1 160px; }
  #calendar .sec-fc-controls{ width: 100%; }
  #calendar .sec-fc-btn{ flex: 0 0 auto; }
}



/* ============================================================
 * ✅ ADICIONAR v31: Card da Crônica + Chip de XP (LIST VIEW)
 * - Exibe um mini "badge" da crônica ao lado do título do evento.
 * - Exibe o XP Rate (ex.: XP 500x) ao lado do título.
 * ============================================================ */
#calendar .ts50-list-event-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  /* ✅ ALTERAÇÃO v32:
   * - Pedido: NÃO deixar o título quebrar e cair para baixo.
   * - Mantém tudo na mesma linha e usa reticências (...) quando for muito grande.
   */
  flex-wrap:nowrap;
  width:100%;
  min-width:0;
}

/* ✅ ADICIONAR v50:
 * - Complemento do truncamento via JS:
 *   Garante que o título ocupa o espaço disponível, mas NÃO empurra o layout.
 * - Como o texto já vem truncado pelo JS, este CSS só mantém a "linha única" e o corte com reticências.
 */
#calendar .ts50-list-event-wrap .ts50-list-event-title{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}


/* ✅ ADICIONAR v32: título em uma linha (ellipsis) */
#calendar .ts50-list-event-wrap a,
#calendar .ts50-list-event-wrap .ts50-list-event-title{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ✅ ADICIONAR v32: chips não encolhem */
#calendar .ts50-chronicle-card,
#calendar .ts50-rate-chip{
  flex:0 0 auto;
}

#calendar .ts50-chronicle-card{
  width:34px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  border:1px solid rgba(172,145,91,.45);
  background:rgba(172,145,91,.16);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}

#calendar .ts50-chronicle-card__abbr{
  font-size:11px;
  font-weight:800;
  color:#ac915b;
  line-height:1;
}

#calendar .ts50-rate-chip{
  height:20px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(0,150,255,.10);
  border:1px solid rgba(0,150,255,.28);
  color:#cfe9ff;
  font-size:11px;
  font-weight:800;
  line-height:20px;
}



/* ============================================================
   ✅ ADICIONAR v48: LIST VIEW - bolinha junto com tag/título (sem "buraco")
   - Como a bolinha foi movida via JS para dentro do `.ts50-list-event-wrap`,
     colapsamos a célula original (`td.fc-list-event-graphic`) para 0 e
     garantimos alinhamento à esquerda no título.
   ============================================================ */
#calendar td.fc-list-event-graphic{
  width: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* Garante que o conteúdo da célula de título não fique alinhado à direita por CSS do tema */
#calendar td.fc-list-event-title{
  text-align: left !important;
}

/* Força o wrap do título a começar pela esquerda */
#calendar .ts50-list-event-wrap{
  justify-content: flex-start;
}



/* ============================================================
 * ✅ v71: Remover o texto "No events to display" (estado vazio do FullCalendar)
 * - Problema: ao carregar a página, antes do AJAX preencher os eventos,
 *   o FullCalendar mostra rapidamente o estado vazio com essa mensagem.
 * - Solução: escondemos a linha/célula do estado vazio na LIST VIEW.
 * - OBS: isso não remove eventos reais; só remove o placeholder de "vazio".
 * ============================================================ */
#calendar .fc-list-empty,
#calendar .fc-list-empty-cushion,
#calendar tr.fc-list-empty,
#calendar td.fc-list-empty,
#calendar td.fc-list-empty-cushion {
    display: none !important;
}



/* ============================================================
 * ✅ v75: Loader leve no carregamento (sem “caixa vazia”)
 * - Mostra um overlay “Carregando...” enquanto o JS busca os eventos
 * - Mantém o tamanho do calendário (sem layout shift)
 * ============================================================ */
#calendar.sec-cal--loading{
  position: relative;
}

#calendar .sec-cal-loader{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(15, 19, 28, 0.62);
  border-radius: 10px;
  z-index: 50;
  pointer-events: none;
}

#calendar .sec-cal-spinner{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(165, 131, 72, 0.35);
  border-top-color: rgba(165, 131, 72, 1);
  animation: secCalSpin 0.8s linear infinite;
}

#calendar .sec-cal-loader-text{
  color: #e5e7eb;
  font-size: 14px;
  font-weight: 700;
}

@keyframes secCalSpin{
  to { transform: rotate(360deg); }
}


/* ============================================================
 * ✅ v79: Remover a “linha branca” em volta do calendário (borda externa)
 * - Problema: o FullCalendar (tema padrão: fc-theme-standard) aplica uma borda
 *   clara no container da lista/tabela, o que aparece como um contorno branco.
 * - Solução: removemos somente a BORDA EXTERNA (mantemos as linhas internas).
 * - Escopo: somente dentro do #calendar.
 * ============================================================ */
#calendar.fc-theme-standard .fc-scrollgrid,
#calendar.fc-theme-standard .fc-scrollgrid table,
#calendar.fc-theme-standard .fc-list,
#calendar.fc-theme-standard .fc-list-table{
  border: none !important;
}

/* ✅ v79: alguns builds aplicam outline/box-shadow no harness; removemos para não “brilhar” nas bordas */
#calendar .fc-view-harness,
#calendar .fc-view-harness-active{
  outline: none !important;
  box-shadow: none !important;
}


/* ============================================================
 * ✅ v80: Polimento premium (mais leve visualmente)
 * Pedido:
 * - reduzir espaçamento vertical das linhas (lista mais compacta)
 * - deixar a scrollbar mais fina e no mesmo tom
 * - padronizar hover/seleção (sem contorno/brilho exagerado)
 *
 * Observação:
 * - Tudo está escopado em #calendar para não vazar para o tema.
 * - Não alteramos a lógica de eventos (só UI/CSS).
 * ============================================================ */

/* ✅ v80: lista mais compacta (header do dia + linhas de evento) */
#calendar .fc-list-day-cushion{
  padding: 8px 12px !important;
}
#calendar .fc-list-event td{
  padding: 7px 12px !important;
  /* linha divisória mais sutil (evita “linhão” claro) */
  border-color: rgba(148,163,184,.10) !important;
}

/* ✅ v80: hover/seleção padronizado (sem outline) */
#calendar .fc-list-event{ cursor: pointer; }
#calendar .fc-list-event:focus-within td{
  /* ✅ v81: Removido o “barra dourada” no foco (teclado/click)
   * - Mesma causa do hover: inset em cada <td> gerava múltiplas linhas.
   * - Agora: sem linhas, apenas brilho sutil para indicar foco.
   */
  box-shadow: none !important;
  filter: brightness(1.06);
}
#calendar .fc-list-event a,
#calendar .fc-list-event a:focus{
  outline: none !important;
  text-decoration: none !important;
}

/* ✅ v80: tipografia/alinhamento mais “app” */
#calendar .fc-list-event-time{
  font-variant-numeric: tabular-nums;
  color: rgba(229,231,235,.72) !important;
}
#calendar .fc-list-event-title a{
  color: rgba(229,231,235,.95) !important;
}

/* ✅ v80: chips menores (menos altura total por linha) */
#calendar .ts50-list-event-wrap{ gap: 6px !important; }
#calendar .ts50-chronicle-card{
  width: 32px !important;
  height: 18px !important;
  border-radius: 6px !important;
}
#calendar .ts50-rate-chip{
  height: 18px !important;
  line-height: 18px !important;
  font-size: 10px !important;
}

/* ✅ v80: scrollbar ainda mais fina no mobile */
@media (max-width: 520px){
  #calendar .fc-list-day-cushion{ padding: 8px 10px !important; }
  #calendar .fc-list-event td{ padding: 7px 10px !important; }
  #calendar .sec-calendar-scroll::-webkit-scrollbar{ width: 6px !important; }
}

/* ============================================================
 * ✅ v82: Remover “risco branco” (bordas claras entre colunas)
 * - Problema: no modo LIST, o FullCalendar aplica bordas em TODOS os <td>.
 *   Em alguns casos isso aparece como um risco claro/“branco” entre colunas.
 * - Solução: deixamos as bordas muito mais sutis e removemos as bordas
 *   VERTICAIS (left/right), mantendo apenas separação horizontal suave.
 * - Escopo: somente dentro do #calendar.
 * ============================================================ */
#calendar.fc-theme-standard td,
#calendar.fc-theme-standard th{
  border-color: rgba(148,163,184,.06) !important;
}

/* Remove riscos verticais entre colunas dos eventos (time | dot | title) */
#calendar .fc-list-event td{
  border-left: 0 !important;
  border-right: 0 !important;
  border-top-color: rgba(148,163,184,.06) !important;
  border-bottom-color: rgba(148,163,184,.06) !important;
}

/* Remove riscos verticais do cabeçalho do dia */
#calendar tr.fc-list-day td,
#calendar tr.fc-list-day th,
#calendar .fc-list-day-cushion,
#calendar .fc-list-day-cushion + td{
  border-left: 0 !important;
  border-right: 0 !important;
}