/* --- SHARED CSS VARIABLES & ROOT DESIGN TOKENS --- */
:root {
    --primary-green: #34A853;
    --bg-color: #0b132b;
    --card-bg: #1c2541;
    --text-main: #ffffff;
    --text-muted: #8d99ae;
    --border: #3a506b;

    /* Call Out & Target Colors */
    --target-bg: #102a1e; 
    --target-border: #34A853;
    --avoid-bg: #3a1515; 
    --avoid-border: #ea4335;
    --dart-bg: #112233; 
    --dart-border: #4285f4;
    --stack-color: #ea580c;

    /* Positional Colors */
    --pos-qb: #3a1515; --pos-qb-border: #ea4335;
    --pos-rb: #102a1e; --pos-rb-border: #34A853;
    --pos-wr: #112233; --pos-wr-border: #4285f4;
    --pos-te: #332b11; --pos-te-border: #fbbc04;
    --pos-k: #2d3748; --pos-k-border: #a0aec0;
    --pos-def: #281442; --pos-def-border: #9f7aea;
}

/* --- GLOBAL RESETS --- */
* { 
    box-sizing: border-box; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

body { 
    margin: 0; 
    padding: 0; 
    background-color: var(--bg-color); 
    color: var(--text-main); 
    padding-bottom: 70px; 
    overflow-x: hidden; 
}

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 1rem; 
}

/* --- STICKY HEADER --- */
.header { 
    background: linear-gradient(135deg, #0b132b, #1c2541); 
    border-bottom: 2px solid var(--primary-green); 
    color: white; 
    padding: 0.6rem 0.8rem; 
    position: sticky; 
    top: 0; 
    z-index: 100; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
}

.header-title { 
    font-weight: bold; 
    display: flex; 
    align-items: center; 
    gap: 0.4rem; 
    letter-spacing: 0.5px; 
    line-height: 1.1; 
    font-size: 0.95rem; 
    cursor: pointer; 
}

.header-controls { 
    display: flex; 
    align-items: center; 
    gap: 0.6rem; 
}

/* Header League Select (MLS) */
#headerLeagueSelect { text-overflow: ellipsis; }
@media (max-width: 600px) {
    #headerLeagueSelect { max-width: 130px; }
}

/* --- HAMBURGER MENU & DRAWER --- */
.menu-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.6); z-index: 999; display: none; 
}

.hamburger-menu { 
    position: fixed; top: 0; left: -260px; width: 260px; height: 100%; 
    background: var(--card-bg); z-index: 1000; transition: left 0.3s ease; 
    border-right: 2px solid var(--primary-green); box-shadow: 2px 0 10px rgba(0,0,0,0.5); 
    display: flex; flex-direction: column; padding: 1rem 0; 
}

.hamburger-menu.open { left: 0; }

.hamburger-menu .nav-btn { 
    background: none; border: none; padding: 1rem 1.5rem; text-align: left; 
    font-size: 1.05rem; color: var(--text-main); font-weight: bold; cursor: pointer; 
    border-bottom: 1px solid var(--border); width: 100%; transition: background 0.2s; 
}

.hamburger-menu .nav-btn:hover, .hamburger-menu .nav-btn.active, .hamburger-menu .nav-btn.active-link { 
    background: #0b132b; color: var(--primary-green); 
    border-left: 5px solid var(--primary-green); padding-left: calc(1.5rem - 5px); 
}

.hamburger-btn { 
    background: none; border: none; color: white; font-size: 1.6rem; 
    cursor: pointer; padding: 0 0.6rem 0 0; display: flex; align-items: center; transition: opacity 0.2s; 
}

.hamburger-btn:active { opacity: 0.5; }

.close-menu-btn { 
    background: none; border: none; color: var(--text-muted); font-size: 1.5rem; 
    cursor: pointer; text-align: right; padding: 0 1rem 0.5rem 1rem; 
}

.menu-logo-section { 
    display: flex; align-items: center; gap: 0.8rem; padding: 0 1.5rem 0.5rem 0; 
    border-bottom: 2px solid var(--primary-green); margin-bottom: 0.5rem; 
    font-size: 1.2rem; font-weight: bold;
}

