/**
 * Manager Records Premium Template CSS
 * 
 * Clean table-based comparison using .btfc-box system
 * 
 * RESPONSIVE BREAKPOINTS: Uses standardized values from breakpoints.css
 * - Mobile and smaller: max-width: 768px
 * - Small mobile only: max-width: 480px (changed from 576px)
 * 
 * @package BTFC_Stats
 */

/* ============================================================================
   SECTION 1: BASE CONTAINER
   ============================================================================
   Container uses .btfc-container-responsive from breakpoints.css (max-width: 1200px)
   ============================================================================ */

/* ============================================================================
   SECTION 2: COMPARISON TABLE
   ============================================================================
   Note: Uses shared .btfc-table and .btfc-table-hover from tables-base.css
   ============================================================================ */

.btfc-manager-comparison-table-wrapper {
    overflow-x: auto;
    margin-bottom: var(--space-5);
}

/* Table-specific column sizing */
.btfc-manager-comparison-table th.btfc-manager-name {
    text-align: left;
    min-width: 180px;
}

.btfc-manager-comparison-table th:not(.btfc-manager-name) {
    text-align: center;
}

.btfc-manager-comparison-table td:not(.btfc-manager-name) {
    text-align: center;
}

/* Table Cell Styling */
.btfc-manager-name {
    font-weight: var(--font-weight-semibold);
}

.btfc-manager-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.btfc-manager-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Highlight Styles - Using semantic colors */
.btfc-highlight {
    background: rgba(255, 193, 12, 0.15);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.btfc-positive {
    color: var(--color-success);
    font-weight: var(--font-weight-semibold);
}

.btfc-negative {
    color: var(--color-error);
    font-weight: var(--font-weight-semibold);
}

/* ============================================================================
   SECTION 3: LEGEND
   ============================================================================ */

.btfc-manager-comparison-legend {
    display: flex;
    gap: var(--space-8);
    justify-content: center;
    flex-wrap: wrap;
    padding: var(--space-4);
    background: rgba(45, 57, 140, 0.03);
    border-radius: 8px;
    margin-top: var(--space-1);
}

.btfc-legend-item {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
}

.btfc-legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--color-border-light);
}

.btfc-legend-color.btfc-highlight {
    background: rgba(255, 193, 12, 0.15);
    border-color: var(--color-secondary);
}

.btfc-legend-color.btfc-positive {
    background: var(--color-success);
    border-color: var(--color-success);
}

.btfc-legend-color.btfc-negative {
    background: var(--color-error);
    border-color: var(--color-error);
}

.btfc-legend-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ============================================================================
   SECTION 4: RESPONSIVE LAYOUT
   ============================================================================ */

@media (max-width: 768px) {
    .btfc-manager-records-premium {
        padding: var(--space-4);
    }
    
    .btfc-manager-comparison-legend {
        gap: var(--space-4);
    }
}

/* Small mobile only (480px and below) */
@media (max-width: 480px) {
    .btfc-manager-comparison-table th.btfc-manager-name {
        min-width: 120px;
    }
    
    .btfc-manager-comparison-legend {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-sm);
    }
}