@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-shadow {
    text-shadow: 0 0 10px rgba(14, 165, 233, 0.7);
  }
  .text-shadow-lg {
    text-shadow: 0 0 15px rgba(14, 165, 233, 0.9), 0 0 30px rgba(14, 165, 233, 0.6);
  }
  .bg-gradient-blue {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.8) 100%);
  }
  .bg-gradient-card {
    background: linear-gradient(135deg, rgba(23, 37, 84, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%);
  }
  .border-glow {
    box-shadow: 0 0 3px rgba(12, 99, 228, 0.4), inset 0 0 3px rgba(12, 99, 228, 0.2);
  }
  .scrollbar-thin {
    scrollbar-width: thin;
  }
  .scrollbar-thumb-blue-500\/50::-webkit-scrollbar-thumb {
    background-color: rgba(14, 165, 233, 0.5);
    border-radius: 9999px;
  }
  .scrollbar-track-transparent::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .grid-dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1rem;
    height: 100vh;
  }
  
  /* 大屏布局调整 */
  .dashboard-container {
    height: calc(100vh - 120px); /* 减去头部高度 */
    overflow: hidden;
  }
  
  /* 固定卡片高度 */
  .card-fixed-height-1 {
    height: 100%;
  }
  
  .card-fixed-height-2 {
    height: 100%;
  }
  
  .card-fixed-height-3 {
    height: 100%;
  }
  
  .card-fixed-height-5 {
    height: 100%;
  }
  
  /* 确保网格布局正确显示 */
  .grid-dashboard {
    grid-auto-flow: row;
  }
  
  /* 固定图表高度 */
  .chart-height-300 {
    height: calc(100% - 60px) !important;
  }
  
  .chart-height-200 {
    height: calc(100% - 60px) !important;
  }
  
  .chart-height-400 {
    height: calc(100% - 60px) !important;
  }
  
  /* 热门竞赛排行榜高度自适应 */
  .ranking-list {
    height: auto;
    overflow-y: hidden;
  }
  .card-hover {
    transition: all 0.3s ease;
  }
  .card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px -3px rgba(12, 99, 228, 0.3);
  }
  .animate-counter {
    display: inline-block;
  }
}
