/* ===========================================
   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 - styles managed in styles.css */

/* Component: Article Cards */
/* Consolidated article-cluster styles - single source of truth */
.article-cluster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  margin-bottom: 30px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}

.article-box {
  position: relative;
  background-color: #fff;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-box:hover {
  transform: scale(1.01);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.article-box.featured {
  grid-column: 1 / 3;
  height: 400px;
}

.article-box.secondary {
  height: 250px;
}

.article-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.article-box.featured img {
  object-position: center 30%;
}

.article-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.8) 60%, rgba(0,0,0,0.2) 85%, transparent);
  color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.featured .article-overlay {
  padding: 30px;
}

.article-tag {
  display: inline-block;
  background-color: #38b6ff;
  color: white;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 3px;
  margin-bottom: 10px;
  text-transform: uppercase;
  align-self: flex-start;
}

.article-title {
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.3;
  font-size: 18px;
}

.featured .article-title {
  font-size: 24px;
}

.secondary .article-title {
  font-size: 18px;
}

.article-excerpt {
  margin-bottom: 10px;
  font-size: 14px;
  opacity: 0.9;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #d1d5db;
  line-height: 1.5;
}

.featured .article-excerpt {
  -webkit-line-clamp: 3;
}

.article-date {
  font-size: 12px;
  opacity: 0.8;
  color: #9ca3af;
}

/* Mobile responsive styles for article cluster */
@media (max-width: 1023px) {
  .article-cluster {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 1rem;
  }

  .article-box.featured {
    grid-column: 1;
    height: 300px;
  }

  .article-box.secondary {
    height: 250px;
  }
}

@media (max-width: 480px) {
  .article-overlay {
    padding: 16px;
  }

  .featured .article-overlay {
    padding: 20px;
  }

  .article-title {
    font-size: 16px;
  }

  .featured .article-title {
    font-size: 20px;
  }
}

/* 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: 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 {
  padding-top: 6rem; /* 96px - clears 80px header + 16px breathing room */
}

/* Global Header Spacing Rule for All Pages */
/* IMPORTANT: All new pages must include proper header spacing to account for the fixed header */
/* The fixed header is 80px tall. header-spacing adds 96px (pt-24) to clear it with 16px breathing room. */
/* Do NOT stack additional pt-* classes on top of header-spacing. */

.page-header-spacing {
  padding-top: 6rem;
}

/* 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;
  }
  
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .player-card,
  .article-box,
  .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;
  }
  
  .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;
}

/* Removed: .ffn-dropdown-menu, .ffn-dropdown-item, .ffn-week-header, .ffn-week-links (unused) */

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

/* Global focus-visible styles for keyboard navigation */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-accent-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Remove default focus ring for mouse users */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
select:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}

/* Header brand text */
.header-brand-text {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--brand-text-heading);
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.header-brand-text:hover {
  color: var(--brand-blue-dark);
}