/**
 * 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 - ORIG PURPLE ========== */
   /* --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --primary-start: #667eea;
    --primary-end: #764ba2;*/

    /* ========== PRIMARY COLORS - WIN-WIN GREEN ========== */
    --primary-gradient: linear-gradient(135deg, #059669 0%, #0d9488 50%, #0891b2 100%);
    --primary-start: #059669;   /* Emerald */
    --primary-end: #0891b2;     /* Teal-Cyan */
    --primary-mid: #0d9488;     /* Teal (for buttons, accents) */

    /* Alternative: Deeper, more premium green */
    /* --primary-gradient: linear-gradient(135deg, #047857 0%, #0f766e 100%); */
    /* --primary-start: #047857; */
    /* --primary-end: #0f766e; */
    
    /* ========== 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;
}

/* NEW - Horizontal layout: logo left, title/changelog right */
.login-header {
    background: var(--primary-gradient);
    color: white;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Right side container for title and changelog */
.login-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

/* NEW - Logo sizing for horizontal layout */
.login-logo {
    max-width: 120px;
    height: auto;
    filter: drop-shadow(0 2px 8px rgba(0, 255, 255, 0.5));
}

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

/* NEW - Version info for right-aligned layout */
.version-info {
    font-size: 1.2rem;
    opacity: 0.9;
    margin: 0;
    line-height: 1.2;
    text-align: right;
}

.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;
    margin-bottom: 1rem;
}

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

/* Provider takes more space, year is compact */
.form-row .provider-selection {
    flex: 2;  /* Takes 2/3 of space */
}

.form-row .year-selection {
    flex: 1;  /* Takes 1/3 of space */
}

.form-row #year {
    font-size: 1rem !important;
}

/* Stack vertically on very narrow screens */
@media (max-width: 400px) {
    .form-row {
        flex-direction: column;
    }
}

