/* DEADCETERA BAND APP — Dark Theme Shell v3.1 */
:root{--bg-dark:#0f172a;--bg-card:#1e293b;--bg-surface:#334155;--accent:#667eea;--accent-light:#818cf8;--accent-glow:rgba(102,126,234,0.15);--green:#10b981;--red:#ef4444;--yellow:#f59e0b;--blue:#3b82f6;--text:#f1f5f9;--text-muted:#94a3b8;--text-dim:#64748b;--border:rgba(255,255,255,0.08);--radius:12px;}
*{box-sizing:border-box;}
body{font-family:'Inter',-apple-system,sans-serif;background:var(--bg-dark);color:var(--text);min-height:100vh;overflow-x:hidden;}
a{color:var(--accent-light);}

/* ===== TOPBAR ===== */
.topbar{position:sticky;top:0;z-index:1000;background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);border-bottom:1px solid var(--border);padding:0 16px;height:56px;display:flex;align-items:center;justify-content:space-between;backdrop-filter:blur(12px);}
.topbar-left{display:flex;align-items:center;gap:12px;}
.hamburger{background:none;border:none;color:var(--text);cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background 0.15s;}
.hamburger:hover{background:rgba(255,255,255,0.08);}
.topbar-brand{font-size:1.15em;font-weight:800;letter-spacing:-0.5px;background:linear-gradient(135deg,#60a5fa,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.topbar-right{display:flex;align-items:center;gap:6px;}
.topbar-btn{background:rgba(255,255,255,0.06);border:1px solid var(--border);color:var(--text-muted);padding:6px 10px;border-radius:8px;font-size:0.78em;cursor:pointer;transition:all 0.15s;white-space:nowrap;font-weight:500;font-family:inherit;}
.topbar-btn:hover{background:rgba(255,255,255,0.12);color:white;}
/* CONNECTED — light green bg with dark green text for maximum contrast */
.topbar-btn.connected,
.topbar-btn.connected:hover{
    background:#d1fae5!important;color:#065f46!important;border:2px solid #10b981!important;
    font-weight:700!important;
}

/* ===== SLIDE MENU ===== */
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1100;opacity:0;pointer-events:none;transition:opacity 0.25s;}
.menu-overlay.open{opacity:1;pointer-events:auto;}
.slide-menu{position:fixed;top:0;left:-300px;bottom:0;width:280px;z-index:1200;background:var(--bg-card);border-right:1px solid var(--border);transition:left 0.3s cubic-bezier(0.4,0,0.2,1);overflow-y:auto;padding:16px 0;}
.slide-menu.open{left:0;}
.menu-brand{padding:12px 20px 16px;font-size:1.2em;font-weight:800;background:linear-gradient(135deg,#60a5fa,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.menu-section{padding:4px 12px;}
.menu-section-title{font-size:0.6em;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-dim);margin:12px 8px 4px;}
.menu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:all 0.15s;color:var(--text-muted);font-size:0.88em;font-weight:500;border:none;background:none;width:100%;text-align:left;font-family:inherit;}
.menu-item:hover{background:rgba(255,255,255,0.06);color:white;}
.menu-item.active{background:var(--accent-glow);color:var(--accent-light);}
.menu-icon{font-size:1.15em;width:24px;text-align:center;}
.menu-badge{margin-left:auto;background:var(--red);color:white;font-size:0.6em;font-weight:700;padding:2px 6px;border-radius:10px;}
.menu-divider{height:1px;background:var(--border);margin:6px 16px;}

/* ===== LAYOUT ===== */
.main-content{max-width:960px;margin:0 auto;padding:16px;min-height:calc(100vh - 92px);}
.page-header{margin-bottom:16px;}
.page-header h1{font-size:1.4em;font-weight:800;letter-spacing:-0.5px;display:flex;align-items:center;gap:10px;}
.page-header p{color:var(--text-muted);font-size:0.88em;margin-top:2px;}
.hidden{display:none!important;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn 0.2s ease-out;}

/* ===== CARDS ===== */
.app-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px;}
.app-card h3{font-size:0.95em;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;}
.stat-card{background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:10px;padding:14px;text-align:center;}
.stat-value{font-size:1.8em;font-weight:800;line-height:1;}
.stat-label{font-size:0.68em;color:var(--text-dim);margin-top:4px;text-transform:uppercase;letter-spacing:0.5px;}
.list-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:8px;margin-bottom:4px;transition:all 0.15s;}
.list-item:hover{background:rgba(255,255,255,0.06);}

/* ===== BUTTONS ===== */
.btn{padding:8px 16px;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:0.85em;transition:all 0.15s;display:inline-flex;align-items:center;gap:6px;font-family:inherit;}
.btn-primary{background:var(--accent);color:white;}.btn-primary:hover{background:var(--accent-light);}
.btn-success{background:var(--green);color:white;}
.btn-danger{background:var(--red);color:white;}
.btn-ghost{background:rgba(255,255,255,0.06);color:var(--text-muted);border:1px solid var(--border);}
.btn-ghost:hover{background:rgba(255,255,255,0.1);color:white;}
.btn-sm{padding:5px 10px;font-size:0.78em;}

