/* ============================================================================
 * NeonWave × Lucid — every button, in Lucid's four families
 * (app.scss "Global" + colors.css encore sets, Spicetify Lucid by sanoojes, AGPL-3.0).
 *  1. Primary  (encore bright-accent): clr-primary / on-primary, 8px → 32px + colour swap
 *  2. Secondary: transparent, default border, 8px → 16px + hover border
 *  3. Chips: background-highlight + border, 8px → 16px; selected = primary-container
 *  4. Icon buttons: no chrome, text-subdued → text-base, active = primary
 * Loaded after neon-lucid.css.
 * ========================================================================== */

/* Reset the old neon look (gradients, glows, lifts) on every button */
body button, body .btn-glow, body [class*="-btn"], body [class*="-pill"], body [class*="-chip"] {
    text-shadow: none !important;
    letter-spacing: 0 !important;
    font-family: inherit;
}
body button:focus-visible { outline: 2px solid var(--clr-primary) !important; outline-offset: 2px; }

/* ── 1. Primary ─────────────────────────────────────────────────────────── */
body .btn-glow,
body .premium-action-btn.is-primary,
body .updater-install-btn,
body .spotify-connect-btn,
body .weekly-recap-open-btn,
body .weekly-recap-reveal-btn,
body .karaoke-play-btn,
body .mp-play-btn,
body #musicOnboardingNext,
body .artist-profile-follow-btn:not(.is-following):not(.followed),
body .artist-follow-btn:not(.is-following):not(.followed) {
    background: var(--clr-primary) !important;
    background-image: none !important;
    color: var(--clr-on-primary) !important;
    border: 0 !important;
    border-radius: var(--br) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    min-height: 40px;
    padding: 0 20px !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 225ms ease-in !important;
    animation: none !important;
    cursor: pointer;
}
body .btn-glow:hover:not(:disabled),
body .premium-action-btn.is-primary:hover,
body .updater-install-btn:hover,
body .spotify-connect-btn:hover,
body .weekly-recap-open-btn:hover,
body .weekly-recap-reveal-btn:hover,
body .karaoke-play-btn:hover,
body .mp-play-btn:hover,
body #musicOnboardingNext:hover:not(:disabled),
body .artist-profile-follow-btn:not(.is-following):not(.followed):hover,
body .artist-follow-btn:not(.is-following):not(.followed):hover {
    background: var(--clr-on-primary) !important;
    color: var(--clr-primary) !important;
    border-radius: var(--xl-br) !important;
    transform: none !important;
    box-shadow: none !important;
}
body .btn-glow:disabled, body #musicOnboardingNext:disabled {
    background: rgba(var(--clr-on-surface-rgb), 0.12) !important;
    color: rgba(var(--clr-on-surface-rgb), 0.38) !important;
    cursor: default;
}
body .btn-glow svg, body .premium-action-btn.is-primary svg { fill: currentColor; stroke: currentColor; }

/* Round play buttons on cards / shortcuts (Spotify card play button, Lucid primary) */
body .shortcut-play-btn, body .play-btn, body .card-play-btn, body .album-card-play, body .track-card .play-overlay {
    background: var(--clr-primary) !important; color: var(--clr-on-primary) !important;
    border: 0 !important; border-radius: 50% !important; box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3) !important;
    transition: all 225ms ease-in !important;
}
body .shortcut-play-btn:hover, body .play-btn:hover, body .card-play-btn:hover {
    background: var(--clr-on-primary) !important; color: var(--clr-primary) !important; transform: scale(1.04) !important;
}
body .shortcut-play-btn svg, body .play-btn svg { fill: currentColor !important; color: currentColor !important; }

/* ── 2. Secondary ───────────────────────────────────────────────────────── */
body .premium-action-btn:not(.is-primary),
body .onboarding-secondary-btn,
body .artist-back-btn,
body .album-back-btn,
body .changelog-btn,
body .weekly-recap-profile-btn,
body .profile-recap-test-btn,
body .mp-follow-btn,
body .artist-profile-follow-btn.is-following, body .artist-profile-follow-btn.followed,
body .artist-follow-btn.is-following, body .artist-follow-btn.followed {
    background: transparent !important;
    background-image: none !important;
    color: var(--text-base) !important;
    border: var(--default-border) !important;
    border-radius: var(--br) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    min-height: 32px;
    padding: 0 16px !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: var(--default-transition) !important;
    cursor: pointer;
}
body .premium-action-btn:not(.is-primary):hover,
body .onboarding-secondary-btn:hover,
body .artist-back-btn:hover,
body .album-back-btn:hover,
body .changelog-btn:hover,
body .weekly-recap-profile-btn:hover,
body .profile-recap-test-btn:hover,
body .mp-follow-btn:hover,
body .artist-profile-follow-btn.is-following:hover, body .artist-profile-follow-btn.followed:hover,
body .artist-follow-btn.is-following:hover, body .artist-follow-btn.followed:hover {
    border: var(--hover-border) !important;
    border-radius: var(--l-br) !important;
    background: var(--background-highlight) !important;
    transform: none !important;
}
/* Destructive (delete playlist) */
body .pl-delete-btn {
    background: transparent !important; color: var(--clr-error) !important;
    border: 1px solid rgba(var(--clr-error-rgb), 0.4) !important; border-radius: var(--br) !important;
    box-shadow: none !important; font-weight: 700 !important; transition: var(--default-transition) !important;
}
body .pl-delete-btn:hover { background: var(--clr-error-container) !important; color: var(--clr-on-error-container) !important; border-radius: var(--l-br) !important; }

