/* ─────────────────────────────────────────────────────────────
   bbs-daynight.css — manual Light / Dark mode (Adonis reference)
   Toggled via  html[data-mode="light"|"dark"]  (header 🌙/☀️ button).
   Saved per visitor in localStorage ("bbs_mode"). Default = light.

   DARK mode  = the original site chrome (dark footer, light header
                text) — i.e. the inline <style> defaults. No rules
                needed here; absence of light overrides = dark.
   LIGHT mode = template look: header text/icons → dark-readable,
                footer → light. Center content stays white in both.
   Loaded LAST so these win. Higher specificity (html[data-mode])
   + !important beats the inline header/footer rules.
   ───────────────────────────────────────────────────────────── */

/* ═══════════════ LIGHT MODE — header chrome ═══════════════════ */

/* Nav links → readable dark on light */
html[data-mode="light"] .bbs-center-nav .nav-link,
html[data-mode="light"] .bbs-center-nav .m-item {
    color: #4a4a6a !important;
}
html[data-mode="light"] .bbs-center-nav .menu-item.active .m-item,
html[data-mode="light"] .bbs-center-nav .nav-link:hover {
    color: #6c5ce7 !important;
}

/* Search icon → dark */
html[data-mode="light"] #site-header #btn-search-4 svg,
html[data-mode="light"] #site-header .bbs-search-btn svg {
    fill: #1e1e3a !important;
}
html[data-mode="light"] #site-header #btn-search-4:hover svg,
html[data-mode="light"] #site-header .bbs-search-btn:hover svg {
    fill: #6c5ce7 !important;
}
html[data-mode="light"] .bbs-search-btn { color: #1e1e3a !important; }
html[data-mode="light"] .bbs-search-btn:hover { background: rgba(108,92,231,.10); }

/* Brand text gradient → purple→dark (was white→lilac) */
html[data-mode="light"] .bbs-brand-text {
    background: linear-gradient(135deg, #6c5ce7, #1e1e3a);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Account login/signup → dark-on-light */
html[data-mode="light"] .bbs-acct-login { color: #4a4a6a !important; }
html[data-mode="light"] .bbs-acct-login:hover { color: #6c5ce7 !important; }

/* ═══════════════ LIGHT MODE — footer chrome ══════════════════ */
html[data-mode="light"] #site-footer { background: #f4f6fb !important; }
html[data-mode="light"] #site-footer footer { border-top-color: #e6ecf5 !important; }
html[data-mode="light"] #site-footer .inactive-color,
html[data-mode="light"] #site-footer p,
html[data-mode="light"] #site-footer li a { color: #4a4a6a !important; }
html[data-mode="light"] #site-footer li a:hover { color: #6c5ce7 !important; }
html[data-mode="light"] #site-footer h6 { color: #8888aa !important; }
html[data-mode="light"] #site-footer strong { color: #1e1e3a !important; }

/* ═══════════════ Header light surface (subtle) ════════════════
   Give the light-mode header a faint glass strip so dark text reads
   even where the page behind is white. */
html[data-mode="light"] #site-header {
    background: rgba(244,246,251,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ═══════════════ HEADER STACKING CONTEXT ═══════════════════════
   #site-header wraps both the player and the nav bar. Without a
   z-index the entire block has no stacking context, so the hero
   (#site-content) paints over the dropdown regardless of the
   inner element z-index values. Give #site-header a stacking
   context above page content so the dropdown is always on top. */
#site-header {
    position: relative;
    /* z-index: 500; — removed: was causing header to appear above playlist panel overlay */
}
#site-header header.site-header,
header.site-header {
    position: relative;
    z-index: 1;
}

/* ═══════════════ COMPACT HEADER — both modes ═══════════════════
   Bootstrap mb-3/mb-md-4/mt-3 on .header-inner creates ~40-56px
   of wasted space. Override to a tight 8px top+bottom. */
#site-header .header-inner {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
/* nav list: Bootstrap mt-3/mt-xl-0 → always 0 */
#site-header .bbs-center-nav .navbar-nav {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* nav link padding tighter */
#site-header .bbs-center-nav .nav-link,
#site-header .bbs-center-nav .m-item {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: .88rem !important;
}
/* hide the decorative <hr> under nav (takes vertical room) */
#site-header .bbs-center-nav .border-hr { display: none !important; }

/* ═══════════════ Slim single-row player — progress alignment ══
   Progress bar moved into its own column (single row). Kill the
   legacy negative margin so the seek bar centers with time labels. */
.adonis-player-wrap .adonis-player .jp-progress {
    margin-top: 0 !important;
    width: 100% !important;
}

/* ═══════════════ Toggle button (header) ══════════════════════ */
.bbs-mode-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; border: none; cursor: pointer;
    border-radius: 50%; background: rgba(255,255,255,.10);
    color: #fff; font-size: 1.05rem; line-height: 1; flex-shrink: 0;
    transition: background .15s, transform .12s;
}
.bbs-mode-toggle:hover { background: rgba(108,92,231,.22); transform: scale(1.06); }
.bbs-mode-toggle:active { transform: scale(.92); }
html[data-mode="light"] .bbs-mode-toggle {
    background: rgba(108,92,231,.10); color: #6c5ce7;
}
html[data-mode="light"] .bbs-mode-toggle:hover { background: rgba(108,92,231,.18); }
/* icon = the mode you SWITCH TO (convention + template):
   dark mode shows ☀️ (click → light/white), light mode shows 🌙 (click → dark) */
.bbs-mode-toggle .bbs-mode-sun  { display: inline; }
.bbs-mode-toggle .bbs-mode-moon { display: none; }
html[data-mode="light"] .bbs-mode-toggle .bbs-mode-sun  { display: none; }
html[data-mode="light"] .bbs-mode-toggle .bbs-mode-moon { display: inline; }

/* ═══════════════════════════════════════════════════════════════════
   FULL LIGHT / DARK THEME — exact AdonisMusicSite template palettes
   LIGHT  bg #f4f6fb · surface #fff · card #fff · text #1e1e3a · muted #8888aa
   DARK   bg #12121e · surface #1e1e32 · card #252540 · text #eeeeff · muted #707090
   accent #6c5ce7 (both). Smooth 0.3s transitions on every surface.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Smooth transitions (both modes) ── */
body, #site-content, #site-header, #site-footer,
.adonis-player-wrap, .adonis-player-wrap .adonis-playlist,
#site-content .bbs-grid-card, #site-content .bbs-grid-artist,
#site-content .hover-bg-item, #site-content .bbs-home-track,
#site-content .bbs-view-grid-items > div > a.d-block {
    transition: background .3s cubic-bezier(.4,0,.2,1),
                color .3s cubic-bezier(.4,0,.2,1),
                border-color .3s cubic-bezier(.4,0,.2,1),
                box-shadow .3s cubic-bezier(.4,0,.2,1) !important;
}

/* ═══════════════ LIGHT MODE — body tint (template #f4f6fb) ═══════════ */
html[data-mode="light"] body,
html[data-mode="light"] #page-wrapper { background: #f4f6fb !important; }

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE — full template dark palette on every section
   ═══════════════════════════════════════════════════════════════════ */

/* base surfaces */
html[data-mode="dark"] body,
html[data-mode="dark"] #page-wrapper,
html[data-mode="dark"] .page-wrapper,
html[data-mode="dark"] #site-wrapper { background: #12121e !important; }
html[data-mode="dark"] #site-content,
html[data-mode="dark"][data-bbs-theme] #site-content { background: #12121e !important; }

/* headings + body text */
html[data-mode="dark"] #site-content h1,
html[data-mode="dark"] #site-content h2,
html[data-mode="dark"] #site-content h3,
html[data-mode="dark"] #site-content h4,
html[data-mode="dark"] #site-content h5,
html[data-mode="dark"] #site-content h6 { color: #eeeeff !important; }
html[data-mode="dark"] #site-content p,
html[data-mode="dark"] #site-content li,
html[data-mode="dark"] #site-content span:not(.bbs-like-icon):not(.adonis-icon) { color: #b0b0d0 !important; }
/* inline dark-navy text → light */
html[data-mode="dark"] #site-content [style*="color:#1e1e3a"],
html[data-mode="dark"] #site-content [style*="color: #1e1e3a"] { color: #eeeeff !important; }

/* GRID CARDS (trending / albums / artists / listing pages) */
html[data-mode="dark"] #site-content .bbs-grid-card,
html[data-mode="dark"] #site-content .bbs-grid-artist,
html[data-mode="dark"] #site-content .bbs-view-grid-items > div > a.d-block:not(.box-rounded) {
    background: #252540 !important;
    border-color: #333355 !important;
}
html[data-mode="dark"] #site-content .bbs-grid-card:hover,
html[data-mode="dark"] #site-content .bbs-grid-artist:hover,
html[data-mode="dark"] #site-content .bbs-view-grid-items > div > a.d-block:not(.box-rounded):hover {
    background: #2e2e4a !important;
}
html[data-mode="dark"] #site-content .bbs-grid-card .bbs-grid-title,
html[data-mode="dark"] #site-content .bbs-grid-card > a > p,
html[data-mode="dark"] #site-content .bbs-grid-card > p:first-of-type,
html[data-mode="dark"] #site-content .bbs-grid-artist > p:first-of-type,
html[data-mode="dark"] #site-content .bbs-view-grid-items h6 { color: #eeeeff !important; }

/* LIST ROWS (latest tracks, listing-page list view) */
html[data-mode="dark"] #site-content .hover-bg-item,
html[data-mode="dark"] #site-content li.hover-bg-item,
html[data-mode="dark"] #site-content .bbs-home-track:not(.bbs-grid-card) {
    background: #1e1e32 !important;
    border-color: #333355 !important;
}
html[data-mode="dark"] #site-content .hover-bg-item:hover,
html[data-mode="dark"] #site-content .bbs-home-track:not(.bbs-grid-card):hover {
    background: #2e2e4a !important;
}

