/* ─────────────────────────────────────────────────────────────
   bbs-themes.css — user-selectable color themes
   Applied via html[data-bbs-theme="..."] attribute.
   Saved per visitor in localStorage ("bbs_theme").
   Default theme = no overrides (purple/#0d1117 as designed).
   ───────────────────────────────────────────────────────────── */

/* ── Theme palettes ─────────────────────────────────────────── */
html[data-bbs-theme="ocean"] {
    --bbs-bg:      #0a1220;
    --bbs-bg-2:    #0e1830;
    --bbs-accent:  #2f81f7;
    --bbs-accent-2:#79b8ff;
}
html[data-bbs-theme="emerald"] {
    --bbs-bg:      #0a1410;
    --bbs-bg-2:    #0e1d17;
    --bbs-accent:  #2ea866;
    --bbs-accent-2:#7ee2b8;
}
html[data-bbs-theme="crimson"] {
    --bbs-bg:      #170b10;
    --bbs-bg-2:    #221018;
    --bbs-accent:  #e8537a;
    --bbs-accent-2:#ff9bb3;
}
html[data-bbs-theme="amber"] {
    --bbs-bg:      #16100a;
    --bbs-bg-2:    #211810;
    --bbs-accent:  #f0883e;
    --bbs-accent-2:#ffc680;
}

/* ── Apply vars (only for non-default themes) ───────────────── */
html[data-bbs-theme="ocean"] body,
html[data-bbs-theme="emerald"] body,
html[data-bbs-theme="crimson"] body,
html[data-bbs-theme="amber"] body,
html[data-bbs-theme="ocean"],
html[data-bbs-theme="emerald"],
html[data-bbs-theme="crimson"],
html[data-bbs-theme="amber"] {
    background: var(--bbs-bg) !important;
}

html[data-bbs-theme="ocean"] #site-footer,
html[data-bbs-theme="emerald"] #site-footer,
html[data-bbs-theme="crimson"] #site-footer,
html[data-bbs-theme="amber"] #site-footer {
    background: var(--bbs-bg) !important;
}

/* center content = white (bbs-light-center.css) — themes color header/footer/player/accent only */

/* ── Accent: play buttons / hero CTA / badges ───────────────── */
html[data-bbs-theme="ocean"] .bbs-album-play-btn,
html[data-bbs-theme="emerald"] .bbs-album-play-btn,
html[data-bbs-theme="crimson"] .bbs-album-play-btn,
html[data-bbs-theme="amber"] .bbs-album-play-btn,
html[data-bbs-theme="ocean"] .bbs-artist-play-btn,
html[data-bbs-theme="emerald"] .bbs-artist-play-btn,
html[data-bbs-theme="crimson"] .bbs-artist-play-btn,
html[data-bbs-theme="amber"] .bbs-artist-play-btn,
html[data-bbs-theme="ocean"] .bbs-category-play-btn,
html[data-bbs-theme="emerald"] .bbs-category-play-btn,
html[data-bbs-theme="crimson"] .bbs-category-play-btn,
html[data-bbs-theme="amber"] .bbs-category-play-btn {
    background: var(--bbs-accent) !important;
}

/* ── Accent: brand icon ─────────────────────────────────────── */
html[data-bbs-theme="ocean"] .bbs-brand-icon,
html[data-bbs-theme="emerald"] .bbs-brand-icon,
html[data-bbs-theme="crimson"] .bbs-brand-icon,
html[data-bbs-theme="amber"] .bbs-brand-icon {
    background: linear-gradient(135deg, var(--bbs-accent), var(--bbs-accent-2)) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.45) !important;
}

/* ── Accent: player shuffle/repeat active + progress bar ────── */
html[data-bbs-theme="ocean"] .jp-shuffle.bbs-active svg,
html[data-bbs-theme="emerald"] .jp-shuffle.bbs-active svg,
html[data-bbs-theme="crimson"] .jp-shuffle.bbs-active svg,
html[data-bbs-theme="amber"] .jp-shuffle.bbs-active svg,
html[data-bbs-theme="ocean"] .jp-repeat.bbs-active svg,
html[data-bbs-theme="emerald"] .jp-repeat.bbs-active svg,
html[data-bbs-theme="crimson"] .jp-repeat.bbs-active svg,
html[data-bbs-theme="amber"] .jp-repeat.bbs-active svg {
    fill: var(--bbs-accent) !important;
}

html[data-bbs-theme="ocean"] .jp-play-bar,
html[data-bbs-theme="emerald"] .jp-play-bar,
html[data-bbs-theme="crimson"] .jp-play-bar,
html[data-bbs-theme="amber"] .jp-play-bar,
html[data-bbs-theme="ocean"] .jp-volume-bar-value,
html[data-bbs-theme="emerald"] .jp-volume-bar-value,
html[data-bbs-theme="crimson"] .jp-volume-bar-value,
html[data-bbs-theme="amber"] .jp-volume-bar-value {
    background: var(--bbs-accent) !important;
}

/* ─────────────────────────────────────────────────────────────
   Theme switcher UI (side button + panel)
   ───────────────────────────────────────────────────────────── */
#bbs-theme-btn {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9990;
    width: 42px;
    height: 42px;
    border-radius: 10px 0 0 10px;
    background: #161b22;
    border: 1px solid #30363d;
    border-right: none;
    color: #c9d1d9;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -2px 2px 12px rgba(0,0,0,.4);
    transition: background .2s, width .2s;
}
#bbs-theme-btn:hover { background: #21262d; width: 48px; }

#bbs-theme-panel {
    position: fixed;
    right: -230px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9991;
    width: 210px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 14px 0 0 14px;
    border-right: none;
    padding: 16px 14px;
    box-shadow: -6px 4px 28px rgba(0,0,0,.55);
    transition: right .3s ease;
}
#bbs-theme-panel.open { right: 0; }
#bbs-theme-panel h6 {
    color: #c9d1d9;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 12px;
}
.bbs-theme-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s;
    margin-bottom: 4px;
}
.bbs-theme-opt:hover { background: #21262d; }
.bbs-theme-opt.active { border-color: #8b949e; background: #21262d; }
.bbs-theme-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.15);
}
.bbs-theme-opt span.bbs-theme-name {
    color: #c9d1d9;
    font-size: .82rem;
    font-weight: 500;
}
.bbs-theme-opt.active span.bbs-theme-name::after {
    content: " ✓";
    color: #2ea866;
}

@media (max-width: 767px) {
    #bbs-theme-btn { width: 38px; height: 38px; top: 62%; }
    #bbs-theme-panel { top: 62%; }
}