/**
 * @file style.css
 * @description Folha de estilos principal da aplicação.
 * Utiliza uma abordagem com variáveis CSS implícitas (através de classes) e TailwindCSS para
 * um design responsivo e com suporte a tema claro/escuro (dark mode).
 */

/* --- Configuração Base --- */
body {
    font-family: 'Inter', sans-serif;
}

/* --- Seção de Estilos dos Cards de Disciplina --- */

/* Estilo base para todos os cards */
.subject-card {
    transition: all 0.2s ease-in-out;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem;
    width: 100%;
    box-sizing: border-box;
}

/* * Estilos de Estado (Modo Claro)
 * O uso de `!important` aqui é uma decisão pragmática para garantir que os estilos
 * de estado (ex: concluído, pode cursar) sempre se sobreponham aos estilos de highlight
 * (hover), que são aplicados dinamicamente via JavaScript.
 */
.subject-card.planned { background-color: #fefce8 !important; border-color: #facc15 !important; }
.subject-card.can-take { background-color: #dcfce7 !important; border-color: #4ade80 !important; }
.subject-card.completed { background-color: #6b7280 !important; border-color: #4b5563 !important; color: white !important; }
.subject-card.locked { background-color: #f3f4f6 !important; border-color: #d1d5db !important; color: #9ca3af; opacity: 0.7; cursor: not-allowed; }
.subject-card.elective { border-style: dashed !important; }

/* Adicione esta nova classe */
.subject-card.planned-past {
    color: white; /* Garante que o texto seja legível em um fundo colorido */
    /* Note que não definimos um background-color aqui, ele será injetado pelo JS */
}

/* * Estilos de Highlight de Requisitos (Modo Claro)
 * Aplicados ao passar o mouse ou tocar em um card.
 */
.subject-card.is-hover-origin { z-index: 10; transform: scale(1.05); background-color: #fef9c3 !important; border-color: #fde047 !important; color: #000000 !important; }
.subject-card.is-hover-origin h3 { color: #000000 !important; }
.subject-card.highlight-prereq { background-color: #c7d2fe !important; border-color: #818cf8 !important; color: #1e1b4b !important; }
.subject-card.highlight-coreq { background-color: #f5d0fe !important; border-color: #e879f9 !important; color: #4a044e !important; }
.subject-card.highlight-direct-dependent { background-color: #fecaca !important; border-color: #f87171 !important; color: #7f1d1d !important; }
.subject-card.highlight-prereq h3, .subject-card.highlight-coreq h3, .subject-card.highlight-direct-dependent h3 { color: inherit !important; }


/* --- Seção Dark Mode --- */
.dark body { background-color: #111827; color: #d1d5db; }
.dark .panel { background-color: #1f2937; border-color: #374151; }
.dark h1, .dark h2, .dark p, .dark label, .dark span, .dark h3, .dark h4 { color: #d1d5db; }
.dark .text-muted { color: #9ca3af; }

/* Estilos de Estado (Modo Escuro) */
.dark .subject-card.planned { background-color: #5a4a00 !important; border-color: #eab308 !important; }
.dark .subject-card.can-take { background-color: #0a3a2a !important; border-color: #4ade80 !important; }
.dark .subject-card.locked { background-color: #1f2937 !important; border-color: #374151 !important; color: #6b7280 !important; opacity: 0.7; }
.dark .subject-card.elective { border-color: #71717a; }

/* Estilos de Highlight (Modo Escuro) */
.dark .subject-card.is-hover-origin { background-color: #4a4429 !important; border-color: #fde047 !important; color: #f9fafb !important; }
.dark .subject-card.is-hover-origin h3 { color: #f9fafb !important; }
.dark .subject-card.highlight-prereq { background-color: #2c2a5c !important; border-color: #818cf8 !important; color: #e0e7ff !important; }
.dark .subject-card.highlight-coreq { background-color: #512758 !important; border-color: #e879f9 !important; color: #fdf4ff !important; }
.dark .subject-card.highlight-direct-dependent { background-color: #5c2121 !important; border-color: #f87171 !important; color: #fee2e2 !important; }
.dark .subject-card.highlight-prereq h3, .dark .subject-card.highlight-coreq h3, .dark .subject-card.highlight-direct-dependent h3 { color: inherit !important; }

/* Estilos de Componentes Específicos (Modo Escuro) */
.dark .border-t { border-color: #374151 !important; }
.dark .h-6.w-px { background-color: #4b5563; }
.dark #planning-controls { background-color: #1f2937; border-color: #374151; }
.dark #current-semester-input { background-color: #1f2937; border-color: #374151; color: #d1d5db; }
.dark #ppc-selector { background-color: #374151; border-color: #4b5563; color: #d1d5db; }
.dark #viewToggle, .dark #textToggle, .dark #theme-toggle, .dark #helpButton, .dark #legend-trigger, .dark #summaryButton { background-color: #374151; color: #d1d5db; }
.dark #viewToggle:hover, .dark #textToggle:hover, .dark #theme-toggle:hover, .dark #helpButton:hover, .dark #legend-trigger:hover, .dark #summaryButton:hover { background-color: #4b5563; }
.dark .summary-box { background-color: #1f2937; }
.dark .summary-box span:last-child { color: #9ca3af; }
.dark .mobile-period-header { background-color: #1f2937; }



/* --- Seção de Componentes UI --- */

/* Tag de semestre planejado sobreposta ao card */
.semester-tag {
    position: absolute;
    top: -1px;
    right: -1px;
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 0 6px 0 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Notificações (Toast) */
#toast-notification, #hover-toast {
    opacity: 0;
    transition: all 0.3s ease-in-out;
    position: fixed;
    z-index: 1001;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 12px 20px;
}
#toast-notification {
    top: 20px;
    right: 20px;
    transform: translateY(-40px) translateX(20px);
}
#hover-toast {
    top: 20px;
    left: 50%;
    transform: translate(-50%, -80px);
    pointer-events: none; /* O toast não pode ser clicado */
    white-space: nowrap;
    background-color: #1f2937;
    color: #f9fafb;
}
.dark #hover-toast {
    background-color: #f9fafb;
    color: #1f2937;
}

#toast-notification.show { transform: translateY(0) translateX(0); opacity: 1; }
#hover-toast.show { transform: translate(-50%, 0); opacity: 1; }


/* Layout para Dispositivos Móveis */
.mobile-period-row {
    display: flex;
    align-items: stretch;
    margin-bottom: 0.5rem;
}
.mobile-period-header {
    flex-shrink: 0;
    writing-mode: vertical-rl; /* Escreve o texto na vertical */
    transform: rotate(180deg);   /* Gira o texto para a orientação correta */
    padding: 0.5rem 0.25rem;
    font-weight: 600;
    border-radius: 8px 0 0 8px;
    text-align: center;
    cursor: pointer;
    background-color: #e5e7eb;
}
.mobile-cards-container {
    display: flex;
    overflow-x: auto; /* Permite scroll horizontal */
    padding: 0.5rem;
    flex-grow: 1;
    gap: 0.5rem;
    -webkit-overflow-scrolling: touch; /* Melhora a experiência de scroll em iOS */
}

/* Animação do Spinner de Exportação PDF */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.exporting #export-spinner {
    display: inline-block !important;
    animation: spin 1s linear infinite;
}
.exporting .export-icon {
    display: none !important;
}

/* Estilos Específicos para Modais (Ajuda e Resumo) */
#helpModal .modal-content-text, #summaryModal .modal-content-text {
    color: #374151; /* cinza-escuro no modo claro */
}
.dark #helpModal .modal-content-text, .dark #summaryModal .modal-content-text {
    color: #d1d5db; /* cinza-claro no modo escuro */
}
#helpModal .modal-highlight {
    color: #111827; /* preto no modo claro */
}
.dark #helpModal .modal-highlight {
    color: #f9fafb; /* branco no modo escuro */
}
/**
 * --- Estilos para o Toggle Switch de PPC ---
 * Cria um componente de switch customizado, redondo e animado.
 */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    background-color: #e5e7eb; /* cinza-200 */
    border-radius: 9999px; /* Efeito de pílula */
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dark .toggle-switch {
    background-color: #374151; /* cinza-700 */
}

/* Rótulos de texto (PPC 2012, PPC 2023) */
.toggle-label {
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    padding: 2px 12px;
    z-index: 1; /* Fica acima do "handle" */
    transition: color 0.2s ease;
    user-select: none; /* O texto não pode ser selecionado */
}

/* O "círculo" ou "pílula" que desliza */
.toggle-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px); /* Metade do espaço, com ajuste */
    height: calc(100% - 8px);
    background-color: white;
    border-radius: 9999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Animação suave */
}

.dark .toggle-handle {
    background-color: #4b5563; /* cinza-600 */
}

/* --- Lógica do Estado "Checked" --- */

/* Quando o input escondido está "checked", move o handle para a direita */
#ppc-toggle-input:checked + .toggle-switch .toggle-handle {
    transform: translateX(calc(100%));
}

/* Ajusta a cor do texto para o estado ativo/inativo */
#ppc-toggle-input:not(:checked) + .toggle-switch .toggle-label:nth-of-type(2) {
    color: #4b5563; /* cinza-600 */
}
#ppc-toggle-input:checked + .toggle-switch .toggle-label:nth-of-type(1) {
    color: #4b5563; /* cinza-600 */
}
.dark #ppc-toggle-input:not(:checked) + .toggle-switch .toggle-label:nth-of-type(2) {
    color: #9ca3af; /* cinza-400 */
}
.dark #ppc-toggle-input:checked + .toggle-switch .toggle-label:nth-of-type(1) {
    color: #9ca3af; /* cinza-400 */
}
/**
 * ==================================================================
 * CORREÇÕES DEFINITIVAS DE TEMA (CLARO/ESCURO)
 * ==================================================================
 * Este bloco garante que os componentes interativos e modais tenham
 * as cores corretas tanto no modo claro (padrão) quanto no escuro.
 */

/* --- Estilos para o MODO CLARO (Padrão) --- */

/* Input de semestre e painel de planejamento */
#current-semester-input,
#planning-controls {
    background-color: #f9fafb; /* Cinza bem claro (bg-gray-50) */
    color: #1f2937;            /* Texto escuro */
    border-color: #d1d5db;     /* Borda cinza */
}

/* Modais e Popovers */
#legend-popover,
#helpModal .panel,
#summaryModal .panel {
    background-color: #ffffff; /* Fundo branco */
    color: #374151;            /* Texto principal cinza-escuro */
    border-color: #d1d5db;     /* Borda cinza */
}

/* Títulos e textos de destaque dentro dos modais */
#helpModal .modal-highlight,
#summaryModal .border-b,
#summaryModal h2 {
    color: #111827;            /* Destaques em preto */
    border-color: #e5e7eb;     /* Divisores cinza claro */
}


/* --- Estilos para o MODO ESCURO (Overrides) --- */
/* Estas regras SÓ se aplicam quando a classe .dark está ativa */

.dark #current-semester-input,
.dark #planning-controls {
    background-color: #1f2937; /* Fundo do painel escuro */
    color: #d1d5db;            /* Texto claro */
    border-color: #374151;     /* Borda mais escura */
}

.dark #legend-popover,
.dark #helpModal .panel,
.dark #summaryModal .panel {
    background-color: #1f2937; /* Fundo do painel escuro */
    color: #d1d5db;            /* Texto claro */
    border-color: #374151;     /* Borda mais escura */
}

.dark #helpModal .modal-highlight,
.dark #summaryModal .border-b,
.dark #summaryModal h2 {
    color: #f9fafb;            /* Destaques em branco */
    border-color: #374151;     /* Divisores escuros */
}

/* Garante que o texto dos botões de ação dos modais seja branco */
#closeHelpModal, #closeSummaryModal {
    color: #ffffff;
}
/**
 * ==================================================================
 * Correção de Cor para Detalhes do Resumo
 * ==================================================================
 */

/* Define a cor do texto para o modo claro (padrão) */
.summary-details {
    color: #4b5563; /* Cinza escuro (text-gray-600), bom contraste */
}

/* Define a cor do texto para o modo escuro */
.dark .summary-details {
    color: #9ca3af; /* Cinza claro (text-gray-400), para informação secundária */
}

/**
 * ==================================================================
 * Estilo do Rodapé de Créditos
 * ==================================================================
 */

#app-footer {
    position: fixed;   /* Fixa o elemento na tela, mesmo com scroll */
    left: 12px;       /* Alinha à direita com uma pequena margem */
    bottom: 8px;       /* Alinha na base com uma pequena margem */
    font-size: 0.7rem; /* Texto pequeno e discreto */
    color: #9ca3af;   /* Cor cinza para o modo claro */
    z-index: 1000;     /* Garante que fique acima da maioria dos elementos */
}

/* Ajusta a cor do texto para melhor leitura no modo escuro */
.dark #app-footer {
    color: #6b7280; /* Cor cinza um pouco mais escura para o fundo escuro */
}

/* Adicione ao final de style.css */

@keyframes pulse-red {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
}

.subject-card.highlight-dependency-alert {
    background-color: #fecaca !important; /* red-200 */
    border-color: #ef4444 !important; /* red-500 */
    color: #991b1b !important; /* red-800 */
    animation: pulse-red 2s infinite;
}

.dark .subject-card.highlight-dependency-alert {
    background-color: #450a0a !important; /* red-950 */
    border-color: #f87171 !important; /* red-400 */
    color: #fecaca !important; /* red-200 */
}

/**
 * ==================================================================
 * Estilos da Timeline de Planejamento (v10.5)
 * ==================================================================
 */
.semester-timeline-container {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    padding-bottom: 0.25rem; /* 4px */
    overflow-x: auto; /* Permite scroll horizontal em telas pequenas */
}

.semester-tab, .add-semester-btn {
    padding: 0.5rem 1rem; /* 8px 16px */
    border-radius: 9999px; /* Formato de pílula */
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    white-space: nowrap; /* Impede que o texto quebre linha */
    border: 2px solid transparent;
}

.semester-tab {
    background-color: #e5e7eb; /* gray-200 */
    color: #4b5563; /* gray-600 */
}

.dark .semester-tab {
    background-color: #374151; /* gray-700 */
    color: #d1d5db; /* gray-300 */
}

/* Estilo da aba ativa */
.semester-tab.active {
    background-color: #3b82f6; /* blue-500 */
    color: white;
    border-color: #93c5fd; /* blue-300 */
}

.dark .semester-tab.active {
    background-color: #60a5fa; /* blue-400 */
    color: #1e3a8a; /* blue-900 */
    border-color: #1d4ed8; /* blue-700 */
}

/* Estilo do botão de adicionar semestre */
.add-semester-btn {
    background-color: #10b981; /* green-500 */
    color: white;
}
.dark .add-semester-btn {
    background-color: #34d399; /* green-400 */
    color: #064e3b; /* green-900 */
}

/* Adicione/Substitua este bloco no final do seu arquivo style.css */

/* Adicione/Substitua este bloco no final do seu arquivo style.css */

/**
 * ==================================================================
 * Melhorias de UI (v10.5.3)
 * ==================================================================
 */

/* --- Estilo das Abas de Fichário --- */
#view-planejamento {
    border: 1px solid #d1d5db;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding-top: 0.5rem;
    background-color: #f9fafb;
}
.dark #view-planejamento {
    border-color: #374151;
    background-color: #1f2937;
}

#semester-timeline {
    border-bottom: 1px solid #d1d5db;
    padding: 0 0.5rem;
}
.dark #semester-timeline {
    border-color: #374151;
}

