@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600;700&family=Inter:wght@400;500;700&display=swap");

/* =========================================
   1. VARIÁVEIS E BASE
   ========================================= */
:root {
    --font-mono: "Fira Code", monospace;
    --font-sans: "Inter", sans-serif;
}

body {
    font-family: var(--font-sans);
    background-color: #0f172a; /* Tailwind slate-900 */
    color: #f8fafc; /* Tailwind slate-50 */
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
.font-tech {
    font-family: var(--font-mono);
}

/* =========================================
   2. SCROLLBAR E UTILITÁRIOS
   ========================================= */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0f172a;
}
::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
}

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #3b82f6, #10b981);
}

/* =========================================
   3. FULLCALENDAR: ESTRUTURA E LIMPEZA
   ========================================= */

/* Remove fundos, bordas nativas e garante visibilidade dos eventos */
.fc-event,
.fc-daygrid-event,
.fc-list-event {
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 2px 4px !important;
}

/* Garante que o bloco de conteúdo interno ocupe todo o espaço sem quebrar */
.fc-event-main,
.fc-event-main-frame {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    background: transparent !important;
}

/* Esconde a bolinha cinza nativa e ajusta o espaçamento entre as linhas */
.fc-daygrid-event-dot {
    display: none !important;
}
.fc-daygrid-event-harness {
    margin-bottom: 2px !important;
}

/* Substitui a seleção azul/roxa forte por um brilho sutil ao focar/clicar */
.fc-event:focus,
.fc-event-active {
    background: rgba(255, 255, 255, 0.05) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* =========================================
   4. FULLCALENDAR: TIPOGRAFIA (HORA E TÍTULO)
   ========================================= */

/* Formatação do Horário (HH:mm) */
.fc-event-time {
    display: block !important;
    visibility: visible !important;
    font-family: var(--font-mono);
    font-weight: 800 !important;
    font-size: 0.85em !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important; /* Impede que a hora seja esmagada */
    color: inherit !important;
}

/* Formatação do Título do Exercício */
.fc-event-title {
    display: block !important;
    visibility: visible !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Coloca "..." se o nome for gigante */
    color: inherit !important;
    padding: 0 2px !important;
}

/* Destaque para o evento que está a acontecer */
.fc-event-live {
    font-weight: bold !important;
}

/* =========================================
   5. CLASSES CUSTOMIZADAS (Uso legado)
   ========================================= */
.custom-event-container {
    display: flex !important;
    align-items: center;
    width: 100%;
    overflow: hidden;
    padding: 1px 4px;
}

.custom-event-time {
    font-weight: 700;
    margin-right: 6px;
    font-size: 0.85em;
    flex-shrink: 0;
}

.custom-event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9em;
}
/* Injeta o ponto vermelho via CSS (Evita duplicação de texto no JS) */
.is-live-event .fc-event-title::before {
    content: "●";
    color: #ef4444;
    margin-right: 4px;
    font-weight: bold;
}