/* ===========================================
   COMPONENT-BASED CSS ARCHITECTURE
   =========================================== */

/* Component: Player Cards */
.player-card {
  @apply bg-gradient-to-br from-gray-100 to-gray-200 rounded-xl shadow-lg overflow-hidden mb-6 transform transition-all duration-200 hover:scale-105 hover:shadow-xl;
}

.player-card--start {
  @apply border-l-4 border-green-500;
}

.player-card--sit {
  @apply border-l-4 border-red-500;
}

.player-card--waiver {
  @apply border-l-4 border-blue-500;
}

.player-card--defense {
  @apply border-l-4 border-purple-500;
}

.player-card__header {
  @apply flex justify-between items-start mb-4;
}

.player-card__name {
  @apply text-2xl font-bold text-gray-800;
}

.player-card__team {
  @apply font-semibold;
}

.player-card__team--start {
  @apply text-green-600;
}

.player-card__team--sit {
  @apply text-red-600;
}

.player-card__team--waiver {
  @apply text-blue-600;
}

.player-card__team--defense {
  @apply text-purple-600;
}

.player-card__matchup {
  @apply text-gray-500 text-sm mt-1;
}

.player-card__badge {
  @apply px-4 py-2 text-sm font-bold text-white rounded-full uppercase tracking-wide;
}

.player-card__badge--start {
  @apply bg-green-500;
}

.player-card__badge--sit {
  @apply bg-red-500;
}

.player-card__badge--waiver {
  @apply bg-blue-500;
}

.player-card__badge--defense {
  @apply bg-purple-500;
}

.player-card__description {
  @apply text-gray-700 mt-4 leading-relaxed;
}

.player-card__projected {
  @apply text-gray-600 mt-2 font-semibold;
}

/* Component: Rankings Table */
.rankings-table {
  @apply w-full border-collapse bg-white rounded-lg shadow-md overflow-hidden;
}

.rankings-table th {
  @apply bg-gray-800 text-white px-4 py-3 text-left text-sm font-semibold uppercase tracking-wider;
}

.rankings-table td {
  @apply px-4 py-3 border-b border-gray-200 text-sm;
}

.rankings-table tbody tr:hover {
  @apply bg-gray-50 transition-colors duration-150;
}

/* Component: Defense Rankings Table */
.defense-rankings-table {
  @apply w-full border-collapse bg-white rounded-lg shadow-md overflow-hidden;
  min-width: 700px;
}

.defense-rankings-table th {
  @apply bg-blue-600 text-white px-4 py-3 text-center text-sm font-semibold uppercase tracking-wider;
  position: sticky;
  top: 0;
  z-index: 10;
  min-width: 44px;
  min-height: 44px;
}

.defense-rankings-table th.text-left {
  @apply text-left;
}

.defense-rankings-table th.sortable {
  @apply cursor-pointer hover:bg-blue-700 transition-colors;
}

.defense-rankings-table td {
  @apply px-4 py-3 border-b border-gray-200 text-sm;
  min-width: 44px;
  min-height: 44px;
}

.defense-rankings-table tbody tr:hover {
  @apply bg-gray-50 transition-colors duration-150;
}

.defense-rankings-table .team-cell {
  @apply text-left;
  min-width: 120px;
}

/* Mobile Responsive Adjustments for Defense Rankings */
@media (max-width: 768px) {
  .defense-rankings-table {
    @apply text-xs;
    min-width: 600px;
  }
  
  .defense-rankings-table th,
  .defense-rankings-table td {
    @apply px-3 py-3;
    min-width: 44px;
  }
  
  .defense-rankings-table th {
    @apply text-xs;
    white-space: nowrap;
  }
  
  .defense-rankings-table .team-cell {
    min-width: 100px;
  }
}

@media (max-width: 480px) {
  .defense-rankings-table {
    @apply text-xs;
    min-width: 500px;
  }
  
  .defense-rankings-table th,
  .defense-rankings-table td {
    @apply px-2 py-3;
  }
  
  .defense-rankings-table .team-cell {
    min-width: 90px;
  }
}

.rankings-table .team-cell {
  @apply px-2 py-1 rounded text-xs font-bold;
}

/* Component: Position Toggle */
.position-toggle {
  @apply flex flex-wrap justify-center gap-2 mb-8;
}

.position-button {
  @apply px-6 py-2 rounded-lg font-semibold transition-all duration-200 border-2;
}

.position-button:not(.active) {
  @apply bg-white text-gray-700 border-gray-300 hover:bg-gray-50 hover:border-gray-400;
}

.position-button.active {
  @apply bg-blue-600 text-white border-blue-600 shadow-md;
}

/* Component: Article Cards */
.article-cluster {
  @apply grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12;
}

.article-box {
  @apply relative overflow-hidden rounded-xl shadow-lg transition-transform duration-300 hover:scale-105;
}

.article-box.featured {
  @apply lg:col-span-2 lg:row-span-2;
}

.article-box.secondary {
  @apply lg:col-span-1;
}

.article-overlay {
  @apply absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent flex flex-col justify-end p-6 text-white;
}

.article-tag {
  @apply inline-block px-3 py-1 bg-blue-600 text-xs font-bold uppercase tracking-wide rounded mb-3 self-start;
}

.article-title {
  @apply text-xl lg:text-2xl font-bold mb-2 leading-tight;
}

.article-excerpt {
  @apply text-sm text-gray-300 mb-3 leading-relaxed;
}

