/* Tablet-specific responsive improvements */

/* Tablet breakpoints: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Improve card layouts for tablets */
  .grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4.xl\:grid-cols-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Better spacing for tablet cards */
  .bg-gray-800.rounded-xl.shadow-lg.border.border-blue-700 {
    padding: 1rem;
  }
  
  /* Improve text readability on tablets */
  .text-xl.sm\:text-2xl {
    font-size: 1.25rem;
  }
  
  .text-sm.sm\:text-lg {
    font-size: 0.875rem;
  }
  
  /* Better chart heights for tablets */
  .relative.h-48.sm\:h-56.lg\:h-64 {
    height: 14rem;
  }
  
  /* Improve navigation for tablets */
  .lg\:hidden {
    display: flex;
  }
  
  .hidden.lg\:flex {
    display: none;
  }
  
  /* Better button sizing for tablets */
  .px-4.sm\:px-6.py-3.sm\:py-4 {
    padding: 0.75rem 1.25rem;
  }
  
  /* Improve touch targets for tablets */
  .px-4.py-2 {
    padding: 0.75rem 1rem;
    min-height: 44px;
  }
  
  /* Better spacing for tablet layouts */
  .gap-4.sm\:gap-6 {
    gap: 1.25rem;
  }
  
  /* Improve readability of small text on tablets */
  .text-xs.sm\:text-sm {
    font-size: 0.875rem;
  }
  
  /* Better icon sizing for tablets */
  .w-4.h-4.sm\:w-5.sm\:h-5 {
    width: 1.25rem;
    height: 1.25rem;
  }
  
  /* Improve chart container responsiveness */
  .p-3.sm\:p-4 {
    padding: 1rem;
  }
  
  /* Better section spacing for tablets */
  .mb-8 {
    margin-bottom: 2rem;
  }
  
  /* Improve hero section for tablets */
  .flex.flex-col.lg\:flex-row {
    flex-direction: column;
    text-align: center;
  }
  
  .text-center.lg\:text-left {
    text-align: center;
  }
  
  /* Better league name display on tablets */
  .text-xl.sm\:text-2xl.lg\:text-3xl.xl\:text-4xl {
    font-size: 1.5rem;
  }
  
  /* Improve floating action button for tablets */
  .fixed.bottom-8.right-8 {
    bottom: 1.5rem;
    right: 1.5rem;
  }
  
  .w-16.h-16 {
    width: 3.5rem;
    height: 3.5rem;
  }
  
  /* Better tooltip positioning for tablets */
  .absolute.left-1\/2.-translate-x-1\/2.bottom-full.mb-2 {
    bottom: calc(100% + 0.5rem);
  }
}

/* Large tablet breakpoints: 1024px - 1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* Optimize for large tablets */
  .grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4.xl\:grid-cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Better spacing for large tablets */
  .gap-4.sm\:gap-6 {
    gap: 1.5rem;
  }
  
  /* Improve chart heights for large tablets */
  .relative.h-48.sm\:h-56.lg\:h-64 {
    height: 16rem;
  }
  
  /* Better text sizing for large tablets */
  .text-xl.sm\:text-2xl {
    font-size: 1.5rem;
  }
  
  .text-sm.sm\:text-lg {
    font-size: 1rem;
  }
}

/* Landscape tablet optimizations */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  /* Reduce vertical spacing in landscape */
  .mb-8 {
    margin-bottom: 1.5rem;
  }
  
  .py-4.sm\:py-6.lg\:py-8 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  /* Better chart heights for landscape tablets */
  .relative.h-48.sm\:h-56.lg\:h-64 {
    height: 12rem;
  }
  
  /* Improve grid layout for landscape */
  .grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4.xl\:grid-cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Portrait tablet optimizations */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  /* Better spacing for portrait tablets */
  .grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4.xl\:grid-cols-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Improve chart heights for portrait */
  .relative.h-48.sm\:h-56.lg\:h-64 {
    height: 14rem;
  }
}

/* High DPI tablet optimizations */
@media (min-width: 768px) and (max-width: 1023px) and (-webkit-min-device-pixel-ratio: 2) {
  /* Improve text rendering on high DPI tablets */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Better icon rendering */
  svg {
    shape-rendering: geometricPrecision;
  }
}

/* Touch-friendly improvements for tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Increase touch targets */
  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better hover states for touch devices */
  .hover\:scale-105:hover {
    transform: scale(1.02);
  }
  
  .hover\:scale-\[1\.02\]:hover {
    transform: scale(1.01);
  }
  
  /* Improve focus states for accessibility */
  button:focus, a:focus, [role="button"]:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }
}

/* Performance optimizations for tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Reduce animations for better performance */
  .animate-pulse {
    animation-duration: 2s;
  }
  
  .transition-transform {
    transition-duration: 0.2s;
  }
  
  /* Optimize shadows for tablets */
  .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  
  .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
}

/* Charts grid specific optimizations */
@media (min-width: 1024px) {
  /* Ensure 3 charts per row on desktop */
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* 2 charts per row on tablets */
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  /* 1 chart per row on mobile */
  .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Login button optimizations for tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Ensure only mobile menu shows on tablets */
  .hidden.lg\:flex {
    display: none !important;
  }
  
  /* Make mobile menu login button smaller on tablets */
  .lg\:hidden .group.block {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
  
  .lg\:hidden .group.block .w-4.h-4 {
    width: 1rem;
    height: 1rem;
  }
  
  .lg\:hidden .group.block .w-3.h-3 {
    width: 0.75rem;
    height: 0.75rem;
  }
  
  /* Optimize logout button on tablets */
  .lg\:hidden button[type="submit"] {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }
}