/**
 * Fantasy Draft Board v4.0 - Complete Refactored CSS
 * 
 * SECTIONS:
 * 1.  CSS Variables & Reset
 * 2.  Base Layout & App Container
 * 3.  Login Screen
 * 4.  NEW Header UI (Desktop)
 * 5.  Search Panel (Desktop)
 * 6.  Options Panel (Desktop)
 * 7.  Draft Board Content Area
 * 8.  Draft/Roster Tables - Structure
 * 9.  Team Headers & Budget Display
 * 10. Round Numbers & Position Labels
 * 11. Pick Slots - Draft View (Dark BG)
 * 12. Roster Slots - Roster View (Light BG)
 * 13. Position Colors - Draft (Dark)
 * 14. Position Colors - Roster (Light Pastel)
 * 15. Position Badges
 * 16. Player Content & Injury Badges
 * 17. Comment Icons & Tooltips
 * 18. Two-Row Layout
 * 19. Font Scaling (50% - 150%)
 * 20. Search Results & Highlighting
 * 21. Team Comparison
 * 22. Modals - Base Structure
 * 23. Modals - Specific (Changelog, Player Profile, Injury Report)
 * 24. Schedule & Weekly Results
 * 25. Loading Overlay
 * 26. Quick View Button
 * 27. Sliding Panel
 * 28. Mobile Toolbar (Bottom Bar)
 * 29. Mobile Panels (Search, Options, Actions)
 * 30. Mobile Rotation Message
 * 31. Responsive Breakpoints
 * 32. Utility Classes
 * 33. Animations
 * 34. Home Screen Banner (iOS Safari)
 */

/* ================================================================
   1. CSS VARIABLES & RESET
   ================================================================ */

:root {
    /* ========== PRIMARY COLORS ========== */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --primary-start: #667eea;
    --primary-end: #764ba2;
    
    /* ========== HEADER COLORS ========== */
    --header-bg: #1e293b;
    --header-bg-hover: #334155;
    --header-border: #334155;
    
    /* ========== PANEL COLORS ========== */
    --panel-bg: #f8f9fa;
    --panel-border: #e5e7eb;
    
    /* ========== TABLE HEADER COLORS ========== */
    --table-header-bg: #4a5568;
    --table-header-dark: #2d3748;
    
    /* ========== POSITION COLORS - DRAFT (Dark) ========== */
    --pos-qb-dark: rgba(139, 0, 0, 0.85);
    --pos-rb-dark: rgba(34, 139, 34, 0.85);
    --pos-wr-dark: rgba(0, 102, 204, 0.85);
    --pos-te-dark: rgba(255, 140, 0, 0.85);
    --pos-k-dark: rgba(128, 0, 128, 0.85);
    --pos-def-dark: rgba(75, 0, 130, 0.85);
    --pos-dl-dark: rgba(240, 101, 149, 0.85);
    --pos-lb-dark: rgba(255, 146, 43, 0.85);
    --pos-db-dark: rgba(32, 201, 151, 0.85);
    
    /* ========== POSITION COLORS - ROSTER (Light Pastel) ========== */
    --pos-qb-light: #fabdbd;
    --pos-rb-light: #d1fadd;
    --pos-wr-light: #cfe0f6;
    --pos-te-light: #fcfcca;
    --pos-k-light: #faf5ff;
    --pos-def-light: #e5e7eb;
    --pos-dl-light: #f3f4f6;
    --pos-lb-light: #e5e7eb;
    --pos-db-light: #d1d5db;
    
    /* ========== POSITION BORDER COLORS ========== */
    --pos-qb-border: #dc2626;
    --pos-rb-border: #16a34a;
    --pos-wr-border: #2563eb;
    --pos-te-border: #ea580c;
    --pos-k-border: #9333ea;
    --pos-def-border: #6b7280;
    
    /* ========== STATUS COLORS ========== */
    --status-live: #22c55e;
    --status-complete: #6b7280;
    --status-warning: #f59e0b;
    --status-error: #ef4444;
    
    /* ========== SPACING & LAYOUT ========== */
    --header-height: 56px;
    --mobile-toolbar-height: 73px;
    
    /* ========== TRANSITIONS ========== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    
    /* ========================================================
       FONT SCALE SYSTEM - DESKTOP BASE SIZES
       These define the "100%" size for desktop screens.
       The font-scale slider multiplies these values.
       Tablet and mobile bases are defined in media queries.
       ======================================================== */
    
    /* Font Scale Multiplier (set by JS via data-font-scale attribute) */
    --font-scale: 1;
    
    /* --- Draft Table --- */
    --player-name-base: 0.85rem;
    --player-details-base: 0.7rem;
    --salary-info-base: 0.65rem;
    --position-badge-base: 0.6rem;
    --nfl-team-base: 0.6rem;
    --bye-week-base: 0.6rem;
    --team-header-base: 0.85rem;
    --round-number-base: 0.8rem;
    --inline-position-base: 0.65rem;
    
    /* --- Header --- */
    --header-height-base: 56px;
    --header-padding-v-base: 0.5rem;
    --header-padding-h-base: 1.25rem;
    --league-name-base: 0.95rem;
    --provider-badge-base: 0.65rem;
    --view-tab-base: 0.85rem;
    --header-btn-base: 0.85rem;
    --header-icon-base: 14px;
    --header-btn-min-height-base: 36px;
    
    /* --- Modals --- */
    --modal-header-padding-base: 1.5rem;
    --modal-title-base: 1.4rem;
    --modal-close-base: 2rem;
    --modal-close-size-base: 36px;
    --modal-body-padding-base: 1.5rem;
    --modal-body-base: 1rem;
    --modal-h3-base: 1.2rem;
    --modal-h4-base: 1rem;
    --modal-p-base: 0.95rem;
    --modal-li-base: 0.95rem;
    
    /* --- Options Panel --- */
    --options-padding-base: 0.75rem;
    --options-label-base: 0.65rem;
    --option-toggle-base: 0.85rem;
    --option-dropdown-base: 0.85rem;
    --option-slider-label-base: 0.85rem;
    --option-slider-width-base: 80px;
    --option-checkbox-base: 14px;
    --disconnect-btn-base: 0.85rem;
    
    /* --- Search Panel --- */
    --search-input-base: 0.9rem;
    --search-btn-base: 0.85rem;
    --search-icon-base: 16px;
    --search-results-base: 0.85rem;
    
    /* --- Dropdowns --- */
    --week-dropdown-base: 0.85rem;
    --quick-action-item-base: 0.85rem;
    --quick-action-icon-base: 14px;
    --status-compact-base: 0.85rem;
    --refresh-timer-base: 0.75rem;
    
    /* --- Data Tables (Comparison, Injury, Standings, Schedule) --- */
    --table-cell-base: 0.85rem;
    --table-cell-padding-base: 0.75rem;
    --player-item-base: 0.85rem;
    
    /* --- Other UI Elements --- */
    --quick-view-btn-base: 0.9rem;
    --sliding-panel-title-base: 1.25rem;
    --sliding-panel-body-base: 1rem;
    --loading-text-base: 1.1rem;
    
    /* --- Mobile Toolbar --- */
    --mobile-toolbar-height-base: 73px;
    --mobile-toolbar-btn-base: 0.75rem;
    --mobile-toolbar-icon-base: 18px;
}

/* ========== FONT SCALE MULTIPLIER MAPPING ========== */
/* Maps data-font-scale attribute to CSS variable */
body[data-font-scale="50"]  { --font-scale: 0.5; }
body[data-font-scale="75"]  { --font-scale: 0.75; }
body[data-font-scale="85"]  { --font-scale: 0.85; }
body[data-font-scale="100"] { --font-scale: 1; }
body[data-font-scale="115"] { --font-scale: 1.15; }
body[data-font-scale="125"] { --font-scale: 1.25; }
body[data-font-scale="150"] { --font-scale: 1.5; }

/* ========== DYNAMIC HEADER HEIGHT ========== */
/* Updates --header-height based on font scale for layout calculations */
body[data-font-scale="50"]  { --header-height: calc(56px * 0.5); }
body[data-font-scale="75"]  { --header-height: calc(56px * 0.75); }
body[data-font-scale="85"]  { --header-height: calc(56px * 0.85); }
body[data-font-scale="100"] { --header-height: 56px; }
body[data-font-scale="115"] { --header-height: calc(56px * 1.15); }
body[data-font-scale="125"] { --header-height: calc(56px * 1.25); }
body[data-font-scale="150"] { --header-height: calc(56px * 1.5); }

/* ========== CSS RESET ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--primary-gradient);
    color: #333;
    min-height: 100vh;
    /* iOS Safari safe area support */
    padding-top: env(safe-area-inset-top, 0);
}

/* Lock body scrolling on desktop */
@media (min-width: 769px) {
    body {
        height: 100vh;
        overflow: hidden;
    }
}

/* ================================================================
   1B. FONT SIZE BASE VARIABLES - TABLET (768px - 1199px)
   Smaller base sizes for tablet screens
   ================================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
    :root {
        /* --- Draft Table (Tablet) --- */
        --player-name-base: 10px;
        --player-details-base: 9px;
        --salary-info-base: 9px;
        --position-badge-base: 8px;
        --nfl-team-base: 8px;
        --bye-week-base: 8px;
        --team-header-base: 10px;
        --round-number-base: 10px;
        --inline-position-base: 8px;
        
        /* --- Header (Tablet) --- */
        --header-height-base: 48px;
        --header-padding-v-base: 0.35rem;
        --header-padding-h-base: 0.75rem;
        --league-name-base: 0.8rem;
        --provider-badge-base: 0.55rem;
        --view-tab-base: 0.7rem;
        --header-btn-base: 0.7rem;
        --header-icon-base: 12px;
        --header-btn-min-height-base: 32px;
        
        /* --- Modals (Tablet) --- */
        --modal-header-padding-base: 1rem;
        --modal-title-base: 1.1rem;
        --modal-close-base: 1.6rem;
        --modal-close-size-base: 32px;
        --modal-body-padding-base: 1rem;
        --modal-body-base: 0.85rem;
        --modal-h3-base: 1rem;
        --modal-h4-base: 0.9rem;
        --modal-p-base: 0.8rem;
        --modal-li-base: 0.8rem;
        
        /* --- Options Panel (Tablet) --- */
        --options-padding-base: 0.5rem;
        --options-label-base: 0.55rem;
        --option-toggle-base: 0.7rem;
        --option-dropdown-base: 0.7rem;
        --option-slider-label-base: 0.7rem;
        --option-slider-width-base: 60px;
        --option-checkbox-base: 12px;
        --disconnect-btn-base: 0.7rem;
        
        /* --- Search Panel (Tablet) --- */
        --search-input-base: 0.75rem;
        --search-btn-base: 0.7rem;
        --search-icon-base: 14px;
        --search-results-base: 0.7rem;
        
        /* --- Dropdowns (Tablet) --- */
        --week-dropdown-base: 0.7rem;
        --quick-action-item-base: 0.7rem;
        --quick-action-icon-base: 12px;
        --status-compact-base: 0.7rem;
        --refresh-timer-base: 0.6rem;
        
        /* --- Data Tables (Tablet) --- */
        --table-cell-base: 0.7rem;
        --table-cell-padding-base: 0.5rem;
        --player-item-base: 0.7rem;
        
        /* --- Other UI (Tablet) --- */
        --quick-view-btn-base: 0.75rem;
        --sliding-panel-title-base: 1rem;
        --sliding-panel-body-base: 0.85rem;
        --loading-text-base: 0.95rem;
    }
}

/* ================================================================
   1C. FONT SIZE BASE VARIABLES - MOBILE (max-width: 767px)
   Smallest base sizes for mobile screens
   ================================================================ */
@media (max-width: 767px) {
    :root {
        /* --- Draft Table (Mobile) --- */
        --player-name-base: 9px;
        --player-details-base: 8px;
        --salary-info-base: 8px;
        --position-badge-base: 7px;
        --nfl-team-base: 7px;
        --bye-week-base: 7px;
        --team-header-base: 9px;
        --round-number-base: 9px;
        --inline-position-base: 7px;
        
        /* --- Modals (Mobile) --- */
        --modal-header-padding-base: 0.75rem;
        --modal-title-base: 1rem;
        --modal-close-base: 1.4rem;
        --modal-close-size-base: 28px;
        --modal-body-padding-base: 0.75rem;
        --modal-body-base: 0.8rem;
        --modal-h3-base: 0.9rem;
        --modal-h4-base: 0.85rem;
        --modal-p-base: 0.75rem;
        --modal-li-base: 0.75rem;
        
        /* --- Data Tables (Mobile) --- */
        --table-cell-base: 0.65rem;
        --table-cell-padding-base: 0.4rem;
        --player-item-base: 0.65rem;
        
        /* --- Other UI (Mobile) --- */
        --quick-view-btn-base: 0.7rem;
        --sliding-panel-title-base: 0.9rem;
        --sliding-panel-body-base: 0.8rem;
        --loading-text-base: 0.9rem;
        
        /* --- Mobile Toolbar --- */
        --mobile-toolbar-height-base: 73px;
        --mobile-toolbar-btn-base: 0.7rem;
        --mobile-toolbar-icon-base: 16px;
    }
}

/* ================================================================
   2. BASE LAYOUT & APP CONTAINER
   ================================================================ */

.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (min-width: 769px) {
    .app-container {
        height: 100vh;
        overflow: hidden;
    }
}

.draft-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    overflow: hidden;
}

@media (max-width: 768px) {
    .draft-container {
        overflow-y: auto;
        padding-bottom: calc(var(--mobile-toolbar-height) + 10px);
    }
}

/* ================================================================
   3. LOGIN SCREEN
   ================================================================ */

.login-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 1rem;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.1);
    z-index: 100;
}

.login-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 520px;
    margin: 1rem auto;
    overflow: hidden;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

.login-header {
    background: var(--primary-gradient);
    color: white;
    padding: 1.25rem 2rem;
    text-align: center;
    margin-bottom: 1rem;
}

.login-header h1 {
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
}

.version-info {
    font-size: 0.8rem;
    opacity: 0.9;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.login-form {
    padding: 1.25rem 2rem 2rem 2rem;
    flex: 1;
    overflow-y: auto;
}

/* Add new rule for tighter spacing above league selector */
#leagueSelectGroup {
    margin-top: 0.75rem;  /* Tighter spacing */
}

/* Provider Selection */
.provider-selection {
    margin-bottom: 1.5rem;
}

.provider-selection select {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.provider-selection select:focus {
    outline: none;
    border-color: var(--primary-start);
}

/* Form Elements */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-start);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

/* Connection Mode */
.connection-mode-group {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.connection-mode-group h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    color: #333;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: normal;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 0.5rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.btn-primary {
    background: var(--primary-gradient);
    color: white;
    flex: 1;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
    background: #f5f5f5;
    color: #333;
    border: 2px solid #e0e0e0;
}

.btn-secondary:hover {
    background: #e8e8e8;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.link-button {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all var(--transition-fast);
    display: inline-block;
    margin-top: 0.75rem;
}

.link-button:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

/* Ensure changelog modal appears above login screen */
#changelogModal {
    z-index: 3000 !important;  /* Higher than login container */
}

#changelogModal .modal-content {
    z-index: 3001 !important;
}

/* Error Messages */
.error-message {
    background: #fee;
    border: 1px solid #fcc;
    color: #c33;
    padding: 0.75rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* League Selection */
.league-select-container {
    padding: 1.5rem 10%;
    box-sizing: border-box;
}

.league-select-container select {
    width: 100%;
    margin-bottom: 1rem;
}

.league-select-container .form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.league-select-container button {
    flex: 0 1 auto;
    min-width: 120px;
}

.league-select-container h3 {
    margin-bottom: 1rem;
    color: #333;
}

.league-select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 1rem;
}

/* Advanced Options Section */
.advanced-options-section {
    margin-top: 15px;
    margin-bottom: 10px;
}