/* --- BOTTOM TAB NAVIGATION --- */
.nav-bar { 
    position: fixed; bottom: 0; left: 0; right: 0; background: var(--card-bg); 
    border-top: 2px solid var(--border); display: flex; justify-content: space-around; 
    padding: 0.5rem; z-index: 98; box-shadow: 0 -2px 10px rgba(0,0,0,0.3); 
}

.nav-bar .nav-btn { 
    background: none; border: none; font-size: 0.95rem; color: var(--text-muted); 
    font-weight: bold; padding: 0.5rem; cursor: pointer; flex: 1; text-align: center; 
}

.nav-bar .nav-btn.active { 
    color: var(--primary-green); border-bottom: 3px solid var(--primary-green); 
}

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* --- CARDS & INPUTS --- */
.settings-card { 
    background: var(--card-bg); padding: 1.25rem; border-radius: 8px; 
    border: 1px solid var(--border); margin-bottom: 1rem; box-shadow: 0 4px 6px rgba(0,0,0,0.2); 
}

.settings-card h3 { 
    margin-top: 0; border-bottom: 2px solid var(--border); padding-bottom: 0.5rem; 
    color: #f1f5f9; display: flex; align-items: center; gap: 0.5rem; justify-content: space-between;
}

input[type="text"], input[type="file"], input[type="number"], textarea, select { 
    width: 100%; padding: 0.8rem; margin: 0.5rem 0 1rem 0; border: 1px solid var(--border); 
    border-radius: 4px; font-size: 1rem; background: #0b132b; color: var(--text-main); 
}
input[type="file"] { cursor: pointer; }

/* --- BUTTONS --- */
.btn-primary { 
    background: var(--primary-green); color: white; border: none; padding: 0.8rem 1.5rem; 
    border-radius: 4px; font-weight: bold; font-size: 1rem; cursor: pointer; 
    width: 100%; margin-top: 0.5rem; transition: background-color 0.3s; 
}
.btn-secondary { 
    background: #4285f4; color: white; border: none; padding: 0.8rem 1.5rem; 
    border-radius: 4px; font-weight: bold; font-size: 1rem; cursor: pointer; 
    width: 100%; margin-top: 0.5rem; transition: background-color 0.3s; 
}
.btn-warning { 
    background-color: #fbbc04; color: #0b132b; border: none; padding: 0.8rem; 
    border-radius: 4px; font-weight: bold; cursor: pointer; width: 100%; margin-bottom: 0.5rem; 
}
.btn-danger { 
    background-color: #ea4335; color: white; border: none; padding: 0.8rem; 
    border-radius: 4px; font-weight: bold; cursor: pointer; width: 100%; font-size: 0.85rem;
}
.btn-header { 
    background-color: var(--primary-green); color: white; border: none; padding: 0.4rem 0.8rem; 
    border-radius: 4px; font-weight: bold; font-size: 0.85rem; cursor: pointer; 
}
.btn-sm { 
    padding: 0.3rem 0.6rem; border: none; border-radius: 4px; font-weight: bold; 
    font-size: 0.8rem; cursor: pointer; 
}
.btn-draft { background-color: var(--border); color: white; }
.btn-mine { background-color: var(--primary-green); color: white; }
.swap-btn { padding: 4px 8px; }
.lock-btn { font-size: 1.2rem; }

.kofi-img { height: 32px; border: 0px; }

/* --- BADGES & POSITIONAL STYLING --- */
.badge { 
    background: #3a506b; padding: 2px 6px; border-radius: 4px; font-weight: bold; 
    font-size: 0.75rem; color: #f1f5f9; display: inline-block; white-space: nowrap; 
}