/* 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;
    flex-wrap: wrap;
    justify-content: center;
    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.2rem 0.2rem;
    border-radius: 6px;
    transition: all var(--transition-fast);
    display: inline-block;
    margin-top: 0;  /* Changed from 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;
}

/* OAuth Login Styling */
.oauth-info {
    background: rgba(102, 51, 153, 0.1);
    border: 1px solid rgba(102, 51, 153, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
}

.oauth-message {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    color: #333;
}

.oauth-icon {
    font-size: 20px;
}

.oauth-btn {
    background: linear-gradient(135deg, #6633cc, #5020a0);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.oauth-btn:hover {
    background: linear-gradient(135deg, #7744dd, #6030b0);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 51, 153, 0.3);
}

.oauth-btn:active {
    transform: translateY(0);
}

/* OAuth Force Login Checkbox */
.oauth-force-login {
    margin-top: 0.5rem;
}

.oauth-force-login .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #555;
}

.oauth-force-login input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.oauth-force-hint {
    font-size: 0.75rem;
    color: #888;
    margin: 0.25rem 0 0 1.5rem;
    font-style: italic;
}

/* Yahoo-specific styling */
.provider-yahoo .oauth-btn {
    background: linear-gradient(135deg, #6001d2, #4a00a0);
}

.provider-yahoo .oauth-btn:hover {
    background: linear-gradient(135deg, #7011e2, #5a10b0);
}

/* ================================================================
   SIGN-IN BANNER IN LOGIN FORM
   ================================================================ */

   /* User banner styling */
   .user-banner {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       padding: 0.5rem 1rem;
       background: rgba(16, 185, 129, 0.1);
       border-radius: 8px;
       margin-bottom: 1rem;
   }

   .banner-separator {
       color: var(--text-muted, #9ca3af);
       font-size: 0.75rem;
   }

   .account-link {
       color: var(--primary-color, #10b981);
       text-decoration: none;
       font-weight: 500;
   }

   .account-link:hover {
       text-decoration: underline;
   }

.sign-in-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #86efac;
    border-radius: 8px;
    margin: 0.7rem;
    flex-wrap: wrap;
}

.sign-in-banner span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #166534;
    font-size: 0.9rem;
    flex: 1;
    min-width: 200px;
}

.sign-in-banner .btn {
    flex-shrink: 0;
}

/* Responsive adjustment */
@media (max-width: 480px) {
    .sign-in-banner {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    .sign-in-banner span {
        justify-content: center;
    }
}

/* ================================================================
   JERRYTRADES AUTHENTICATION UI
   ================================================================ */

.jt-auth-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
}

.jt-auth-buttons {
    display: flex;
    gap: 0.5rem;
}

.jt-user-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.jt-user-menu-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: var(--bg-secondary, #374151);
    border: 1px solid var(--border-color, #4b5563);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.jt-user-menu-btn:hover {
    background: var(--bg-tertiary, #4b5563);
}

.jt-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--primary-color, #10b981);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
}

.jt-user-name {
    font-size: 0.875rem;
    color: var(--text-primary, #f9fafb);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jt-user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 180px;
    background: var(--bg-secondary, #374151);
    border: 1px solid var(--border-color, #4b5563);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.jt-user-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.jt-dropdown-item {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-primary, #f9fafb);
    text-decoration: none;
    transition: background 0.15s ease;
    font-size: 0.75em;
}

.jt-dropdown-item:hover {
    background: var(--bg-tertiary, #4b5563);
}

.jt-dropdown-divider {
    margin: 0.25rem 0;
    border: none;
    border-top: 1px solid var(--border-color, #4b5563);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .jt-user-name {
        display: none;
    }
    
    .jt-auth-buttons .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* ============================================
   ACCOUNT PAGE STYLES
   ============================================ */

.account-page {
   min-height: 100vh;
   max-height: 100vh;
   overflow-y: auto;
   background: var(--bg-primary, #111827);
   color: var(--text-primary, #f3f4f6);
   padding: 1rem;
   box-sizing: border-box;
}

/* Account page body override */
body:has(.account-page) {
   overflow: auto;
   height: auto;
}

body.account-page-body {
    overflow: auto;
    height: auto;
    min-height: 100vh;
}

.account-header {
    max-width: 800px;
    margin: 0 auto 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color, #374151);
}

.account-header h1 {
    margin: 0.5rem 0 0;
    font-size: 1.75rem;
    color: var(--text-primary, #f3f4f6);
}

.back-link {
    color: var(--primary-color, #10b981);
    text-decoration: none;
    font-size: 0.9rem;
}

.back-link:hover {
    text-decoration: underline;
}

.account-content {
    max-width: 800px;
    margin: 0 auto;
}

.account-section {
    background: var(--card-bg, #1f2937);
    border: 1px solid var(--border-color, #374151);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.account-section h2 {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    color: var(--text-primary, #f3f4f6);
}

.section-description {
    color: var(--text-muted, #9ca3af);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.section-description small {
    display: block;
    margin-top: 0.25rem;
    color: var(--primary-color, #10b981);
}

/* Form Styles */
.account-section .form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.account-section .form-group {
    flex: 1;
}

.account-section label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    color: var(--text-muted, #9ca3af);
}

.account-section input[type="text"],
.account-section input[type="email"],
.account-section input[type="tel"],
.account-section input[type="password"],
.account-section input[type="number"],
.account-section select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: var(--input-bg, #374151);
    border: 1px solid var(--border-color, #4b5563);
    border-radius: 6px;
    color: var(--text-primary, #f3f4f6);
    font-size: 0.9rem;
}

.account-section input:focus,
.account-section select:focus {
    outline: none;
    border-color: var(--primary-color, #10b981);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.account-section input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Subscription Card */
.subscription-card {
    background: var(--bg-secondary, #111827);
    border-radius: 8px;
    padding: 1rem;
}

.subscription-tier {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.tier-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.tier-badge.free {
    background: var(--border-color, #374151);
    color: var(--text-muted, #9ca3af);
}

.tier-badge.pro {
    background: var(--primary-color, #10b981);
    color: white;
}

.tier-badge.premium {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.tier-name {
    font-weight: 600;
    color: var(--text-primary, #f3f4f6);
}

.subscription-description {
    color: var(--text-muted, #9ca3af);
    font-size: 0.875rem;
    margin: 0.5rem 0 1rem;
}

/* Leagues List */
.leagues-list {
    margin-bottom: 1rem;
}

.no-leagues,
.leagues-error {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted, #9ca3af);
}

.no-leagues .hint {
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.leagues-error {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted, #9ca3af);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
}

.leagues-error p {
    margin: 0 0 1rem 0;
}

.leagues-error .btn {
    margin-top: 0.5rem;
}

.league-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-secondary, #111827);
    border: 1px solid var(--border-color, #374151);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s;
}

.league-card:hover {
    border-color: var(--text-muted, #6b7280);
}

.league-card.is-default {
    border-color: var(--primary-color, #10b981);
    background: rgba(16, 185, 129, 0.05);
}

.league-info {
    flex: 1;
    min-width: 0;
}

.league-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

.league-provider {
    font-size: 0.65rem;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.league-provider.mfl { background: #3b82f6; color: white; }
.league-provider.sleeper { background: #8b5cf6; color: white; }
.league-provider.yahoo { background: #7c3aed; color: white; }
.league-provider.espn { background: #dc2626; color: white; }
.league-provider.cbs { background: #0ea5e9; color: white; }

.default-badge {
    background: var(--primary-color, #10b981);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.league-name {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #f3f4f6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.league-meta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted, #9ca3af);
}

.league-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: 1rem;
}

.league-actions .btn {
    padding: 0.375rem 0.625rem;
    font-size: 0.8rem;
}

/* Dynamic provider fields */
.provider-dynamic-fields {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #374151);
}

.optional-label {
    font-weight: normal;
    font-size: 0.8rem;
    color: var(--text-muted, #9ca3af);
}

/* Find My Leagues section in Add League modal */
.find-leagues-section {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--bg-secondary, #111827);
    border-radius: 8px;
}

.btn-block {
    width: 100%;
}

.find-leagues-section .league-select {
    margin-top: 0.75rem;
}

/* Save league dropdown item */
.jt-dropdown-item[id="jtSaveLeagueLink"] {
    border-bottom: 1px solid var(--border-color, #374151);
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
}

.provider-dynamic-fields:empty {
    display: none;
}

.oauth-notice {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.oauth-notice p {
    margin: 0 0 0.5rem 0;
}

.oauth-notice .hint {
    font-size: 0.85rem;
    color: var(--text-muted, #9ca3af);
}

.field-help {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted, #9ca3af);
}

/* League card with auto-connect */
.league-card.is-autoconnect {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.league-card.is-default {
    border-color: var(--primary-color, #10b981);
}

/* Can have both */
.league-card.is-autoconnect.is-default {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(16, 185, 129, 0.05));
}

.autoconnect-badge {
    background: #3b82f6;
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.default-badge {
    background: var(--primary-color, #10b981);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* ============================================
   SAVED LEAGUES PICKER SECTION
   ============================================ */

.saved-leagues-section {
   background: var(--card-bg, #1f2937);
   border: 1px solid var(--border-color, #374151);
   border-radius: 12px;
   padding: 1.5rem 1.75rem;  /* Increased padding - more horizontal space */
   margin: 1.5rem 0;         /* Increased top/bottom margin */
   max-width: 85%;
}

.saved-leagues-section h4 {
    margin: 0 0 1.25rem 0;    /* Slightly more space below heading */
    font-size: 1.1rem;
    color: var(--text-primary, #f3f4f6);
}

.saved-leagues-picker {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.saved-league-select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: 8px;
    background: var(--input-bg, #374151);
    border: 1px solid var(--border-color, #4b5563);
    color: var(--text-primary, #f3f4f6);
    cursor: pointer;
}

.saved-league-select:focus {
    outline: none;
    border-color: var(--primary-color, #10b981);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.saved-leagues-picker .btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 8px;
}

.saved-leagues-picker .btn-primary {
    background: var(--primary-color, #10b981);
    color: white;
    font-weight: 600;
}

.saved-leagues-picker .btn-link {
    background: transparent;
    border: 1px solid var(--border-color, #4b5563);
    color: var(--text-muted, #9ca3af);
    font-size: 0.9rem;
}

.saved-leagues-picker .btn-link:hover {
    background: var(--bg-secondary, #111827);
    color: var(--text-primary, #f3f4f6);
}

/* Separator between picker and manual login option */
.saved-leagues-section hr {
    border: none;
    border-top: 1px solid var(--border-color, #374151);
    margin: 0.5rem 0;
}

/* Checkbox styling for add league form */
.checkbox-row {
    display: flex;
    gap: 1.5rem;
    margin: 1rem 0;
}

.checkbox-group {
    flex: 1;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
}

.checkbox-label input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--primary-color, #10b981);
}

/* Fix alignment for checkbox-row within forms */
.form-row.checkbox-row {
    align-items: flex-start;  /* Align to top since items have different heights */
    flex-wrap: wrap;          /* Allow wrapping on very narrow screens */
}

.form-row.checkbox-row .form-group.checkbox-group {
    margin-bottom: 0;         /* Remove extra margin that causes misalignment */
    min-width: 180px;         /* Minimum width before wrapping */
}

/* Ensure checkbox helper text aligns properly */
.checkbox-group .field-help {
    margin-top: 0.25rem;
    margin-left: 1.75rem;     /* Align with text after checkbox */
    display: block;
}

/* Change Credentials Toggle (for edit league modal) */
.change-credentials-toggle {
    margin: 1rem 0;
    padding: 0.75rem;
    background: var(--bg-secondary, #111827);
    border: 1px dashed var(--border-color, #374151);
    border-radius: 8px;
}

.change-credentials-toggle .checkbox-label {
    font-weight: 500;
}

.change-credentials-toggle .field-help {
    margin-left: 1.75rem;
    display: block;
    margin-top: 0.25rem;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal.show {
    display: flex;
}

.modal-content {
    background: var(--card-bg, #1f2937);
    border: 1px solid var(--border-color, #374151);
    border-radius: 12px;
    padding: 1.5rem;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

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

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-muted, #9ca3af);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
}

.modal-close:hover {
    color: var(--text-primary, #f3f4f6);
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.provider-fields {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #374151);
}

/* Button variants for account page */
.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color, #4b5563);
    color: var(--text-primary, #f3f4f6);
}

.btn-outline:hover {
    background: var(--border-color, #374151);
}

.btn-danger {
    background: transparent;
    border-color: #ef4444;
    color: #ef4444;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.1);
}

/* Responsive */
@media (max-width: 600px) {
    .account-section .form-row:not(.checkbox-row) {
        flex-direction: column !important;
        gap: 0;
    }
    
    .league-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    .league-info {
            text-align: left !important;
    }
    
    .league-actions {
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* Account page profile form - left align on mobile */
       .account-section .form-row {
           flex-direction: column !important;
           align-items: stretch !important;
       }

       /* Checkbox row can wrap but stays horizontal when space allows */
      .account-section .form-row.checkbox-row {
          flex-wrap: wrap;
          gap: 1rem;
      }
       
       .account-section .form-group {
           width: 100% !important;
           text-align: left !important;
       }
       
       .account-section label {
           text-align: left !important;
       }
       
       .account-section input,
       .account-section select {
           text-align: left !important;
       }
}

/* ================================================================
   LEAGUE MANAGEMENT UI
   ================================================================ */

/* Default league styling */
.league-card.is-default {
    border: 2px solid var(--primary-color, #10b981);
    background: rgba(16, 185, 129, 0.05);
}

.default-badge {
    background: var(--primary-color, #10b981);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.league-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--border-color, #374151);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    background: var(--card-bg, #1f2937);
}

.league-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.league-name {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
}

.league-meta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted, #9ca3af);
}

.league-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.league-provider {
    font-size: 0.7rem;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.league-provider.mfl { background: #3b82f6; color: white; }
.league-provider.sleeper { background: #8b5cf6; color: white; }
.league-provider.yahoo { background: #7c3aed; color: white; }
.league-provider.espn { background: #dc2626; color: white; }
.league-provider.cbs { background: #0ea5e9; color: white; }


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

/* Responsive header for narrow windows */
@media (max-width: 1200px) {
    .header-status {
        gap: 0.25rem;
    }
    
    .status-compact {
        font-size: 0.75rem;
    }
    
    .status-compact strong {
        font-size: 0.8rem;
    }
    
    .status-divider {
        margin: 0 0.15rem;
    }
}

@media (max-width: 1000px) {
    /* Stack pick info vertically on very narrow screens */
    .status-compact {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        font-size: 0.7rem;
    }
    
    .status-compact strong {
        font-size: 0.75rem;
    }
    
    /* Hide some dividers to save space */
    .status-divider:nth-child(4) {
        display: none;
    }
    
    /* Compact the team needs button */
    .team-needs-btn .btn-label {
        display: none;
    }
    
    .team-needs-btn {
        padding: 0.4rem;
    }
}

@media (max-width: 850px) {
    /* Further reduce on very narrow */
    .header-status {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }
    
    .status-compact {
        font-size: 0.65rem;
    }
    
    /* Hide "Totals" text, just show numbers */
    .status-compact {
        white-space: nowrap;
    }
}

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

/* Spinning animation for refresh buttons */
.quick-action-btn.spinning .icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.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);
}

/* ================================================================
   Unit Selector (Multi-Division/Conference Drafts)
   ================================================================ */
.unit-selector-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    margin-right: 8px;
}

.unit-selector-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.unit-selector {
    padding: 5px 28px 5px 10px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    min-width: 140px;
}

.unit-selector:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background-color: rgba(0, 0, 0, 0.4);
}

.unit-selector:focus {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.unit-selector option {
    background-color: #1e293b;
    color: white;
    padding: 8px;
}

/* Mobile responsive - stack label and select */
@media (max-width: 768px) {
    .unit-selector-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 5px 8px;
        margin-right: 4px;
    }

    .unit-selector-label {
        font-size: 0.7rem;
    }

    .unit-selector {
        width: 100%;
        min-width: unset;
        font-size: 0.75rem;
        padding: 4px 24px 4px 8px;
    }
}

/* Very small screens - hide label, just show dropdown */
@media (max-width: 480px) {
    .unit-selector-label {
        display: none;
    }
    
    .unit-selector-container {
        padding: 4px 6px;
    }
}

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

/* Immediate refresh button in option bar (for completed drafts/rosters) */
.immediate-refresh-btn {
    background: rgba(102, 126, 234, 0.15);
    border: 1px solid rgba(102, 126, 234, 0.4);
    padding: 4px 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    color: #667eea;
}

.immediate-refresh-btn:hover {
    background: rgba(102, 126, 234, 0.3);
    border-color: #667eea;
    transform: scale(1.05);
}

.immediate-refresh-btn:active {
    transform: scale(0.95);
    background: rgba(102, 126, 234, 0.4);
}

.immediate-refresh-btn.spinning svg {
    animation: spin 1s linear infinite;
}

.immediate-refresh-btn svg {
    stroke: currentColor;
}

/* Hide by default - shown via JS */
#immediateRefreshBtn {
    display: none;
}

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

/* ================================================================
   ROSTER VIEW MODE TOGGLE (Header)
   Matches draft-type-toggle styling
   ================================================================ */

.roster-view-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.2rem;
    margin-left: 0.75rem;
}

.roster-view-toggle .toggle-option {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    transition: all var(--transition-fast);
}

.roster-view-toggle .toggle-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

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

.roster-view-toggle input[type="radio"]:checked + span {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
}

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

/* Inline clear button (X) inside search input area */
.inline-clear-btn {
    position: absolute;
    right: 140px; /* Position before Search and Clear buttons */
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 1.25rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    border-radius: 50%;
    transition: all 0.15s ease;
    z-index: 5;
}

.inline-clear-btn:hover {
    color: #374151;
    background: rgba(0, 0, 0, 0.05);
}

/* Adjust search input padding to make room for clear button */
.search-input-group {
    position: relative;
}

/* ================================================================
   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 Dropdown */
/* Disabled font dropdown when Fit To Window is active */
#fontDropDown:disabled,
#mobileFontDropDown:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #e5e7eb;
}

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

/* Division view: expand columns to fill available width */
.draft-table-container.division-view-expanded .draft-table {
    width: 100%;
    table-layout: fixed;
}

.draft-table-container.division-view-expanded .draft-table th,
.draft-table-container.division-view-expanded .draft-table td {
    /* Allow cells to expand equally */
    width: auto;
}

.draft-table-container.division-view-expanded .draft-table .round-header {
    /* Keep round column fixed width */
    width: 120px;
    min-width: 120px;
    max-width: 120px;
}

.draft-table-container.division-view-expanded .pick-cell {
    /* Let pick cells expand */
    min-width: 150px;
}

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

/* Override ALL text colors for current pick (dark text on gold background) */
.pick-slot.current .pick-number-display,
.pick-slot.on-the-clock .pick-number-display {
    color: rgba(0, 0, 0, 0.7) !important;
    text-shadow: none !important;
}

.pick-slot.current .player-details,
.pick-slot.on-the-clock .player-details,
.pick-slot.current .player-info,
.pick-slot.on-the-clock .player-info {
    color: rgba(0, 0, 0, 0.8) !important;
    text-shadow: none !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
   Container for name + position row (vertical stack)
   ================================================================ */

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

/* Pick slots (dark bg) - white text */
.pick-slot .player-name-stacked,
.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-name-stacked,
.roster-slot .player-name-single {
    color: #1f2937;
    text-shadow: none;
}

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

/* ================================================================
   PLAYER NAME LAYOUT - FLEXIBLE FLOW
   Layout: "Last, First" on one line if fits, wraps naturally if not
   Last name bold, first name normal weight
   ================================================================ */

/* Wrapper allows natural text flow and wrapping */
.player-name-wrap {
    display: block;
    line-height: 1.25;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: center;
    width: 100%;
    font-size: calc(var(--player-name-base) * var(--font-scale));
    cursor: pointer;
    white-space: normal; /* Allow wrapping at word boundaries */
}

/* Last name - bold, inline flow */
.player-last-name {
    display: inline !important;
    font-weight: 700;
    font-size: calc(var(--player-name-base) * var(--font-scale));
    white-space: nowrap; /* Keeps "LastName," together */
}

/* First name - normal weight, inline flow */
.player-first-name {
    display: inline !important;
    font-weight: 400;
    font-size: calc(var(--player-name-base) * var(--font-scale) * 0.95);
    white-space: normal; /* Allows wrapping */
}

/* 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;
    text-align: center;
    cursor: pointer;
}

/* Pick slots (dark bg) - white text */
.pick-slot .player-name-wrap,
.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-name-wrap,
.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-name-wrap: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 (WITHOUT a player) */
.pick-slot.skipped:not(.filled) .player-display {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   height: 100% !important;
   padding: 0 !important;
   flex-wrap: nowrap !important;
}

/* Filled skipped picks (commissioner assigned a player) - use normal layout */
.draft-table-container:not(.fit-to-window-active) .pick-slot.filled.skipped.commissioner-pick .player-display {
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
   height: 100% !important;
   padding: 0.3rem 0.4rem !important;
   flex-wrap: wrap !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;
}

/* ================================================================
   NARROW DESKTOP: FILLED COMMISSIONER-SKIPPED PICKS
   When commissioner assigns a player to a skipped slot
   (has both .filled and .skipped classes)
   ================================================================ */
@media (min-width: 769px) and (max-width: 1200px) {
    
    /* Target specifically filled+skipped commissioner picks */
    .draft-table .pick-slot.filled.skipped .player-name-stacked,
    .draft-table .pick-slot.filled.skipped .player-name-wrap,
    .draft-table .pick-slot.filled.skipped .player-name,
    .draft-table .pick-slot.filled.commissioner-pick .player-name-stacked,
    .draft-table .pick-slot.filled.commissioner-pick .player-name-wrap,
    .draft-table .pick-slot.filled.commissioner-pick .player-name {
        font-size: calc(var(--player-name-base) * var(--font-scale) * 0.9) !important;
        line-height: 1.15 !important;
    }
    
    .draft-table .pick-slot.filled.skipped .player-last-name,
    .draft-table .pick-slot.filled.commissioner-pick .player-last-name {
        font-size: calc(var(--player-name-base) * var(--font-scale) * 0.9) !important;
    }
    
    .draft-table .pick-slot.filled.skipped .player-first-name,
    .draft-table .pick-slot.filled.commissioner-pick .player-first-name {
        font-size: calc(var(--player-name-base) * var(--font-scale) * 0.85) !important;
    }
    
    .draft-table .pick-slot.filled.skipped .inline-position,
    .draft-table .pick-slot.filled.commissioner-pick .inline-position {
        font-size: calc(var(--inline-position-base) * var(--font-scale) * 0.85) !important;
    }
    
    .draft-table .pick-slot.filled.skipped .nfl-team,
    .draft-table .pick-slot.filled.skipped .bye-week,
    .draft-table .pick-slot.filled.commissioner-pick .nfl-team,
    .draft-table .pick-slot.filled.commissioner-pick .bye-week {
        font-size: calc(var(--nfl-team-base) * var(--font-scale) * 0.85) !important;
        padding: 1px 3px !important;
    }
    
    .draft-table .pick-slot.filled.skipped .player-details,
    .draft-table .pick-slot.filled.commissioner-pick .player-details {
        font-size: calc(var(--player-details-base) * var(--font-scale) * 0.85) !important;
    }
    
    .draft-table .pick-slot.filled.skipped .player-display,
    .draft-table .pick-slot.filled.commissioner-pick .player-display {
        padding: 2px 1px !important;
        gap: 1px !important;
    }
}

/* Very narrow desktop */
@media (min-width: 769px) and (max-width: 1000px) {
    
    .draft-table .pick-slot.filled.skipped .player-name-stacked,
    .draft-table .pick-slot.filled.skipped .player-name-wrap,
    .draft-table .pick-slot.filled.skipped .player-name,
    .draft-table .pick-slot.filled.commissioner-pick .player-name-stacked,
    .draft-table .pick-slot.filled.commissioner-pick .player-name-wrap,
    .draft-table .pick-slot.filled.commissioner-pick .player-name {
        font-size: calc(var(--player-name-base) * var(--font-scale) * 0.8) !important;
    }
    
    .draft-table .pick-slot.filled.skipped .player-last-name,
    .draft-table .pick-slot.filled.commissioner-pick .player-last-name {
        font-size: calc(var(--player-name-base) * var(--font-scale) * 0.8) !important;
    }
    
    .draft-table .pick-slot.filled.skipped .player-first-name,
    .draft-table .pick-slot.filled.commissioner-pick .player-first-name {
        font-size: calc(var(--player-name-base) * var(--font-scale) * 0.75) !important;
    }
    
    .draft-table .pick-slot.filled.skipped .inline-position,
    .draft-table .pick-slot.filled.commissioner-pick .inline-position {
        font-size: calc(var(--inline-position-base) * var(--font-scale) * 0.75) !important;
    }
    
    .draft-table .pick-slot.filled.skipped .nfl-team,
    .draft-table .pick-slot.filled.skipped .bye-week,
    .draft-table .pick-slot.filled.commissioner-pick .nfl-team,
    .draft-table .pick-slot.filled.commissioner-pick .bye-week {
        font-size: calc(var(--nfl-team-base) * var(--font-scale) * 0.75) !important;
        padding: 0 2px !important;
    }
    
    .draft-table .pick-slot.filled.skipped .player-details,
    .draft-table .pick-slot.filled.commissioner-pick .player-details {
        font-size: calc(var(--player-details-base) * var(--font-scale) * 0.75) !important;
    }
}

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

/* ================================================================
   FIT-TO-WINDOW: LAYOUT-BASED APPROACH
   ================================================================
   
   This replaces the transform-based scaling with actual CSS dimensions.
   JavaScript calculates cell sizes and font sizes, then sets CSS custom properties.
   These rules use those properties to size the elements.

   ================================================================ */

/* ============================================
   CSS CUSTOM PROPERTY DEFAULTS
   These are overridden by JavaScript when fit-to-window is active
   ============================================ */
:root {
    --ftw-cell-width: 150px;
    --ftw-cell-height: 50px;
    --ftw-round-col-width: 65px;
    --ftw-header-height: 35px;
    --ftw-font-base: 14px;
    --ftw-font-details: 10px;
    --ftw-font-header: 12px;
    --ftw-font-budget: 9px;
    --ftw-cell-padding: 4px;
}

/* ============================================
   FIT-TO-WINDOW CONTAINER
   ============================================ */

.draft-table-container.fit-to-window-active {
    overflow: hidden !important;
    height: auto !important;
}

/* Prevent parent from showing scrollbars */
.draft-board:has(.fit-to-window-active) {
    overflow: hidden !important;
}

.draft-container:has(.fit-to-window-active),
#draftContainer:has(.fit-to-window-active) {
    overflow: hidden !important;
}

/* ============================================
   FIT-TO-WINDOW TABLE STRUCTURE
   ============================================ */

.fit-to-window-active .draft-table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse !important;
}

/* ============================================
   FIT-TO-WINDOW: TEAM HEADER CELLS
   ============================================ */

.fit-to-window-active .team-header {
    width: var(--ftw-cell-width) !important;
    height: var(--ftw-header-height) !important;
    min-height: 0 !important;
    max-height: var(--ftw-header-height) !important;
    padding: var(--ftw-cell-padding) !important;
    vertical-align: middle !important;
    overflow: hidden !important;
}

.fit-to-window-active .team-header .team-name {
    font-size: var(--ftw-font-header) !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Budget row cells */
.fit-to-window-active .budget-cell,
.fit-to-window-active thead tr.budget-row th {
    height: calc(var(--ftw-header-height) * 0.8) !important;
    min-height: 0 !important;
    padding: 2px var(--ftw-cell-padding) !important;
    font-size: var(--ftw-font-budget) !important;
}

.fit-to-window-active .team-budget,
.fit-to-window-active .budget-line-1,
.fit-to-window-active .budget-line-2 {
    font-size: var(--ftw-font-budget) !important;
    line-height: 1.2 !important;
}

/* ============================================
   FIT-TO-WINDOW: ROUND/POSITION COLUMN
   ============================================ */

.fit-to-window-active .round-number,
.fit-to-window-active .position-label {
    width: var(--ftw-round-col-width) !important;
    min-width: var(--ftw-round-col-width) !important;
    max-width: var(--ftw-round-col-width) !important;
    height: var(--ftw-cell-height) !important;
    padding: 2px !important;
    font-size: var(--ftw-font-details) !important;
}

/* Round header in thead */
.fit-to-window-active .round-header,
.fit-to-window-active th.round-header {
    width: var(--ftw-round-col-width) !important;
    min-width: var(--ftw-round-col-width) !important;
    max-width: var(--ftw-round-col-width) !important;
}

/* Round number text */
.fit-to-window-active .round-num {
    font-size: var(--ftw-font-details) !important;
}

/* Round arrow */
.fit-to-window-active .round-arrow {
    width: calc(var(--ftw-font-details) * 1.2) !important;
    height: calc(var(--ftw-font-details) * 0.8) !important;
}

/* ============================================
   FIT-TO-WINDOW: PICK/ROSTER CELLS
   ============================================ */

.fit-to-window-active .pick-slot,
.fit-to-window-active .roster-slot {
    width: var(--ftw-cell-width) !important;
    height: var(--ftw-cell-height) !important;
    min-height: var(--ftw-cell-height) !important;
    max-height: var(--ftw-cell-height) !important;
    padding: var(--ftw-cell-padding) !important;
    vertical-align: middle !important;
    overflow: hidden !important;
}

/* ============================================
   FIT-TO-WINDOW: PLAYER DISPLAY (Standard Layout)
   ============================================ */

/* These styles apply to .player-display when shown (e.g., empty/skipped slots) */
/* The display property is controlled elsewhere - DO NOT set display here */
.fit-to-window-active .pick-slot.empty .player-display,
.fit-to-window-active .pick-slot.skipped .player-display,
.fit-to-window-active .pick-slot.on-the-clock .player-display {
   gap: 1px !important;
   padding: 1px !important;
   height: 100% !important;
   flex-direction: column !important;
   justify-content: center !important;
   overflow: hidden !important;
}

.fit-to-window-active .player-name,
.fit-to-window-active .player-name-row {
    font-size: var(--ftw-font-base) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.fit-to-window-active .player-details,
.fit-to-window-active .player-info {
    font-size: var(--ftw-font-details) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Position badge */
.fit-to-window-active .position-inline {
    font-size: var(--ftw-font-details) !important;
    padding: 0 2px !important;
}

/* Team badge */
.fit-to-window-active .team-abbrev {
    font-size: calc(var(--ftw-font-details) * 0.9) !important;
    padding: 0 2px !important;
}

/* Injury badge */
.fit-to-window-active .injury-designation-js {
    font-size: calc(var(--ftw-font-details) * 0.85) !important;
    padding: 0 2px !important;
}

/* Salary info */
.fit-to-window-active .salary-info,
.fit-to-window-active .salary-badge {
    font-size: calc(var(--ftw-font-details) * 0.9) !important;
}

/* ============================================
   FIT-TO-WINDOW: WIDE PLAYER LAYOUT
   (Horizontal layout for height-constrained views)
   ============================================ */

/* Hide standard layout, show wide layout */
.fit-to-window-active .player-display {
    display: none !important;
}

.fit-to-window-active .player-display-wide {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 1px 2px !important;
    overflow: hidden !important;
}

/* Wide layout rows */
.fit-to-window-active .player-wide-row-1,
.fit-to-window-active .player-wide-row-2 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;  /* Center content horizontally */
    gap: 3px !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    line-height: 1.2 !important;
}

/* Wide layout - name */
.fit-to-window-active .wide-name,
.fit-to-window-active .wide-last,
.fit-to-window-active .wide-first {
    font-size: var(--ftw-font-base) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.fit-to-window-active .wide-name-def {
    font-size: var(--ftw-font-base) !important;
}

/* Wide layout - position/team/details */
.fit-to-window-active .wide-pos {
    font-size: var(--ftw-font-details) !important;
}

.fit-to-window-active .wide-team,
.fit-to-window-active .wide-opp {
    font-size: calc(var(--ftw-font-details) * 0.9) !important;
    padding: 0 2px !important;
}

.fit-to-window-active .wide-bye {
    font-size: calc(var(--ftw-font-details) * 0.85) !important;
}

/* Wide layout - salary row */
.fit-to-window-active .wide-salary,
.fit-to-window-active .wide-contract {
    font-size: var(--ftw-font-budget) !important;
}

/* ============================================
   FIT-TO-WINDOW: COMPACT MODE
   (For narrow cells - abbreviate content)
   ============================================ */

.fit-to-window-compact .wide-first {
    display: none !important; /* Hide first name, just show last */
}

.fit-to-window-compact .wide-expanded {
    display: none !important;
}

.fit-to-window-compact .wide-compact {
    display: flex !important;
}

/* Show expanded layout by default in non-compact mode */
.fit-to-window-active:not(.fit-to-window-compact) .wide-expanded {
    display: flex !important;
    flex-direction: column !important;  /* Stack rows vertically */
    justify-content: center !important; /* Center rows vertically within cell */
    height: 100% !important;            /* Fill parent height for centering to work */
}

.fit-to-window-active:not(.fit-to-window-compact) .wide-compact {
    display: none !important;
}

/* ============================================
   FIT-TO-WINDOW: SINGLE LINE MODE
   (For very short cells - everything on one line)
   ============================================ */

.fit-to-window-single-line .player-wide-row-2 {
    display: none !important; /* Hide salary row */
}

.fit-to-window-single-line .player-display-wide {
    flex-direction: row !important;
    justify-content: flex-start !important;
}

/* ============================================
   FIT-TO-WINDOW: TWO-ROW MODE
   Row 1: Player name (full)
   Row 2: Position, Team, Bye
   ============================================ */

/* In two-row mode, hide the inline position/team from row 1 */
.fit-to-window-two-row .player-wide-row-1 .wide-pos,
.fit-to-window-two-row .player-wide-row-1 .wide-team,
.fit-to-window-two-row .player-wide-row-1 .wide-bye,
.fit-to-window-two-row .player-wide-row-1 .opponent-display {
    display: none !important;
}

/* Show row 2 with position/team/bye */
.fit-to-window-two-row .player-wide-row-2 {
    display: flex !important;
}

/* Hide row-2 position by default (normal mode shows position in row-1) */
.wide-pos-row2 {
    display: none !important;
}

/* In two-row mode: show position in row-2 */
.fit-to-window-two-row .wide-pos-row2 {
    display: inline !important;
}

/* Row 1 just has the name - can be larger */
.fit-to-window-two-row .player-wide-row-1 .wide-name {
    font-size: calc(var(--ftw-font-base) * 1.1) !important;
}

/* ============================================
   FIT-TO-WINDOW: COMPARISON CHECKBOXES
   ============================================ */

.fit-to-window-active .team-compare-checkbox {
    width: calc(var(--ftw-font-base) * 1.1) !important;
    height: calc(var(--ftw-font-base) * 1.1) !important;
}

/* ============================================
   FIT-TO-WINDOW: EMPTY SLOTS
   ============================================ */

.fit-to-window-active .pick-slot.empty,
.fit-to-window-active .roster-slot.empty {
    height: var(--ftw-cell-height) !important;
}

/* For empty slots: SHOW player-display (override the global hide) 
   because empty slots only have player-display, not player-display-wide */
.fit-to-window-active .pick-slot.empty .player-display,
.fit-to-window-active .roster-slot.empty .player-display,
.fit-to-window-active .player-display.empty-slot {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Style empty slot pick number in fit-to-window */
.fit-to-window-active .pick-number-display {
    font-size: var(--ftw-font-base) !important;
    color: rgba(0, 0, 0, 0.5) !important;
}

/* On-the-clock empty slot: ensure content is visible */
.fit-to-window-active .pick-slot.on-the-clock .player-display,
.fit-to-window-active .pick-slot.current .player-display {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* On-the-clock text styling for fit-to-window */
.fit-to-window-active .pick-slot.on-the-clock .pick-number-display,
.fit-to-window-active .pick-slot.current .pick-number-display {
    color: rgba(0, 0, 0, 0.8) !important;
    font-weight: 600 !important;
}

/* ============================================
   FIT-TO-WINDOW: ON THE CLOCK INDICATOR
   ============================================ */

.fit-to-window-active .pick-slot.on-the-clock::before {
    font-size: var(--ftw-font-details) !important;
}

/* On The Clock text display */
.on-the-clock-text {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

/* Fit-to-window: On The Clock text */
.fit-to-window-active .on-the-clock-text {
    font-size: var(--ftw-font-base) !important;
    margin-bottom: 1px;
}

.fit-to-window-two-row .on-the-clock-text {
    font-size: calc(var(--ftw-font-base) * 0.9) !important;
}

.fit-to-window-single-line .on-the-clock-text {
    display: none !important; /* Hide in single-line mode to save space */
}

/* ============================================
   ON THE CLOCK - TEXT DISPLAY
   Uses CSS ::before to show "On The Clock" text
   ============================================ */

/* On The Clock text for empty slots */
.pick-slot.on-the-clock .player-display.empty-slot::before,
.pick-slot.current .player-display.empty-slot::before {
    content: "On The Clock";
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

/* Fit-to-window: On The Clock text sizing */
.fit-to-window-active .pick-slot.on-the-clock .player-display.empty-slot::before,
.fit-to-window-active .pick-slot.current .player-display.empty-slot::before {
    font-size: var(--ftw-font-base) !important;
    margin-bottom: 2px;
}

.fit-to-window-two-row .pick-slot.on-the-clock .player-display.empty-slot::before,
.fit-to-window-two-row .pick-slot.current .player-display.empty-slot::before {
    font-size: calc(var(--ftw-font-base) * 0.9) !important;
}

/* Single-line mode: hide "On The Clock" text to save space */
.fit-to-window-single-line .pick-slot.on-the-clock .player-display.empty-slot::before,
.fit-to-window-single-line .pick-slot.current .player-display.empty-slot::before {
    display: none !important;
}

/* ============================================
   FIT-TO-WINDOW: SKIPPED PICK DISPLAY
   ============================================ */

/* For skipped picks: SHOW player-display (override the global hide) 
   because skipped-pick-display is nested inside it */
.fit-to-window-active .pick-slot.skipped:not(.commissioner-pick) .player-display {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* For UNFILLED skipped picks: HIDE player-display-wide since they 
   don't have player data - only show "Pick Skipped" text */
.fit-to-window-active .pick-slot.skipped:not(.filled) .player-display-wide {
    display: none !important;
}

/* Style the skipped pick display container */
.fit-to-window-active .skipped-pick-display {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--ftw-font-base) !important;
    line-height: 1.1 !important;
    padding: 2px !important;
    gap: 0 !important;
}

/* Style the individual lines with correct class names */
.fit-to-window-active .skipped-pick-display .skipped-line-1,
.fit-to-window-active .skipped-pick-display .skipped-line-2,
.fit-to-window-active .skipped-pick-display .skipped-line-3 {
    font-size: var(--ftw-font-details) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Line 1 (Pick Skipped) should be slightly larger and bold */
.fit-to-window-active .skipped-pick-display .skipped-line-1 {
    font-size: var(--ftw-font-base) !important;
    font-weight: 700 !important;
}

.fit-to-window-active .skipped-icon-row {
    margin-top: 1px !important;
}

/* Two-row mode: condense skipped display */
.fit-to-window-two-row .skipped-pick-display .skipped-line-2 {
    display: none !important;
}

/* Single-line mode: show only "Pick Skipped" */
.fit-to-window-single-line .skipped-pick-display .skipped-line-2,
.fit-to-window-single-line .skipped-pick-display .skipped-line-3 {
    display: none !important;
}

.fit-to-window-single-line .skipped-icon-row {
    display: none !important;
}

/* ============================================
   FIT-TO-WINDOW: TWO-ROW LAYOUT SUPPORT
   (When board is split into top/bottom halves)
   ============================================ */

.fit-to-window-active .two-row-container .draft-table {
    margin-bottom: 5px;
}

/* ============================================
   FIT-TO-WINDOW: TRANSITIONS
   Smooth transitions when toggling or resizing
   ============================================ */

.draft-table-container {
    transition: none; /* Remove transition for immediate response */
}

.fit-to-window-active .pick-slot,
.fit-to-window-active .roster-slot,
.fit-to-window-active .team-header {
    transition: none !important; /* Disable hover transitions in fit mode */
}

/* ============================================
   FIT-TO-WINDOW: PLAYER ROW EXPANSION
   Make rows fill cell width, names expand to use space
   ============================================ */

.fit-to-window-active .player-wide-row-1,
.fit-to-window-active .player-wide-row-2,
.fit-to-window-active .player-wide-row-3 {
    width: 100% !important;
    justify-content: center !important;
}

/* Let name expand to fill available space */
.fit-to-window-active .wide-name {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Keep other elements from shrinking */
.fit-to-window-active .wide-pos,
.fit-to-window-active .wide-team,
.fit-to-window-active .wide-bye,
.fit-to-window-active .wide-opp {
    flex-shrink: 0 !important;
}

/* ----------------------------------------
   WIDE CELL LAYOUT - BASE STRUCTURE
   Used by fit-to-window mode
   ---------------------------------------- */

/* Hide wide layout by default */
.player-display-wide {
    display: none !important;
}

/* Single row for non-salary leagues */
.player-wide-row-1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    overflow: hidden;
}

/* Second row for team/bye/opponent */
.player-wide-row-2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 1px;
}

/* Row 3 - Salary/Contract (salary leagues only) */
.player-wide-row-3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 1px;
}

/* Name styling - structure only */
.wide-name {
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.wide-last {
    font-weight: 700;
}

.wide-first {
    font-weight: 400;
}

.wide-name-def {
    font-weight: 700;
}

/* Position - structure only */
.wide-pos {
    font-weight: 600;
    flex-shrink: 0;
}

/* Team badge - structure only */
.wide-team {
    font-weight: 600;
    background: rgba(0, 0, 0, 0.2);
    padding: 0 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Injury badge in wide layout - structure only */
.player-wide-row-1 .injury-designation-js {
    font-weight: 600 !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

/* Bye week - structure only */
.wide-bye {
    font-weight: 600;
    color: #dc2626;
    flex-shrink: 0;
}

/* Comment icon in wide layout */
.player-wide-row-1 .comment-icon {
    margin-left: 2px;
    flex-shrink: 0;
}

/* ----------------------------------------
   WIDE LAYOUT - ROSTER SLOT COLORS (Light BG)
   ---------------------------------------- */

.roster-slot .wide-name,
.roster-slot .wide-pos,
.roster-slot .wide-bye {
    color: #1f2937;
}

.roster-slot .wide-team {
    background: rgba(0, 0, 0, 0.1);
    color: #374151;
}

.roster-slot .player-wide-row-2 .wide-team {
    background: rgba(0, 0, 0, 0.1);
    color: #374151;
}

.roster-slot .player-wide-row-2 .wide-bye {
    color: #dc2626;
}

/* Roster slot - salary colors */
.roster-slot .player-wide-row-3 .wide-salary,
.roster-slot .wide-expanded .player-wide-row-2 .wide-salary {
    color: #059669;
}

.roster-slot .player-wide-row-3 .wide-contract,
.roster-slot .wide-expanded .player-wide-row-2 .wide-contract {
    color: #6b7280;
}

.roster-slot .player-wide-row-3 .wide-separator,
.roster-slot .wide-expanded .player-wide-row-2 .wide-separator {
    color: #9ca3af;
}

/* Roster slot - opponent display */
.roster-slot .player-wide-row-2 .opponent-display {
    color: #6366f1 !important;
    background: rgba(99, 102, 241, 0.1) !important;
    padding: 0 3px !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

/* ----------------------------------------
   WIDE LAYOUT - PICK SLOT COLORS (Dark BG)
   ---------------------------------------- */

.pick-slot .wide-name,
.pick-slot .wide-pos {
    color: white;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

.pick-slot .wide-team {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.pick-slot .wide-bye {
    color: #fca5a5;
}

/* Pick slot - salary colors */
.pick-slot .player-wide-row-3 .wide-salary,
.pick-slot .wide-expanded .player-wide-row-2 .wide-salary {
    color: #6ee7b7;
}

.pick-slot .player-wide-row-3 .wide-contract,
.pick-slot .wide-expanded .player-wide-row-2 .wide-contract {
    color: #d1d5db;
}

.pick-slot .player-wide-row-3 .wide-separator,
.pick-slot .wide-expanded .player-wide-row-2 .wide-separator {
    color: #9ca3af;
}

/* Pick slot - opponent display */
.pick-slot .player-wide-row-2 .opponent-display {
    color: #a5b4fc !important;
    background: rgba(255, 255, 255, 0.15) !important;
    padding: 0 3px !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

/* ----------------------------------------
   WIDE LAYOUT - SALARY ELEMENT STRUCTURE
   ---------------------------------------- */

.wide-salary {
    font-weight: 700;
}

.wide-contract {
    font-weight: 600;
}

.wide-separator {
    margin: 0 1px;
}

/* ----------------------------------------
   EXPANDED / COMPACT TOGGLE
   Expanded (wide cells): full names, 2 rows
   Compact (narrow cells): abbreviated names, 2-3 rows
   ---------------------------------------- */

/* Hide both by default */
.wide-expanded,
.wide-compact {
    display: none;
}

/* When fit-to-window-active is set, show expanded by default */
.draft-table-container.fit-to-window-active .player-display-wide .wide-expanded {
    display: flex;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100%;
}

.draft-table-container.fit-to-window-active .player-display-wide .wide-compact {
    display: none;
}

/* When ALSO compact, swap to compact layout */
.draft-table-container.fit-to-window-active.fit-to-window-compact .player-display-wide .wide-expanded {
    display: none;
}

.draft-table-container.fit-to-window-active.fit-to-window-compact .player-display-wide .wide-compact {
    display: block;
}

/* Two-row layout container */
.player-display-wide.has-two-rows {
    /* Structure handled by fit-to-window CSS */
}

/* Three-row layout container (salary leagues) */
.player-display-wide.has-three-rows {
    /* Structure handled by fit-to-window CSS */
}

/* ================================================================
   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: 10050 !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;
    }
}

/* Team Needs Modal Tabs */
.team-needs-tabs {
    display: flex;
    gap: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.team-needs-tab {
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.team-needs-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.team-needs-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* Position Depth colors */
.needs-cell.depth-good {
    background-color: rgba(76, 175, 80, 0.2);
    color: #2e7d32;
}

.needs-cell.depth-ok {
    background-color: rgba(255, 235, 59, 0.2);
    color: #f57f17;
}

.needs-cell.depth-low {
    background-color: rgba(244, 67, 54, 0.2);
    color: #c62828;
}

.needs-cell.total-cell {
    font-weight: 600;
    background-color: var(--bg-secondary);
}

/* Dark mode adjustments */
[data-theme="dark"] .needs-cell.depth-good {
    background-color: rgba(76, 175, 80, 0.3);
    color: #81c784;
}

[data-theme="dark"] .needs-cell.depth-ok {
    background-color: rgba(255, 235, 59, 0.25);
    color: #fff176;
}

[data-theme="dark"] .needs-cell.depth-low {
    background-color: rgba(244, 67, 54, 0.3);
    color: #ef9a9a;
}

/* Legend dot for depth colors */
.legend-dot.depth-good {
    background-color: rgba(76, 175, 80, 0.6);
}

.legend-dot.depth-ok {
    background-color: rgba(255, 235, 59, 0.6);
}

.legend-dot.depth-low {
    background-color: rgba(244, 67, 54, 0.6);
}

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

/* ================================================================
   PLAYOFF CONTEST STYLES - COMPLETE
   Replace all playoff-related styles in styles_v4.css with this block
   ================================================================ */

/* ================================================================
   PLAYOFF BUTTON
   ================================================================ */

/* Playoff button - styled to match view tabs but doesn't trigger view switch */
#showPlayoffBtn.playoff-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 0.25rem;
}

#showPlayoffBtn.playoff-btn:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

/* ================================================================
   PLAYOFF MODAL - WIDER & RESIZABLE
   ================================================================ */

.playoff-modal .modal-content {
    max-width: 1400px !important;   /* Override generic modal !important rule */
    width: 95% !important;
    max-height: 90vh;
    min-width: 600px;
    min-height: 400px;
    resize: both;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Resize handle indicator (bottom-right corner) */
.playoff-modal .modal-content::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, transparent 50%, #9ca3af 50%);
    border-radius: 0 0 4px 0;
    pointer-events: none;
    opacity: 0.5;
}

/* Modal body scrolls, header/footer stay fixed */
.playoff-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    padding: 1.5rem;
}

.playoff-modal .modal-header {
    flex-shrink: 0;
}

/* Playoff Modal Footer - Centered button group */
.playoff-modal .modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.playoff-modal .playoff-header {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.playoff-modal .playoff-header h2 {
    flex: 1;
    margin: 0;
    font-size: 1.3rem;
}

/* ================================================================
   VIEW TOGGLE BUTTONS (Scoreboard / Scoresheet)
   ================================================================ */

.playoff-view-toggle {
    display: flex;
    gap: 0.5rem;
    margin-right: 1rem;
}

.playoff-view-btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid #d1d5db;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.playoff-view-btn:hover {
    background: #f3f4f6;
}

.playoff-view-btn.active {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    border-color: #ea580c;
}

/* ================================================================
   WEEK TABS
   ================================================================ */

.playoff-week-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.playoff-week-tab {
    padding: 0.5rem 1rem;
    border: 2px solid #e5e7eb;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.playoff-week-tab:hover {
    border-color: #f59e0b;
    background: #fffbeb;
}

.playoff-week-tab.active {
    border-color: #f59e0b;
    background: #f59e0b;
    color: white;
}

/* Saved indicator on week tabs */
.playoff-week-tab[title*="saved to database"] {
    position: relative;
}

/* Or use a different color for saved tabs */
.playoff-week-tab.saved {
    border-bottom: 2px solid #10b981; /* green accent */
}

/* ================================================================
   SCOREBOARD VIEW - Divisions & Tables
   ================================================================ */

.playoff-scoreboard,
.playoff-content {
    margin-bottom: 1.5rem;
}

.playoff-divisions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.playoff-division {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.division-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.75rem 1rem;
    margin: 0;
    font-size: 1rem;
}

/* Playoff Table (Scoreboard View) */
.playoff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.playoff-table th {
    background: #f9fafb;
    padding: 0.5rem;
    text-align: center;
    font-weight: 600;
    border-bottom: 2px solid #e5e7eb;
}

.playoff-table td {
    padding: 0.5rem;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
}

.playoff-table .team-cell {
    text-align: left;
    font-weight: 500;
}

.playoff-table .rank-cell {
    width: 40px;
    font-weight: bold;
}

.playoff-table .score-cell {
    width: 60px;
}

.playoff-table .total-cell {
    font-weight: bold;
    background: #fef3c7;
}

/* Points Back column */
.playoff-table .pb-cell {
    width: 60px;
    color: #6b7280;
    font-size: 0.85em;
}

.playoff-table .status-cell {
    width: 80px;
}

/* Scrollable wrapper for playoff scoreboard tables */
.playoff-table-scroll {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Ensure table doesn't shrink below readable size */
.playoff-table-scroll .playoff-table {
    min-width: 500px;
}

/* Row States */
.playoff-table tr.advancing {
    background: linear-gradient(to right, rgba(34, 197, 94, 0.1), transparent);
}

.playoff-table tr.eliminated {
    background: linear-gradient(to right, rgba(239, 68, 68, 0.1), transparent);
    opacity: 0.7;
}

.playoff-table tr.eliminated td {
    text-decoration: line-through;
    color: #9ca3af;
}

/* Status Badge */
.status-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.active {
    background: #dcfce7;
    color: #166534;
}

.status-badge.eliminated {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.champion {
    background: #fef3c7;
    color: #92400e;
}

/* ================================================================
   SCORESHEET VIEW - Spreadsheet-style roster display
   ================================================================ */

.playoff-scoresheets {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.scoresheet-division {
    background: white;
    border-radius: 8px;
    overflow: visible;              /* Changed from hidden to allow scroll */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.scoresheet-division .division-header {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    color: white;
    padding: 0.75rem 1rem;
    margin: 0;
    font-size: 1rem;
}

/* Scrollable Table Container */
.scoresheet-scroll {
    overflow-x: auto;
    max-width: 100%;
}

/* Scoresheet Table */
.scoresheet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    min-width: 800px;
}

.scoresheet-table th,
.scoresheet-table td {
    padding: 0.4rem 0.5rem;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
}

/* Header Rows */
.scoresheet-table thead tr:first-child th {
    background: #f9fafb;
    border-bottom: 2px solid #d1d5db;
}

.scoresheet-table .pos-header {
    width: 50px;
    text-align: center;
    font-weight: 600;
    background: #e5e7eb;
}

.scoresheet-table .team-header {
    text-align: center;
    background: #fef3c7;
    min-width: 150px;
}

.scoresheet-table .team-header .team-name {
    font-weight: 600;
    font-size: 0.85rem;
}

.scoresheet-table .team-header .owner-name {
    font-size: 0.7rem;
    color: #6b7280;
    font-weight: normal;
}

/* Subheader Row */
.scoresheet-table .subheader th {
    background: #f3f4f6;
    font-size: 0.7rem;
    font-weight: 500;
    color: #6b7280;
}

.scoresheet-table .player-subheader {
    text-align: left;
}

.scoresheet-table .pts-subheader {
    text-align: center;
    width: 50px;
}

/* Body Cells */
.scoresheet-table .pos-cell {
    text-align: center;
    font-weight: 600;
    background: #f9fafb;
    width: 50px;
}

.scoresheet-table .player-cell {
    text-align: left;
    min-width: 100px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scoresheet-table .player-cell .draft-round {
    color: #9ca3af;
    font-size: 0.75rem;
}

.scoresheet-table .pts-cell {
    text-align: center;
    width: 50px;
    font-weight: 500;
}

/* Keeper Styling */
.scoresheet-table .player-cell.keeper {
    background: linear-gradient(to right, rgba(59, 130, 246, 0.1), transparent);
}

.keeper-icon {
    margin-right: 0.25rem;
    font-size: 0.75rem;
}

/* Keeper Selection Mode */
.keeper-selection-mode .player-cell {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.keeper-selection-mode .player-cell:hover {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

.keeper-selection-mode .player-cell.keeper-selected {
    background-color: rgba(245, 158, 11, 0.3) !important;
    border: 2px solid #f59e0b;
    position: relative;
}

.keeper-selection-mode .player-cell.keeper-selected::after {
    content: '🔒';
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.75rem;
}

/* Keeper Toolbar */
.keeper-toolbar {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.keeper-toolbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.keeper-toolbar-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.keeper-toolbar-icon {
    font-size: 1.5rem;
}

.keeper-toolbar-title {
    font-weight: 600;
    font-size: 1.1rem;
}

.keeper-toolbar-hint {
    opacity: 0.9;
    font-size: 0.9rem;
}

.keeper-toolbar-actions {
    display: flex;
    gap: 8px;
}

.keeper-toolbar-actions .btn {
    padding: 8px 16px;
    font-weight: 500;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .keeper-toolbar-content {
        flex-direction: column;
        text-align: center;
    }
    
    .keeper-toolbar-info {
        flex-direction: column;
    }
    
    .keeper-toolbar-actions {
        width: 100%;
        justify-content: center;
    }
}

/* Total Row */
.scoresheet-table .total-row {
    background: #fef3c7;
    border-top: 2px solid #d97706;
}

.scoresheet-table .total-row .pos-cell {
    background: #fcd34d;
}

.scoresheet-table .total-row .total-pts {
    font-size: 0.9rem;
    color: #92400e;
}

/* Cumulative Row */
.scoresheet-table .cumulative-row {
    background: #dbeafe;
}

.scoresheet-table .cumulative-row .pos-cell {
    background: #93c5fd;
}

.scoresheet-table .cumulative-row .cumulative-pts {
    color: #1e40af;
}

/* Rank Row */
.scoresheet-table .rank-row {
    background: #f0fdf4;
}

.scoresheet-table .rank-row .pos-cell {
    background: #86efac;
}

.scoresheet-table .rank-row .rank-cell {
    font-weight: 700;
    font-size: 1rem;
    color: #166534;
}

/* ================================================================
   PLAYOFF INFO & LEGEND
   ================================================================ */

.playoff-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.playoff-info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.playoff-info-item .info-label {
    font-weight: 500;
    color: #6b7280;
}

.playoff-info-item .info-value {
    font-weight: 600;
    color: #1f2937;
}

/* Week 4 Info Box */
.playoff-week4-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 1rem;
}

.playoff-week4-info h4 {
    margin: 0 0 0.5rem 0;
    color: #1e40af;
    font-size: 0.9rem;
}

.playoff-week4-info p {
    margin: 0.25rem 0;
    font-size: 0.85rem;
    color: #1e3a8a;
}

/* Keeper Legend */
.playoff-legend {
    padding: 0.75rem 1rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #1e40af;
}

.playoff-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ================================================================
   PLAYOFF ADMIN CONTROLS (Commissioner Only)
   ================================================================ */

.playoff-admin-controls {
    display: flex;
    gap: 0.5rem;
    margin-right: auto;
}

.playoff-admin-controls .btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.playoff-admin-controls .btn-warning:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.playoff-commish-badge {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

/* ================================================================
   RESPONSIVE - TABLET & BELOW
   ================================================================ */

@media (max-width: 900px) {
    .playoff-divisions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Modal - disable resize on mobile, full screen */
    .playoff-modal .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        min-width: unset;
        min-height: unset;
        max-height: 100vh;
        resize: none;
        border-radius: 0;
    }
    
    .playoff-modal .modal-content::after {
        display: none;
    }
    
    /* View toggle stacks below header */
    .playoff-view-toggle {
        order: 3;
        width: 100%;
        justify-content: center;
        margin: 0.5rem 0 0 0;
    }
    
    .playoff-view-btn {
        flex: 1;
        text-align: center;
    }
    
    /* Scoresheet table - smaller on mobile */
    .scoresheet-table {
        font-size: 0.75rem;
    }
    
    .scoresheet-table th,
    .scoresheet-table td {
        padding: 0.3rem 0.4rem;
    }
    
    .scoresheet-table .player-cell {
        min-width: 80px;
        max-width: 100px;
    }
    
    /* Admin controls stack */
    .playoff-admin-controls {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .playoff-modal .modal-footer {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .playoff-modal .modal-footer button,
    .playoff-admin-controls {
        width: 100%;
    }
    
    .playoff-admin-controls .btn-warning {
        width: 100%;
    }
}

/* ================================================================
   RESPONSIVE - LARGE SCREENS
   ================================================================ */

@media (min-width: 1200px) {
    .scoresheet-table {
        min-width: 1000px;
    }
    
    .scoresheet-table .player-cell {
        min-width: 120px;
        max-width: 160px;
    }
}

/* ================================================================
   PRINT STYLES
   ================================================================ */

@media print {
    .playoff-modal {
        position: static !important;
        display: block !important;
    }
    
    .playoff-modal-content {
        max-width: none !important;
        box-shadow: none !important;
    }
    
    .playoff-view-toggle,
    .playoff-week-tabs,
    .modal-footer,
    .playoff-info,
    .playoff-admin-controls {
        display: none !important;
    }
    
    .scoresheet-scroll {
        overflow: visible !important;
    }
    
    .scoresheet-table {
        min-width: auto !important;
        font-size: 9pt;
    }
}

/* Playoff Save Confirmation Modal */
.playoff-confirm-modal {
    z-index: 10001; /* Above main playoff modal */
}

.playoff-confirm-content {
    max-width: 1200px;
    max-height: 90vh;
    overflow-y: auto;
}

.playoff-confirm-header {
    background: linear-gradient(135deg, #059669, #047857);
}

.keeper-instructions {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.keeper-instructions h4 {
    margin: 0 0 0.5rem 0;
    color: #92400e;
}

.keeper-instructions p {
    margin: 0.25rem 0;
    color: #78350f;
}

.keeper-note {
    font-size: 0.85em;
    font-style: italic;
}

.confirm-teams-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.confirm-division-header {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.confirm-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.confirm-team-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.confirm-team-header {
    background: #374151;
    color: white;
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.confirm-team-name {
    font-weight: 600;
}

.confirm-team-owner {
    font-size: 0.8em;
    opacity: 0.8;
}

.confirm-keeper-count {
    margin-left: auto;
    background: rgba(255,255,255,0.2);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85em;
}

.confirm-roster-table {
    width: 100%;
    font-size: 0.85em;
    border-collapse: collapse;
}

.confirm-roster-table th {
    background: #e5e7eb;
    padding: 0.4rem;
    text-align: left;
    font-weight: 600;
}

.confirm-roster-table td {
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid #e5e7eb;
}

.confirm-player-row.is-keeper {
    background: #fef3c7;
}

.confirm-pos {
    font-weight: 600;
    color: #6b7280;
    width: 40px;
}

.confirm-player {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.confirm-player .draft-rd {
    color: #9ca3af;
    font-size: 0.85em;
}

.confirm-pts {
    text-align: right;
    font-weight: 500;
    width: 50px;
}

.confirm-keeper-toggle {
    text-align: center;
    width: 40px;
}

.keeper-toggle-btn {
    background: #e5e7eb;
    border: none;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.2s;
}

.keeper-toggle-btn:hover {
    background: #d1d5db;
}

.keeper-toggle-btn.active {
    background: #fbbf24;
}

.confirm-total-row {
    background: #d1fae5;
    font-weight: 600;
}

.confirm-summary {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
}

.playoff-confirm-footer {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.playoff-confirm-footer .btn-success {
    background: linear-gradient(135deg, #059669, #047857);
    color: white;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}

.playoff-confirm-footer .btn-success:hover {
    background: linear-gradient(135deg, #047857, #065f46);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .confirm-teams-grid {
        grid-template-columns: 1fr;
    }
    
    .confirm-player {
        max-width: 120px;
    }
}

/* ================================================================
   PLAYOFF WEEK 4 - CHAMPIONSHIP MATCHUPS
   ================================================================ */

.playoff-week4-matchups {
    margin-top: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 8px;
}

.playoff-week4-matchups h4 {
    margin: 0 0 1rem 0;
    color: #92400e;
    font-size: 1.1rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.championship-matchup {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.championship-matchup:last-child {
    margin-bottom: 0;
}

/* Super Bowl styling - gold/trophy theme */
.championship-matchup.super-bowl {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border: 2px solid #eab308;
    position: relative;
}

.championship-matchup.super-bowl::before {
    content: '🏆';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    background: white;
    padding: 0 0.5rem;
    border-radius: 50%;
}

.championship-matchup.super-bowl .matchup-title {
    color: #a16207;
    font-weight: 700;
    font-size: 1.1rem;
}

/* 3rd Place Game styling - bronze/silver theme */
.championship-matchup.third-place {
    background: linear-gradient(135deg, #f5f5f4 0%, #e7e5e4 100%);
    border: 1px solid #a8a29e;
}

.championship-matchup.third-place .matchup-title {
    color: #57534e;
    font-weight: 600;
    font-size: 0.95rem;
}

.matchup-title {
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.matchup-teams {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.matchup-teams .team-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.matchup-teams .vs {
    font-size: 0.85rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    background: #f3f4f6;
    border-radius: 4px;
}

.matchup-scores {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

.matchup-scores .team-ytd {
    font-size: 1.25rem;
    font-weight: 700;
    color: #059669;
    min-width: 70px;
}

.matchup-scores .separator {
    color: #9ca3af;
    font-weight: 400;
}

/* No matchups message */
.no-matchups {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 6px;
    border: 1px dashed #d1d5db;
}

/* ================================================================
   PLAYOFF WEEK 4 - INFO BOX (existing, update if needed)
   ================================================================ */

.playoff-week4-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 1rem;
}

.playoff-week4-info h4 {
    margin: 0 0 0.5rem 0;
    color: #1e40af;
    font-size: 0.9rem;
}

.playoff-week4-info p {
    margin: 0.25rem 0;
    font-size: 0.85rem;
    color: #1e3a8a;
}

/* ================================================================
   RESPONSIVE - MOBILE MATCHUPS
   ================================================================ */

@media (max-width: 480px) {
    .playoff-week4-matchups {
        padding: 0.75rem;
    }
    
    .championship-matchup {
        padding: 0.75rem;
    }
    
    .matchup-teams .team-name {
        font-size: 0.95rem;
        max-width: 100px;
    }
    
    .matchup-teams {
        gap: 0.5rem;
    }
    
    .matchup-scores .team-ytd {
        font-size: 1.1rem;
        min-width: 60px;
    }
    
    .championship-matchup.super-bowl::before {
        font-size: 1.2rem;
        top: -10px;
    }
}

}

/* ================================================================
   PLAYOFF FINALIZE CONTEST MODAL
   ================================================================ */

.playoff-finalize-modal {
    z-index: 2000;
}

.playoff-finalize-content {
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.playoff-finalize-header {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
}

.playoff-finalize-body {
    padding: 1.5rem;
}

.finalize-warning {
    background: #fef3c7;
    border: 2px solid #f59e0b;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.finalize-warning p {
    margin: 0.5rem 0;
}

.final-standings h3 {
    text-align: center;
    margin-bottom: 1rem;
    color: #1f2937;
}

.podium {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.podium-place {
    text-align: center;
    padding: 1rem;
    border-radius: 8px;
    min-width: 140px;
}

.podium-place.gold {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    order: 2;
}

.podium-place.silver {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border: 2px solid #9ca3af;
    order: 1;
}

.podium-place.bronze {
    background: linear-gradient(135deg, #fef2e2 0%, #fed7aa 100%);
    border: 2px solid #f97316;
    order: 3;
}

.place-medal {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.place-rank {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.place-team {
    font-weight: 700;
    font-size: 1rem;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.place-points {
    font-size: 0.9rem;
    color: #059669;
    font-weight: 600;
}

.full-standings {
    margin-top: 1.5rem;
}

.full-standings h4 {
    margin-bottom: 0.75rem;
    color: #374151;
}

.standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.standings-table th,
.standings-table td {
    padding: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.standings-table th {
    background: #f9fafb;
    font-weight: 600;
}

.standings-table tr.top-three {
    background: #fef3c7;
}

.playoff-finalize-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
}

/* ================================================================
   PLAYOFF HISTORY MODAL
   ================================================================ */

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

   .playoff-history-content {
       background: white;
       border-radius: 8px;
       max-width: 550px;
       width: 90%;
       max-height: 80vh;
       overflow-y: auto;
   }

.playoff-history-header {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: white;
}

.playoff-history-body {
    padding: 1.5rem;
}

.no-history {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
}

.no-history p {
    margin: 0.5rem 0;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.history-entry {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.history-year {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    text-align: center;
}

.history-results {
    padding: 1rem;
}

.history-winner,
.history-runner-up,
.history-third {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
}

.history-winner {
    font-weight: 600;
}

.history-winner .medal,
.history-runner-up .medal,
.history-third .medal {
    font-size: 1.2rem;
    min-width: 28px;
}

.history-winner .name,
.history-runner-up .name,
.history-third .name {
    flex: 1;
}

.history-winner .points,
.history-runner-up .points,
.history-third .points {
    color: #059669;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Compact single-row history display */
.history-entry.history-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color, #333);
}

.history-row .history-year {
    font-weight: bold;
    color: var(--accent-color, #4a9eff);
    min-width: 50px;
}

.history-row .history-place {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.history-row .history-separator {
    color: #666;
    margin: 0 4px;
}

.history-row .medal {
    font-size: 0.9em;
}

.history-row .name {
    font-weight: 500;
}

.history-row .points {
    font-size: 0.85em;
    color: #888;
}

.history-row .history-notes {
    font-size: 0.8em;
    color: #666;
    font-style: italic;
    margin-left: 8px;
}

.history-notes {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.85rem;
    color: #6b7280;
    font-style: italic;
}

/* Championship Count Table */
.championship-counts {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.championship-counts h4 {
    margin: 0 0 0.75rem 0;
    color: #1f2937;
    font-size: 1rem;
}

.champ-count-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.champ-count-table th,
.champ-count-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.champ-count-table th {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
}

.champ-count-table tr:hover {
    background: #fef3c7;
}

.champ-count-table td:last-child {
    text-align: right;
}

/* Placement counts table styling */
.champ-count-table th:nth-child(2),
.champ-count-table th:nth-child(3),
.champ-count-table th:nth-child(4),
.champ-count-table td:nth-child(2),
.champ-count-table td:nth-child(3),
.champ-count-table td:nth-child(4) {
    text-align: center;
    width: 50px;
}

/* Mobile responsive for finalize/history */
@media (max-width: 480px) {
    .podium {
        flex-direction: column;
        align-items: center;
    }
    
    .podium-place {
        width: 100%;
        max-width: 200px;
        order: unset !important;
    }
    
    .podium-place.gold {
        order: 1 !important;
    }
    
    .podium-place.silver {
        order: 2 !important;
    }
    
    .podium-place.bronze {
        order: 3 !important;
    }
    
    .playoff-finalize-footer {
        flex-direction: column;
    }
    
    .playoff-finalize-footer .btn {
        width: 100%;
    }
}

/* ================================================================
   PLAYOFF MODAL - MINIMIZE BUTTON & FLOATING BAR
   ================================================================ */

/* Minimize button in header */
.playoff-minimize-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    margin-right: 0.5rem;
}

.playoff-minimize-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Minimized floating bar */
.playoff-minimized-bar {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9999;
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.playoff-minimized-bar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.playoff-minimized-bar .minimized-icon {
    font-size: 1.2rem;
}

.playoff-minimized-bar .minimized-title {
    font-weight: 600;
    font-size: 0.95rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playoff-minimized-bar .minimized-week {
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.playoff-minimized-bar .minimized-expand {
    margin-left: 4px;
    opacity: 0.8;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .playoff-minimized-bar {
        bottom: 70px; /* Above mobile toolbar */
        right: 10px;
        left: 10px;
        justify-content: center;
    }
    
    .playoff-minimized-bar .minimized-title {
        max-width: 150px;
    }
}

/* ================================================================
   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 when shown with new mobile view */
.mobile-toolbar-container.with-mobile-view {
    display: block !important;
    z-index: 1001; /* Above the mobile view content */
}

/* Ensure mobile view container has bottom padding for toolbar */
.mobile-view-container {
    padding-bottom: calc(var(--mobile-toolbar-height, 73px) + env(safe-area-inset-bottom, 0));
}

/* Mobile content area needs bottom padding for toolbar */
.mobile-view-container .mobile-content {
    padding-bottom: calc(var(--mobile-toolbar-height, 73px) + 10px);
}

.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 */
    /* But show it if the new mobile view is active */
    .mobile-toolbar-container:not(.with-mobile-view) {
      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;
    }

    /* Allow player names to wrap on iPad */
    .player-name,
    .player-name-line,
    .player-name-stacked,
    .player-last-name,
    .player-first-name {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Ensure roster cells can accommodate wrapped text */
    .roster-slot.filled .player-display {
        line-height: 1.2;
    }
    
    .draft-pick .player-display {
        line-height: 1.2;
    }

}

/* ================================================================
   TABLET PORTRAIT - PLAYER DISPLAY STACKED LAYOUT
   Forces 3-row vertical layout for narrow portrait cells:
   Row 1: Player Name (can wrap)
   Row 2: Position + Injury + Comment icons
   Row 3: Team Badge + Bye Week (dedicated line)
   ================================================================ */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
   
   /* Player display: 3-row grid layout - ONLY when fit-to-window is NOT active */
   .draft-table-container:not(.fit-to-window-active) .draft-table .player-display {
       display: grid !important;
       grid-template-rows: auto auto auto !important;
       align-items: center !important;
       justify-items: center !important;
       gap: 2px !important;
       padding: 4px 3px !important;
       height: 100% !important;
   }
    
    /* Player name stacked: contains name AND position as 2 separate rows */
    .draft-table-container:not(.fit-to-window-active) .draft-table .player-name-stacked {
        display: contents !important; /* Let children participate in parent grid */
    }
    
    /* Row 1: Player name - centered, can wrap */
    .draft-table-container:not(.fit-to-window-active) .draft-table .player-name-wrap,
    .draft-table-container:not(.fit-to-window-active) .draft-table .player-name,
    .draft-table-container:not(.fit-to-window-active) .draft-table .player-name-single {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        line-height: 1.2 !important;
        width: 100% !important;
    }
    
    /* Row 2: Position row - flex row with icons */
    .draft-table-container:not(.fit-to-window-active) .draft-table .player-position-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        width: 100% !important;
        margin-top: 0 !important;
    }
    
    /* Row 3: Player details (team + bye) - dedicated line */
    .draft-table-container:not(.fit-to-window-active) .draft-table .player-details {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 100% !important;
        margin-top: 0 !important;
    }
    
    /* Ensure team badge and bye don't wrap */
    .draft-table .nfl-team,
    .draft-table .bye-week {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    /* Adjust slot height for 3-row layout */
    .draft-table .pick-slot,
    .draft-table .roster-slot {
        min-height: 75px !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-container:not(.fit-to-window-active) .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 {
        display: inline !important;
        font-size: calc(var(--player-name-base) * var(--font-scale)) !important;
    }
    
    .player-first-name {
        display: inline !important;
        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;
    }

    /* Round number cell with direction arrows stacked vertically */
    .draft-table td.round-number {
        text-align: center;
        padding: 4px 6px;
        vertical-align: middle;
    }

    .draft-table td.round-number .round-num {
        display: block;
        font-weight: 600;
        font-size: 0.95em;
        line-height: 1.2;
    }

    .draft-table td.round-number .round-arrow {
        display: block;
        width: 22px;
        height: 10px;
        margin: 2px auto 0;
        opacity: 0.7;
        color: white;
    }
    
    /* ========================================
       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;
    }

    .login-header h1 {
        font-size: 1.2rem !important;
    }

    /* Mobile: Stack vertically on very small screens */
    .login-header {
        padding: 0.5rem 0.75rem !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
    }

    .login-logo {
        max-width: 80px !important;
    }

    .login-header-right {
        gap: 0.15rem !important;
    }

    .version-info {
        font-size: 0.65rem !important;
    }

    .link-button {
        padding: 0.2rem 0.2rem !important;
        font-size: 0.7rem !important;
    }
    
    .login-form {
        padding: 0.75rem 1rem 1rem 1rem !important;
    }
    
    .form-group {
        margin-bottom: 0.6rem !important;
    }
    
    .form-group label {
        font-size: 0.8rem !important;
        margin-bottom: 0.2rem !important;
    }
    
    .form-group input,
    .form-group select {
        padding: 0.5rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Ensure selects in form-row match exactly */
    .form-row .form-group select {
        padding: 0.5rem 0.75rem;
        font-size: 0.95rem;
        height: 42px;  /* Fixed height ensures perfect alignment */
        box-sizing: border-box;
    }

    .provider-selection {
        margin-bottom: 0.75rem !important;
    }
    
    /* League selection container - more compact */
    #leagueSelectContainer {
        margin-top: 0.5rem !important;
    }
    
    #leagueSelectContainer .form-group {
        margin-bottom: 0.5rem !important;
    }
    
    .form-actions {
        margin-top: 0.75rem !important;
        gap: 0.4rem !important;
    }
    
    .form-actions button,
    .form-actions .btn {
        padding: 0.6rem 0.8rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Advanced options - tighter */
    .advanced-options-toggle {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.8rem !important;
    }
    
    #advancedOptionsContent .form-group {
        margin-bottom: 0.5rem !important;
    }
    
    /* Clear sessions button - smaller */
    #clearSessionsBtn {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.75rem !important;
        margin-top: 0.5rem !important;
    }
}

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

/* ================================================================
   TWO-ROW HEADER REDESIGN
   Added: [DATE]
   
   Row 1: Main Navigation (Permanent) - League, Tabs, Actions, User
   Row 2: Contextual Subheader (Changes per view) - Filters, Status
   
   This block should be appended to the END of styles_v4.css
   ================================================================ */

/* ========== OVERRIDE EXISTING HEADER-MAIN ========== */
/* Change from single row to column layout for two-row structure */
.header-main {
    flex-direction: column !important;
    padding: 0 !important; /* Remove old padding, rows have their own */
    height: auto !important;
}

/* ========== ROW 1: Main Navigation ========== */
.header-row-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    min-height: 48px;
    width: 100%;
    box-sizing: border-box;
}

.header-row-main .header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0; /* Allow truncation */
    flex-shrink: 1;
}

.header-row-main .header-left h1 {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.header-row-main .view-tabs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.header-row-main .header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ========== ROW 2: Contextual Subheader ========== */
.header-row-context {
    display: flex;
    align-items: center;
    padding: 0.4rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    min-height: 40px;
    width: 100%;
    box-sizing: border-box;
}

/* Context sections - only one visible at a time */
.context-section {
    display: none;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.context-section.active {
    display: flex;
    opacity: 1;
}

/* Fade animation for context switch */
.context-section.fade-out {
    opacity: 0;
}

.context-section.fade-in {
    opacity: 1;
}

.context-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.context-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ========== Unit Selector (Division/Conference) ========== */
.unit-selector-slot {
    display: flex;
    align-items: center;
}

/* Override existing unit-selector-container if any conflicts */
.header-row-context .unit-selector-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.header-row-context .unit-selector-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.header-row-context .unit-selector {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: white;
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    min-width: 140px;
}

.header-row-context .unit-selector:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.header-row-context .unit-selector:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

/* ========== Draft Status Compact (Row 2) ========== */
.draft-status-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
}

.draft-status-compact .status-item {
    white-space: nowrap;
}

.draft-status-compact strong {
    color: white;
    font-weight: 600;
}

.draft-status-compact .status-dot {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.6rem;
}

.draft-status-compact .status-indicator {
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
}

.draft-status-compact .status-indicator.live {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
}

.draft-status-compact .status-indicator.complete {
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

.draft-status-compact .status-indicator.paused {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
}

.draft-status-compact .status-indicator.not-started {
    color: #9ca3af;
    background: rgba(156, 163, 175, 0.1);
}

/* ========== Context Buttons ========== */
.context-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.context-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: white;
}

.context-btn svg {
    flex-shrink: 0;
}

/* Team Needs Button - Purple accent */
.context-btn.team-needs-btn {
    background: rgba(147, 51, 234, 0.2);
    border-color: rgba(147, 51, 234, 0.3);
    color: #c4b5fd;
}

.context-btn.team-needs-btn:hover {
    background: rgba(147, 51, 234, 0.3);
    border-color: rgba(147, 51, 234, 0.5);
    color: white;
}

/* Refresh Button */
.context-btn.refresh-btn {
    gap: 0.25rem;
}

.context-btn.refresh-btn .refresh-timer {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Spinning animation for refresh */
.context-btn.spinning .icon {
    animation: spin-context 1s linear infinite;
}

@keyframes spin-context {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Refresh error indicator */
.refresh-btn.refresh-error,
.refresh-timer.refresh-error {
    color: #f87171 !important;  /* Red-ish color */
    animation: pulse-error 1s ease-in-out infinite;
}

@keyframes pulse-error {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========== Week Selector (Roster View) ========== */
.week-selector {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.context-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.context-select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: white;
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
}

.context-select:hover {
    background: rgba(255, 255, 255, 0.15);
}

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

/* ========== Roster View Toggle (By Slot / By Pos) - Subheader Version ========== */
.header-row-context .roster-view-toggle {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 2px;
    gap: 0;
}

.header-row-context .roster-view-toggle .toggle-btn {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.header-row-context .roster-view-toggle .toggle-btn:hover {
    color: rgba(255, 255, 255, 0.8);
}

.header-row-context .roster-view-toggle .toggle-btn.active {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-weight: 500;
}

/* ========== Draft Type Toggle (Subheader) ========== */
.header-row-context .draft-type-toggle {
    display: flex;
    gap: 0.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: 0.5rem;
}

.header-row-context .draft-type-toggle .toggle-option {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.header-row-context .draft-type-toggle .toggle-option input {
    accent-color: var(--primary-color);
}

.header-row-context .draft-type-toggle .toggle-option:has(input:checked) {
    color: white;
}

/* ========== Placeholder for future features ========== */
.context-placeholder {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

/* ========== RESPONSIVE: Two-Row Header ========== */

/* Large screens - full display */
@media (min-width: 1200px) {
    .header-row-main .header-left h1 {
        max-width: 280px;
    }
}

/* Medium screens */
@media (max-width: 1100px) {
    .header-row-main .header-left h1 {
        max-width: 180px;
    }
    
    .context-btn .btn-label {
        display: none; /* Hide "Team Needs" text, show icon only */
    }
    
    .header-row-context .unit-selector {
        min-width: 120px;
    }
    
    .context-left {
        gap: 0.75rem;
    }
}

/* Smaller screens */
@media (max-width: 950px) {
    .header-row-main {
        padding: 0.4rem 0.75rem;
    }
    
    .header-row-context {
        padding: 0.35rem 0.75rem;
    }
    
    .header-row-main .header-left h1 {
        max-width: 140px;
        font-size: 0.9rem;
    }
    
    .draft-status-compact {
        font-size: 0.75rem;
        gap: 0.35rem;
    }
    
    .header-row-context .unit-selector-label {
        display: none; /* Hide "Division:" label */
    }
    
    .header-row-context .unit-selector {
        min-width: 100px;
        font-size: 0.75rem;
        padding: 0.25rem 0.4rem;
    }
}

/* Narrow screens */
@media (max-width: 850px) {
    .header-row-main .header-left h1 {
        max-width: 100px;
    }
    
    .context-left {
        gap: 0.5rem;
    }
    
    .draft-status-compact {
        font-size: 0.7rem;
        gap: 0.25rem;
    }
    
    .draft-status-compact .status-indicator {
        padding: 0.1rem 0.35rem;
        font-size: 0.65rem;
    }
    
    .context-btn {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .context-btn svg {
        width: 14px;
        height: 14px;
    }
}

/* Mobile - hide desktop header (mobile has its own) */
@media (max-width: 768px) {
    .header-row-main,
    .header-row-context {
        display: none !important;
    }
}

/* ========== HIDE OLD HEADER ELEMENTS (Now in subheader) ========== */
/* These elements moved to the contextual subheader - hide if still in old location */
.header-main > .header-right > .header-status,
.header-main > .header-right > .header-week-select,
.header-main > .header-right > #headerRosterViewToggle {
    display: none !important;
}

/* ============================================
   SHARED PLAYER DISPLAY UTILITY STYLES
   Used by Utils.renderPlayerDisplay()
   ============================================ */

/* ===== LDM (Live Draft Modal) PREFIX ===== */

.ldm-display {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ldm-name {
    font-weight: 500;
    color: var(--text-primary, #fff);
}

.ldm-profile-link {
    cursor: pointer;
    transition: color 0.15s ease;
}

.ldm-profile-link:hover {
    color: var(--accent-primary, #3b82f6);
    text-decoration: underline;
}

.ldm-injury {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 0.25rem;
    cursor: help;
}

.ldm-injury.injury-q { background: #fbbf24; color: #000; }
.ldm-injury.injury-d { background: #f97316; color: white; }
.ldm-injury.injury-o { background: #ef4444; color: white; }
.ldm-injury.injury-i { background: #dc2626; color: white; }
.ldm-injury.injury-p { background: #6b7280; color: white; }
.ldm-injury.injury-s { background: #4b5563; color: white; }

.ldm-details {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary, #9ca3af);
}

.ldm-pos {
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.7rem;
}

.ldm-team {
    color: var(--text-secondary, #9ca3af);
}

.ldm-bye {
    color: var(--text-muted, #6b7280);
    font-size: 0.75rem;
}

.ldm-adp {
    color: var(--text-muted, #6b7280);
    font-size: 0.75rem;
}

/* ===== WDL (Working Draft List) PREFIX ===== */

.wdl-display {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.wdl-name {
    font-weight: 500;
    color: var(--text-primary, #fff);
    font-size: 0.85rem;
}

.wdl-profile-link {
    cursor: pointer;
    transition: color 0.15s ease;
}

.wdl-profile-link:hover {
    color: var(--accent-primary, #3b82f6);
    text-decoration: underline;
}

.wdl-injury {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    height: 12px;
    padding: 0 2px;
    border-radius: 2px;
    font-size: 0.6rem;
    font-weight: 700;
    margin-left: 0.2rem;
    cursor: help;
}

.wdl-injury.injury-q { background: #fbbf24; color: #000; }
.wdl-injury.injury-d { background: #f97316; color: white; }
.wdl-injury.injury-o { background: #ef4444; color: white; }
.wdl-injury.injury-i { background: #dc2626; color: white; }
.wdl-injury.injury-p { background: #6b7280; color: white; }
.wdl-injury.injury-s { background: #4b5563; color: white; }

.wdl-details {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-secondary, #9ca3af);
}

.wdl-pos {
    font-weight: 600;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.65rem;
}

.wdl-team {
    color: var(--text-secondary, #9ca3af);
}

.wdl-bye {
    color: var(--text-muted, #6b7280);
    font-size: 0.7rem;
}

.wdl-adp {
    color: var(--text-muted, #6b7280);
    font-size: 0.7rem;
}