.article-date {
  @apply text-xs text-gray-400;
}

/* Component: Loading States */
.loading-spinner {
  @apply inline-block w-6 h-6 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin;
}

.loading-skeleton {
  @apply bg-gray-300 rounded animate-pulse;
}

.loading-skeleton--text {
  @apply h-4 mb-2;
}

.loading-skeleton--title {
  @apply h-6 mb-4;
}

.loading-skeleton--image {
  @apply w-full h-48;
}

/* Component: Error States */
.error-message {
  @apply bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md;
}

.warning-message {
  @apply bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded-md;
}

.success-message {
  @apply bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md;
}

/* Component: Buttons */
.btn {
  @apply px-4 py-2 rounded-md font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn--primary {
  @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
}

.btn--secondary {
  @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
}

.btn--success {
  @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.btn--danger {
  @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn--outline {
  @apply bg-transparent border-2 border-current hover:bg-current hover:text-white;
}

/* Component: Dropdown Menus */
.dropdown {
  @apply relative inline-block;
}

.dropdown__trigger {
  @apply flex items-center focus:outline-none focus:ring-2 focus:ring-blue-500 rounded;
}

.dropdown__menu {
  @apply absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50;
}

.dropdown__item {
  @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors;
}

/* Component: Navigation */
.nav-link {
  @apply text-gray-500 hover:text-gray-900 transition-colors duration-200;
}

.nav-link--active {
  @apply text-gray-900 font-semibold;
}

/* Component: Header */
.header-spacing {
  @apply pt-32 md:pt-36 lg:pt-40;
}

/* Global Header Spacing Rule for All Pages */
/* IMPORTANT: All new pages must include proper header spacing to account for the fixed header */
/* Use one of these classes on your main content container: */
/*   - .header-spacing (responsive spacing: 128px on mobile, 144px on md, 160px on lg+) */
/*   - .pt-32 (fixed 128px spacing for simpler pages) */
/*   - Custom spacing that accounts for the 80px fixed header height */

.page-header-spacing {
  @apply pt-32 md:pt-36 lg:pt-40;
}

/* Component: Cards */
.card {
  @apply bg-white rounded-lg shadow-md overflow-hidden;
}

.card__header {
  @apply px-6 py-4 border-b border-gray-200;
}

.card__title {
  @apply text-lg font-semibold text-gray-900;
}

.card__body {
  @apply px-6 py-4;
}

.card__footer {
  @apply px-6 py-4 bg-gray-50 border-t border-gray-200;
}

/* Component: Badges */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge--primary {
  @apply bg-blue-100 text-blue-800;
}

.badge--success {
  @apply bg-green-100 text-green-800;
}

.badge--warning {
  @apply bg-yellow-100 text-yellow-800;
}

.badge--danger {
  @apply bg-red-100 text-red-800;
}

/* Component: Forms */
.form-group {
  @apply mb-4;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500;
}

.form-select {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white;
}

.form-error {
  @apply text-red-600 text-sm mt-1;
}

/* Utility Classes */
.sr-only {
  @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
}

.visually-hidden {
  @apply sr-only;
}

/* Focus management for accessibility */
.focus-visible {
  @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .player-card {
    @apply border-2 border-gray-900;
  }
  
  .btn {
    @apply border-2 border-current;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .player-card,
  .article-box,
  .btn,
  .nav-link {
    @apply transition-none;
  }
  
  .loading-spinner {
    @apply animate-none;
  }
}

/* Mobile-first responsive design */
@media (max-width: 768px) {
  .player-card {
    @apply mb-4;
  }
  
  .player-card__name {
    @apply text-xl;
  }
  
  .rankings-table {
    @apply text-xs;
  }
  
  .rankings-table th,
  .rankings-table td {
    @apply px-2 py-2;
  }
  
  .btn {
    @apply w-full sm:w-auto min-h-11 text-base;
  }
  
  .nav-link {
    @apply block py-3 px-4 text-base;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .player-card__header {
    @apply flex-col items-start gap-2;
  }
  
  .player-card__badge {
    @apply self-start;
  }
  
  .rankings-table {
    @apply block overflow-x-auto whitespace-nowrap;
  }
  
  .form-input,
  .form-select {
    @apply text-base; /* Prevent zoom on iOS */
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .player-card:hover {
    @apply scale-100 shadow-lg;
  }
  
  .btn:hover {
    @apply transform-none;
  }
  
  .nav-link:hover {
    @apply bg-gray-100;
  }
}

/* Large screens */
@media (min-width: 1024px) {
  .player-card {
    @apply mb-8;
  }
  
  .rankings-table {
    @apply text-sm;
  }
}

/* Component: Defense View Toggle */
.view-btn {
  @apply px-4 py-2 text-sm font-medium rounded-md border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors;
  min-width: 44px;
  min-height: 44px;
}

.view-btn.active {
  @apply bg-blue-600 text-white border-blue-600 hover:bg-blue-700;
}

.defense-card {
  @apply bg-white rounded-lg shadow-md p-6 mb-4;
}

.defense-card-header {
  @apply flex justify-between items-start mb-4;
}

.defense-detailed-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

.tier-badge {
  @apply px-2 py-1 text-xs font-semibold rounded-full;
}

/* Print styles */
@media print {
  .no-print {
    @apply hidden;
  }
  
  .player-card {
    @apply shadow-none border border-gray-300;
  }
  
  .article-overlay {
    @apply bg-white text-black;
  }
}