#semester-timeline .semester-tab, 
#semester-timeline .add-semester-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 2px;
    border-radius: 5px 5px 0 0 !important;
    margin-bottom: -1px;
    border: 1px solid #d1d5db;
    border-bottom-color: #f9fafb;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.dark #semester-timeline .semester-tab, 
.dark #semester-timeline .add-semester-btn {
    border-color: #374151;
    border-bottom-color: #1f2937;
}

#semester-timeline .semester-tab.active {
    position: relative;
    z-index: 2;
    transform: translateY(-1px);
    filter: brightness(1.1);
    border-bottom-color: inherit;
}

#semester-timeline .add-semester-btn { background-color: #e5e7eb; }
.dark #semester-timeline .add-semester-btn { background-color: #374151; }
#semester-timeline .add-semester-btn:hover { background-color: #d1d5db; }
.dark #semester-timeline .add-semester-btn:hover { background-color: #4b5563; }


/* --- Animação de Pulse --- */
@keyframes pulse-yellow { 0%, 100% { box-shadow: 0 0 0 0 rgba(233, 229, 5, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(186, 197, 34, 0); }
}
/* --- Novas Animações de Pulse (uma para cada cor da paleta) --- */
/* As cores são baseadas no array SEMESTER_COLORS do config.js */
@keyframes pulse-red    { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); } }
@keyframes pulse-blue   { 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(59, 130, 246, 0); } }
@keyframes pulse-green  { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); } }
@keyframes pulse-orange { 0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(249, 115, 22, 0); } }
@keyframes pulse-purple { 0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(139, 92, 246, 0); } }
@keyframes pulse-pink   { 0%, 100% { box-shadow: 0 0 0 0 rgba(219, 39, 119, 0.7); } 70% { box-shadow: 0 0 0 5px rgba(219, 39, 119, 0); } }
/* Adicione mais @keyframes se a paleta de cores for expandida */

