/* Estilos complementares à Tailwind para detalhes específicos da identidade visual */

body {
  background-color: #050608;
  font-size: 18px; /* aumenta de forma mais perceptível o tamanho base da fonte */
}

.bg-copakart-red {
  background-color: #D62828;
}

.text-copakart-red {
  color: #D62828;
}

.bg-copakart-beige {
  background-color: #FBEED7;
}

.text-copakart-beige {
  color: #FBEED7;
}

.bg-copakart-dark {
  background-color: #121212;
}

.flag-pattern {
  background-image: linear-gradient(45deg, #050608 25%, transparent 25%),
    linear-gradient(-45deg, #050608 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #050608 75%),
    linear-gradient(-45deg, transparent 75%, #050608 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.diagonal-stripes {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(246, 246, 246, 0.05),
    rgba(246, 246, 246, 0.05) 10px,
    transparent 10px,
    transparent 20px
  );
}

.card {
  border-radius: 0.75rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.glass-panel {
  background: linear-gradient(135deg, rgba(5, 6, 8, 0.85), rgba(18, 18, 18, 0.9));
  backdrop-filter: blur(14px);
  border: 1px solid rgba(251, 238, 215, 0.12);
}

.timeline-dot {
  box-shadow: 0 0 0 2px #050608, 0 0 0 4px #d62828;
}

/* Animação de shimmer/brilho para efeito moderno */
@keyframes shimmer {
  0% {
    transform: translateX(-100%) skewX(-12deg);
  }
  100% {
    transform: translateX(200%) skewX(-12deg);
  }
}

.animate-shimmer {
  animation: shimmer 3s infinite;
}

/* Menu Mobile - Melhorias de UX */
#mobileMenu {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#mobileMenu nav a {
  transition: all 0.2s ease;
}

#mobileMenuButton {
  position: relative;
  z-index: 30;
}

/* Animação suave para o menu mobile */
#mobileMenu {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Garantir que o menu mobile não interfira no scroll do body quando aberto */
body.menu-open {
  overflow: hidden;
}

/* Melhorar a área de toque dos links no mobile */
@media (max-width: 767px) {
  #mobileMenu nav a {
    min-height: 44px; /* Tamanho mínimo recomendado para área de toque */
    display: flex;
    align-items: center;
  }
}

/* Melhorias para tabelas de classificação no mobile */
@media (max-width: 767px) {
  /* Scroll horizontal suave */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #D62828 #050608;
  }
  
  .overflow-x-auto::-webkit-scrollbar {
    height: 6px;
  }
  
  .overflow-x-auto::-webkit-scrollbar-track {
    background: #050608;
  }
  
  .overflow-x-auto::-webkit-scrollbar-thumb {
    background: #D62828;
    border-radius: 3px;
  }
  
  /* Ajustar padding das células da tabela no mobile */
  table.text-xs th,
  table.text-xs td {
    padding: 0.5rem 0.5rem;
    font-size: 0.75rem;
  }
  
  /* Garantir que as tabelas não quebrem */
  table.text-xs {
    border-collapse: collapse;
    table-layout: auto;
  }
  
  /* Desktop: restaurar comportamento original (width: 50%) */
  @media (min-width: 768px) {
    /* Aplicar width: 50% no desktop com máxima especificidade */
    section[id^="tab-"] .classificacao-table-container,
    section[data-tab-content] .classificacao-table-container,
    div.classificacao-table-container,
    .classificacao-table-container[style*="width"] {
      width: 50% !important;
      max-width: 50% !important;
      min-width: 50% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    
    section[id^="tab-"] .classificacao-table-container > div,
    section[data-tab-content] .classificacao-table-container > div,
    div.classificacao-table-container > div,
    .classificacao-table-container > div {
      width: 100% !important;
      max-width: 100% !important;
    }
    
    section[id^="tab-"] .classificacao-table,
    section[data-tab-content] .classificacao-table,
    table.classificacao-table,
    .classificacao-table {
      width: 100% !important;
      max-width: 100% !important;
    }
    
    /* Garantir que não há overflow no desktop */
    section[id^="tab-"] .classificacao-table-container,
    section[data-tab-content] .classificacao-table-container,
    div.classificacao-table-container,
    .classificacao-table-container {
      overflow: visible !important;
    }
  }
  
  /* Mobile: tabelas ocupam toda a largura */
  @media (max-width: 767px) {
    .classificacao-table-container > div {
      width: 100% !important;
    }
    
    table.classificacao-table {
      width: 100% !important;
      min-width: 100%;
    }
    
    /* Ajustar padding no mobile para melhor legibilidade */
    table.classificacao-table th,
    table.classificacao-table td {
      padding: 0.5rem 0.5rem;
    }
    
    /* Coluna de nome pode ocupar mais espaço */
    table.classificacao-table th:nth-child(4),
    table.classificacao-table td:nth-child(4) {
      min-width: 120px;
    }
    
    /* Coluna de equipe pode ocupar mais espaço */
    table.classificacao-table th:nth-child(5),
    table.classificacao-table td:nth-child(5) {
      min-width: 100px;
    }
  }
  
  /* Melhorar legibilidade dos números */
  table.text-xs td.font-bold {
    font-size: 0.875rem;
  }
  
  /* Ajustar altura das linhas para melhor visualização */
  table.text-xs tbody tr {
    min-height: 2.5rem;
  }
  
  /* Alinhamento vertical das células */
  table.text-xs td.align-middle,
  table.text-xs th.align-middle {
    vertical-align: middle;
  }
}