.advanced-options-toggle {
    cursor: pointer;
    padding: 10px 0;
    color: #666;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    transition: color 0.2s ease;
}

.advanced-options-toggle:hover {
    color: #333;
}

.advanced-options-toggle .toggle-icon {
    font-size: 0.8em;
    transition: transform 0.2s ease;
}

.advanced-options-toggle .toggle-hint {
    color: #999;
    font-size: 0.85em;
}

.advanced-options-content {
    padding-left: 10px;
    border-left: 2px solid #e0e0e0;
    margin-left: 5px;
    margin-top: 10px;
}

.advanced-options-content .form-group {
    margin-bottom: 12px;
}

/* Conditional field label styling */
label[for] {
    font-weight: 500;
}

/* ================================================================
   4. NEW HEADER UI (Desktop)
   ================================================================ */

.header-main {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0.5rem 1.25rem;
   background: var(--header-bg);
   color: white;
   height: var(--header-height);
   flex-shrink: 0;
}

/* Header Left - League Name & Provider Badge */
.header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex-shrink: 1;
}

.league-name {
    font-weight: 600;
    font-size: clamp(0.55rem, 1.5vw, 0.85rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 25vw;
    min-width: 60px;
}

.league-name a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.league-name a:hover {
    color: #93c5fd;
}

/* Provider Badge */
.provider-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.provider-badge.provider-myfantasyleague { background: rgba(255, 107, 107, 0.3); }
.provider-badge.provider-sleeper { background: rgba(78, 205, 196, 0.3); }
.provider-badge.provider-espn { background: rgba(220, 38, 38, 0.3); }
.provider-badge.provider-yahoo { background: rgba(123, 31, 162, 0.3); }
.provider-badge.provider-cbs { background: rgba(59, 130, 246, 0.3); }

/* Header Center - View Tabs */
.view-tabs {
    display: flex;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.25rem;
    border-radius: 8px;
}

.view-tab {
    padding: 0.4rem 1rem;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all var(--transition-fast);
}

.view-tab:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.view-tab.active {
    background: var(--primary-start);
    color: white;
}

.view-tab.premium {
    color: #fbbf24;
}

/* Header Right - Status & Quick Actions */
.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Status Display */
.header-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.status-compact {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
}

.status-compact strong {
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
}

.status-divider {
    opacity: 0.4;
    margin: 0 0.25rem;
}

.status-indicator {
    font-weight: 500;
}

.status-indicator.live {
    color: var(--status-live);
}

.status-indicator.complete {
    color: var(--status-complete);
}

.status-indicator.paused {
    color: #f59e0b; /* Amber/orange */
}

.status-indicator.not-started {
    color: #6b7280; /* Gray */
}

/* Week Dropdown (Roster View) */
.header-week-select {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.week-dropdown {
    padding: 0.3rem 0.5rem;
    background: var(--header-bg-hover);
    border: 1px solid var(--header-border);
    border-radius: 4px;
    color: white;
    font-size: 0.8rem;
    cursor: pointer;
}

/* Quick Actions */
.quick-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quick-action-btn:hover {
    background: var(--header-bg-hover);
    color: white;
}

.quick-action-btn .icon {
    width: 20px;
    height: 20px;
}

.quick-action-btn .chevron {
    width: 12px;
    height: 12px;
    opacity: 0.6;
    transition: transform var(--transition-fast);
}

.quick-action-btn.options-toggle.active .chevron {
    transform: rotate(180deg);
}

/* ================================================================
   Quick Actions Dropdown Menu
   ================================================================ */
.quick-actions-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    min-width: 160px;
    background: var(--card-bg, #1e293b);
    border: 1px solid var(--header-border, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    overflow: hidden;
}

.quick-action-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.quick-action-item svg {
    flex-shrink: 0;
    opacity: 0.7;
    margin-top: 0.15rem;  /* Align icon with first line of text */
}

.quick-action-item span {
    flex: 1;              /* Take remaining space */
    text-align: left;     /* Left-align wrapped text */
    line-height: 1.3;     /* Comfortable line height for wrapped text */
}

.quick-action-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.quick-action-item:hover svg {
    opacity: 1;
}

/* Wrapper for positioning context */
.quick-actions-wrapper {
    position: relative;
}

/* Active state for button when dropdown is open */
#quickActionsBtn.dropdown-open {
    background: var(--header-bg-hover);
    color: white;
}

#quickActionsBtn.dropdown-open .chevron {
    transform: rotate(180deg);
}

/* other header stuff */

.refresh-timer {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Hide desktop elements on mobile */
@media (max-width: 768px) {
    .header-main { display: none; !important; }
    .search-panel { display: none !important; }
    .options-panel { display: none !important; }

    /* Hide Options panel toggle on mobile - available in bottom toolbar */
    #optionsPanelToggle {
        display: none !important;
    }
}

/* Header Center - Status & Info - INCREASE SIZES */
.header-center {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;  /* INCREASED from 0.75rem */
}

/* Update header info items */
.header-info-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.85rem;  /* INCREASED */
}

.header-info-item .label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;  /* INCREASED from 0.65rem */
}

.header-info-item .value {
    font-weight: 600;
    font-size: 0.9rem;  /* INCREASED from 0.75rem */
}

/* Timer - more prominent */
.timer-item {
    font-size: 0.95rem;  /* INCREASED */
    font-weight: 700;
}

/* Draft status badge */
.draft-status {
    font-size: 0.8rem;  /* INCREASED */
    padding: 0.3rem 0.7rem;
    font-weight: 600;
}

/* Provider badge */
.provider-badge {
    font-size: 0.75rem;  /* INCREASED from 0.65rem */
    padding: 0.25rem 0.6rem;
}

/* Header buttons */
.header-btn {
    font-size: 0.85rem;  /* INCREASED */
    padding: 0.45rem 0.9rem;
}

/* Current pick/round display */
.current-pick-display,
.current-round-display {
    font-size: 0.9rem;  /* INCREASED */
}

/* Draft Type Toggle */
.draft-type-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.25rem;
    margin-right: 0.5rem;
}

.draft-type-toggle .toggle-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
}

.draft-type-toggle .toggle-option:has(input:checked) {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 600;
}

.draft-type-toggle input[type="radio"] {
    display: none;
}

/* ================================================================
   5. SEARCH PANEL (Desktop)
   ================================================================ */

.search-panel {
    background: var(--panel-bg);
    border-bottom: 1px solid var(--panel-border);
    padding: 0.75rem 1rem;
    animation: slideDown var(--transition-normal);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-panel-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 600px;
    margin: 0 auto;
}

.search-input-group {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
}

.search-input-group .search-icon {
    position: absolute;
    left: 0.75rem;
    color: #9ca3af;
    pointer-events: none;
}

.search-input {
    flex: 1;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color var(--transition-fast);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-start);
}

.search-submit-btn {
    padding: 0.5rem 1rem;
    background: var(--primary-start);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    margin-left: 0.5rem;
    transition: background var(--transition-fast);
}

.search-submit-btn:hover {
    background: var(--primary-end);
}

.search-clear-btn {
    padding: 0.5rem 0.75rem;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    margin-left: 0.5rem;
}

.close-search-btn {
    padding: 0.4rem;
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.close-search-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

/* ================================================================
   6. OPTIONS PANEL (Desktop)
   ================================================================ */

.options-panel {
    background: var(--panel-bg);
    border-bottom: 1px solid var(--panel-border);
    padding: 0.75rem 1rem;
    animation: slideDown var(--transition-normal);
}

.options-panel-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.options-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.options-section-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.options-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Option Toggle (Checkbox Style) */
.option-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.option-toggle:hover {
    border-color: var(--primary-start);
}

.option-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--primary-start);
}

/* Option Select (Dropdown Style) */
.option-select {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.option-select label {
    font-size: 0.8rem;
    color: #4b5563;
    white-space: nowrap;
}

.option-dropdown {
    padding: 0.35rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.8rem;
    background: white;
    cursor: pointer;
}

.option-dropdown:focus {
    outline: none;
    border-color: var(--primary-start);
}

/* Font Size Slider */
.option-slider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.option-slider label {
    font-size: 0.8rem;
    color: #4b5563;
    white-space: nowrap;
}

.option-slider input[type="range"] {
    width: 80px;
    cursor: pointer;
    accent-color: var(--primary-start);
}

.option-slider .zoom-value {
    font-size: 0.75rem;
    color: #6b7280;
    min-width: 35px;
    text-align: center;
}

/* Actions Dropdown */
.actions-dropdown {
    min-width: 130px;
}

/* League Dropdown */
.league-dropdown {
    min-width: 150px;
    max-width: 200px;
}

/* Disconnect Button */
.disconnect-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    background: transparent;
    border: 1px solid #ef4444;
    border-radius: 6px;
    color: #ef4444;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.disconnect-btn:hover {
    background: #ef4444;
    color: white;
}

/* ================================================================
   7. DRAFT BOARD CONTENT AREA
   ================================================================ */

.draft-board {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fafafa;
}

.draft-table-container {
    flex: 1;
    overflow: auto;
    padding: 0;
    background: #fafafa;
}

/* ================================================================
   8. DRAFT/ROSTER TABLES - STRUCTURE
   ================================================================ */

.draft-table,
.draft-grid,
.roster-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

/* Table Headers */
.draft-grid thead th,
.roster-grid thead th,
.draft-table thead th {
    background: var(--table-header-bg);
    color: white;
    padding: 0.75rem 0.5rem;
    text-align: center;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: 0.9rem;
    border-bottom: none;
}

/* Pick/Position Header - Sticky Left Column */
.pick-header,
th.pick-header {
    position: sticky !important;
    left: 0 !important;
    z-index: 30 !important;
    background: var(--table-header-dark) !important;
}

/* Round Header */
.round-header {
    background: var(--table-header-dark) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: sticky !important;
    left: 0 !important;
    top: 0;
    z-index: 30 !important;
}

/* ================================================================
   9. TEAM HEADERS & BUDGET DISPLAY
   ================================================================ */

.team-header {
    background: var(--table-header-bg) !important;
    color: white !important;
    padding: 0.75rem 0.5rem !important;
    text-align: center !important;
    font-weight: 600 !important;
    vertical-align: top !important;
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 60px;
}

.team-header .team-name {
    display: block !important;
    font-size: calc(var(--team-header-base) * var(--font-scale)) !important;
    line-height: 1.3 !important;
    margin-bottom: 0.4rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    color: white !important;
}

/* Budget Row - Hidden by default */
.draft-table:not(.show-budgets) thead tr.budget-row,
.draft-grid:not(.show-budgets) thead tr.budget-row,
.roster-grid:not(.show-budgets) thead tr.budget-row {
    display: none !important;
}

.budget-cell {
    padding: 0.3rem 0.5rem;
    min-height: 35px;
    background: var(--table-header-bg);
    color: white;
}

/* Budget display in header - Hidden by default */
.team-header .team-budget,
.draft-table .team-header .team-budget,
.draft-grid .team-header .team-budget,
.roster-grid .team-header .team-budget {
    display: none !important;
    visibility: hidden !important;
}

/* Show budget when show-budgets class is on table */
.draft-table.show-budgets .team-header .team-budget,
.draft-grid.show-budgets .team-header .team-budget,
.roster-grid.show-budgets .team-header .team-budget {
    display: block !important;
    visibility: visible !important;
    font-size: calc(var(--salary-info-base) * var(--font-scale)) !important;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    margin-top: 0.3rem;
}

/* Franchise Name Link */
.franchise-name-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: opacity var(--transition-fast);
}

.franchise-name-link:hover .team-name {
    opacity: 0.8;
    text-decoration: underline;
}

/* IR Warning Indicator (desktop header) */
.ir-warning-indicator {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 3px;
    border: 1px solid #fecaca;
    margin-left: 4px;
    cursor: help;
}

/* ================================================================
   MULTI-ROW STICKY HEADER FIX
   When budget row is shown, both header rows need to be sticky
   with the budget row positioned below the team names row
   ================================================================ */

/* Team Names Row (first header row) - always sticky at top: 0 */
.draft-table thead tr.team-names-row th,
.draft-grid thead tr.team-names-row th,
.roster-grid thead tr.team-names-row th,
.draft-table thead tr.header-row:first-child th,
.draft-grid thead tr.header-row:first-child th,
.roster-grid thead tr.header-row:first-child th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: var(--table-header-bg) !important;
}

/* Budget Row (second header row) - sticky below team names row */
.draft-table thead tr.budget-row th,
.draft-table thead tr.budget-row td,
.draft-grid thead tr.budget-row th,
.draft-grid thead tr.budget-row td,
.roster-grid thead tr.budget-row th,
.roster-grid thead tr.budget-row td {
    position: sticky !important;
    top: var(--team-header-height, 52px) !important;
    z-index: 19 !important;
    background: var(--table-header-bg) !important;
}

/* Budget cells styling */
.budget-cell,
.draft-table thead tr.budget-row th,
.draft-grid thead tr.budget-row th,
.roster-grid thead tr.budget-row th {
    padding: 0.3rem 0.5rem !important;
    min-height: 35px;
    background: var(--table-header-bg) !important;
    color: white !important;
    font-size: calc(var(--salary-info-base) * var(--font-scale)) !important;
    font-weight: 500 !important;
}

/* Round header cell spans both rows - needs higher z-index */
.draft-table thead th.round-header[rowspan],
.draft-grid thead th.round-header[rowspan],
.roster-grid thead th.round-header[rowspan] {
    position: sticky !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 25 !important;
    background: var(--table-header-dark) !important;
}

/* Budget Row - Hidden by default */
.draft-table:not(.show-budgets) thead tr.budget-row,
.draft-grid:not(.show-budgets) thead tr.budget-row,
.roster-grid:not(.show-budgets) thead tr.budget-row {
    display: none !important;
}

/* When budgets are hidden, team header row stays at top: 0 (no change needed) */

/* Two-row layout adjustments for sticky headers */
.draft-table.two-row-layout thead tr.team-names-row th,
.draft-table.two-row-layout thead tr.header-row:first-child th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
}

/* Two-row layout adjustments for sticky headers */
/* Budget row uses dynamic height variable for proper alignment */
.draft-table.two-row-layout thead tr.budget-row th,
.draft-table.two-row-layout thead tr.budget-row td {
    position: sticky !important;
    top: var(--team-header-height, 45px) !important;  /* Use dynamic height, slightly smaller default */
    z-index: 19 !important;
}

/* ================================================================
   10. ROUND NUMBERS & POSITION LABELS
   ================================================================ */

/* 3D Styled Round Numbers */
.round-number {
    background: linear-gradient(145deg, #4a5568, #2d3748) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    padding: 0.6rem 0.4rem !important;
    text-align: center !important;
    border-radius: 8px !important;
    box-shadow: 
        3px 3px 6px rgba(0, 0, 0, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.2),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 11 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    min-width: 60px !important;
}

.round-number::before {
    content: "R";
    font-size: 0.7em;
    opacity: 0.9;
    margin-right: 0.1em;
}

.round-number:hover {
    transform: translateY(-1px);
    box-shadow: 
        4px 4px 8px rgba(0, 0, 0, 0.4),
        inset -1px -1px 2px rgba(0, 0, 0, 0.2),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3) !important;
    transition: all var(--transition-fast);
}

/* Position Labels in Body - Scroll Under Header */
.round-label,
.position-label {
    position: sticky;
    left: 0;
    z-index: 5 !important;
    background: #f8f9fa;
    font-weight: 600;
    border-right: 2px solid #dee2e6;
}

/* Position Labels - Base Style */
.position-label {
    font-weight: bold;
    color: white;
    text-align: center;
    padding: 0.75rem 0.5rem;
    background: var(--primary-gradient);
}