/* --- Classes que aplicam as animações --- */
.pulse-red    { animation: pulse-red 2s infinite; }
.pulse-blue   { animation: pulse-blue 2s infinite; }
.pulse-green  { animation: pulse-green 2s infinite; }
.pulse-orange { animation: pulse-orange 2s infinite; }
.pulse-purple { animation: pulse-purple 2s infinite; }
.pulse-pink   { animation: pulse-pink 2s infinite; }

/* Aplicações da animação */
.subject-card.planned { animation: pulse-yellow 2s infinite; }
#semester-timeline .semester-tab.active { animation: pulse-blue 2s infinite; }

/* (NOVO v10.5.3) Animação para o botão de finalizar quando ativo */
#exit-planning-btn.active-planning {
    animation: pulse-green 2s infinite;
}

/* (NOVO v10.5.3) Estilo para botões inativos */
.inactive-btn {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== v11.1: ESTILOS PARA O NOVO LAYOUT DA INTERFACE ===== */

/* Garante que o corpo da página tenha um espaçamento no topo 
   para não ficar escondido atrás do cabeçalho e da barra de ferramentas fixos.
   A altura exata pode precisar de ajuste fino. */
body {
    padding-top: 130px; /* 82px para o header + 48px para a toolbar */
}

/* ===== ESTILOS PARA A NOVA TIMELINE MINIMALISTA ===== */

/* Contêiner da timeline na barra de ferramentas */
#toolbar-timeline {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #9ca3af #e5e7eb;
}
.dark #toolbar-timeline {
    scrollbar-color: #6b7280 #374151;
}

