/**
 * Opponents List Template - Premium Searchable A-Z Version CSS
 * 
 * Premium design with modern blue/gold color scheme matching opposition profile style
 * Displays a list of all opposition teams with enhanced search functionality
 * 
 * RESPONSIVE BREAKPOINTS: Uses standardized values from breakpoints.css
 * - Tablet and smaller: max-width: 1024px
 * - Mobile and smaller: max-width: 768px
 * 
 * DEPENDENCIES:
 * - shared/variables.css (colors, spacing, typography)
 * - shared/box-base.css (box components, cards, status badges)
 * - shared/search-base.css (search inputs, filter buttons)
 * - shared/breakpoints.css (responsive utilities, grids)
 * - shared/buttons-shared.css (button styles)
 * 
 * @package BTFC_Stats
 */

/* ============================================================================
   SECTION 1: BASE CONTAINER & BOX STYLES
   ============================================================================
   Description: Uses shared box-base.css for all box and card styling
   ============================================================================ */

/* Note: Box and header styles provided by shared box-base.css
   - .btfc-box provides base box styling
   - .btfc-box-header-underline provides h3 underline header styling
   - .btfc-opponent-card provides card hover effects
   - .btfc-card-header, .btfc-card-badge, .btfc-card-nickname from box-base.css
   - .btfc-status-badge-inline and status variants from box-base.css */

/* ============================================================================
   SECTION 2: SEARCH BOX & FILTER CONTROLS
   ============================================================================
   Description: Uses shared search-base.css for search components
   ============================================================================ */

/* Note: Search components provided by shared search-base.css:
   - .btfc-search (base search class with all styling)
   - .search-opposition (variant class for opposition search)
   - .search-container (search container wrapper)
   - .search-input-wrapper (input wrapper with icon positioning)
   - .search-icon (search icon styling)
   - .search-input (text input with blue focus state)
   
   Additional custom styles:
   - .btfc-search-results-count (results counter below search) */

/* ============================================================================
   SECTION 3: OPPONENTS GRID LAYOUT
   ============================================================================
   Description: Uses .btfc-grid-reverse-3col from breakpoints.css (3→2→1 columns)
   ============================================================================ */

/* Note: Grid provided by shared breakpoints.css:
   - .btfc-grid-reverse-3col (3 cols desktop → 2 cols tablet → 1 col mobile)
   Container: .btfc-container-responsive from breakpoints.css (max-width: 1200px) */

/* ============================================================================
   SECTION 4: CARD HEADER OVERRIDE
   ============================================================================
   Description: Override card header layout for horizontal display
   Note: All card styling from box-base.css (.btfc-opponent-card, .btfc-card-header, etc.)
   ============================================================================ */

/* Card Header Override - Horizontal layout (badge + content side by side) */
.btfc-grid-reverse-3col .btfc-card-header {
   flex-direction: row;
   align-items: center;
   gap: var(--space-4);
}

/* ============================================================================
  SECTION 5: NO RESULTS
  ============================================================================
  Description: Empty state message
  Note: Uses .btfc-box from box-base.css for base styling
  ============================================================================ */

/* No Results - extends .btfc-box */
.btfc-no-results {
   text-align: center;
   padding: var(--space-16) var(--space-7);
}

.btfc-no-results h3 {
   color: var(--color-primary);
   font-size: var(--font-size-xl);
   margin-bottom: var(--space-2-5);
}

.btfc-no-results p {
   color: var(--color-text-secondary);
   font-size: var(--font-size-md);
}

/* ============================================================================
  SECTION 6: RESPONSIVE DESIGN
  ============================================================================
  Description: Media queries for tablet and mobile devices
  Note: Grid responsive behavior handled by .btfc-grid-reverse-3col from breakpoints.css
  Note: Card and badge responsive styles handled by box-base.css
  ============================================================================ */

/* All responsive grid adjustments handled by shared breakpoints.css
   No custom responsive styles needed for this template */