/* PLAYER bar → dark frosted glass via ::before (same reason as light:
   avoid backdrop-filter containing block trapping the fixed drawer) */
html[data-mode="dark"] .adonis-player-wrap {
    background: transparent !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,.35), 0 2px 22px rgba(0,0,0,.45) !important;
}
html[data-mode="dark"] .adonis-player-wrap::before {
    background: rgba(18,18,30,0.82);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(162,155,254,0.12);
}
html[data-mode="dark"] .adonis-player-wrap .current-item .jp-title,
html[data-mode="dark"] .adonis-player-wrap .current-item .jp-title a { color: #eeeeff !important; }
html[data-mode="dark"] .adonis-player-wrap .current-item .artist-name,
html[data-mode="dark"] .adonis-player-wrap .current-item .artist-name a,
html[data-mode="dark"] .adonis-player-wrap .jp-time,
html[data-mode="dark"] .adonis-player-wrap .jp-duration,
html[data-mode="dark"] .adonis-player-wrap .jp-current-time { color: #707090 !important; }
html[data-mode="dark"] .adonis-player-wrap .jp-previous svg,
html[data-mode="dark"] .adonis-player-wrap .jp-next svg,
html[data-mode="dark"] .adonis-player-wrap .jp-shuffle svg,
html[data-mode="dark"] .adonis-player-wrap .jp-repeat svg,
html[data-mode="dark"] .adonis-player-wrap .toggle-off-canvas svg,
html[data-mode="dark"] .adonis-player-wrap .adonis-mute-control svg { fill: #eeeeff !important; }
html[data-mode="dark"] .adonis-player-wrap .jp-seek-bar { background: #333355 !important; }

/* PLAYLIST DRAWER → dark frosted glass */
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist,
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist-player,
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist-player.player-bg-yellow {
    background: rgba(18,18,30,0.88) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-left: 1px solid rgba(162,155,254,0.12) !important;
    box-shadow: -8px 0 40px rgba(0,0,0,.35) !important;
}
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-title,
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-title a,
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .player-details h3 { color: #eeeeff !important; }
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .close-offcanvas svg,
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-previous svg,
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-next svg { fill: #eeeeff !important; }

/* drawer playlist (track list) — readable text in dark mode */
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-playlist,
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-playlist a,
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-playlist li,
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-playlist .title,
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-playlist .song-title,
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-playlist .jp-title { color: #eeeeff !important; }
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-playlist .inactive-color,
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-playlist small,
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-playlist .artist,
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-playlist .artist-name,
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-playlist [class*="time"],
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-playlist [class*="duration"] { color: #9a9ac0 !important; }
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-playlist li.jp-playlist-current a,
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-playlist .jp-playlist-current .title { color: #a29bfe !important; }
html[data-mode="dark"] .adonis-player-wrap .adonis-playlist .jp-playlist li:hover { background: #252540 !important; }

/* ACCOUNT PANEL (dashboard/library/playlists/history) + any inline white
   card → dark. These pages use inline background:#fff + #e6ecf5 borders +
   #1e1e3a/#4a4a6a text; dark mode flipped text light but cards stayed white
   (faint). Theme the inline white cards dark. */
html[data-mode="dark"] #site-content [style*="background:#fff"],
html[data-mode="dark"] #site-content [style*="background: #fff"],
html[data-mode="dark"] #site-content [style*="background:#ffffff"],
html[data-mode="dark"] #site-content [style*="background: #ffffff"] { background: #1e1e32 !important; }
html[data-mode="dark"] #site-content [style*="border:1px solid #e6ecf5"],
html[data-mode="dark"] #site-content [style*="border: 1px solid #e6ecf5"] { border-color: #333355 !important; }
html[data-mode="dark"] #site-content [style*="color:#4a4a6a"],
html[data-mode="dark"] #site-content [style*="color: #4a4a6a"] { color: #b0b0d0 !important; }
/* light lavender badge bg → dark tint (accent text stays) */
html[data-mode="dark"] #site-content [style*="background:#f3f0ff"],
html[data-mode="dark"] #site-content [style*="background: #f3f0ff"] { background: #2a2350 !important; }
/* other near-white card bgs (gradient "Start listening" #faf9ff, empty-state #fcfcfe) → dark */
html[data-mode="dark"] #site-content [style*="#faf9ff"],
html[data-mode="dark"] #site-content [style*="#fcfcfe"] { background: #1e1e32 !important; background-image: none !important; }
/* dashed light border (empty-state card) → dark */
html[data-mode="dark"] #site-content [style*="#e3e7ee"],
html[data-mode="dark"] #site-content [style*="#e2e7ee"] { border-color: #333355 !important; }
/* account tabs (_nav) readable */
html[data-mode="dark"] #site-content .bbs-content a.no-history { color: #b0b0d0 !important; }

/* FOOTER → dark */
html[data-mode="dark"] #site-footer { background: #12121e !important; }
html[data-mode="dark"] #site-footer p,
html[data-mode="dark"] #site-footer li a,
html[data-mode="dark"] #site-footer .inactive-color { color: #b0b0d0 !important; }
html[data-mode="dark"] #site-footer strong { color: #eeeeff !important; }

/* TOOLBARS (sort select + grid/list toggle) → dark */
html[data-mode="dark"] #site-content select[onchange] {
    background: #252540 !important; color: #eeeeff !important; border-color: #333355 !important;
}
html[data-mode="dark"] #site-content .bbs-view-btn {
    background: #252540 !important; color: #b0b0d0 !important; border-color: #333355 !important;
}
html[data-mode="dark"] #site-content .bbs-view-btn.is-active {
    background: #6c5ce7 !important; color: #fff !important; border-color: #6c5ce7 !important;
}

/* dark image placeholders stay dark (already #1e1e32) — leave as-is */
/* category pills in dark */
html[data-mode="dark"] #site-content .bbs-cat-pill {
    color: #b0b0d0 !important; border-color: #333355 !important;
}
html[data-mode="dark"] #site-content .bbs-cat-pill:hover {
    background: #6c5ce7 !important; border-color: #6c5ce7 !important; color: #fff !important;
}

/* skeleton shimmer → dark variant in dark mode */
html[data-mode="dark"] .sk {
    background: linear-gradient(90deg, #1e1e32 25%, #252b3d 50%, #1e1e32 75%) !important;
}

/* volume track (::before) dark in dark mode */
html[data-mode="dark"] .adonis-player-wrap .jp-volume-controls .jp-volume-bar::before { background: #333355 !important; }
html[data-mode="dark"] .adonis-player-wrap .jp-seek-bar { background: #333355 !important; }

/* ═══════════════ CONTACT PAGE — dark mode ════════════════════════════
   Cards + form were hardcoded white; in dark mode the light heading text
   became invisible on white. Theme the whole contact page dark. */
html[data-mode="dark"] #site-content .bbs-contact-card {
    background: #1e1e32 !important; border-color: #333355 !important;
}
html[data-mode="dark"] #site-content .bbs-contact-card:hover { background: #252540 !important; }
html[data-mode="dark"] #site-content .bbs-contact-val { color: #eeeeff !important; }
html[data-mode="dark"] #site-content .bbs-contact-label { color: #8888aa !important; }
/* right form card (inline background:#fff) */
html[data-mode="dark"] #site-content .col-lg-7 > div[style*="background:#fff"],
html[data-mode="dark"] #site-content .col-lg-7 > div[style*="background: #fff"] {
    background: #1e1e32 !important; border-color: #333355 !important;
}
html[data-mode="dark"] #site-content .bbs-form-label { color: #b0b0d0 !important; }
html[data-mode="dark"] #site-content .col-lg-7 input,
html[data-mode="dark"] #site-content .col-lg-7 textarea,
html[data-mode="dark"] #site-content .bbs-input,
html[data-mode="dark"] #site-content .form-control {
    background: #252540 !important; border-color: #333355 !important; color: #eeeeff !important;
}
html[data-mode="dark"] #site-content .col-lg-7 input::placeholder,
html[data-mode="dark"] #site-content .col-lg-7 textarea::placeholder { color: #707090 !important; }
html[data-mode="dark"] #site-content .bbs-social-btn {
    background: #252540 !important; border-color: #333355 !important; color: #b0b0d0 !important;
}
html[data-mode="dark"] #site-content .bbs-social-btn:hover { background: #6c5ce7 !important; color: #fff !important; }