/* ===== FORMS ===== */
.app-input,.app-select,.app-textarea{width:100%;padding:10px 12px;background:rgba(255,255,255,0.06)!important;border:1px solid var(--border)!important;border-radius:8px;color:var(--text)!important;font-size:0.9em;font-family:inherit;}
.app-input:focus,.app-select:focus,.app-textarea:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(102,126,234,0.1);}
.app-input::placeholder{color:var(--text-dim);}
.app-textarea{resize:vertical;min-height:80px;}
.app-select option{background:var(--bg-card);color:var(--text);}
.form-label{display:block;font-size:0.78em;font-weight:600;color:var(--text-muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.03em;}
.form-row{margin-bottom:12px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:600px){.form-grid{grid-template-columns:1fr;}}

/* ===== TABS ===== */
.tab-bar{display:flex;gap:4px;overflow-x:auto;padding:4px;background:rgba(255,255,255,0.03);border-radius:10px;margin-bottom:16px;scrollbar-width:none;}
.tab-bar::-webkit-scrollbar{display:none;}
.tab-btn{padding:8px 14px;border:none;background:none;color:#64748b;font-size:0.78em;font-weight:600;cursor:pointer;border-radius:8px;white-space:nowrap;transition:all 0.15s;font-family:inherit;}
.tab-btn:hover{color:#cbd5e1;background:rgba(255,255,255,0.06);}
.tab-btn.active{background:var(--accent);color:#ffffff!important;}

/* ======================================================================
   SONG LIST — HIGH-PRIORITY DARK THEME FIX
   ====================================================================== */
#songDropdown{max-height:50vh;overflow-y:auto;border-radius:10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.15) transparent;}
#songDropdown::-webkit-scrollbar{width:6px;}
#songDropdown::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:3px;}

/* EVERY child div in songDropdown = a song row */
#songDropdown > div {
    display:grid!important;
    grid-template-columns:1fr auto auto 52px!important;
    align-items:center!important;
    gap:6px!important;
    padding:10px 12px!important;
    background:#1e293b!important;
    border:1px solid rgba(255,255,255,0.08)!important;
    border-radius:6px!important;
    margin-bottom:2px!important;
    cursor:pointer!important;
    color:#f1f5f9!important;
}
#songDropdown > div:hover{background:#263248!important;border-color:rgba(102,126,234,0.25)!important;}
#songDropdown > div.selected{background:#2d3a5c!important;border:1px solid #667eea!important;border-width:1px!important;}
#songDropdown > div.selected *{color:inherit!important;}
#songDropdown > div.selected .song-name{color:#c7d2fe!important;}
#songDropdown > div:not(.song-item){display:block!important;grid-template-columns:none!important;background:transparent!important;border:none!important;margin:0!important;padding:0!important;}

/* Song name text — MUST be visible */
#songDropdown > div .song-name,
#songDropdown > div > span:first-child,
.song-item .song-name,
.song-item > span:first-child {
    color:#f1f5f9!important;
    font-weight:500!important;
    font-size:0.92em!important;
    flex:1!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}

/* Band badge pill */
.song-badge{flex-shrink:0!important;margin-left:auto!important;font-size:0.68em!important;padding:3px 10px!important;border-radius:20px!important;font-weight:700!important;text-align:center!important;min-width:36px!important;letter-spacing:0.03em!important;text-transform:uppercase!important;}
.song-badge.gd{background:rgba(239,68,68,0.15);color:#f87171;border:1px solid rgba(239,68,68,0.25);}
.song-badge.jgb{background:rgba(59,130,246,0.15);color:#60a5fa;border:1px solid rgba(59,130,246,0.25);}
.song-badge.wsp{background:rgba(245,158,11,0.15);color:#fbbf24;border:1px solid rgba(245,158,11,0.25);}
.song-badge.phish{background:rgba(16,185,129,0.15);color:#34d399;border:1px solid rgba(16,185,129,0.25);}
.song-badge.abb{background:rgba(236,72,153,0.15);color:#f472b6;border:1px solid rgba(236,72,153,0.25);}
.song-badge.goose{background:rgba(168,85,247,0.15);color:#c084fc;border:1px solid rgba(168,85,247,0.25);}
.song-badge.dmb{background:rgba(20,184,166,0.15);color:#2dd4bf;border:1px solid rgba(20,184,166,0.25);}

/* Harmony + Status badges inline */
.harmony-badge{
    flex-shrink:0!important;
    font-size:0.85em!important;
    color:var(--accent-light)!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    vertical-align:middle!important;
}
.northstar-badge{
    flex-shrink:0!important;
    font-size:0.85em!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    vertical-align:middle!important;
    cursor:default!important;
}
/* Badges container — horizontal row, vertically centered */
.song-badges{
    display:inline-flex!important;
    align-items:center!important;
    gap:3px!important;
    height:100%!important;
    flex-shrink:0!important;
}
/* Status badge cell */
.song-status-cell{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-shrink:0!important;
}
.status-badge{flex-shrink:0!important;white-space:nowrap!important;font-size:0.7em!important;padding:2px 8px!important;border-radius:20px!important;font-weight:700!important;color:white!important;}

/* ===== STEP CARDS ===== */
.container{max-width:960px;margin:0 auto;}
.step-card{background:var(--bg-card)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;padding:20px!important;margin-bottom:16px!important;}
.step-card h2{color:var(--text)!important;margin:0!important;padding:0!important;line-height:1.2!important;}
.step-card p,.subtitle{color:var(--text-muted)!important;margin-bottom:16px!important;}
.search-input::placeholder{color:var(--text-dim)!important;}
.search-input:focus{border-color:var(--accent)!important;outline:none!important;box-shadow:0 0 0 3px rgba(102,126,234,0.15)!important;}
.filter-btn{color:var(--text-muted)!important;border-color:var(--border)!important;background:rgba(255,255,255,0.04)!important;}
.filter-btn.active,.filter-btn:hover{background:var(--accent)!important;color:white!important;border-color:var(--accent)!important;}

/* ===== RESOURCE SECTIONS ===== */
.resource-section{background:rgba(255,255,255,0.02)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;padding:16px!important;margin-bottom:12px!important;}
.section-header h3{color:var(--text)!important;}
.section-header p{color:var(--text-muted)!important;}
.secondary-btn{background:rgba(255,255,255,0.06)!important;color:var(--text-muted)!important;border:1px solid var(--border)!important;border-radius:8px!important;}
.secondary-btn:hover{background:rgba(255,255,255,0.1)!important;color:white!important;}
.primary-btn{background:var(--accent)!important;color:white!important;border-radius:8px!important;}
.chart-btn{background:rgba(255,255,255,0.04)!important;color:var(--text-muted)!important;border:1px solid var(--border)!important;border-radius:8px!important;}
.chart-btn-primary{background:var(--accent)!important;color:white!important;border-color:var(--accent)!important;}
.download-card{background:rgba(255,255,255,0.03)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;padding:16px!important;}

/* ===== ICONS ON DARK BG ===== */
.resource-section [style*="color: #"]{color:var(--text-muted)!important;}
.resource-section button[style]{color:var(--text-muted)!important;}
.version-header button{color:var(--text-muted)!important;}
.note-header [style*="color"]{color:var(--text-muted)!important;}
#practiceTracksContainer [style*="color: #4"]{color:var(--text-muted)!important;}
#spotifyVersionsContainer [style*="color: #4"]{color:var(--text-muted)!important;}

/* ===== REFERENCE VERSIONS ===== */
.version-title,.version-badge{color:var(--text)!important;}
.vote-chip{color:var(--text)!important;background:rgba(255,255,255,0.06)!important;border:1px solid var(--border)!important;border-radius:20px!important;padding:4px 10px!important;font-size:0.8em!important;}
.vote-chip.yes{background:rgba(16,185,129,0.85)!important;color:white!important;border-color:rgba(16,185,129,0.5)!important;font-weight:600!important;}
.spotify-play-btn{color:white!important;display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:20px;border:none;cursor:pointer;font-weight:700;font-size:0.9em;}
.spotify-play-btn *{color:white!important;}
/* Step number + title alignment - belt AND suspenders */
.step-number{background:var(--accent)!important;color:white!important;width:40px;height:40px;min-width:40px;border-radius:50%;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:700;font-size:1.1em;flex-shrink:0;line-height:1;vertical-align:middle;}
.step-card > div:first-child{display:flex!important;align-items:center!important;gap:12px!important;flex-direction:row!important;}
.step-card > div:first-child > *{align-self:center!important;}
.step-card > div:first-child > h2{margin:0!important;padding:0!important;line-height:1.1!important;display:block!important;flex:1;}
.spotify-version-card{background:rgba(255,255,255,0.03)!important;border:1px solid var(--border)!important;border-radius:10px!important;padding:16px!important;}
.spotify-version-card.default{border-color:var(--accent)!important;background:rgba(102,126,234,0.08)!important;}

/* ===== MODALS + METADATA ===== */
.modal{background:rgba(0,0,0,0.7)!important;}
.modal-content{background:var(--bg-card)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;}
.close-btn{color:var(--text-muted)!important;}
.song-metadata{background:rgba(255,255,255,0.03)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;}
.song-metadata span{color:var(--text-muted)!important;}
.song-metadata select,.song-metadata input{background:rgba(255,255,255,0.06)!important;color:var(--text)!important;border:1px solid var(--border)!important;}

/* ===== FORM SECTIONS ===== */
#addTabForm,#practiceTrackAddForm{background:rgba(255,255,255,0.03)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;}
#addTabForm h4,#practiceTrackAddForm h4{color:var(--text)!important;}
#addTabForm label,#practiceTrackAddForm label{color:var(--text-muted)!important;}
#addTabForm input,#practiceTrackAddForm input,#addTabForm select,#practiceTrackAddForm select{background:rgba(255,255,255,0.06)!important;color:var(--text)!important;border:1px solid var(--border)!important;}

/* ===== REHEARSAL + HARMONY CARDS ===== */
.rehearsal-note-card{background:rgba(255,255,255,0.03)!important;border:1px solid var(--border)!important;border-radius:8px!important;padding:12px!important;margin-bottom:8px!important;}
.rehearsal-note-card .note-header{color:var(--text-muted)!important;}
.rehearsal-note-card .note-header strong{color:var(--text)!important;}
.rehearsal-note-card p{color:var(--text-muted)!important;}
.rehearsal-note-card .note-content{color:var(--text,#f1f5f9)!important;}
.harmony-card{background:rgba(255,255,255,0.03)!important;border:1px solid var(--border)!important;border-radius:10px!important;padding:14px!important;margin-bottom:8px!important;}
.harmony-lyric{color:var(--accent-light)!important;font-weight:600!important;}
.part-row{color:var(--text-muted)!important;}
.part-singer{color:var(--accent-light)!important;font-weight:600!important;}
.practice-notes-box{background:rgba(255,255,255,0.03)!important;border:1px solid var(--border)!important;border-radius:8px!important;padding:10px!important;color:var(--text-muted)!important;}

/* ===== STEM BUTTONS ===== */
.stem-button{background:rgba(255,255,255,0.06)!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:8px!important;}
.stem-button:hover{background:rgba(255,255,255,0.1)!important;}

/* ===== DARK THEME CATCH-ALL ===== */
[style*="background: white"],[style*="background:#fff"],[style*="background: #fff"]{background:rgba(255,255,255,0.04)!important;}
[style*="background: #f9fafb"],[style*="background:#f9fafb"],[style*="background: #f7fafc"]{background:rgba(255,255,255,0.03)!important;}
[style*="background: #fffbeb"],[style*="background: #fef3c7"],[style*="background: #fde68a"]{background:rgba(245,158,11,0.1)!important;}
[style*="background: #f5f7ff"]{background:rgba(102,126,234,0.08)!important;}
[style*="background: #f3f4f6"]{background:rgba(255,255,255,0.04)!important;}
[style*="color: #2d3748"],[style*="color:#2d3748"],[style*="color: #1f2937"],[style*="color:#1f2937"],[style*="color: #333"]{color:var(--text)!important;}
[style*="color: #4a5568"],[style*="color:#4a5568"],[style*="color: #4b5563"]{color:var(--text-muted)!important;}
[style*="color: #718096"],[style*="color: #6b7280"],[style*="color: #9ca3af"]{color:var(--text-dim)!important;}
[style*="border-left: 4px solid"]{border-left-color:var(--accent)!important;}
[style*="border: 2px solid #e2e8f0"]{border-color:var(--border)!important;}
[style*="border: 2px solid #e5e7eb"]{border-color:var(--border)!important;}

header{background:transparent!important;border-bottom:none!important;}
header h1{color:var(--text)!important;}
.reset-btn{background:rgba(255,255,255,0.06)!important;color:var(--text-muted)!important;border:1px solid var(--border)!important;border-radius:8px!important;}

/* Footer */
footer{color:var(--text-dim)!important;}
footer p{color:var(--text-dim)!important;}

@media(max-width:500px){
    .form-grid{grid-template-columns:1fr;}
    .topbar{padding:0 10px;}
    .card-grid{grid-template-columns:repeat(2,1fr);}
}

/* Gig notes / performance tips — force dark theme, no yellow */
#gigNotesSection, #gigNotesSection * { background-color: unset; }
#gigNotesSection { background: rgba(255,255,255,0.02) !important; border: 1px solid var(--border) !important; border-left: 1px solid var(--border) !important; }
.gig-notes-box { background: transparent !important; color: var(--text) !important; }
.gig-notes-box ul { list-style: none; padding: 0; margin: 0; }
.gig-notes-box li, .gig-notes-box li span { color: var(--text) !important; }

/* Red backgrounds always get white text — all variants */
[style*="background:#ef4444"],[style*="background: #ef4444"],[style*="background:#dc2626"],[style*="background: #dc2626"],
[style*="background:#ff0000"],[style*="background: #ff0000"],[style*="background:#e00"],[style*="background: #e00"],
[style*="background:red"],[style*="background: red"]{color:white!important;}
[style*="background:#ef4444"] *,[style*="background: #ef4444"] *,[style*="background:#dc2626"] *,[style*="background: #dc2626"] *,
[style*="background:#ff0000"] *,[style*="background: #ff0000"] *{color:white!important;}
.btn-danger,.btn-danger *{color:white!important;}
button[style*="background: #ef4444"],button[style*="background:#ef4444"],
button[style*="background: #dc2626"],button[style*="background:#dc2626"],
button[style*="background: #ff0000"],button[style*="background:#ff0000"]{color:white!important;}
/* Mobile: karaoke & multi-track responsive */
@media(max-width:600px){
    .form-grid{grid-template-columns:1fr!important;}
    [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}
    #mtKaraokeSheet{max-height:35vh!important;}
}

/* Purple/accent backgrounds always white text */
[style*="background:#667eea"],[style*="background: #667eea"],[style*="background:#8b5cf6"],[style*="background: #8b5cf6"]{color:white!important;}
[style*="background:#667eea"] *,[style*="background: #667eea"] *,[style*="background:#8b5cf6"] *,[style*="background: #8b5cf6"] *{color:white!important;}
.spotify-play-btn{color:white!important;}

/* ==========================================================================
   MOBILE RESPONSIVE — COMPREHENSIVE
   Breakpoints: 480px (phone), 640px (large phone / small tablet)
   ========================================================================== */

/* ── Song list: on mobile collapse badges to save space ── */
@media(max-width:640px) {
    /* Song row: name | mic | status | band — tighter */
    #songDropdown > div {
        grid-template-columns: 1fr 22px 70px 40px !important;
        padding: 9px 10px !important;
        gap: 3px !important;
    }
    .song-name, .song-item .song-name { font-size: 0.85em !important; }
    .song-badge { font-size: 0.6em !important; padding: 2px 6px !important; min-width: 28px !important; }
    .status-badge { font-size: 0.62em !important; padding: 2px 5px !important; }

    /* Filter bar: stack into 2-col grid on small screens */
    .filter-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        align-items: stretch !important;
    }
    /* ⓘ icons go full width across both columns */
    .filter-row > span[style*="cursor:help"] { display: none !important; }
    /* Band and status selects fill their grid cell */
    #bandFilter, #statusFilter { width: 100% !important; min-width: unset !important; font-size: 0.78em !important; padding: 6px 8px !important; }
    /* Checkbox labels fill their cell */
    .filter-row label { min-width: unset !important; width: 100% !important; font-size: 0.78em !important; justify-content: center !important; }

    /* Step cards: reduce padding */
    .step-card { padding: 14px !important; }
    .step-card > div:first-child { gap: 8px !important; }
    .step-card > div:first-child > h2 { font-size: 1em !important; }
    .step-number { width: 32px !important; height: 32px !important; min-width: 32px !important; font-size: 0.95em !important; }

    /* Song dropdown: taller scroll area on phone */
    #songDropdown { max-height: 40vh !important; }

    /* Topbar: tighten */
    .topbar { padding: 0 8px !important; }
    .topbar-brand { font-size: 1em !important; }
    .topbar-btn { padding: 5px 8px !important; font-size: 0.72em !important; }

    /* Main content padding */
    .main-content { padding: 10px 10px !important; }
    .app-card { padding: 12px !important; }
    .resource-section { padding: 12px !important; }

    /* Page header */
    .page-header h1 { font-size: 1.15em !important; }

    /* Vote chips — wrap cleanly */
    .votes-container { flex-wrap: wrap !important; gap: 4px !important; }
    .vote-chip { font-size: 0.72em !important; padding: 3px 8px !important; }

    /* Spotify play button full width on mobile */
    .spotify-play-btn { width: 100% !important; justify-content: center !important; margin-top: 8px !important; }

    /* Harmony studio / multi-track */
    .mt-track { padding: 8px !important; }
    
    /* Calendar month nav */
    .btn-sm { font-size: 0.72em !important; padding: 4px 8px !important; }
}

/* ── Very small phones (375px and below) ── */
@media(max-width:400px) {
    #songDropdown > div {
        grid-template-columns: 1fr 20px 60px !important; /* drop band badge column */
        padding: 8px !important;
    }
    /* Hide band badge on very small phones — it's in the filter anyway */
    .song-badge { display: none !important; }
    .song-name { font-size: 0.82em !important; }
    .topbar-brand { font-size: 0.9em !important; }
}

/* ── Fix inline-style grids that don't respond to CSS overrides ── */
@media(max-width:640px) {
    /* Section title row: step number + h2 always horizontal */
    [style*="display:flex"][style*="align-items:center"] > .step-number { flex-shrink: 0 !important; }

    /* Two-column grids inside cards → single column */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

    /* Member crib notes grid → single column */
    [style*="grid-template-columns:1fr auto"],
    [style*="grid-template-columns: 1fr auto"] { grid-template-columns: 1fr !important; }

    /* Song DNA flex rows → stack */
    [style*="display:flex"][style*="gap:12px"][style*="align-items:center"],
    [style*="display:flex"][style*="gap:16px"][style*="align-items:center"] { flex-wrap: wrap !important; }

    /* Chord/key/BPM metadata row */
    .song-metadata, [id="songMetaRow"] { flex-wrap: wrap !important; gap: 6px !important; }

    /* Practice track cards */
    #practiceTracksContainer [style*="display:flex"] { flex-wrap: wrap !important; }

    /* Social media profile tiles: 3-col on phone */
    #socialProfileLinks { grid-template-columns: repeat(3, 1fr) !important; }

    /* Tab bar scrolls horizontally — already set, just enforce */
    .tab-bar { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

    /* Woodshed section headers */
    .section-header h3 { font-size: 0.9em !important; }

    /* Harmony cards */
    .harmony-card { padding: 10px !important; }

    /* Calendar events list — buttons don't overflow */
    #calendarEvents .list-item { flex-wrap: wrap !important; gap: 4px !important; }

    /* Performance Tips bullets */
    #gigNotesContainer li { flex-wrap: wrap !important; color: #f1f5f9 !important; }
    #gigNotesContainer li span { color: #f1f5f9 !important; }
    #gigNotesContainer p { color: #94a3b8 !important; }
    #gigNotesContainer button { color: #f1f5f9 !important; }

    /* Filter checkbox labels: don't force min-width */
    label[style*="min-width:140px"] { min-width: unset !important; flex: 1 !important; }
    
    /* Setlist cards */
    .setlist-card [style*="display:flex"] { flex-wrap: wrap !important; }
}

/* ── Touch targets: ensure all buttons are at least 44px tall on mobile ── */
@media(max-width:640px) {
    .btn, .tab-btn, .menu-item { min-height: 40px !important; }
    .btn-sm { min-height: 34px !important; }
    input[type="checkbox"] { width: 18px !important; height: 18px !important; }
}

/* ── Song metadata row: wrap on mobile ── */
.meta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media(max-width:640px) {
    .meta-row { gap: 8px !important; }
    .meta-item { flex: 1 1 calc(50% - 8px); min-width: 120px; }
    .meta-item .app-select, .meta-item .app-input { width: 100% !important; }
    /* Song structure summary — don't overflow */
    #structureSummary, [id*="structure"] { font-size: 0.78em !important; word-break: break-word !important; }
    /* Search input full width */
    .search-input, #songSearch { font-size: 0.9em !important; }
    /* Step 2 tabs */
    .tab-bar .tab-btn { padding: 7px 10px !important; font-size: 0.72em !important; }
    /* Version cards */
    .spotify-version-card { padding: 12px !important; }
    /* Personal tabs member cards */
    #personalTabsContainer > div > div { padding: 10px !important; }
    /* Harmony studio track controls — stack */
    .mt-track > div[style*="display:flex"] { flex-wrap: wrap !important; }
    /* Setlists page cards */
    #setlistsList .app-card [style*="display:flex"][style*="justify-content:space-between"] { flex-wrap: wrap !important; gap: 6px !important; }
    /* Gigs page */
    #gigsList .app-card [style*="display:flex"][style*="justify-content:space-between"] { flex-wrap: wrap !important; gap: 6px !important; }
    /* Calendar */
    #calendarInner .app-card [style*="grid-template-columns:repeat(7"] { gap: 1px !important; }
    /* Social media profiles 3x2 grid */
    #socialProfileLinks { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
    /* Help page */
    .app-card [style*="grid-template-columns: repeat"] { grid-template-columns: 1fr !important; }
}

/* Ensure topbar sign-in button text doesn't truncate on small screens */
@media(max-width:480px) {
    #googleDriveAuthBtn { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar-right { gap: 4px !important; }
}

/* ── Notation / member icons in Personal Tabs — force visible ── */
#personalTabsContainer [style*="font-size:1.2em"],
#personalTabsContainer span[style*="font-size:1.2"] {
    filter: none !important;
    color: var(--text) !important;
    -webkit-text-fill-color: unset !important;
}

/* ── Song row on mobile: when status badge is present, drop band badge ── */
@media(max-width:580px) {
    /* Mobile: name expands, badges auto-size, hide band badge */
    #songDropdown > div {
        grid-template-columns: 1fr auto auto !important;
    }
    /* Hide band badge on narrow screens — visible in filter dropdown */
    #songDropdown > div .song-badge { display: none !important; }
    #songDropdown > div .status-badge { font-size: 0.62em !important; padding: 2px 5px !important; }
    #songDropdown > div .northstar-badge { font-size: 0.78em !important; }
    #songDropdown > div .harmony-badge { font-size: 0.78em !important; }
}

/* ── Structure section: stack to single col on mobile ── */
@media(max-width:500px) {
    #songStructureContainer > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── Meta row items: don't let status select overflow ── */
@media(max-width:640px) {
    .meta-row { gap: 6px !important; }
    #songStatusSelect { min-width: 100px !important; font-size: 0.78em !important; }
    #leadSingerSelect { min-width: 80px !important; font-size: 0.78em !important; }
    #songKeySelect { min-width: 55px !important; font-size: 0.78em !important; }
    #songBpmInput { width: 52px !important; font-size: 0.78em !important; }
}

/* ── Harmony members row: wraps to new line cleanly ── */
#harmonyMembersRow {
    flex-wrap: wrap !important;
}
#harmonyMembersRow label {
    white-space: nowrap;
}

/* ── Hamburger menu: visible item separators on mobile ── */
@media(max-width:768px) {
    .menu-item {
        border-bottom: 1px solid var(--border) !important;
        border-radius: 0 !important;
        padding: 12px 16px !important;
    }
    .menu-item:last-child { border-bottom: none !important; }
    .menu-section { padding: 0 !important; }
    .menu-section-title {
        border-bottom: 1px solid var(--border) !important;
        border-top: 1px solid var(--border) !important;
        padding: 6px 16px !important;
        margin: 0 !important;
        background: rgba(255,255,255,0.02) !important;
    }
    .slide-menu { width: 260px !important; }
}

/* ── Step card header: DEFINITIVE vertical centering fix ── */
/* Belt, suspenders, AND duct tape */
.step-card > div:first-child,
.step-card > div:first-child[style] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
}
.step-number,
.step-card > div:first-child > .step-number,
.step-card > div:first-child > div.step-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}
.step-card > div:first-child h2,
.step-card > div:first-child > h2 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    align-self: center !important;
    flex: 1 !important;
    display: block !important;
    /* Remove any inherited transforms that could shift it */
    transform: none !important;
    position: static !important;
}

/* ── Other / Custom band badge ── */
.song-badge.other { background:rgba(148,163,184,0.15); color:#94a3b8; border:1px solid rgba(148,163,184,0.25); }

/* ── Custom song indicator in song list ── */
.song-item[data-custom="true"] .song-name::after {
    content: ' ✨';
    font-size: 0.7em;
    opacity: 0.6;
}

/* ── GLOBAL: All colored/filled buttons always get white text ── */
.btn-primary, .btn-primary *,
.btn-danger,  .btn-danger *,
.btn-success, .btn-success *,
.btn-warning, .btn-warning *,
button[style*="background:#"],
button[style*="background:var(--accent)"],
button[style*="background:var(--red)"],
button[style*="background:var(--green)"],
button[style*="background:#ef4444"],
button[style*="background:#10b981"],
button[style*="background:#6366f1"],
button[style*="background:rgba(29,185,84"],
button[style*="background:rgba(255,0,0"],
button[style*="background:rgba(255,85,0"],
button[style*="background:rgba(29"],
.add-resource-btn,
#addPracticeTrackBtn,
.spotify-play-btn {
    color: white !important;
}

/* ── Practice tracks grid: clip overflow ── */
#practiceTracksContainer [style*="grid-template-columns:1fr 1fr"] > div,
#practiceTracksContainer > div > div {
    overflow: hidden;
    min-width: 0;
}
#practiceTracksContainer a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}
/* Force the whole practice tracks container to not overflow its card */
#practiceTracksContainer {
    overflow: hidden;
    max-width: 100%;
}
.resource-section {
    overflow: hidden;
    max-width: 100%;
}

/* ── Connected button: hide text label on very small screens ── */
@media(max-width:400px) {
    .conn-label { display: none !important; }
    .hamburger svg { width: 22px !important; height: 22px !important; display: block !important; }
}
/* ── Ensure hamburger SVG always renders ── */
.hamburger svg { width: 22px; height: 22px; display: block; flex-shrink: 0; }

/* ==========================================================================
   MOBILE POLISH SPRINT — iPhone small (375px) targeted fixes
   ========================================================================== */

/* ── Playlist player modal: compact on small phones ── */
@media(max-width:480px) {
    /* Now Playing card: tighter padding */
    #plPlayerModal > div:nth-child(3) {
        padding: 14px 14px 12px !important;
    }
    /* Now Playing title: slightly smaller */
    #plPlayerModal [style*="font-size:1.15em"] {
        font-size: 1em !important;
    }
    /* Party bar: stack presence + buttons */
    #plPartyBar > div {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    /* Queue rows: tighter */
    #plQueueList > div {
        padding: 8px 12px !important;
    }
    /* Player action buttons: wrap cleanly */
    #plPlayerModal [style*="display:flex"][style*="flex-wrap:wrap"] {
        gap: 6px !important;
    }
    /* Start Party button full-width on small screens */
    #plPlayerModal button[onclick="plPartyStart()"] {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 4px !important;
    }
}