/* Position-specific gradients */
.position-label.QB { background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); }
.position-label.RB { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }
.position-label.WR { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
.position-label.TE { background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); }
.position-label.K { background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%); }
.position-label.DEF,
.position-label.Def,
.position-label.DST { background: linear-gradient(135deg, #4b5563 0%, #374151 100%); }
.position-label.DL { background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%); }
.position-label.LB { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); }
.position-label.DB { background: linear-gradient(135deg, #4b5563 0%, #374151 100%); }

/* ================================================================
   11. PICK SLOTS - DRAFT VIEW (Dark BG)
   ================================================================ */

.pick-slot {
    background: white;
    border: 2px solid #e2e8f0;
    padding: 0.4rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    min-height: 40px;
    position: relative;
    vertical-align: middle;
    font-size: 0.8rem;
    overflow: visible;
}

.pick-slot:not(.filled) {
    background: white !important;
    border: 2px solid #e2e8f0 !important;
}

.pick-slot:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pick-slot.filled {
    border-color: #4299e1;
    background-color: #67686a;
}

/* Current Pick - On the Clock */
.pick-slot.current,
.pick-slot.on-the-clock {
    background: #ffd700 !important;
    border-color: #e6c200 !important;
    animation: pulse 2s infinite !important;
}

/* Player Text in Draft View - WHITE on dark backgrounds */
.pick-slot .player-name {
    font-weight: bold;
    font-size: calc(var(--player-name-base) * var(--font-scale)) !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.2rem;
    color: white;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    /* Use this to break player names across lines
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    overflow: visible;
    */
    /* Use this to truncate names */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

.pick-slot .player-details,
.pick-slot .player-info {
    font-size: calc(var(--player-details-base) * var(--font-scale)) !important;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem;
    margin-top: 0.2rem;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

/* Override text color for current pick (dark text on gold) */
.pick-slot.current .player-name,
.pick-slot.on-the-clock .player-name {
    color: #000 !important;
    text-shadow: none !important;
    font-weight: bold !important;
}

/* Player Display Container */
.player-display {
    overflow: visible;
    position: relative;
    padding: 0.3rem 0.4rem;
}

/* ================================================================
   AUCTION DRAFT LAYOUT - Two-column name display
   ================================================================ */

/* Container for auction layout */
.auction-name-layout {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

/* Auction amount column - spans both name rows visually */
.auction-amount-cell {
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.25);
    padding: 0.2rem 0.35rem;
    border-radius: 4px;
    min-width: 2.5rem;
    text-align: center;
    line-height: 1.1;
}

/* Name column - stacked last name / first name */
.auction-name-cell {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

/* Last name - top row, larger/bolder */
.auction-last-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* First name - bottom row, smaller/lighter */
.auction-first-name {
    font-weight: 400;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Auction display container adjustment */
.player-display.auction-display {
    padding: 0.3rem 0.4rem;
}

/* Font scaling for auction layout */
body[data-font-scale="75"] .auction-amount-cell { font-size: 0.675rem; min-width: 2rem; }
body[data-font-scale="75"] .auction-last-name { font-size: 0.64rem; }
body[data-font-scale="75"] .auction-first-name { font-size: 0.525rem; }

body[data-font-scale="125"] .auction-amount-cell { font-size: 1.125rem; min-width: 3rem; }
body[data-font-scale="125"] .auction-last-name { font-size: 1.06rem; }
body[data-font-scale="125"] .auction-first-name { font-size: 0.875rem; }

body[data-font-scale="150"] .auction-amount-cell { font-size: 1.35rem; min-width: 3.5rem; }
body[data-font-scale="150"] .auction-last-name { font-size: 1.275rem; }
body[data-font-scale="150"] .auction-first-name { font-size: 1.05rem; }

/* Two-row layout adjustments for auction */
.draft-table.two-row-layout .auction-amount-cell { font-size: 0.8rem; }
.draft-table.two-row-layout .auction-last-name { font-size: 0.75rem; }
.draft-table.two-row-layout .auction-first-name { font-size: 0.6rem; }

/* ================================================================
   12. ROSTER SLOTS - ROSTER VIEW (Light BG)
   ================================================================ */

.roster-slot {
    background: white;
    border: 2px solid #e0e0e0;
    padding: 0.4rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    min-height: 40px;
    position: relative;
    vertical-align: middle;
    font-size: calc(0.8rem * var(--font-scale));
    overflow: visible;
}

.roster-slot.empty {
    background: #f5f5f5 !important;
    border: 2px solid #e0e0e0 !important;
    border-style: dashed;
}

.roster-slot.filled {
    border-color: #cbd5e0;
    background-color: #f8f9ff;
}

.roster-slot:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Player Text in Roster View - DARK on light backgrounds */
.roster-slot .player-name {
    font-weight: bold;
    font-size: calc(var(--player-name-base) * var(--font-scale)) !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.2rem;
    color: #1a1a1a !important;
    text-shadow: none !important;
    line-height: 1.2;
    /* Use this to wrap names 
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    */
    /* Use this to truncate names */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

.roster-slot .player-details,
.roster-slot .player-info {
    font-size: calc(var(--player-details-base) * var(--font-scale)) !important;
    color: #333 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem;
    margin-top: 0.2rem;
    text-shadow: none !important;
}

/* ================================================================
   STACKED PLAYER NAME LAYOUT
   Layout: Last Name (with comma) → First Name → Position
   All centered, truncated with ellipsis if too long
   ================================================================ */

/* Container for stacked name layout */
.player-name-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1px;
    width: 100%;
    line-height: 1.15;
}

/* Last name - top row, bold */
.player-last-name {
    font-weight: 700;
    font-size: calc(var(--player-name-base) * var(--font-scale));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    cursor: pointer;
}

/* First name - second row, slightly lighter */
.player-first-name {
    font-weight: 500;
    font-size: calc(var(--player-name-base) * var(--font-scale) * 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    opacity: 0.9;
}

/* Position row - contains position badge + injury + comment icons */
.player-position-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin-top: 2px;
}

/* Single-line name (for DEF/DST) */
.player-name-single {
    font-weight: 700;
    font-size: calc(var(--player-name-base) * var(--font-scale));
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
    cursor: pointer;
}

/* Pick slots (dark bg) - white text */
.pick-slot .player-last-name,
.pick-slot .player-first-name,
.pick-slot .player-name-single {
    color: white;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

/* Roster slots (light bg) - dark text */
.roster-slot .player-last-name,
.roster-slot .player-first-name,
.roster-slot .player-name-single {
    color: #1f2937;
    text-shadow: none;
}

/* Hover effect for clickable names */
.player-last-name:hover,
.player-name-single:hover {
    text-decoration: underline;
}

/* ================================================================
   13. POSITION COLORS - DRAFT (Dark)
   ================================================================ */

.draft-table .pick-slot.filled.position-QB,
.pick-slot.filled.position-QB { background-color: var(--pos-qb-dark) !important; color: white !important; }

.draft-table .pick-slot.filled.position-RB,
.pick-slot.filled.position-RB { background-color: var(--pos-rb-dark) !important; color: white !important; }

.draft-table .pick-slot.filled.position-WR,
.pick-slot.filled.position-WR { background-color: var(--pos-wr-dark) !important; color: white !important; }

.draft-table .pick-slot.filled.position-TE,
.pick-slot.filled.position-TE { background-color: var(--pos-te-dark) !important; color: white !important; }

.draft-table .pick-slot.filled.position-K,
.pick-slot.filled.position-K { background-color: var(--pos-k-dark) !important; color: white !important; }

.draft-table .pick-slot.filled.position-DEF,
.draft-table .pick-slot.filled.position-Def,
.draft-table .pick-slot.filled.position-DST,
.pick-slot.filled.position-DEF,
.pick-slot.filled.position-Def,
.pick-slot.filled.position-DST { background-color: var(--pos-def-dark) !important; color: white !important; }

/* IDP Positions - Draft */
.draft-table .pick-slot.filled.position-DL,
.pick-slot.filled.position-DL { background-color: var(--pos-dl-dark) !important; color: white !important; }

.draft-table .pick-slot.filled.position-LB,
.pick-slot.filled.position-LB { background-color: var(--pos-lb-dark) !important; color: white !important; }

.draft-table .pick-slot.filled.position-DB,
.pick-slot.filled.position-DB { background-color: var(--pos-db-dark) !important; color: white !important; }

/* ================================================================
   14. POSITION COLORS - ROSTER (Light Pastel)
   ================================================================ */

.roster-slot.filled.position-QB {
    background-color: var(--pos-qb-light) !important;
    border-color: var(--pos-qb-border) !important;
}

.roster-slot.filled.position-RB {
    background-color: var(--pos-rb-light) !important;
    border-color: var(--pos-rb-border) !important;
}

.roster-slot.filled.position-WR {
    background-color: var(--pos-wr-light) !important;
    border-color: var(--pos-wr-border) !important;
}

.roster-slot.filled.position-TE {
    background-color: var(--pos-te-light) !important;
    border-color: var(--pos-te-border) !important;
}

.roster-slot.filled.position-K {
    background-color: var(--pos-k-light) !important;
    border-color: var(--pos-k-border) !important;
}

.roster-slot.filled.position-DEF,
.roster-slot.filled.position-Def,
.roster-slot.filled.position-DST {
    background-color: var(--pos-def-light) !important;
    border-color: var(--pos-def-border) !important;
}

/* IDP Positions - Roster */
.roster-slot.filled.position-DL {
    background-color: var(--pos-dl-light) !important;
    border-color: #9ca3af !important;
}

.roster-slot.filled.position-LB {
    background-color: var(--pos-lb-light) !important;
    border-color: #6b7280 !important;
}

.roster-slot.filled.position-DB {
    background-color: var(--pos-db-light) !important;
    border-color: #4b5563 !important;
}

/* ================================================================
   15. POSITION BADGES
   ================================================================ */

.position {
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-weight: bold;
    font-size: 0.65rem;
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

/* Position Badges - Draft View */
.position.QB { background-color: #8b0000; }
.position.RB { background-color: #228b22; }
.position.WR { background-color: #0066cc; }
.position.TE { background-color: #ff8c00; }
.position.K { background-color: #800080; }
.position.DEF, .position.Def, .position.DST { background-color: #4b0082; }
.position.DL { background-color: #f06595; }
.position.LB { background-color: #ff922b; }
.position.DB { background-color: #20c997; }

/* Position Badges - Roster View (darker shades) */
.roster-slot .position {
    color: white !important;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.roster-slot .position.QB { background-color: var(--pos-qb-border) !important; }
.roster-slot .position.RB { background-color: var(--pos-rb-border) !important; }
.roster-slot .position.WR { background-color: var(--pos-wr-border) !important; }
.roster-slot .position.TE { background-color: var(--pos-te-border) !important; }
.roster-slot .position.K { background-color: var(--pos-k-border) !important; }
.roster-slot .position.DEF,
.roster-slot .position.Def,
.roster-slot .position.DST { background-color: var(--pos-def-border) !important; }
.roster-slot .position.DL { background-color: #9ca3af !important; }
.roster-slot .position.LB { background-color: #6b7280 !important; }
.roster-slot .position.DB { background-color: #4b5563 !important; }

/* NFL Team & Bye Week Badges */
.nfl-team {
    background: #374151;
    color: white;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-weight: bold;
    font-size: 0.6rem;
    border: 1px solid #1f2937;
    white-space: nowrap;
}

.bye-week {
    background: #dc2626;
    color: white;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-weight: bold;
    font-size: 0.6rem;
    border: 1px solid #991b1b;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* Roster View - Dark badges */
.roster-slot .nfl-team {
    background: #374151 !important;
    color: white !important;
}

.roster-slot .bye-week {
    background: #dc2626 !important;
    color: white !important;
}

/* ================================================================
   OPPONENT DISPLAY
   ================================================================ */

/* Opponent display span - hidden by default */
.opponent-display {
    color: #6366f1;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 3px;
}

/* Show when table has show-opponents class */
.show-opponents .opponent-display {
    display: inline !important;
}

/* Mobile compare opponent */
.compare-player-opponent {
    color: #6366f1;
    font-size: 0.6rem;
    font-weight: 600;
    margin-left: 2px;
}

/* ================================================================
   16. PLAYER CONTENT & INJURY BADGES
   ================================================================ */

/* Injury Designation Badge */
.injury-designation {
    display: inline-block;
    padding: 0.05rem 0.25rem;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: bold;
    margin-left: 0.25rem;
    cursor: help;
    vertical-align: middle;
}

/* Injury status colors */
.injury-designation.injury-Q { background: #fbbf24; color: #000; }
.injury-designation.injury-D { background: #f97316; color: white; }
.injury-designation.injury-O { background: #ef4444; color: white; }
.injury-designation.injury-IR { background: #dc2626; color: white; }
.injury-designation.injury-I { background: #dc2626; color: white; }
.injury-designation.injury-PUP { background: #6b7280; color: white; }
.injury-designation.injury-SUS { background: #4b5563; color: white; }

/* Injury designation - JavaScript tooltip version */
.injury-designation-js {
    position: relative;
    display: inline-block;
    z-index: 1;
    vertical-align: baseline;
}

/* Allow tooltips to overflow from table cells */
.draft-table td,
.draft-table td.pick-slot,
.draft-table td.roster-slot {
    position: relative;
    overflow: visible !important;
}

/* Salary Info */
.salary-info {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;  /* Center the salary badge + contract as a unit */
    gap: 0.25rem;             /* Small gap between badge and contract text */
}

.roster-slot .salary-info {
    color: #666 !important;
}

/* Salary Info - Ensure readable on dark draft board backgrounds */
.pick-slot.filled .salary-info {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Also style salary-contract-info in roster view for consistency */
.draft-table .salary-info,
.pick-slot .salary-info {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ================================================================
   SALARY & CONTRACT INFO (Roster View)
   ================================================================ */

/* Container - flexbox with space-between for left/right alignment */
.salary-contract-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
    gap: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
    color: #4a5568;
}

/* Salary amount - left side, green */
.salary-amount {
    color: #10b981;
    font-weight: 600;
    white-space: nowrap;
}

/* Contract status - right side, purple */
.contract-status {
    color: #6366f1;
    font-weight: 500;
    white-space: nowrap;
}

/* If only one piece of info exists, it still displays properly */
.salary-contract-info:has(.salary-amount):not(:has(.contract-status)) {
    justify-content: flex-start;
}

.salary-contract-info:has(.contract-status):not(:has(.salary-amount)) {
    justify-content: flex-end;
}

/* Font scaling for salary/contract info */
body[data-font-scale="50"] .salary-contract-info { font-size: 0.375rem; }
body[data-font-scale="50"] .salary-amount,
body[data-font-scale="50"] .contract-status { font-size: 0.375rem; }

body[data-font-scale="75"] .salary-contract-info { font-size: 0.5625rem; }
body[data-font-scale="75"] .salary-amount,
body[data-font-scale="75"] .contract-status { font-size: 0.5625rem; }

body[data-font-scale="100"] .salary-contract-info { font-size: 0.75rem; }
body[data-font-scale="100"] .salary-amount,
body[data-font-scale="100"] .contract-status { font-size: 0.75rem; }

body[data-font-scale="125"] .salary-contract-info { font-size: 0.9375rem; }
body[data-font-scale="125"] .salary-amount,
body[data-font-scale="125"] .contract-status { font-size: 0.9375rem; }

body[data-font-scale="150"] .salary-contract-info { font-size: 1.125rem; }
body[data-font-scale="150"] .salary-amount,
body[data-font-scale="150"] .contract-status { font-size: 1.125rem; }

/* Two-row layout - slightly smaller */
.draft-table.two-row-layout .salary-contract-info { font-size: 0.65rem; }
.draft-table.two-row-layout .salary-amount,
.draft-table.two-row-layout .contract-status { font-size: 0.65rem; }

/* ================================================================
   SALARY ADJUSTMENTS DISPLAY
   ================================================================ */

.salary-adjustment {
    color: #f59e0b; /* Amber/warning color */
    font-weight: 500;
    margin-left: 0.25rem;
    cursor: help;
    font-size: 0.8em;
}

.salary-adjustment:hover {
    text-decoration: underline;
}

/* Adjustment tooltip styling */
.salary-adjustment[title] {
    position: relative;
}

/* Budget line formatting */
.budget-remaining {
    color: #10b981; /* Green */
    font-weight: 600;
}

.budget-line-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* ================================================================
   SALARY ADJUSTMENTS MODAL (Desktop)
   ================================================================ */

.salary-adjustment.clickable {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.salary-adjustment.clickable:hover {
    text-decoration: underline solid;
    color: #fcd34d; /* Brighter on hover */
}

/* Modal Overlay */
.adjustments-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Modal Content */
.adjustments-modal-content {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 700px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.adjustments-modal-content .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.adjustments-modal-content .modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.adjustments-modal-content .modal-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.75rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.adjustments-modal-content .modal-close-btn:hover {
    opacity: 1;
}

.adjustments-modal-content .modal-subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
}

.adjustments-modal-content .modal-team-name {
    font-weight: 600;
    color: #374151;
    font-size: 1rem;
}

.adjustments-modal-content .modal-total {
    font-weight: 700;
    font-size: 1.1rem;
}

.adjustments-modal-content .modal-total.positive {
    color: #dc2626; /* Red - money owed */
}

.adjustments-modal-content .modal-total.negative {
    color: #16a34a; /* Green - money freed */
}

.adjustments-modal-content .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Adjustments Table */
.adjustments-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.adjustments-table thead {
    position: sticky;
    top: 0;
    background: #f9fafb;
    z-index: 1;
}

.adjustments-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
}

.adjustments-table th:last-child {
    text-align: right;
}

.adjustments-table td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

.adjustments-table tbody tr:hover {
    background: #f9fafb;
}

.adjustments-table .adj-date {
    color: #6b7280;
    white-space: nowrap;
    width: 100px;
}

.adjustments-table .adj-desc {
    color: #374151;
    line-height: 1.4;
}

.adjustments-table .adj-amount {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
    width: 80px;
}

.adjustments-table .adj-amount.positive {
    color: #dc2626;
}

.adjustments-table .adj-amount.negative {
    color: #16a34a;
}

/* Empty state */
.adjustments-modal-content .empty-state {
    padding: 2rem;
    text-align: center;
    color: #9ca3af;
}

/* ================================================================
   17. COMMENT ICONS & TOOLTIPS
   ================================================================ */

.comment-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    margin-left: 0.4rem;
    margin-right:0.4rem;
    vertical-align: middle;
    position: relative;
    z-index: 100;
}

/* Comment icon tooltip is now rendered via JavaScript to avoid overflow clipping */
/* See ui_v4.js setupCommentIconTooltips() */

/* Comment Tooltip (appended to body via JS) */
#comment-tooltip-overlay {
    position: fixed;
    background: #2d3748;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    max-width: 250px;
    z-index: 99999 !important;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.4;
}

.comment-icon.commissioner { background-color: white; border: 1px solid #666; }
.comment-icon.adp { background-color: #ffd700; }
.comment-icon.skipped { background-color: #ff4444; }
.comment-icon.other { background-color: #4299e1; }

/* Skipped Pick Styling */
.pick-slot.skipped {
    background-color: #ffe6e6 !important;
    border: 2px solid #ff4444 !important;
}

.pick-slot.skipped .player-name,
.pick-slot.skipped .skipped-text {
    color: #ff4444 !important;
    font-weight: bold;
    text-shadow: none !important;
}

/* ================================================================
   SKIPPED PICK DISPLAY
   Three-line centered layout for commissioner-skipped picks
   ================================================================ */

/* Ensure player-display fills cell height for skipped picks */
.pick-slot.skipped .player-display {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   height: 100% !important;
   padding: 0 !important;
   flex-wrap: nowrap !important;
}

.skipped-pick-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0;
    width: 100%;
    line-height: 1.2;
    padding: 4px 2px;
    /* add these lines to make all 3 rows look similar */
    font-weight: 700 !important;
    font-size: calc(var(--player-name-base) * var(--font-scale)) !important;
    color: #dc2626 !important;
    /* ADD THESE LINES for overflow control */
    overflow: hidden;
    max-width: 100%;
}

/* Icon row - contains the red comment dot */
.skipped-icon-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
}

/* ADD: Ensure all skipped display lines truncate with ellipsis */
.skipped-pick-display .skipped-line-1,
.skipped-pick-display .skipped-line-2,
.skipped-pick-display .skipped-line-3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

/* make all 3 lines same, comment this out below
/* "Pick Skipped" - top line, bold
.skipped-line-1 {
    font-weight: 700;
    font-size: calc(var(--player-name-base) * var(--font-scale));
    color: #dc2626;
    text-shadow: none;
}

/* "by" - middle line, smaller
.skipped-line-2 {
    font-weight: 400;
    font-size: calc(var(--player-details-base) * var(--font-scale));
    color: #dc2626;
    opacity: 0.8;
}

/* "Commissioner" - bottom line
.skipped-line-3 {
    font-weight: 600;
    font-size: calc(var(--player-details-base) * var(--font-scale));
    color: #dc2626;
}
*/

/* Ensure skipped pick slot has appropriate background */
.pick-slot.skipped {
    background-color: #fee2e2 !important;
    border: 2px solid #f87171 !important;
}

/* Override any text-shadow from pick-slot for skipped text */
.pick-slot.skipped .skipped-pick-display span {
    text-shadow: none;
}

/* Commissioner Pick Indicator */
.pick-slot.commissioner-pick {
    border: 2px solid #666 !important;
    z-index: 1;
}

/* ADP Pick Indicator */
.pick-slot.adp-pick {
    border: 2px solid #ffd700 !important;
}

/* Generic Tooltip */
.tooltip {
    position: fixed;
    background: #2d3748;
    color: white;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    max-width: 200px;
    z-index: 10000 !important;
    word-wrap: break-word;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    cursor: pointer;
}

/* ================================================================
   18. TWO-ROW LAYOUT
   ================================================================ */

.layout-two-row .draft-grid,
.layout-two-row .roster-grid,
.draft-table.two-row-layout {
    font-size: 0.85em;
}

.layout-two-row .pick-slot,
.layout-two-row .roster-slot,
.draft-table.two-row-layout .pick-slot,
.draft-table.two-row-layout .roster-slot {
    min-height: 35px;
    padding: 0.3rem;
}

.layout-two-row .player-name,
.draft-table.two-row-layout .player-name {
    font-size: calc(var(--player-name-base) * var(--font-scale) * 0.88) !important;
    line-height: 1.1;
}

.layout-two-row .player-details,
.layout-two-row .player-info,
.draft-table.two-row-layout .player-details {
    font-size: calc(var(--player-details-base) * var(--font-scale) * 0.86) !important;
}

.layout-two-row .round-number,
.draft-table.two-row-layout .round-number {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.3rem !important;
}

.layout-two-row .team-header {
    min-width: 180px;
    padding: 0.5rem;
    font-size: calc(var(--team-header-base) * var(--font-scale)) !important;
}

.two-row-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ================================================================
   19. FONT SCALING (Variable-Based System)
   
   ARCHITECTURE:
   - Base sizes defined in Section 1 per device type (desktop, tablet, mobile)
   - Font-scale multiplier mapped in Section 1 via data-font-scale attribute
   - This section applies: Actual size = base × multiplier
   - All UI elements scale proportionally relative to device defaults
   ================================================================ */

/* ================================================================
   19A. DRAFT TABLE SCALING
   ================================================================ */
.draft-table .player-name,
.draft-table .player-display .player-name {
    font-size: calc(var(--player-name-base) * var(--font-scale)) !important;
}

.draft-table.two-row-layout .player-name {
    font-size: calc(var(--player-name-base) * var(--font-scale) * 1.05) !important;
}

.draft-table .player-details {
    font-size: calc(var(--player-details-base) * var(--font-scale)) !important;
}

.draft-table .salary-info {
    font-size: calc(var(--salary-info-base) * var(--font-scale)) !important;
}

.draft-table .position {
    font-size: calc(var(--position-badge-base) * var(--font-scale)) !important;
}

.draft-table .nfl-team {
    font-size: calc(var(--nfl-team-base) * var(--font-scale)) !important;
}

.draft-table .bye-week {
    font-size: calc(var(--bye-week-base) * var(--font-scale)) !important;
}

.draft-table .team-header {
    font-size: calc(var(--team-header-base) * var(--font-scale)) !important;
}

.draft-table .round-number {
    font-size: calc(var(--round-number-base) * var(--font-scale)) !important;
}

.draft-table .inline-position {
    font-size: calc(var(--inline-position-base) * var(--font-scale)) !important;
}

.draft-table .salary-badge {
    font-size: calc(var(--salary-info-base) * var(--font-scale)) !important;
}

/* ================================================================
   19A-2. ROSTER SLOT SCALING (Desktop Roster View)
   Ensures roster view slots also respect font-scale slider
   ================================================================ */

/* Roster slot player name - scale with font slider */
.roster-slot .player-name {
    font-size: calc(var(--player-name-base) * var(--font-scale)) !important;
}

/* Roster slot player details - scale with font slider */
.roster-slot .player-details,
.roster-slot .player-info {
    font-size: calc(var(--player-details-base) * var(--font-scale)) !important;
}

/* Roster slot base font - scale with font slider */
.roster-slot {
    font-size: calc(0.8rem * var(--font-scale)) !important;
}

/* Two-row layout roster slots */
.draft-table.two-row-layout .roster-slot .player-name {
    font-size: calc(var(--player-name-base) * var(--font-scale) * 1.05) !important;
}

.draft-table.two-row-layout .roster-slot .player-details {
    font-size: calc(var(--player-details-base) * var(--font-scale)) !important;
}

/* ================================================================
   19A-3. TABLE HEADER SCALING (Team Names & Budget Row)
   Ensures team headers and budget row respect font-scale slider
   ================================================================ */

/* Team name in header - scale with font slider */
.team-header .team-name {
    font-size: calc(var(--team-header-base) * var(--font-scale)) !important;
}

/* Team budget display in header - scale with font slider */
.team-header .team-budget {
    font-size: calc(var(--salary-info-base) * var(--font-scale)) !important;
}

/* Budget row cells - scale with font slider */
.budget-cell,
.draft-table thead tr.budget-row th,
.draft-grid thead tr.budget-row th,
.roster-grid thead tr.budget-row th {
    font-size: calc(var(--salary-info-base) * var(--font-scale)) !important;
}

/* Budget amount text inside cells */
.budget-cell .budget-amount,
.budget-cell .budget-remaining {
    font-size: calc(var(--salary-info-base) * var(--font-scale)) !important;
}

/* Roster slots open text in budget row */
.budget-cell .roster-slots-open {
    font-size: calc(var(--player-details-base) * var(--font-scale) * 0.9) !important;
}

/* ================================================================
   19A-4. PLAYER NAME TRUNCATION
   All player names truncate with ellipsis; full name shown on hover via title attribute
   ================================================================ */

/* Base player name truncation - applies to all views */
.player-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}

/* Ensure player-name-row doesn't wrap when name is truncated */
.player-name-row {
    flex-wrap: nowrap !important;
}

/* Allow slightly more width on larger screens */
@media (min-width: 1200px) {
    .pick-slot .player-name,
    .roster-slot .player-name {
        max-width: 120px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .pick-slot .player-name,
    .roster-slot .player-name {
        max-width: 80px;
    }
}

@media (max-width: 767px) {
    .pick-slot .player-name,
    .roster-slot .player-name {
        max-width: 70px;
    }
}

/* ================================================================
   19B. HEADER SCALING
   ================================================================ */
.header-main {
    height: calc(var(--header-height-base) * var(--font-scale));
    padding: calc(var(--header-padding-v-base) * var(--font-scale)) 
             calc(var(--header-padding-h-base) * var(--font-scale));
}

.league-name,
.header-left h1#leagueName {
    font-size: calc(var(--league-name-base) * var(--font-scale)) !important;
}

.provider-badge {
    font-size: calc(var(--provider-badge-base) * var(--font-scale)) !important;
    padding: calc(0.15rem * var(--font-scale)) calc(0.4rem * var(--font-scale)) !important;
}

.view-tab {
    font-size: calc(var(--view-tab-base) * var(--font-scale)) !important;
    padding: calc(0.4rem * var(--font-scale)) calc(1rem * var(--font-scale)) !important;
}

.header-btn,
.quick-action-btn {
    font-size: calc(var(--header-btn-base) * var(--font-scale)) !important;
    padding: calc(0.4rem * var(--font-scale)) calc(0.75rem * var(--font-scale)) !important;
    min-height: calc(var(--header-btn-min-height-base) * var(--font-scale)) !important;
}

.header-btn svg,
.quick-action-btn svg {
    width: calc(var(--header-icon-base) * var(--font-scale)) !important;
    height: calc(var(--header-icon-base) * var(--font-scale)) !important;
}

/* ================================================================
   19C. MODAL SCALING
   ================================================================ */
.modal-header {
    padding: calc(var(--modal-header-padding-base) * var(--font-scale)) !important;
}

.modal-header h2 {
    font-size: calc(var(--modal-title-base) * var(--font-scale)) !important;
}

.modal-close,
.close-changelog,
.close-modal-btn {
    font-size: calc(var(--modal-close-base) * var(--font-scale)) !important;
    width: calc(var(--modal-close-size-base) * var(--font-scale)) !important;
    height: calc(var(--modal-close-size-base) * var(--font-scale)) !important;
    min-width: calc(24px * var(--font-scale)) !important;
    min-height: calc(24px * var(--font-scale)) !important;
}

.modal-body {
    padding: calc(var(--modal-body-padding-base) * var(--font-scale)) !important;
    font-size: calc(var(--modal-body-base) * var(--font-scale)) !important;
}

.modal-body h3 {
    font-size: calc(var(--modal-h3-base) * var(--font-scale)) !important;
    margin-bottom: calc(0.75rem * var(--font-scale)) !important;
}

.modal-body h4 {
    font-size: calc(var(--modal-h4-base) * var(--font-scale)) !important;
}

.modal-body p,
.modal-body li {
    font-size: calc(var(--modal-p-base) * var(--font-scale)) !important;
    line-height: 1.6 !important;
    margin-bottom: calc(0.5rem * var(--font-scale)) !important;
}

.modal-body ul {
    padding-left: calc(1.5rem * var(--font-scale)) !important;
}

/* Changelog Modal */
.changelog-content {
    padding: calc(2rem * var(--font-scale)) !important;
}

.changelog-content h2 {
    font-size: calc(var(--modal-title-base) * var(--font-scale)) !important;
    margin-bottom: calc(1.5rem * var(--font-scale)) !important;
}

.changelog-content h3 {
    font-size: calc(var(--modal-h3-base) * var(--font-scale)) !important;
    margin-top: calc(1.5rem * var(--font-scale)) !important;
    margin-bottom: calc(0.75rem * var(--font-scale)) !important;
}

.changelog-content h4 {
    font-size: calc(var(--modal-h4-base) * var(--font-scale)) !important;
}

.changelog-content li {
    font-size: calc(var(--modal-li-base) * var(--font-scale)) !important;
    margin-bottom: calc(0.5rem * var(--font-scale)) !important;
}

/* Player Profile Modal */
.player-profile-header {
    padding: calc(2rem * var(--font-scale)) !important;
}

.player-profile-header h2 {
    font-size: calc(var(--modal-title-base) * var(--font-scale)) !important;
}

.player-profile-body {
    padding: calc(2rem * var(--font-scale)) !important;
}

.profile-section h3 {
    font-size: calc(var(--modal-h3-base) * var(--font-scale)) !important;
    padding-bottom: calc(0.5rem * var(--font-scale)) !important;
    margin-bottom: calc(0.75rem * var(--font-scale)) !important;
}

.profile-section p,
.profile-section span {
    font-size: calc(var(--modal-p-base) * var(--font-scale)) !important;
    line-height: 1.5 !important;
}

/* ================================================================
   19D. DATA TABLES SCALING (Comparison, Injury, Standings, Schedule)
   ================================================================ */
.comparison-table th,
.comparison-table td,
.injury-report-table th,
.injury-report-table td,
.standings-table th,
.standings-table td,
.schedule-table th,
.schedule-table td {
    padding: calc(var(--table-cell-padding-base) * var(--font-scale)) !important;
    font-size: calc(var(--table-cell-base) * var(--font-scale)) !important;
}

.comparison-table .nfl-team,
.comparison-table .bye-week {
    color: inherit !important;
    border: 0px !important;
    background: inherit !important;
    font-size: calc(var(--nfl-team-base) * var(--font-scale) * 0.85) !important;
    font-weight: inherit !important;
    padding: calc(0.1rem * var(--font-scale)) calc(0.25rem * var(--font-scale)) !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Highlight bye week ONLY when it matches current week - neon yellow glow */
.bye-week.bye-current-week,
.compare-player-bye.bye-current-week {
    background: transparent !important;
    color: inherit !important;
    padding: 0 0.15rem !important;
    border-radius: 2px !important;
    border: 1px solid #facc15 !important;
    box-shadow: 0 0 6px 1px rgba(250, 204, 21, 0.8),
                0 0 10px 2px rgba(250, 204, 21, 0.5);
    animation: bye-glow 1.5s ease-in-out infinite alternate;
}

@keyframes bye-glow {
    0% {
        box-shadow: 0 0 6px 1px rgba(250, 204, 21, 0.8),
                    0 0 10px 2px rgba(250, 204, 21, 0.5);
    }
    100% {
        box-shadow: 0 0 8px 2px rgba(250, 204, 21, 1),
                    0 0 14px 4px rgba(250, 204, 21, 0.7);
    }
}

.player-item {
    font-size: calc(var(--player-item-base) * var(--font-scale)) !important;
    padding: calc(0.25rem * var(--font-scale)) 0 !important;
    line-height: 1.4 !important;
}

/* Injury Report Controls */
.injury-report-controls {
    padding: calc(1rem * var(--font-scale)) !important;
}

.injury-report-controls label {
    font-size: calc(var(--option-toggle-base) * var(--font-scale)) !important;
}

.injury-report-controls select,
.injury-report-controls input {
    font-size: calc(var(--option-dropdown-base) * var(--font-scale)) !important;
    padding: calc(0.4rem * var(--font-scale)) calc(0.6rem * var(--font-scale)) !important;
}

/* Week Selector in Modals */
.week-selector label {
    font-size: calc(var(--option-toggle-base) * var(--font-scale)) !important;
}

.week-selector select {
    font-size: calc(var(--option-dropdown-base) * var(--font-scale)) !important;
    padding: calc(0.35rem * var(--font-scale)) calc(0.5rem * var(--font-scale)) !important;
}

/* ================================================================
   19D-2. COMPARISON TABLE PLAYER SCALING
   Ensures player names in team comparison respect font-scale slider
   ================================================================ */

/* Player item container in comparison table - scale with font slider */
.comparison-table .player-item {
    font-size: calc(var(--player-item-base) * var(--font-scale)) !important;
    padding: calc(0.2rem * var(--font-scale)) 0 !important;
    line-height: 1.4 !important;
}

/* Player link (clickable name) in comparison table - inherit scaled font */
.comparison-table .player-link {
    font-size: inherit !important;
}

/* Salary/contract info in comparison table */
.comparison-table .player-item span[style*="color: #6b7280"] {
    font-size: calc(var(--player-details-base) * var(--font-scale)) !important;
}

/* ================================================================
   19E. OPTIONS PANEL SCALING
   ================================================================ */
.options-panel {
    padding: calc(var(--options-padding-base) * var(--font-scale)) 
             calc(var(--options-padding-base) * var(--font-scale) * 1.25) !important;
}

.options-section-label {
    font-size: calc(var(--options-label-base) * var(--font-scale)) !important;
}

.options-section-label svg {
    width: calc(12px * var(--font-scale)) !important;
    height: calc(12px * var(--font-scale)) !important;
}

.option-toggle {
    font-size: calc(var(--option-toggle-base) * var(--font-scale)) !important;
    padding: calc(0.35rem * var(--font-scale)) calc(0.5rem * var(--font-scale)) !important;
}

.option-toggle input[type="checkbox"] {
    width: calc(var(--option-checkbox-base) * var(--font-scale)) !important;
    height: calc(var(--option-checkbox-base) * var(--font-scale)) !important;
}

.option-select label {
    font-size: calc(var(--option-toggle-base) * var(--font-scale)) !important;
}

.option-dropdown {
    font-size: calc(var(--option-dropdown-base) * var(--font-scale)) !important;
    padding: calc(0.35rem * var(--font-scale)) calc(0.5rem * var(--font-scale)) !important;
}

.option-slider label {
    font-size: calc(var(--option-slider-label-base) * var(--font-scale)) !important;
}

.option-slider input[type="range"] {
    width: calc(var(--option-slider-width-base) * var(--font-scale)) !important;
}

.option-slider .zoom-value {
    font-size: calc(0.75rem * var(--font-scale)) !important;
    min-width: calc(35px * var(--font-scale)) !important;
}

.disconnect-btn {
    font-size: calc(var(--disconnect-btn-base) * var(--font-scale)) !important;
    padding: calc(0.35rem * var(--font-scale)) calc(0.5rem * var(--font-scale)) !important;
}

.disconnect-btn svg {
    width: calc(12px * var(--font-scale)) !important;
    height: calc(12px * var(--font-scale)) !important;
}

/* ================================================================
   19F. SEARCH PANEL SCALING
   ================================================================ */
.search-panel {
    padding: calc(0.6rem * var(--font-scale)) calc(0.9rem * var(--font-scale)) !important;
}

.search-input-group .search-icon {
    width: calc(var(--search-icon-base) * var(--font-scale)) !important;
    height: calc(var(--search-icon-base) * var(--font-scale)) !important;
    left: calc(0.75rem * var(--font-scale)) !important;
}

.search-input {
    font-size: calc(var(--search-input-base) * var(--font-scale)) !important;
    padding: calc(0.5rem * var(--font-scale)) calc(0.75rem * var(--font-scale)) 
             calc(0.5rem * var(--font-scale)) calc(2.25rem * var(--font-scale)) !important;
}

.search-submit-btn {
    font-size: calc(var(--search-btn-base) * var(--font-scale)) !important;
    padding: calc(0.5rem * var(--font-scale)) calc(1rem * var(--font-scale)) !important;
    margin-left: calc(0.5rem * var(--font-scale)) !important;
}

.search-clear-btn {
    font-size: calc(var(--search-btn-base) * var(--font-scale)) !important;
    padding: calc(0.5rem * var(--font-scale)) calc(0.75rem * var(--font-scale)) !important;
    margin-left: calc(0.5rem * var(--font-scale)) !important;
}

.close-search-btn {
    padding: calc(0.4rem * var(--font-scale)) !important;
}

.close-search-btn svg {
    width: calc(16px * var(--font-scale)) !important;
    height: calc(16px * var(--font-scale)) !important;
}

/* Search Results Dropdown */
.search-results {
    font-size: calc(var(--search-results-base) * var(--font-scale)) !important;
}

.search-results .search-result-item {
    font-size: calc(var(--search-results-base) * var(--font-scale)) !important;
    padding: calc(0.5rem * var(--font-scale)) calc(0.75rem * var(--font-scale)) !important;
}

/* Mobile Search */
.mobile-search-panel {
    padding: calc(0.6rem * var(--font-scale)) !important;
}

.mobile-search-input {
    font-size: calc(var(--search-input-base) * var(--font-scale)) !important;
    padding: calc(0.5rem * var(--font-scale)) calc(0.75rem * var(--font-scale)) !important;
}

.close-mobile-search {
    padding: calc(0.4rem * var(--font-scale)) !important;
}

.close-mobile-search svg {
    width: calc(16px * var(--font-scale)) !important;
    height: calc(16px * var(--font-scale)) !important;
}

/* ================================================================
   19G. HEADER DROPDOWNS & ACTIONS SCALING
   ================================================================ */
.week-dropdown {
    font-size: calc(var(--week-dropdown-base) * var(--font-scale)) !important;
    padding: calc(0.3rem * var(--font-scale)) calc(0.5rem * var(--font-scale)) !important;
}

.header-week-select label {
    font-size: calc(var(--week-dropdown-base) * var(--font-scale)) !important;
}

.quick-actions-dropdown {
    min-width: calc(150px * var(--font-scale)) !important;
}

.quick-action-item {
    font-size: calc(var(--quick-action-item-base) * var(--font-scale)) !important;
    padding: calc(0.6rem * var(--font-scale)) calc(0.75rem * var(--font-scale)) !important;
    gap: calc(0.5rem * var(--font-scale)) !important;
}

.quick-action-item svg {
    width: calc(var(--quick-action-icon-base) * var(--font-scale)) !important;
    height: calc(var(--quick-action-icon-base) * var(--font-scale)) !important;
}

.status-compact {
    font-size: calc(var(--status-compact-base) * var(--font-scale)) !important;
}

.status-compact strong {
    font-size: calc(var(--status-compact-base) * var(--font-scale) * 1.1) !important;
}

.refresh-timer {
    font-size: calc(var(--refresh-timer-base) * var(--font-scale)) !important;
}

.status-indicator {
    font-size: calc(var(--status-compact-base) * var(--font-scale)) !important;
}

/* ================================================================
   19H. QUICK VIEW BUTTON SCALING
   ================================================================ */
#quickViewBtn {
    font-size: calc(var(--quick-view-btn-base) * var(--font-scale)) !important;
    padding: calc(0.5rem * var(--font-scale)) calc(1rem * var(--font-scale)) !important;
    border-radius: calc(6px * var(--font-scale)) !important;
    bottom: calc(2rem * var(--font-scale)) !important;
    right: calc(2rem * var(--font-scale)) !important;
}

/* ================================================================
   19I. SLIDING PANEL SCALING
   ================================================================ */
#slidingPanel {
    padding: calc(2rem * var(--font-scale)) !important;
}

#slidingPanel h2 {
    font-size: calc(var(--sliding-panel-title-base) * var(--font-scale)) !important;
    margin-bottom: calc(1rem * var(--font-scale)) !important;
}

#slidingPanel h3 {
    font-size: calc(var(--sliding-panel-title-base) * var(--font-scale) * 0.9) !important;
    margin-bottom: calc(0.75rem * var(--font-scale)) !important;
}

#slidingPanel p {
    font-size: calc(var(--sliding-panel-body-base) * var(--font-scale)) !important;
    line-height: 1.5 !important;
}

#slidingPanel td,
#slidingPanel th {
    font-size: calc(var(--sliding-panel-body-base) * var(--font-scale) * 0.9) !important;
    padding: calc(0.6rem * var(--font-scale)) !important;
}

/* ================================================================
   19J. LOADING OVERLAY SCALING
   ================================================================ */
.loading-overlay .loading-spinner {
    width: calc(40px * var(--font-scale)) !important;
    height: calc(40px * var(--font-scale)) !important;
}

.loading-overlay .loading-text {
    font-size: calc(var(--loading-text-base) * var(--font-scale)) !important;
    margin-top: calc(0.75rem * var(--font-scale)) !important;
}

/* ================================================================
   19K. MOBILE TOOLBAR SCALING
   ================================================================ */
.mobile-toolbar-container {
    --mobile-toolbar-height: calc(var(--mobile-toolbar-height-base) * var(--font-scale));
}

.mobile-toolbar-btn {
    font-size: calc(var(--mobile-toolbar-btn-base) * var(--font-scale)) !important;
    padding: calc(0.4rem * var(--font-scale)) !important;
}

.mobile-toolbar-btn svg {
    width: calc(var(--mobile-toolbar-icon-base) * var(--font-scale)) !important;
    height: calc(var(--mobile-toolbar-icon-base) * var(--font-scale)) !important;
}

/* ================================================================
   19L. ADDITIONAL LAYOUT SCALING (Gaps, Widths, Borders)
   ================================================================ */

/* View tabs gap */
.view-tabs {
    gap: calc(0.3rem * var(--font-scale)) !important;
}

/* Options panel inner layout */
.options-panel-inner {
    gap: calc(1.5rem * var(--font-scale)) !important;
}

.options-section {
    gap: calc(0.75rem * var(--font-scale)) !important;
}

/* Search panel inner layout */
.search-panel-inner {
    gap: calc(0.6rem * var(--font-scale)) !important;
    max-width: calc(600px * var(--font-scale)) !important;
}

/* Mobile search inner */
.mobile-search-inner {
    gap: calc(0.5rem * var(--font-scale)) !important;
}

/* Dropdown widths */
.actions-dropdown {
    min-width: calc(140px * var(--font-scale)) !important;
}

.league-dropdown {
    min-width: calc(160px * var(--font-scale)) !important;
    max-width: calc(220px * var(--font-scale)) !important;
}

/* Header week select */
.header-week-select {
    gap: calc(0.5rem * var(--font-scale)) !important;
}

/* Modal sizing adjustments */
.modal-content {
    max-width: calc(600px * var(--font-scale)) !important;
}

.modal-content.modal-large,
.large-modal {
    max-width: min(calc(1200px * var(--font-scale)), 95vw) !important;
}

/* Sliding panel width */
#slidingPanel {
    width: calc(800px * var(--font-scale)) !important;
    max-width: 95vw !important;
}

/* Border radius scaling (subtle) */
.search-input,
.search-submit-btn,
.search-clear-btn,
.option-toggle,
.option-dropdown {
    border-radius: calc(6px * var(--font-scale)) !important;
}

.quick-actions-dropdown {
    border-radius: calc(8px * var(--font-scale)) !important;
}

/* Box shadow enhancement at larger scales */
body[data-font-scale="125"] .quick-actions-dropdown,
body[data-font-scale="150"] .quick-actions-dropdown {
    box-shadow: 0 calc(8px * var(--font-scale)) calc(24px * var(--font-scale)) rgba(0, 0, 0, 0.3) !important;
}

body[data-font-scale="125"] #quickViewBtn,
body[data-font-scale="150"] #quickViewBtn {
    box-shadow: 0 calc(6px * var(--font-scale)) calc(16px * var(--font-scale)) rgba(16, 185, 129, 0.35) !important;
}

/* ================================================================
   19M. TOUCH TARGET MINIMUM SIZES (Accessibility)
   Ensures minimum touch targets at larger scales for touch devices
   ================================================================ */
@media (pointer: coarse) {
    /* For touch devices, ensure minimum 44px touch targets at 125%+ */
    body[data-font-scale="125"] .header-btn,
    body[data-font-scale="125"] .quick-action-btn,
    body[data-font-scale="125"] .quick-action-item,
    body[data-font-scale="125"] .search-submit-btn,
    body[data-font-scale="125"] .option-toggle,
    body[data-font-scale="125"] .mobile-toolbar-btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    body[data-font-scale="150"] .header-btn,
    body[data-font-scale="150"] .quick-action-btn,
    body[data-font-scale="150"] .quick-action-item,
    body[data-font-scale="150"] .search-submit-btn,
    body[data-font-scale="150"] .option-toggle,
    body[data-font-scale="150"] .mobile-toolbar-btn {
        min-height: 48px !important;
        min-width: 48px !important;
    }
}

/* ================================================================
   20. SEARCH RESULTS & HIGHLIGHTING
   ================================================================ */

.search-results {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    background: white;
    border: 2px solid #cbd5e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    width: 300px;
}

.search-result-item {
    padding: 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background-color var(--transition-fast);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-result-item:hover {
    background: #f8fafc;
}

.search-no-results {
    padding: 1rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.85rem;
    font-style: italic;
}

/* Highlighted Search Result */
.search-highlighted {
    animation: searchHighlight 2s ease-in-out;
    border: 4px solid #ff1493 !important;
    box-shadow: 0 0 30px rgba(255, 20, 147, 0.9) !important;
    z-index: 10;
    position: relative;
}

/* Ensure pick-slot cells properly show animation */
.pick-slot.search-highlighted {
    animation: searchHighlight 2s ease-in-out !important;
    border: 4px solid #ff1493 !important;
    box-shadow: 0 0 30px rgba(255, 20, 147, 0.9) !important;
    z-index: 10 !important;
    position: relative !important;
}

@keyframes searchHighlight {
    0% { 
        border-color: #ff1493;
        box-shadow: 0 0 30px rgba(255, 20, 147, 0.9);
        transform: scale(1);
    }
    25% { 
        border-color: #ff69b4;
        box-shadow: 0 0 50px rgba(255, 20, 147, 1), 0 0 80px rgba(255, 105, 180, 0.6);
        transform: scale(1.08);
    }
    50% { 
        border-color: #ff1493;
        box-shadow: 0 0 60px rgba(255, 20, 147, 1), 0 0 100px rgba(255, 105, 180, 0.8);
        transform: scale(1.12);
    }
    75% { 
        border-color: #ff69b4;
        box-shadow: 0 0 50px rgba(255, 20, 147, 1), 0 0 80px rgba(255, 105, 180, 0.6);
        transform: scale(1.08);
    }
    100% { 
        border-color: #ff1493;
        box-shadow: 0 0 30px rgba(255, 20, 147, 0.9);
        transform: scale(1);
    }
}

/* ================================================================
   21. TEAM COMPARISON
   ================================================================ */

/* Team Header Checkboxes */
.team-checkbox,
.franchise-compare-checkbox {
    cursor: pointer;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #10b981;
}

.team-checkbox:hover,
.franchise-compare-checkbox:hover {
    transform: scale(1.1);
    transition: transform var(--transition-fast);
}

/* Team Comparison Overlay */
.team-comparison-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.team-comparison-content {
    background: white;
    border-radius: 12px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Default to 2 teams if not set */
    --team-count: 2;
    /* Modal width scales with team count: 400px base + 200px per team */
    max-width: calc(400px + (var(--team-count) * 200px));
    max-width: min(calc(400px + (var(--team-count) * 200px)), 95vw);
    transition: max-width 0.2s ease;
}

/* Comparison Table */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    /* Inherit the variable */
    --team-count: inherit;
}

.comparison-table th {
    background: var(--table-header-bg);
    color: white;
    padding: 0.75rem;
    text-align: center;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 10;
}

.comparison-table th:first-child {
    text-align: left;
    background: var(--table-header-dark);
}

.comparison-table td {
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    vertical-align: top;
}

.comparison-table td:first-child {
    background: #f7fafc;
    font-weight: bold;
    color: #2d3748;
    white-space: nowrap;
}

.comparison-table tr:hover td {
    background: #edf2f7;
}

/* Comparison Table Badges */
.comparison-table .nfl-team {
    background: #374151;
    color: white;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-weight: inherit;
    font-size: inherit;
}

.comparison-table .bye-week {
    background: transparent;
    color: inherit;
    padding: 0.1rem 0.3rem;
    border: 0px !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    text-shadow: inherit !important;
}

.comparison-table .player-link:hover {
    color: #2563eb !important;
    text-decoration-color: #2563eb !important;
    font-weight: 700 !important;
}

.player-item {
    display: block;
    padding: 0.25rem 0;
    line-height: 1.4;
    font-weight: 600;
}

.player-item::before {
    content: "• ";
    color: #718096;
}

/* Quick View Button */
#quickViewBtn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all var(--transition-normal);
    white-space: nowrap;
    animation: searchHighlight 2s ease-in-out;
}

#quickViewBtn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

#quickViewBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Column widths - narrower as more teams */
.comparison-table td:not(:first-child),
.comparison-table th:not(:first-child) {
    /* Scales from ~240px (2 teams) down to ~140px (6 teams) */
    min-width: calc(290px - (var(--team-count) * 25px)) !important;
}

/* Cell padding - tighter as more teams */
.comparison-table th,
.comparison-table td {
    padding: calc(1rem - (var(--team-count) * 0.07rem)) !important;
}

/* Player item font size - scales down slightly */
.comparison-table .player-item {
    /* Scales from ~1.0rem (2 teams) down to ~0.7rem (6 teams) */
    font-size: calc(1.12rem - (var(--team-count) * 0.07rem)) !important;
    padding: calc(0.4rem - (var(--team-count) * 0.035rem)) 0 !important;
    line-height: 1.3 !important;
}

/* NFL team, bye week, opponent badges - scale together */
.comparison-table .nfl-team,
.comparison-table .bye-week,
.comparison-table .opponent-info {
    /* Scales from ~0.75rem (2 teams) down to ~0.45rem (6 teams) */
    font-size: calc(0.87rem - (var(--team-count) * 0.07rem)) !important;
    padding: calc(0.2rem - (var(--team-count) * 0.02rem)) calc(0.4rem - (var(--team-count) * 0.04rem)) !important;
}

/* Position column stays fixed */
.comparison-table td:first-child,
.comparison-table th:first-child {
    min-width: 60px;
    max-width: 80px;
}

/* ================================================================
   EXPANDABLE MODAL - Team Comparison
   ================================================================ */

/* Modal header actions container */
.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Expand/Collapse button */
.modal-expand {
    background: none;
    border: none;
    color: #718096;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.modal-expand:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #2d3748;
}

/* Expanded modal state */
#teamComparisonModal.modal-expanded .modal-content {
    max-width: 98vw !important;
    max-height: 98vh !important;
    width: 98vw !important;
    height: 98vh !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

#teamComparisonModal.modal-expanded .modal-body {
    max-height: calc(98vh - 70px) !important;
    height: calc(98vh - 70px) !important;
}

/* Show/hide expand/collapse icons based on state */
#teamComparisonModal .expand-icon {
    display: block;
}

#teamComparisonModal .collapse-icon {
    display: none;
}

#teamComparisonModal.modal-expanded .expand-icon {
    display: none;
}

#teamComparisonModal.modal-expanded .collapse-icon {
    display: block;
}

/* Expanded state comparison table adjustments */
#teamComparisonModal.modal-expanded .comparison-table td:not(:first-child),
#teamComparisonModal.modal-expanded .comparison-table th:not(:first-child) {
    min-width: calc(320px - (var(--team-count) * 20px)) !important;
}

#teamComparisonModal.modal-expanded .comparison-table .player-item {
    font-size: calc(1.2rem - (var(--team-count) * 0.05rem)) !important;
}

/* Make Team Comparison modal resizable via native browser resize */
#teamComparisonModal .modal-content {
    resize: both;
    overflow: auto;
    min-width: 400px;
    min-height: 300px;
}

/* ================================================================
   22. MODALS - BASE STRUCTURE
   ================================================================ */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal[style*="display: flex"] {
    display: flex !important;
}

.modal-content {
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-content.modal-large {
    max-width: 900px;
}

.modal-header {
    padding: 1.5rem;
    background: var(--primary-gradient);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--transition-fast);
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    padding: 1rem;
}

.modal-overlay[style*="display: flex"],
.modal-overlay[style*="display: block"] {
    display: flex !important;
}

/* ================================================================
   23. MODALS - SPECIFIC
   ================================================================ */

/* Changelog Modal */
.changelog-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2500;
}

.changelog-content {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn var(--transition-normal);
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.close-changelog {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #666;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.close-changelog:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

.changelog-content h2 {
    color: #333;
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-right: 2rem;
}

.changelog-content h3 {
    color: var(--primary-start);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.changelog-content ul {
    padding-left: 1.5rem;
    line-height: 1.8;
}

.changelog-content li {
    margin-bottom: 0.5rem;
}

.changelog-content strong {
    color: var(--primary-start);
}

/* Player Profile Modal */
#playerProfileModal {
    z-index: 3000 !important;
}

.player-profile-header {
    padding: 2rem;
    color: white;
    border-radius: 12px 12px 0 0;
}

.player-profile-body {
    padding: 2rem;
}

.profile-section h3 {
    margin: 0 0 0.75rem 0;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.close-modal-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    z-index: 1;
}

/* Injury Report Modal */
.injury-report-table {
    width: 100%;
    font-size: 0.9rem;
}

.injury-report-table th {
    background: var(--table-header-bg);
    color: white;
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--table-header-dark);
}

.injury-report-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.injury-report-table tbody tr:hover {
    background: #f9fafb;
}

.injury-report-controls {
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
}

.large-modal {
    max-width: 1200px;
    width: 90%;
}

/* ================================================================
   FIELD HELP MODAL STYLES
   ================================================================ */

/* Ensure field help modal inherits proper modal styling */
.field-help-modal .modal-content {
    background: white;
    border-radius: 12px;
    max-width: 550px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.field-help-modal .modal-header {
    padding: 1.25rem 1.5rem;
    background: var(--primary-gradient);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.field-help-modal .modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.field-help-modal .modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    line-height: 1.6;
}

.field-help-modal .modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    justify-content: flex-start;
}

.field-help-modal .modal-footer .btn {
    min-width: 100px;
}

/* Help content specific styles */
.field-help-modal .help-steps {
    padding-left: 1.25rem;
    margin: 1rem 0;
}

.field-help-modal .help-steps li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.field-help-modal .help-steps li ul {
    margin-top: 0.5rem;
    padding-left: 1.25rem;
}

.field-help-modal .help-steps li ul li {
    margin-bottom: 0.25rem;
}

.field-help-modal .help-example {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.field-help-modal .help-example code {
    display: block;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: #ecfdf5;
    border-radius: 4px;
    font-size: 0.85rem;
    word-break: break-all;
}

.field-help-modal .help-note {
    background: #fefce8;
    border: 1px solid #fef08a;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.field-help-modal code {
    background: #f1f5f9;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85em;
    color: #0f766e;
}

.field-help-modal p {
    margin: 0 0 1rem 0;
}

.field-help-modal p:last-child {
    margin-bottom: 0;
}

.field-help-modal ol {
    padding-left: 1.25rem;
    margin: 0.5rem 0;
}

.field-help-modal a {
    color: #6366f1;
    text-decoration: none;
}

.field-help-modal a:hover {
    text-decoration: underline;
}

/* ================================================================
   RESIZABLE MODALS - All Report Windows
   ================================================================ */

/* Base resizable modal styles */
#teamComparisonModal .modal-content,
#standingsModal .modal-content,
#scheduleModal .modal-content,
#weeklyResultsModal .modal-content,
#projectedScoresModal .modal-content,
#injuryReportModal .modal-content,
#nflScheduleModal .modal-content {
    resize: both;
    overflow: hidden; /* Changed from auto - body will scroll */
    min-width: 400px;
    min-height: 300px;
    /* Default to ~80% of viewport, user can resize */
    width: 80vw;
    height: auto;
    max-width: 95vw !important;
    max-height: 90vh !important;
}

/* Ensure modal body scrolls and leaves room for resize handle */
#teamComparisonModal .modal-body,
#standingsModal .modal-body,
#scheduleModal .modal-body,
#weeklyResultsModal .modal-body,
#projectedScoresModal .modal-body,
#injuryReportModal .modal-body,
#nflScheduleModal .modal-body {
    overflow: auto;
    max-height: calc(90vh - 80px); /* Account for header */
    /* Add padding at bottom-right for resize handle access */
    padding-bottom: 1.5rem;
    padding-right: 1.5rem;
}

/* Resize handle indicator */
#teamComparisonModal .modal-content::after,
#standingsModal .modal-content::after,
#scheduleModal .modal-content::after,
#weeklyResultsModal .modal-content::after,
#projectedScoresModal .modal-content::after,
#injuryReportModal .modal-content::after,
#nflScheduleModal .modal-content::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, transparent 50%, #667eea 50%);
    border-radius: 0 0 8px 0;
    pointer-events: none; /* Let clicks pass through to native resize */
    opacity: 0.7;
}

/* ================================================================
   24. SCHEDULE & WEEKLY RESULTS
   ================================================================ */

.schedule-container {
    padding: 1rem 0;
}

.week-section {
    margin-bottom: 2rem;
}

.week-header {
    background: var(--primary-gradient);
    color: white;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem 0;
    border-radius: 6px;
    font-size: 1.1rem;
}

.matchups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.matchup-card {
    border: 2px solid #cbd5e0;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.team-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fef3c7;
}

.team-row:last-child {
    border-bottom: none;
}

.team-row.winner {
    color: #065f46;
    font-weight: bold;
    background: #d1fae5;
}

.team-row .team-name {
    flex: 1;
    font-size: 0.9rem;
}

.team-row .team-score {
    font-weight: bold;
    margin-left: 0.5rem;
    font-size: 1rem;
}

/* Results Table */
.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.results-table th {
    background: var(--table-header-bg);
    color: white;
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
}

.results-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.results-table tbody tr:hover {
    background: #f9fafb;
}

/* ================================================================
   ALL-PLAY / PLAYOFF LIVE SCORING STYLES
   ================================================================ */

.all-play-scores .results-table {
    margin-top: 0.5rem;
}

.all-play-scores .rank-first td {
    background: linear-gradient(to right, rgba(255, 215, 0, 0.15), transparent) !important;
}

.all-play-scores .rank-second td {
    background: linear-gradient(to right, rgba(192, 192, 192, 0.15), transparent) !important;
}

.all-play-scores .rank-third td {
    background: linear-gradient(to right, rgba(205, 127, 50, 0.15), transparent) !important;
}

.all-play-scores .has-players-playing td {
    border-left: 3px solid #22c55e;
}

.all-play-scores tr[data-franchise-id]:hover {
    cursor: pointer;
}

/* ================================================================
   ALL-PLAY CLICKABLE ROWS
   ================================================================ */

.clickable-team-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.clickable-team-row:hover {
    background-color: #f0f9ff !important;
}

.clickable-team-row:hover td {
    background-color: inherit !important;
}

/* Hybrid playoff section styling */
.hybrid-matchups-section {
    margin-bottom: 1.5rem;
}

.hybrid-allplay-section {
    margin-top: 1rem;
}

.hybrid-allplay-section .results-table {
    opacity: 0.95;
}

.hybrid-allplay-section .rank-first td {
    background: linear-gradient(to right, rgba(148, 163, 184, 0.15), transparent) !important;
}

.hybrid-allplay-section .rank-second td {
    background: linear-gradient(to right, rgba(148, 163, 184, 0.1), transparent) !important;
}

.hybrid-allplay-section .rank-third td {
    background: linear-gradient(to right, rgba(148, 163, 184, 0.05), transparent) !important;
}

/* ================================================================
   TEAM NEEDS BUTTON & MODAL
   ================================================================ */

/* Team Needs Button */
.team-needs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.team-needs-btn:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    transform: translateY(-1px);
}

.team-needs-btn svg {
    flex-shrink: 0;
}

/* Team Needs Modal */
.team-needs-modal {
    max-width: 850px;
    width: 90%;
    max-height: 80vh;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.team-needs-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 2px solid #e2e8f0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.team-needs-modal .modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
}

.team-needs-modal .modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.team-needs-modal .modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.team-needs-modal .modal-body {
    padding: 1rem;
    overflow-y: auto;
    max-height: calc(80vh - 120px);
}

.team-needs-table-wrapper {
    overflow-x: auto;
}

.team-needs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.team-needs-table th,
.team-needs-table td {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
}

.team-needs-table th {
    background: #f8fafc;
    font-weight: 600;
    color: #475569;
    position: sticky;
    top: 0;
    z-index: 1;
}

.team-needs-table th.team-col {
    text-align: left;
    min-width: 150px;
}

.team-needs-table th.pos-col {
    min-width: 50px;
}

/* Position header colors */
.team-needs-table th.pos-QB { background: #fef2f2; color: #dc2626; }
.team-needs-table th.pos-RB { background: #f0fdf4; color: #16a34a; }
.team-needs-table th.pos-WR { background: #eff6ff; color: #2563eb; }
.team-needs-table th.pos-TE { background: #fff7ed; color: #ea580c; }
.team-needs-table th.pos-FLEX { background: #fdf4ff; color: #c026d3; }
.team-needs-table th.pos-SFLEX { background: #fdf4ff; color: #a21caf; }
.team-needs-table th.pos-K { background: #f5f3ff; color: #7c3aed; }
.team-needs-table th.pos-DEF { background: #f1f5f9; color: #475569; }
.team-needs-table th.pos-DL,
.team-needs-table th.pos-LB,
.team-needs-table th.pos-DB { background: #f5f5f4; color: #57534e; }

.team-needs-table .team-name-cell {
    text-align: left;
    font-weight: 500;
    color: #1e293b;
}

.team-needs-table tbody tr:hover {
    background: #f8fafc;
}

/* Needs status colors */
.team-needs-table .needs-cell {
    font-weight: 600;
}

.team-needs-table .needs-cell.need-high {
    background: #fef2f2;
    color: #dc2626;
}

.team-needs-table .needs-cell.need-low {
    background: #fffbeb;
    color: #d97706;
}

.team-needs-table .needs-cell.filled {
    background: #f0fdf4;
    color: #16a34a;
}

.team-needs-table .needs-cell.over-filled {
    background: #eff6ff;
    color: #2563eb;
}

/* Legend */
.team-needs-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.8rem;
    color: #64748b;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.legend-dot.need-high { background: #fef2f2; border: 1px solid #fecaca; }
.legend-dot.need-low { background: #fffbeb; border: 1px solid #fde68a; }
.legend-dot.filled { background: #f0fdf4; border: 1px solid #bbf7d0; }
.legend-dot.over-filled { background: #eff6ff; border: 1px solid #bfdbfe; }

/* Tablet/iPad adjustments */
@media (max-width: 1024px) {
    .team-needs-modal {
        max-width: 95%;
    }
    
    .team-needs-table th,
    .team-needs-table td {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
    
    .team-needs-table th.pos-col {
        min-width: 42px;
    }
    
    .team-needs-table th.team-col {
        min-width: 120px;
    }
}

/* Hide on mobile (mobile uses its own Team Needs in MobileViews) */
@media (max-width: 768px) {
    .team-needs-btn {
        display: none !important;
    }
}

/* ================================================================
   ALL-LEAGUES SCORES MODAL - CLICKABLE ELEMENTS
   ================================================================ */

.all-leagues-matchup-clickable:hover {
    background-color: #e0f2fe !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.all-leagues-team-clickable:hover {
    background-color: #e0f2fe !important;
}

.all-leagues-section[data-is-current="true"] .league-section-header {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
}

/* Cross-league notice banner */
.cross-league-notice {
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: #fef3c7;
    border-radius: 6px;
    border-left: 3px solid #f59e0b;
    font-size: 0.85rem;
    color: #92400e;
}

/* Sortable Table Headers with Icons */
.sortable-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.5rem !important; /* Make room for the icon */
}

.sortable-table th.sortable:hover {
    background: #3a4556;
}

/* Default sort icon (unsorted) */
.sortable-table th.sortable::after {
    content: "⇅";
    position: absolute;
    right: 0.5rem;
    opacity: 0.3;
    font-size: 0.9rem;
}

/* Ascending sort icon */
.sortable-table th.sortable.sort-asc::after {
    content: "▲";
    opacity: 1;
    color: #10b981;
}

/* Descending sort icon */
.sortable-table th.sortable.sort-desc::after {
    content: "▼";
    opacity: 1;
    color: #10b981;
}

/* ================================================================
   25. LOADING OVERLAY
   ================================================================ */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-message {
    font-size: 1.2rem;
    margin-top: 1rem;
    text-align: center;
    padding: 1.5rem 2rem;
    color: #1f2937; /* Dark gray text - very visible */
    background: #fef3c7; /* Light yellow/amber background */
    border-radius: 8px;
    border: 1px solid #fbbf24; /* Amber border */
    margin: 1rem 0;
}

/* ================================================================
   26. QUICK VIEW BUTTON (Responsive)
   ================================================================ */

/* Tablet/Small Desktop */
@media (min-width: 769px) and (max-width: 1199px) {
    #quickViewBtn {
        padding: 0.65rem 1.3rem;
        font-size: 1.05rem;
        bottom: 2.5rem;
        right: 2.5rem;
    }
}

/* Medium Desktop */
@media (min-width: 1200px) and (max-width: 1599px) {
    #quickViewBtn {
        padding: 0.85rem 1.7rem;
        font-size: 1.1rem;
        bottom: 3rem;
        right: 3rem;
        border-radius: 8px;
    }
}

/* Large Desktop */
@media (min-width: 1600px) {
    #quickViewBtn {
        padding: 1.1rem 2.2rem;
        font-size: 1.25rem;
        bottom: 3.5rem;
        right: 3.5rem;
        border-radius: 10px;
        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
    }
    
    #quickViewBtn:hover {
        box-shadow: 0 8px 24px rgba(16, 185, 129, 0.5);
    }
}

/* ================================================================
   27. SLIDING PANEL
   ================================================================ */

#slidingPanel {
    position: fixed;
    top: 0;
    right: -800px;
    width: 800px;
    height: 100%;
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    z-index: 3000;
    overflow-y: auto;
    transition: right var(--transition-normal);
    padding: 2rem;
}

/* ================================================================
   28. MOBILE TOOLBAR (Bottom Bar)
   ================================================================ */

.mobile-toolbar-container {
    display: none;
}

@media (max-width: 768px) {
    .mobile-toolbar-container {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--header-bg);
        z-index: 1000;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
        /* iOS Safari safe area - accounts for home indicator/tab bar */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

.mobile-toolbar-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 1px solid var(--header-border);
    min-height: 48px;
}

.mobile-toolbar-handle .chevron-icon {
    transition: transform var(--transition-fast);
    width: 16px;
    height: 16px;
}

.mobile-toolbar-handle.expanded .chevron-icon {
    transform: rotate(180deg);
}

.handle-text {
    font-weight: 500;
    font-size: 0.9rem;
}

.mobile-toolbar-content {
    padding: 1rem;
}

/* Mobile View Tabs */
.mobile-view-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.mobile-view-tab {
    flex: 1;
    padding: 0.65rem;
    background: var(--header-bg-hover);
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-height: 44px;
}

.mobile-view-tab.active {
    background: var(--primary-start);
    color: white;
}

.mobile-view-tab.premium {
    color: #fbbf24;
}

/* Mobile Action Buttons */
.mobile-actions {
    display: flex;
    justify-content: space-around;
    gap: 0.5rem;
}

.mobile-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 6px;
    transition: all var(--transition-fast);
    min-width: 55px;
    min-height: 52px;
}

.mobile-action-btn:hover,
.mobile-action-btn.active {
    background: var(--header-bg-hover);
    color: white;
}

.mobile-action-btn svg {
    width: 22px;
    height: 22px;
}

/* ================================================================
   29. MOBILE PANELS (Search, Options, Actions)
   ================================================================ */

/* Mobile Search Panel - Position above toolbar */
.mobile-search-panel {
    position: fixed !important;
    bottom: var(--mobile-toolbar-height, 73px) !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0.75rem;
    background: var(--panel-bg);
    border-top: 1px solid var(--panel-border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1100 !important;  /* Above toolbar (1000) */
    display: none;  /* Hidden by default, shown via JS */
}

.mobile-search-panel.active {
    display: block !important;
}

.mobile-search-inner {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.mobile-search-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.9rem;
}

.mobile-search-input:focus {
    outline: none;
    border-color: var(--primary-start);
}

.close-mobile-search {
    padding: 0.4rem;
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    border-radius: 4px;
}

.mobile-search-results {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px 8px 0 0;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

/* Mobile Options Panel - Position above toolbar */
.mobile-options-panel {
    position: fixed !important;
    bottom: var(--mobile-toolbar-height, 73px) !important;
    left: 0 !important;
    right: 0 !important;
    padding: 1rem;
    background: var(--panel-bg);
    border-top: 1px solid var(--panel-border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1100 !important;
    max-height: 60vh;
    overflow-y: auto;
    display: none;
}

.mobile-options-panel.active {
    display: block !important;
}

.mobile-panel-header {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.mobile-options-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mobile-option-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
}

.mobile-option-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-start);
}

.mobile-option-select {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mobile-option-select label {
    font-size: 0.85rem;
    color: #4b5563;
}

.mobile-option-select select {
    flex: 1;
    padding: 0.4rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.85rem;
}

.mobile-option-slider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mobile-option-slider label {
    font-size: 0.85rem;
    color: #4b5563;
}

.mobile-option-slider input[type="range"] {
    flex: 1;
    accent-color: var(--primary-start);
}

.mobile-done-btn {
    width: 100%;
    padding: 0.75rem;
    background: var(--primary-start);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.75rem;
}

/* Mobile Actions Panel - Position above toolbar */
.mobile-actions-panel {
    position: fixed !important;
    bottom: var(--mobile-toolbar-height, 73px) !important;
    left: 0 !important;
    right: 0 !important;
    padding: 1rem;
    background: var(--panel-bg);
    border-top: 1px solid var(--panel-border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1100 !important;
    max-height: 60vh;
    overflow-y: auto;
    display: none;
}

.mobile-actions-panel.active {
    display: block !important;
}

.mobile-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.mobile-action-item {
    padding: 0.75rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mobile-action-item:hover {
    background: #f3f4f6;
}

.mobile-action-item.full-width {
    grid-column: span 2;
}

.mobile-action-item.danger {
    color: #ef4444;
    border-color: #ef4444;
}

.mobile-action-item.danger:hover {
    background: #fef2f2;
}

/* ================================================================
   30. MOBILE ROTATION MESSAGE
   ================================================================ */

.rotation-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.rotation-content {
    position: relative;
    text-align: center;
    padding: 2rem;
    max-width: 300px;
}

.rotation-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: rotateIcon 2s ease-in-out infinite;
}

@keyframes rotateIcon {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
}

.rotation-text {
    color: white;
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 500;
}

/* Only show on mobile portrait */
@media (min-width: 769px) {
    .rotation-message { display: none !important; }
}

@media (max-width: 768px) and (orientation: landscape) {
    .rotation-message { display: none !important; }
}

/* ================================================================
   31. RESPONSIVE BREAKPOINTS
   ================================================================ */

/* Mobile General */
@media (max-width: 768px) {
    .draft-board {
        overflow-y: auto;
    }
    
    .draft-table-container {
        min-height: 400px;
        overflow: auto;
    }
    
    .rows-control {
        display: none !important;
    }
    
    #quickViewBtn {
        bottom: calc(var(--mobile-toolbar-height) + 1rem);
        right: 1rem;
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
    
    .modal-content {
        max-width: 98vw;
        max-height: 95vh;
    }

    /* === FIX #1: Ensure table header row is always visible on mobile === */
       .draft-table thead,
       .draft-grid thead,
       .roster-grid thead {
           display: table-header-group !important;
           visibility: visible !important;
       }
       
       .draft-table thead tr,
       .draft-grid thead tr,
       .roster-grid thead tr {
           display: table-row !important;
           visibility: visible !important;
       }
       
       .draft-table thead th,
       .draft-grid thead th,
       .roster-grid thead th {
           display: table-cell !important;
           visibility: visible !important;
       }
       
       /* Ensure sticky header works on mobile */
       .draft-table thead th.team-header,
       .draft-grid thead th.team-header,
       .roster-grid thead th.team-header {
           position: sticky;
           top: 0;
           z-index: 10;
           background: var(--table-header-bg) !important;
       }
       
       /* Ensure pick-header stays sticky on mobile */
       .draft-table thead th.pick-header,
       .draft-table thead th.round-header {
           position: sticky !important;
           left: 0 !important;
           top: 0 !important;
           z-index: 30 !important;
           background: var(--table-header-dark) !important;
       }
}

/* Mobile Landscape */
@media (max-width: 768px) and (orientation: landscape) {
    .login-container {
        max-height: none !important;
        height: auto !important;
        overflow-y: auto !important;
        padding: 1rem 2rem !important;
        max-width: 600px !important;
    }
    
    .login-header h1 {
        font-size: 1.3rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .login-header p {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .form-group {
        margin-bottom: 0.8rem !important;
    }
    
    .form-group label {
        font-size: 0.85rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .form-group input,
    .form-group select {
        padding: 0.5rem !important;
        font-size: 0.9rem !important;
    }
    
    .form-actions {
        margin-top: 1rem !important;
        gap: 0.5rem !important;
    }
    
    .form-actions button {
        padding: 0.6rem 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* ================================================================
   TABLET PORTRAIT (iPad portrait, etc.) - Fix #3
   Handles long league names by shrinking font
   768px - 1024px portrait
   ================================================================ */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    /* Header adjustments for tablet portrait */
    .header-main {
        padding: 0.4rem 0.75rem;
        gap: 0.5rem;
        display: flex !important;
        visibility: visible !important;
    }

    /* Ensure options panel can be toggled on tablet portrait */
    .options-panel {
        visibility: visible;
    }
    
    /* Ensure search panel can be toggled on tablet portrait */
    .search-panel {
        visibility: visible;
    }

    /* Ensure header buttons are visible */
    .header-btn,
    .quick-action-btn {
        display: flex !important;
        visibility: visible !important;
        min-height: 44px !important;  /* Apple HIG touch target */
    }
      
    /* Hide mobile toolbar on tablet portrait - use desktop UI */
    .mobile-toolbar-container {
      display: none !important;
    }
    
    /* League name: smaller font, wider max-width for single line */
    .league-name {
        font-size: clamp(0.5rem, 1.8vw, 0.75rem) !important;
        max-width: 25vw !important;
        min-width: 60px !important;
    }

    /* Also shrink the h1 if used directly */
    .header-left h1#leagueName {
        font-size: clamp(0.5rem, 2vw, 0.7rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 25vw !important;
    }
    
    /* Shrink provider badge slightly */
    .provider-badge {
        font-size: 0.55rem;
        padding: 0.15rem 0.4rem;
    }
    
    /* Shrink view tabs */
    .view-tab {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
        display: flex !important;
        visibility: visible !important;
    }

    /* Ensure table header row is visible on tablet portrait */
    .draft-table thead,
    .draft-grid thead,
    .roster-grid thead {
        display: table-header-group !important;
        visibility: visible !important;
    }
   
    .draft-table thead tr,
    .draft-grid thead tr,
    .roster-grid thead tr {
        display: table-row !important;
        visibility: visible !important;
    }
   
    .draft-table thead th,
    .draft-grid thead th,
    .roster-grid thead th {
        display: table-cell !important;
        visibility: visible !important;
    }
}

/* ================================================================
   PORTRAIT MODE - FORCE ELLIPSIS ON ALL PLAYER NAMES
   Overrides word-wrap behavior to ensure consistent ellipsis truncation
   ================================================================ */
@media (orientation: portrait) {
    .pick-slot .player-name,
    .roster-slot .player-name,
    .pick-slot .player-name-single,
    .roster-slot .player-name-single,
    .pick-slot .player-last-name,
    .pick-slot .player-first-name,
    .roster-slot .player-last-name,
    .roster-slot .player-first-name,
    .skipped-pick-display .skipped-line-1,
    .skipped-pick-display .skipped-line-2,
    .skipped-pick-display .skipped-line-3 {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        max-width: 100% !important;
        word-wrap: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
}

/* ================================================================
   TABLET LANDSCAPE (iPad landscape, etc.)
   Ensures table header row is visible on tablet landscape
   769px - 1199px landscape
   ================================================================ */
@media (min-width: 769px) and (max-width: 1199px) and (orientation: landscape) {
    /* Ensure table header row is always visible on tablet landscape */
    .draft-table thead,
    .draft-grid thead,
    .roster-grid thead {
        display: table-header-group !important;
        visibility: visible !important;
    }
    
    .draft-table thead tr,
    .draft-grid thead tr,
    .roster-grid thead tr {
        display: table-row !important;
        visibility: visible !important;
    }
    
    .draft-table thead th,
    .draft-grid thead th,
    .roster-grid thead th {
        display: table-cell !important;
        visibility: visible !important;
    }
    
    /* Ensure sticky header works on tablet landscape */
    .draft-table thead th.team-header,
    .draft-grid thead th.team-header,
    .roster-grid thead th.team-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: var(--table-header-bg) !important;
    }
    
    /* Ensure pick-header/round-header stays sticky on tablet landscape */
    .draft-table thead th.pick-header,
    .draft-table thead th.round-header {
        position: sticky !important;
        left: 0 !important;
        top: 0 !important;
        z-index: 30 !important;
        background: var(--table-header-dark) !important;
    }
}

/* Extra compact for very short landscape screens */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 450px) {
    .login-container {
        padding: 0.5rem 1.5rem !important;
    }
    
    .login-header h1 {
        font-size: 1.1rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .login-header p {
        display: none !important;
    }
    
    .form-group {
        margin-bottom: 0.5rem !important;
    }
}

/* Mobile: Shorten "Position" column header to "POS" */
@media (max-width: 480px) {
    /* Smaller league name on phone screens */
    .league-name,
    .header-left h1#leagueName {
        font-size: 0.6rem !important;
        max-width: 20vw !important;
    }

    /* Hide text and use shorter version via CSS */
    .pick-header {
        font-size: 0 !important;  /* Hide original text */
    }
    
    .pick-header::after {
        content: "POS";
        font-size: 0.7rem !important;
        font-weight: 600;
    }

    /* Force minimum column width so only ~6 teams visible (user scrolls for rest) */
    .draft-table th.team-header,
    .draft-table td.pick-slot,
    .draft-table td.roster-slot {
        min-width: 100px !important;  /* Ensures only ~6 fit on screen */
        max-width: 120px !important;
    }
    
    /* Also shrink round-number column width on mobile */
    .round-number {
        min-width: 35px !important;
        max-width: 40px !important;
        padding: 0.4rem 0.2rem !important;
    }
    
    .round-number::before {
        content: "" !important;  /* Remove the "R" prefix on mobile */
    }
}

/* ================================================================
   IPAD / TABLET ROSTER & DRAFT SLOT REDESIGN
   Target: 768px - 1199px (iPad Mini, iPad, iPad Air, iPad Pro 11")
   
   LAYOUT STRUCTURE (CSS Grid for vertical alignment):
   Row 1 (1fr):  Player Name (flexible, content anchored to bottom)
   Row 2 (auto): (POS) + Injury Badge + Pick Indicator Dot (centered)
   Row 3 (auto): Team · Bye (centered) OR Team · Bye + Salary (auction)
   
   This ensures position and team/bye rows align across all cells
   regardless of name length.
   ================================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
    
    /* ========================================
       SLOT HEIGHT & LAYOUT STRUCTURE
       ======================================== */
    
    /* Increase slot height and enable stacked layout */
    .draft-table .pick-slot,
    .draft-table .roster-slot {
        min-height: 70px !important;
        height: auto !important;
        padding: 6px 8px !important;
    }
    
    /* ========================================
       PLAYER DISPLAY - CSS GRID LAYOUT
       Grid provides consistent vertical alignment
       across cells with varying name lengths
       
       HTML Structure has 2 direct children:
       1. .player-name-row (name + position + injury + dot)
       2. .player-details (team + bye + salary)
       ======================================== */
    
    .draft-table .player-display {
        display: grid !important;
        /* Row 1: flexible for name+pos, Row 2: fixed for team/bye */
        grid-template-rows: 1fr auto !important;
        align-items: stretch !important;
        justify-items: center !important;
        height: 100% !important;
        gap: 4px !important;
        padding: 3px 2px !important;
        text-align: center !important;
    }

    /* ========================================
       HEADER - LEAGUE NAME SIZING
       ======================================== */
    
    /* League name - shrink to fit on one line */
    .league-name,
    .header-left h1#leagueName {
        font-size: clamp(0.5rem, 1.5vw, 0.7rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 20vw !important;
        min-width: 60px !important;
    }
    
    /* ========================================
       ROW 1: PLAYER NAME (Grid Row 1)
       Flexible height, content anchored to bottom
       ======================================== */
    
    /* Player name row - anchored to bottom of its grid area */
    .draft-table .player-name-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-end !important;  /* Anchor content to bottom */
        align-self: end !important;         /* Push to bottom of grid row */
        justify-content: center !important;
        justify-self: center !important;
        gap: 2px !important;
        line-height: 1.25 !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Player name - centered, can wrap to 2 lines */
    .draft-table .pick-slot .player-name,
    .draft-table .roster-slot .player-name {
        font-size: calc(var(--player-name-base) * var(--font-scale)) !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        text-align: center !important;
        display: inline !important;
    }

    .player-name-stacked {
            gap: 0px;
        }
        
    .player-last-name {
        font-size: calc(var(--player-name-base) * var(--font-scale)) !important;
    }
    
    .player-first-name {
        font-size: calc(var(--player-name-base) * var(--font-scale) * 0.85) !important;
    }
    
    .player-position-row {
        margin-top: 1px;
    }
    
    /* ========================================
       ROW 2: POSITION + INJURY + PICK DOT (Grid Row 2)
       Fixed height, centered content
       ======================================== */
    
    /* Inline position - centered in grid row 2 */
    .draft-table .inline-position {
        font-size: calc(var(--inline-position-base) * var(--font-scale)) !important;
        font-weight: 600 !important;
        opacity: 0.9 !important;
        display: inline-flex !important;
        align-items: center !important;
        align-self: center !important;
        justify-self: center !important;
    }
    
    /* Injury badge inline after position */
    .draft-table .injury-badge,
    .draft-table .injury-designation {
        font-size: calc(var(--position-badge-base) * var(--font-scale)) !important;
        margin-left: 3px !important;
        display: inline-flex !important;
        vertical-align: middle !important;
    }
    
    /* Comment icon (pick indicator dot) - inline with position */
    .draft-table .comment-icon {
        display: inline-block !important;
        margin-left: 4px !important;
        margin-right: 0 !important;
        vertical-align: middle !important;
    }
    
    /* ========================================
       ROW 3: TEAM · BYE (Grid Row 3)
       Fixed height, centered content
       ======================================== */
    
    /* Player details row - centered team/bye, anchored to grid */
    .draft-table .player-details {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: start !important;  /* Anchor to top of grid row 3 */
        justify-self: center !important;
        gap: 4px !important;
        width: 100% !important;
        font-size: calc(var(--player-details-base) * var(--font-scale)) !important;
    }
    
    /* Team-bye info container */
    .draft-table .team-bye-info {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
    }
    
    /* NFL Team badge */
    .draft-table .nfl-team {
        font-size: calc(var(--nfl-team-base) * var(--font-scale)) !important;
        font-weight: 600 !important;
        padding: 1px 4px !important;
        border-radius: 3px !important;
        background: rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Bye week */
    .draft-table .bye-week {
        font-size: calc(var(--bye-week-base) * var(--font-scale)) !important;
        padding: 1px 4px !important;
        border-radius: 3px !important;
    }
    
    /* Salary badge - stays on same line as team/bye for auction */
    .draft-table .salary-badge {
        font-size: calc(var(--player-details-base) * var(--font-scale)) !important;
        font-weight: 700 !important;
        padding: 1px 4px !important;
        border-radius: 3px !important;
        margin-left: 4px !important;
    }
    
    /* Contract status */
    .draft-table .contract-status {
        font-size: calc(var(--player-details-base) * var(--font-scale)) !important;
        margin-left: 3px !important;
    }
    
    /* ========================================
       DEFENSE POSITION - Compact Name Display
       Defense names are long, limit to 2 lines
       ======================================== */

    .draft-table .pick-slot.position-DEF .player-name,
    .draft-table .roster-slot.position-DEF .player-name,
    .draft-table .pick-slot.position-Def .player-name,
    .draft-table .roster-slot.position-Def .player-name {
        font-size: calc(var(--player-name-base) * var(--font-scale)) !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* ========================================
       TEAM HEADER & COLUMN SIZING
       ======================================== */
    
    /* Team header - ensure readable */
    .draft-table .team-header {
        font-size: calc(var(--team-header-base) * var(--font-scale)) !important;
        padding: 8px 6px !important;
        min-width: 90px !important;
    }
    
    /* Round number / position label column */
    .draft-table .round-number,
    .draft-table .position-label {
        font-size: calc(var(--round-number-base) * var(--font-scale)) !important;
        min-width: 40px !important;
        padding: 4px 6px !important;
    }
    
    /* Pick header */
    .draft-table .pick-header {
        font-size: calc(var(--round-number-base) * var(--font-scale)) !important;
        min-width: 50px !important;
    }
    
    /* ========================================
       EMPTY SLOT STYLING
       ======================================== */
    
    /* Empty slots - maintain minimum height */
    .draft-table .pick-slot.empty,
    .draft-table .roster-slot.empty {
        min-height: 70px !important;
    }
    
    .draft-table .empty-slot {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    
    .draft-table .pick-number-display {
        font-size: calc(var(--player-details-base) * var(--font-scale)) !important;;
        color: rgba(255, 255, 255, 0.5) !important;
    }
    
    /* ========================================
       PICK SLOT TEXT COLORS (Dark backgrounds)
       ======================================== */
    
    .draft-table .pick-slot .player-name {
        color: white !important;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4) !important;
    }
    
    .draft-table .pick-slot .inline-position {
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    .draft-table .pick-slot .nfl-team {
        color: white !important;
        background: rgba(0, 0, 0, 0.2) !important;
    }
    
    .draft-table .pick-slot .bye-week {
        color: white !important;
        background: #dc2626 !important;
        border: 1px solid #991b1b !important;
    }
    
    .draft-table .pick-slot .salary-badge {
        color: white !important;
        background: rgba(0, 0, 0, 0.25) !important;
    }
    
    /* ========================================
       ROSTER SLOT TEXT COLORS (Light backgrounds)
       ======================================== */
    
    .draft-table .roster-slot .player-name {
        color: #1f2937 !important;
        text-shadow: none !important;
    }
    
    .draft-table .roster-slot .inline-position {
        color: #374151 !important;
    }
    
    .draft-table .roster-slot .nfl-team {
        color: #374151 !important;
        background: rgba(0, 0, 0, 0.08) !important;
    }
    
    /* Bye week - dark background for contrast on light position colors */
    .draft-table .roster-slot .bye-week {
        color: white !important;
        background: #4b5563 !important;
        border: 1px solid #374151 !important;
    }
    
    .draft-table .roster-slot .salary-badge {
        color: #374151 !important;
        background: rgba(0, 0, 0, 0.1) !important;
    }
    
    .draft-table .roster-slot .contract-status {
        color: #6b7280 !important;
    }
}

/* ================================================================
   LARGE TABLET / SMALL DESKTOP (iPad Pro landscape, etc.)
   Ensures header-main is ALWAYS visible for iPad Pro/Mini screens
   ================================================================ */
@media (min-width: 769px) {
    /* Force header-main to be visible on all desktop/large tablet screens */
    .header-main {
        display: flex !important;
        visibility: visible !important;
    }
    
    /* Hide mobile toolbar on large screens */
    .mobile-toolbar-container {
        display: none !important;
    }
}

/* ================================================================
   INLINE POSITION & SALARY BADGE - BASE STYLES
   These apply regardless of screen size
   ================================================================ */

/* Inline position - shown in parentheses after player name */
.inline-position {
    font-weight: 600;
    opacity: 0.85;
    margin-left: 2px;
    font-size: calc(var(--inline-position-base) * var(--font-scale)) !important;
}

/* Pick slots (dark bg) - light text */
.pick-slot .inline-position {
    color: rgba(255, 255, 255, 0.9);
}

/* Roster slots (light bg) - dark text */
.roster-slot .inline-position {
    color: #4b5563;
}

/* Salary badge - base styles */
.salary-badge {
    display: inline-block;
    background: rgba(0, 0, 0, 0.2);
    padding: 2.5px 5px;
    border-radius: 4px;
    font-size: calc(var(--salary-info-base) * var(--font-scale)) !important;
    font-weight: 700;
    white-space: nowrap;
}

/* Pick slots - salary badge light text */
.pick-slot .salary-badge {
    background: rgba(0, 0, 0, 0.25);
    color: white;
}

/* Roster slots - salary badge dark text */
.roster-slot .salary-badge {
    background: rgba(0, 0, 0, 0.12);
    color: #374151;
}

/* Team-bye info container */
.team-bye-info {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Salary-contract - centered in draft view, right-aligned in roster view */
.salary-contract-right {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* In roster view with team-bye info, push salary to right */
.player-details:has(.team-bye-info) .salary-contract-right {
    margin-left: auto;
}

/* In draft table, center salary row when it wraps to its own line */
.draft-table .salary-contract-right {
    width: 100%;
    justify-content: center;
    margin-left: 0;
}

/* Player name row - flex container for name + position + injury badge */
.player-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 4px;
    line-height: 1.3;
}

/* ================================================================
   TRADING BUTTON - Hidden until feature is implemented
   ================================================================ */
#showTradingBtn,
#mobileShowTradingBtn,
.view-tab[data-view="trading"],
.mobile-view-tab[data-view="trading"] {
    display: none !important;
    visibility: hidden !important;
}



/* ================================================================
   32. UTILITY CLASSES
   ================================================================ */

.hidden { display: none !important; }
.visible { display: block !important; }
.flex { display: flex !important; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }

/* ================================================================
   33. ANIMATIONS
   ================================================================ */

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Print Styles */
@media print {
    .header-main,
    .search-panel,
    .options-panel,
    .mobile-toolbar-container,
    .modal,
    .loading-overlay,
    #quickViewBtn {
        display: none !important;
    }
    
    .draft-container {
        height: auto;
        overflow: visible;
    }
    
    .draft-table-container {
        overflow: visible;
    }
}
/* ================================================================
   34. ADD TO HOME SCREEN BANNER (iOS Safari)
   ================================================================ */

.a2hs-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    padding: 1rem;
    z-index: 9998;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    /* iOS safe area support */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
}

.a2hs-banner.visible {
    transform: translateY(0);
}

.a2hs-banner-content {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.a2hs-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.a2hs-text {
    flex: 1;
}

.a2hs-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.a2hs-description {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.a2hs-instructions {
    font-size: 0.8rem;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.a2hs-instructions code {
    background: rgba(255, 255, 255, 0.15);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.a2hs-share-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.a2hs-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
}

.a2hs-btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-height: 44px; /* Touch target */
}

.a2hs-btn-primary {
    background: var(--primary-start, #667eea);
    color: white;
}

.a2hs-btn-primary:hover {
    background: var(--primary-end, #764ba2);
}

.a2hs-btn-dismiss {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.a2hs-btn-dismiss:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .a2hs-banner-content {
        flex-direction: column;
        text-align: center;
    }
    
    .a2hs-icon {
        align-self: center;
    }
    
    .a2hs-instructions {
        justify-content: center;
    }
    
    .a2hs-actions {
        flex-direction: row;
        justify-content: center;
        width: 100%;
    }
    
    .a2hs-btn {
        flex: 1;
    }
}

/* Hide on desktop and non-Safari */
@media (min-width: 1025px) {
    .a2hs-banner {
        display: none !important;
    }
}