/* Estilo base para os botões da timeline */
.timeline-semester-btn, .add-semester-btn { /* .add-semester-btn mantém a classe antiga para o JS */
    flex-shrink: 0;
    padding: 0.3rem 0.8rem;
    border-radius: 9999px; /* Formato de pílula */
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}

/* Botão de semestre inativo */
.timeline-semester-btn {
    background-color: #e5e7eb; /* gray-200 */
    color: #4b5563; /* gray-600 */
}
.dark .timeline-semester-btn {
    background-color: #374151; /* gray-700 */
    color: #d1d5db; /* gray-300 */
}
.timeline-semester-btn:not(.active):hover {
    filter: brightness(0.95);
}




/* Botão para adicionar novo semestre */
.add-semester-btn {
    background-color: transparent;
    border: 1px dashed #9ca3af; /* gray-400 */
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
}
.dark .add-semester-btn {
    border-color: #6b7280; /* gray-500 */
    color: #6b7280;
}
.add-semester-btn:hover {
    background-color: #10b981; /* green-500 */
    border-color: #10b981;
    color: white;
}

/* --- Ajuste nos Estilos da Timeline --- */

/* Ajusta o estilo base para usar flexbox para centralização vertical */
.timeline-semester-btn {
    display: flex; /* Adicionado */
    align-items: center; /* Adicionado */
    justify-content: center; /* Adicionado */
    height: 20px; /* Adicionado para consistência */
    padding: 0 0.8rem; /* Apenas padding horizontal agora */
}

/* Remove o box-shadow estático do estado ativo, pois a animação cuidará disso */
.timeline-semester-btn.active {
    color: white;
    transform: scale(1.01); /* Mantém o efeito de zoom */
    box-shadow: none; /* Removido o box-shadow estático */
}

/* Garante que o dark mode não tenha um box-shadow estático também */
.dark .timeline-semester-btn.active {
    box-shadow: none;
}