/* ── Ref version vote chips: wrap to 2-3 per row on mobile ── */
@media(max-width:480px) {
    .votes-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 5px !important;
    }
    .vote-chip {
        text-align: center !important;
        justify-content: center !important;
        font-size: 0.75em !important;
        padding: 6px 4px !important;
        min-height: 36px !important;
    }
    /* Ref version card: full-width play button */
    .spotify-version-card .spotify-play-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    /* Ref version card: reduce padding */
    .spotify-version-card {
        padding: 12px !important;
    }
}

/* ── Song detail step cards: reduce padding on small phones ── */
@media(max-width:480px) {
    .step-card {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }
    .step-card > p.subtitle {
        font-size: 0.8em !important;
        margin-bottom: 10px !important;
    }
    .resource-section {
        padding: 10px !important;
        margin-bottom: 8px !important;
    }
    .section-header h3 {
        font-size: 0.88em !important;
    }
    .section-header p {
        font-size: 0.78em !important;
    }
}

/* ── Topbar: hide "Connect" text on very small screens, show icon only ── */
@media(max-width:375px) {
    #googleDriveAuthBtn .conn-text { display: none !important; }
    .topbar-brand { font-size: 0.92em !important; }
}

/* ── Playlist index: card action buttons wrap on small phones ── */
@media(max-width:480px) {
    /* Playlist card button row: stack to 2 rows */
    #plList .app-card [style*="display:flex"][style*="flex-shrink:0"] {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: 4px !important;
        max-width: 80px !important;
    }
    /* Playlist name: allow wrapping */
    #plList .app-card [style*="font-weight:700"] {
        white-space: normal !important;
        word-break: break-word !important;
    }
    /* Progress bars: tighter */
    #plList .app-card [style*="gap:5px"] {
        gap: 3px !important;
    }
}