/* ── 3. Chips ───────────────────────────────────────────────────────────── */
body .main-filter-btn, body .lib-filter-pill, body .artist-filter-chip, body .sidebar-filter-btn,
body .onboarding-chip, body .onboarding-step-pill, body .sp-pill, body .album-tag, body .np-box-action {
    background: var(--background-highlight) !important;
    background-image: none !important;
    color: var(--text-base) !important;
    border: var(--default-border) !important;
    border-radius: var(--br) !important;
    box-shadow: none !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    min-height: 32px;
    padding: 0 12px !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: var(--default-transition) !important;
    cursor: pointer;
}
body .sp-pill { font-weight: 700 !important; }
body .main-filter-btn:hover, body .lib-filter-pill:hover, body .artist-filter-chip:hover, body .sidebar-filter-btn:hover,
body .onboarding-chip:hover, body .onboarding-step-pill:hover, body .sp-pill:hover, body .np-box-action:hover {
    border: var(--hover-border) !important;
    border-radius: var(--l-br) !important;
    transform: none !important;
    background: var(--background-elevated-highlight) !important;
}
body .main-filter-btn.active, body .lib-filter-pill.active, body .artist-filter-chip.active, body .artist-filter-chip.is-active,
body .sidebar-filter-btn.is-accent, body .onboarding-chip.is-selected, body .onboarding-chip.selected, body .onboarding-chip.active,
body .onboarding-step-pill.active, body .onboarding-step-pill.is-active {
    background: var(--clr-primary-container) !important;
    color: var(--clr-on-primary-container) !important;
    border-color: transparent !important;
}
body .main-filter-btn.active:hover, body .lib-filter-pill.active:hover, body .sidebar-filter-btn.is-accent:hover,
body .onboarding-chip.is-selected:hover, body .onboarding-chip.selected:hover, body .onboarding-chip.active:hover {
    background: var(--clr-on-primary-container) !important;
    color: var(--clr-primary-container) !important;
}

/* ── 4. Icon buttons ────────────────────────────────────────────────────── */
body .control-btn, body .np-icon-btn, body .karaoke-ctrl-btn, body .karaoke-close-btn, body .mp-ctrl-btn, body .mp-icon-btn,
body .top-icon-btn, body .fav-toggle-btn, body .track-favorite-btn, body .track-row-favorite, body .track-row-menu,
body .track-row-remove, body .sp-tb-icon, body .sp-pl-icon, body .sp-like-btn, body .sp-search-clear, body .sp-search-browse,
body .library-inline-add {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--text-subdued) !important;
    border-radius: 50% !important;
    transition: color 0.15s ease, transform 0.15s ease !important;
    cursor: pointer;
}
body .control-btn:hover, body .np-icon-btn:hover, body .karaoke-ctrl-btn:hover, body .karaoke-close-btn:hover, body .mp-ctrl-btn:hover,
body .mp-icon-btn:hover, body .top-icon-btn:hover, body .fav-toggle-btn:hover, body .track-favorite-btn:hover, body .track-row-favorite:hover,
body .track-row-menu:hover, body .track-row-remove:hover, body .sp-tb-icon:hover:not(:disabled), body .sp-pl-icon:hover, body .sp-like-btn:hover,
body .sp-search-clear:hover, body .sp-search-browse:hover, body .library-inline-add:hover {
    color: var(--text-base) !important;
    transform: scale(1.04) !important;
    background: transparent !important;
}
body .control-btn.active, body .control-btn[aria-pressed="true"], body .fav-toggle-btn.active, body .track-favorite-btn.active,
body .track-row-favorite.active, body .sp-like-btn.is-liked {
    color: var(--clr-primary) !important;
}
/* Shuffle / repeat "on" dot like Spotify (Lucid: buttonActiveDot = primary) */
body #shuffleBtn, body #repeatBtn { position: relative; }
body #shuffleBtn[style*="accent"], body #repeatBtn[style*="accent"] { color: var(--clr-primary) !important; }
body #shuffleBtn[style*="accent"]::after, body #repeatBtn[style*="accent"]::after {
    content: ""; position: absolute; bottom: 0; left: 50%; width: 4px; height: 4px; border-radius: 50%;
    transform: translateX(-50%); background: var(--clr-primary);
}
/* Floating heart on cards */
body .track-card .fav-toggle-btn, body .album-card .fav-toggle-btn {
    background: rgba(var(--clr-surface-rgb), 0.6) !important;
    border: var(--default-border) !important;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}