.pos-badge.QB { background-color: var(--pos-qb); color: #fca5a5; border: 1px solid var(--pos-qb-border); }
.pos-badge.RB { background-color: var(--pos-rb); color: #86efac; border: 1px solid var(--pos-rb-border); }
.pos-badge.WR { background-color: var(--pos-wr); color: #93c5fd; border: 1px solid var(--pos-wr-border); }
.pos-badge.TE { background-color: var(--pos-te); color: #fde047; border: 1px solid var(--pos-te-border); }
.pos-badge.K { background-color: var(--pos-k); color: #e2e8f0; border: 1px solid var(--pos-k-border); }
.pos-badge.DEF { background-color: var(--pos-def); color: #e9d8fd; border: 1px solid var(--pos-def-border); }

.badge-value { background: #102a1e; color: #4ade80; border: 1px solid #34A853; }
.badge-reach { background: #3a1515; color: #fca5a5; border: 1px solid #ea4335; }
.badge-rookie { background: #281442; color: #e9d8fd; border: 1px solid #9f7aea; font-size: 0.65rem; margin-left: 4px; }
.early-badge { background: #fbbc04; color: #0b132b; font-weight: bold; border: 1px solid #f59e0b; padding: 1px 4px; font-size: 0.70rem; margin-left: 4px;}
.inj-badge { background: #ea4335; color: white; border: none; padding: 1px 4px; font-size: 0.65rem; font-weight: bold; margin-left: 4px; }
.status-badge { font-size: 0.85rem; padding: 0.5rem; border-radius: 4px; margin-bottom: 1rem; display: none; background-color: #102a1e; color: #4ade80; border: 1px solid #34A853; }

/* --- TOOLTIPS (Supports MDS & MLS styles) --- */
.tooltip, .tooltip-container { position: relative; display: inline-flex; align-items: center; margin-left: 5px; cursor: help; }
.tooltip-icon { background: #4285F4; color: white; border-radius: 50%; width: 16px; height: 16px; display: inline-flex; justify-content: center; align-items: center; font-size: 11px; font-weight: bold; line-height: 1; }
.tooltip .tooltip-text, .tooltip-container .tooltip-text { visibility: hidden; width: 240px; background-color: #1a202c; color: #e2e8f0; text-align: left; border-radius: 6px; padding: 10px; position: absolute; z-index: 1001; top: 125%; right: -10px; opacity: 0; transition: opacity 0.3s; font-size: 0.8rem; font-weight: normal; border: 1px solid #4a5568; box-shadow: 0 4px 10px rgba(0,0,0,0.5); pointer-events: none; line-height: 1.4; }
.tooltip:hover .tooltip-text, .tooltip-container:hover .tooltip-text { visibility: visible; opacity: 1; }
.tooltip .tooltip-text::after, .tooltip-container .tooltip-text::after { content: ""; position: absolute; bottom: 100%; right: 13px; border-width: 5px; border-style: solid; border-color: transparent transparent #4a5568 transparent; }

/* --- MLS SPECIFIC STYLES (Lineup & Roster) --- */
.lineup-slot, .roster-item { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0.6rem; border: 1px solid var(--border); background: #0b132b; margin-bottom: 6px; border-radius: 6px; }
.lineup-slot.locked { border-color: var(--primary-green); background: #102a1e; }
.lineup-slot.swapping, .roster-item.swapping { border-color: #fbbc04; background: #332b11; border: 1px solid #fbbc04;}
.lineup-slot.empty { border: 1px dashed var(--border); background: rgba(255,255,255,0.02); }

.slot-label { font-size: 0.8rem; width: 40px; min-width: 40px; text-align: center; font-weight: bold; }
.slot-QB { color: #fca5a5 !important; }
.slot-RB { color: #86efac !important; }
.slot-WR { color: #93c5fd !important; }
.slot-TE { color: #fde047 !important; }
.slot-FLEX, .slot-SFLEX { color: #e9d8fd !important; }
.slot-BN, .slot-ROS { color: var(--text-muted) !important; }

.player-name-wrap { font-weight: bold; color: #f8fafc; line-height: 1.25; font-size: 0.95rem; }
.team-chip { background: #102a1e; padding: 4px 10px; border-radius: 16px; font-size: 0.8rem; font-weight: bold; color: #86efac; display: flex; align-items: center; gap: 6px; border: 1px solid #34A853; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.team-chip .close-chip { cursor: pointer; color: #fca5a5; font-size: 0.9rem; line-height: 1; margin-top: -1px; transition: opacity 0.2s; }

/* --- MDS SPECIFIC STYLES (Tracker, Board, Limits) --- */
.pos-filter { cursor: pointer; opacity: 0.5; padding: 0.4rem 0.8rem; display: flex; flex-direction: column; align-items: center; border: 2px solid transparent; border-radius: 6px; transition: all 0.2s ease; }
.pos-filter:hover { opacity: 0.8; }
.active-filter { opacity: 1; border-color: var(--primary-green); transform: scale(1.05); box-shadow: 0 2px 8px rgba(52, 168, 83, 0.4); }
#tierTracker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; margin-bottom: 1rem; }

.tier-divider { background: var(--primary-green); color: white; padding: 0.4rem; font-weight: bold; text-align: center; border-radius: 4px; margin: 1rem 0 0.5rem 0; font-size: 0.9rem; }
.player-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.8rem; margin-bottom: 0.5rem; display: flex; flex-direction: column; }
.player-card-main { display: flex; justify-content: space-between; align-items: center; }
.player-info h4 { margin: 0 0 0.3rem 0; color: #f8fafc; font-size: 1rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; }
.player-stats { font-size: 0.8rem; color: var(--text-muted); }
.actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

.inline-editor { display: none; background: #0b132b; padding: 0.8rem; margin-top: 0.8rem; border-radius: 4px; border: 1px dashed var(--primary-green); }
.toggle-container { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 1rem; }

.limits-table { width: 100%; text-align: center; border-collapse: collapse; margin-bottom: 1rem; }
.limits-table th { padding: 0.5rem; border-bottom: 1px solid var(--border); font-size: 0.85rem; color: var(--text-muted); }
.limits-table td { padding: 0.5rem; font-weight: bold; font-size: 0.95rem; }

.roster-slot { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid var(--border); }
.roster-slot:last-child { border-bottom: none; }
.roster-label { font-weight: bold; width: 40px; font-size: 0.9rem; }
.roster-slot.empty { opacity: 0.6; }
.bye-warning-banner { background-color: #3a1515; border: 1px solid #ea4335; color: #fca5a5; padding: 0.8rem; border-radius: 6px; text-align: center; font-weight: bold; font-size: 0.9rem; margin-bottom: 1rem; }

/* Draft Board Grid */
.draft-board-container { width: 100%; overflow-x: auto; padding-bottom: 1rem; }
.draft-grid { display: grid; gap: 2px; background-color: var(--border); border: 2px solid var(--border); border-radius: 4px; min-width: 800px; }
.draft-col-header { background: #1c2541; color: var(--text-muted); text-align: center; font-weight: bold; padding: 0.5rem; font-size: 0.85rem; }
.draft-col-header.mine { background: #102a1e; color: #4ade80; border-bottom: 2px solid #34A853; }
.draft-cell { background: #0b132b; padding: 4px; min-height: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.draft-cell.picked { border: 1px solid transparent; }
.draft-cell.mine { border: 2px solid #34A853; box-shadow: inset 0 0 8px rgba(52, 168, 83, 0.2); }
.draft-cell-first { font-size: 0.65rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.draft-cell-last { font-size: 0.75rem; font-weight: bold; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.draft-cell.QB { background-color: rgba(234, 67, 53, 0.15); border-left: 3px solid #ea4335; }
.draft-cell.RB { background-color: rgba(52, 168, 83, 0.15); border-left: 3px solid #34A853; }
.draft-cell.WR { background-color: rgba(66, 133, 244, 0.15); border-left: 3px solid #4285f4; }
.draft-cell.TE { background-color: rgba(251, 188, 4, 0.15); border-left: 3px solid #fbbc04; }
.draft-cell.K { background-color: rgba(160, 174, 192, 0.15); border-left: 3px solid #a0aec0; }
.draft-cell.DEF { background-color: rgba(159, 122, 234, 0.15); border-left: 3px solid #9f7aea; }

/* Guide Tab Headings */
.guide-section h4 { color: #93c5fd; margin-top: 1.2rem; margin-bottom: 0.4rem; }
.guide-section p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin-top: 0; }

/* --- MOBILE TIGHTENING --- */
@media (max-width: 450px) {
    .lineup-slot, .roster-item { padding: 0.6rem 0.4rem; gap: 0.4rem; }
    .slot-label { width: 32px; min-width: 32px; font-size: 0.75rem; }
    .player-name-wrap { font-size: 0.85rem; }
    .badge { padding: 1px 4px; font-size: 0.70rem; }
    .swap-btn { padding: 4px 6px; font-size: 0.75rem; }
    .lock-btn { font-size: 1.0rem; padding: 0 2px !important; }
}