/* ── Practice track grid: single column on small phones ── */
@media(max-width:480px) {
    #practiceTracksContainer > div[style*="grid-template-columns:1fr 1fr"],
    #practiceTracksContainer > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Audio player: don't let it overflow */
    #practiceTracksContainer audio {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ── Add ref version modal: full-screen on small phones ── */
@media(max-width:480px) {
    #addRefModal > div {
        max-height: 92vh !important;
        overflow-y: auto !important;
        padding: 16px !important;
        border-radius: 14px 14px 0 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    #addRefModal {
        align-items: flex-end !important;
    }
}

/* ── Harmony member checkboxes: 3-col grid on mobile ── */
@media(max-width:480px) {
    #harmonyMembersRow {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 4px !important;
    }
    #harmonyMembersRow label {
        justify-content: center !important;
        font-size: 0.78em !important;
        padding: 4px 6px !important;
        text-align: center !important;
    }
}

/* ── Meta row selects: proper sizing on 375px ── */
@media(max-width:375px) {
    #songStatusSelect { font-size: 0.72em !important; padding: 4px 4px !important; min-width: 88px !important; }
    #songKeySelect    { font-size: 0.72em !important; padding: 4px 4px !important; min-width: 48px !important; }
    #songBpmInput     { width: 44px !important; font-size: 0.72em !important; padding: 4px !important; }
    #leadSingerSelect { font-size: 0.72em !important; min-width: 72px !important; }
}