/* ── Inputs & selects next to buttons ───────────────────────────────────── */
body input.neon-input:not(#searchInput), body .modal-content input, body .onboarding-search input, body select, body textarea {
    background: var(--background-base) !important;
    border: var(--default-border) !important;
    border-radius: var(--br) !important;
    color: var(--text-base) !important;
    box-shadow: none !important;
    transition: var(--default-transition) !important;
}
body input.neon-input:not(#searchInput):hover, body .modal-content input:hover, body select:hover, body textarea:hover { border: var(--hover-border) !important; border-radius: var(--l-br) !important; }
body input.neon-input:not(#searchInput):focus, body .modal-content input:focus, body select:focus, body textarea:focus {
    border-color: var(--clr-primary) !important; outline: none !important;
}

/* ── Context menu items ─────────────────────────────────────────────────── */
body .context-menu-item {
    border-radius: var(--s-br) !important; color: var(--clr-on-surface) !important; transition: background 0.15s ease !important;
}
body .context-menu-item:hover { background: rgba(var(--clr-on-surface-rgb), 0.1) !important; }

/* ── Onboarding / modal shells so their buttons sit on Lucid surfaces ──── */
body .music-onboarding-card, body #musicOnboardingOverlay .onboarding-card, body .onboarding-panel {
    background: var(--background-base) !important;
    -webkit-backdrop-filter: blur(32px) saturate(1.5); backdrop-filter: blur(32px) saturate(1.5);
    border: var(--default-border) !important; border-radius: var(--l-br) !important; box-shadow: none !important;
}

body .onboarding-overlay { background: rgba(0, 0, 0, 0.55) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body .onboarding-overlay::before, body .onboarding-overlay::after { display: none !important; }
body .onboarding-step, body .onboarding-card, body .onboarding-section, body .onboarding-search-box {
    background: var(--background-highlight) !important; border: var(--default-border) !important; border-radius: var(--m-br) !important; box-shadow: none !important;
}

/* Lucid playbar (styles/colors.css): the play button is Spotify's round button with
 * the encore-inverted-light-set remapped -> background --clr-primary, icon --clr-on-primary.
 * Other controls use --text-subdued (--clr-on-surface-variant), --text-base on hover,
 * and --clr-primary + a dot when active (main-genericButton-buttonActive / ActiveDot). */
body .sp-footer .player-controls { gap: 16px !important; }
body .sp-footer #playBtn.play-pause-btn {
    width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 0 !important; border: 0 !important;
    border-radius: 50% !important; box-shadow: none !important; display: inline-flex !important; align-items: center; justify-content: center;
    background: var(--clr-primary, #fff) !important; color: var(--clr-on-primary, #000) !important;
    transition: transform 33ms cubic-bezier(.3, 0, 0, 1), background-color 225ms ease-in !important;
}
body .sp-footer #playBtn.play-pause-btn svg { width: 16px !important; height: 16px !important; fill: currentColor !important; color: currentColor !important; }
body .sp-footer #playBtn.play-pause-btn:hover { transform: scale(1.06) !important; background: var(--clr-primary, #fff) !important; filter: brightness(1.08); }
body .sp-footer #playBtn.play-pause-btn:active { transform: scale(0.99) !important; background: var(--clr-inverse-primary, var(--clr-primary)) !important; }
body .sp-footer .player-controls .control-btn {
    position: relative; width: 32px !important; height: 32px !important; color: var(--clr-on-surface-variant, #b3b3b3) !important; opacity: 1 !important;
    background: transparent !important; transform: none !important;
}
body .sp-footer .player-controls .control-btn:hover { color: var(--clr-on-surface, #fff) !important; transform: scale(1.04) !important; }
body .sp-footer #shuffleBtn[data-on="1"], body .sp-footer #repeatBtn[data-mode="all"], body .sp-footer #repeatBtn[data-mode="one"] { color: var(--clr-primary, #1ed760) !important; }
body .sp-footer #shuffleBtn[data-on="1"]::after, body .sp-footer #repeatBtn[data-mode="all"]::after, body .sp-footer #repeatBtn[data-mode="one"]::after {
    content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; border-radius: 50%; transform: translateX(-50%);
    background: var(--clr-primary, #1ed760);
}