/* ── Setlist cards: action buttons don't overflow ── */
@media(max-width:480px) {
    #setlistsList .app-card {
        padding: 10px !important;
    }
    #setlistsList .app-card [style*="justify-content:space-between"] {
        gap: 6px !important;
    }
    #setlistsList .app-card h3 {
        font-size: 0.9em !important;
    }
}

/* ── Gig cards: same treatment ── */
@media(max-width:480px) {
    #gigsList .app-card {
        padding: 10px !important;
    }
    #gigsList .app-card [style*="justify-content:space-between"] {
        gap: 6px !important;
    }
}

/* ── Song search input: bigger tap target on mobile ── */
@media(max-width:480px) {
    #songSearch, .search-input {
        font-size: 16px !important; /* prevents iOS auto-zoom on focus */
        padding: 12px !important;
    }
}

/* ── Prevent iOS font size auto-zoom on ALL inputs ── */
@media(max-width:768px) {
    input, select, textarea {
        font-size: max(16px, 0.9em) !important;
    }
}

/* ── HIGH CONTRAST: Force white text on ALL colored buttons ── */
/* Catches every purple, green, red, or filled button regardless of specificity */
button[style*="background:#667eea"],
button[style*="background: #667eea"],
button[style*="background:#6366f1"],
button[style*="background: #6366f1"],
button[style*="background:#818cf8"],
button[style*="background: #818cf8"],
button[style*="background:#5a6fd6"],
button[style*="background: #5a6fd6"],
button[style*="background:#10b981"],
button[style*="background: #10b981"],
button[style*="background:#1db954"],
button[style*="background: #1db954"],
button[style*="background:#ef4444"],
button[style*="background: #ef4444"],
button[style*="background:#dc2626"],
button[style*="background: #dc2626"],
button[style*="background:#ff0000"],
button[style*="background: #ff0000"],
button[style*="background:#fc3c44"],
button[style*="background: #fc3c44"],
button[style*="background:#428bca"],
button[style*="background: #428bca"],
button[style*="background:#ff7700"],
button[style*="background: #ff7700"],
button[style*="background:#000000"],
button[style*="background: #000000"],
button[style*="background:var(--accent)"],
button[style*="background: var(--accent)"],
button[style*="background:var(--green)"],
button[style*="background: var(--green)"],
button[style*="background:var(--red)"],
button[style*="background: var(--red)"],
.btn-primary,
.btn-primary *,
.btn-danger,
.btn-success,
.chart-btn-primary,
.chart-btn-primary * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* ── Spotify play button: force white text always ── */
.spotify-play-btn,
.spotify-play-btn *,
.spotify-play-btn span,
.spotify-play-btn svg {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    fill: #ffffff !important;
}

/* Harmony singer chips — wrap on mobile */
.harmony-learning-card [style*="margin-bottom:10px"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}
.harmony-singer-chip {
    flex-shrink: 0 !important;
    max-width: 100% !important;
}