/* =========================================================
   KOEL CUSTOM THEME - NEON GLASS
   Keeps Koel native right panel toggle/logout behavior
   ========================================================= */

:root {
    --koel-bg-0: #05070d;
    --koel-bg-1: #090d18;
    --koel-panel: rgba(18, 22, 36, 0.78);
    --koel-line: rgba(255,255,255,0.09);

    --koel-orange: #ff7a18;
    --koel-purple: #a855f7;
    --koel-pink: #ec4899;
    --koel-yellow: #facc15;

    --koel-text: #f8fafc;
    --koel-muted: #a1a1aa;
    --koel-soft: #cbd5e1;
}

/* ============================= */
/* === APP ONLY               === */
/* ============================= */

body:not(:has(input[type="password"])) {
    background:
        radial-gradient(circle at 12% 8%, rgba(255,122,24,0.18), transparent 28%),
        radial-gradient(circle at 78% 12%, rgba(168,85,247,0.20), transparent 30%),
        linear-gradient(145deg, var(--koel-bg-1), var(--koel-bg-0)) !important;
    color: var(--koel-text) !important;
}

body:not(:has(input[type="password"])) #app,
body:not(:has(input[type="password"])) .app,
body:not(:has(input[type="password"])) main,
body:not(:has(input[type="password"])) .main-wrapper,
body:not(:has(input[type="password"])) .screen,
body:not(:has(input[type="password"])) .content {
    background: transparent !important;
}

/* ============================= */
/* === LEFT SIDEBAR           === */
/* ============================= */

body:not(:has(input[type="password"])) aside:first-of-type,
body:not(:has(input[type="password"])) nav,
body:not(:has(input[type="password"])) .sidebar,
body:not(:has(input[type="password"])) .side-bar {
    background:
        linear-gradient(180deg, rgba(9,13,24,0.96), rgba(5,7,13,0.98)) !important;
    border-right: 1px solid var(--koel-line) !important;
    box-shadow: 14px 0 46px rgba(0,0,0,0.34) !important;
}

/* Safe spacing: left sidebar only */
body:not(:has(input[type="password"])) aside:first-of-type {
    padding: 18px 10px !important;
}

body:not(:has(input[type="password"])) aside:first-of-type section,
body:not(:has(input[type="password"])) nav section,
body:not(:has(input[type="password"])) .sidebar section,
body:not(:has(input[type="password"])) .side-bar section {
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(15, 20, 36, 0.56) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.22) !important;
}

/* Safe spacing: sidebar section cards */
body:not(:has(input[type="password"])) aside:first-of-type section {
    padding: 16px 10px 12px 10px !important;
    margin-bottom: 16px !important;
}

/* Fix YOUR LIBRARY / PLAYLISTS / MANAGE spacing */
body:not(:has(input[type="password"])) aside:first-of-type section h2,
body:not(:has(input[type="password"])) aside:first-of-type section .heading,
body:not(:has(input[type="password"])) aside:first-of-type .section-title {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    padding-top: 2px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.08em !important;
}

/* Sidebar menu spacing */
body:not(:has(input[type="password"])) aside:first-of-type li {
    margin: 6px 0 !important;
}

body:not(:has(input[type="password"])) aside:first-of-type a,
body:not(:has(input[type="password"])) nav a,
body:not(:has(input[type="password"])) .sidebar a,
body:not(:has(input[type="password"])) .side-bar a {
    color: var(--koel-soft) !important;
    border-radius: 12px !important;
    transition: all 0.18s ease !important;
}

/* Safe spacing: left sidebar links only */
body:not(:has(input[type="password"])) aside:first-of-type a {
    padding: 11px 14px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.3 !important;
}

body:not(:has(input[type="password"])) aside:first-of-type a:hover,
body:not(:has(input[type="password"])) nav a:hover,
body:not(:has(input[type="password"])) .sidebar a:hover,
body:not(:has(input[type="password"])) .side-bar a:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.07) !important;
    transform: translateX(2px);
}

body:not(:has(input[type="password"])) aside:first-of-type a.active,
body:not(:has(input[type="password"])) nav a.active,
body:not(:has(input[type="password"])) .sidebar a.active,
body:not(:has(input[type="password"])) .side-bar a.active,
body:not(:has(input[type="password"])) .active > a {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(255,122,24,0.95), rgba(168,85,247,0.95)) !important;
    box-shadow:
        0 0 22px rgba(168,85,247,0.38),
        0 0 18px rgba(255,122,24,0.25) !important;
}

/* Search bar spacing */
body:not(:has(input[type="password"])) aside:first-of-type input {
    margin: 10px 0 14px 0 !important;
    padding: 10px 12px !important;
}

/* ============================= */
/* === MAIN PANELS            === */
/* ============================= */

body:not(:has(input[type="password"])) section,
body:not(:has(input[type="password"])) .screen-base,
body:not(:has(input[type="password"])) .panel,
body:not(:has(input[type="password"])) .card,
body:not(:has(input[type="password"])) .modal,
body:not(:has(input[type="password"])) .modal-content,
body:not(:has(input[type="password"])) .popover,
body:not(:has(input[type="password"])) .dropdown-menu {
    background: var(--koel-panel) !important;
    border: 1px solid var(--koel-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 70px rgba(0,0,0,0.45) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
}

/* ============================= */
/* === TEXT                   === */
/* ============================= */

body:not(:has(input[type="password"])) h1,
body:not(:has(input[type="password"])) h2 {
    color: #ffffff !important;
    letter-spacing: -0.04em !important;
    text-shadow: 0 0 28px rgba(168,85,247,0.16);
}

/* Prevent sidebar headings looking squashed */
body:not(:has(input[type="password"])) aside:first-of-type h2 {
    letter-spacing: 0.08em !important;
}

body:not(:has(input[type="password"])) small,
body:not(:has(input[type="password"])) .text-secondary,
body:not(:has(input[type="password"])) .muted {
    color: var(--koel-muted) !important;
}

/* ============================= */
/* === INPUTS / SEARCH        === */
/* ============================= */

body:not(:has(input[type="password"])) input,
body:not(:has(input[type="password"])) textarea,
body:not(:has(input[type="password"])) select {
    background: rgba(255,255,255,0.055) !important;
    color: #ffffff !important;
    border: 1px solid var(--koel-line) !important;
    border-radius: 12px !important;
}

body:not(:has(input[type="password"])) input:focus,
body:not(:has(input[type="password"])) textarea:focus,
body:not(:has(input[type="password"])) select:focus {
    outline: none !important;
    border-color: rgba(168,85,247,0.7) !important;
    box-shadow: 0 0 0 3px rgba(168,85,247,0.22) !important;
}

/* ============================= */
/* === BUTTONS                === */
/* ============================= */

body:not(:has(input[type="password"])) button,
body:not(:has(input[type="password"])) .btn,
body:not(:has(input[type="password"])) [role="button"] {
    border-radius: 12px !important;
    transition: all 0.18s ease !important;
}

body:not(:has(input[type="password"])) button:hover,
body:not(:has(input[type="password"])) .btn:hover,
body:not(:has(input[type="password"])) [role="button"]:hover {
    transform: translateY(-1px);
}

body:not(:has(input[type="password"])) .btn-primary,
body:not(:has(input[type="password"])) button.primary,
body:not(:has(input[type="password"])) button[type="submit"] {
    background: linear-gradient(135deg, var(--koel-orange), var(--koel-purple)) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 28px rgba(168,85,247,0.35) !important;
}

/* ============================= */
/* === SONG / ALBUM ITEMS     === */
/* ============================= */

body:not(:has(input[type="password"])) table tr,
body:not(:has(input[type="password"])) .song-item,
body:not(:has(input[type="password"])) .track-item,
body:not(:has(input[type="password"])) .playable-list-item,
body:not(:has(input[type="password"])) [class*="playable"],
body:not(:has(input[type="password"])) [class*="track"] {
    transition: background 0.18s ease, box-shadow 0.18s ease !important;
}

body:not(:has(input[type="password"])) table tr:hover,
body:not(:has(input[type="password"])) .song-item:hover,
body:not(:has(input[type="password"])) .track-item:hover,
body:not(:has(input[type="password"])) .playable-list-item:hover {
    background: rgba(255,255,255,0.065) !important;
    box-shadow: inset 3px 0 0 rgba(255,122,24,0.9) !important;
}

body:not(:has(input[type="password"])) tr.playing,
body:not(:has(input[type="password"])) tr.current,
body:not(:has(input[type="password"])) .playing,
body:not(:has(input[type="password"])) .current,
body:not(:has(input[type="password"])) .is-playing {
    background:
        linear-gradient(90deg, rgba(168,85,247,0.24), rgba(255,122,24,0.18)) !important;
    box-shadow:
        inset 4px 0 0 var(--koel-orange),
        0 0 24px rgba(168,85,247,0.30) !important;
}

body:not(:has(input[type="password"])) img {
    border-radius: 10px;
}

body:not(:has(input[type="password"])) .cover,
body:not(:has(input[type="password"])) .album-art,
body:not(:has(input[type="password"])) .artwork,
body:not(:has(input[type="password"])) img.cover {
    box-shadow:
        0 16px 36px rgba(0,0,0,0.38),
        0 0 18px rgba(168,85,247,0.18) !important;
}

/* ============================= */
/* === PLAYER BAR             === */
/* ============================= */

body:not(:has(input[type="password"])) footer,
body:not(:has(input[type="password"])) .player,
body:not(:has(input[type="password"])) .playback,
body:not(:has(input[type="password"])) .now-playing,
body:not(:has(input[type="password"])) .bottom {
    background:
        linear-gradient(180deg, rgba(18,24,45,0.94), rgba(6,8,16,0.98)) !important;
    border-top: 1px solid var(--koel-line) !important;
    box-shadow: 0 -18px 55px rgba(0,0,0,0.45) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
}

body:not(:has(input[type="password"])) input[type="range"] {
    accent-color: var(--koel-purple);
}

/* ============================= */
/* === RIGHT ICON RAIL        === */
/* ============================= */

body:not(:has(input[type="password"])) aside:last-of-type button,
body:not(:has(input[type="password"])) [class*="right"] button,
body:not(:has(input[type="password"])) [class*="Right"] button {
    border-radius: 16px !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

body:not(:has(input[type="password"])) aside:last-of-type button:hover,
body:not(:has(input[type="password"])) [class*="right"] button:hover,
body:not(:has(input[type="password"])) [class*="Right"] button:hover {
    background: linear-gradient(135deg, rgba(255,122,24,0.65), rgba(168,85,247,0.65)) !important;
    box-shadow: 0 0 22px rgba(168,85,247,0.35) !important;
}

/* ============================= */
/* === SCROLLBAR              === */
/* ============================= */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #111;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--koel-orange), var(--koel-purple));
    border-radius: 10px;
    border: 2px solid #111;
    min-height: 90px;
    min-width: 90px;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff9a3d, #c084fc);
}

::-webkit-scrollbar-corner {
    background: #111;
}

* {
    scrollbar-width: auto;
    scrollbar-color: var(--koel-purple) #111;
}

/* ============================= */
/* === SONG PROGRESS KNOB     === */
/* ============================= */

.koel-progress-knob {
    position: absolute !important;
    top: calc(50% + 2px) !important;
    left: 0;
    width: 12px !important;
    height: 12px !important;
    transform: translate(-50%, -50%) !important;
    background: linear-gradient(135deg, #ffffff, #c084fc) !important;
    border: 2px solid rgba(255,255,255,0.75) !important;
    border-radius: 50% !important;
    z-index: 999999 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    box-shadow: 0 0 18px rgba(168,85,247,0.75) !important;
}

.koel-progress-knob:hover {
    background: #ffffff !important;
    box-shadow: 0 0 24px rgba(255,122,24,0.85) !important;
}

/* ============================= */
/* === LOGIN PAGE             === */
/* ============================= */

body:has(input[type="password"]) {
    background: linear-gradient(160deg, #0a0f1c 0%, #121a2b 100%) !important;
}

body:has(input[type="password"])::before {
    content: "Colin Music";
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: #00ffaa;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 1px;
    text-shadow: 0 0 24px rgba(0,255,170,0.3);
    z-index: 999999;
    pointer-events: none;
}

body:has(input[type="password"]) form {
    background: #1a2236 !important;
    border-radius: 24px !important;
    width: 430px !important;
    max-width: 90vw !important;
    padding: 40px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow:
        0 25px 70px rgba(0,0,0,0.7),
        0 0 45px rgba(0,255,170,0.12) !important;
}

body:has(input[type="password"]) form div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body:has(input[type="password"]) form img {
    max-width: 150px !important;
    max-height: 150px !important;
    margin: 0 auto 28px auto !important;
    display: block !important;
}

body:has(input[type="password"]) form input {
    background: #2a324a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    height: 50px !important;
    padding: 0 16px !important;
    box-shadow: none !important;
}

body:has(input[type="password"]) form input:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0,255,170,0.45) !important;
}

body:has(input[type="password"]) form input[type="password"] {
    padding-right: 48px !important;
}

body:has(input[type="password"]) form button[type="submit"],
body:has(input[type="password"]) form button:not(:has(svg)) {
    background: linear-gradient(135deg, #00ffaa 0%, #00d48f 100%) !important;
    color: #07111d !important;
    border: none !important;
    border-radius: 12px !important;
    height: 50px !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 24px rgba(0,255,170,0.22) !important;
    cursor: pointer !important;
}

body:has(input[type="password"]) form button[type="submit"]:hover,
body:has(input[type="password"]) form button:not(:has(svg)):hover {
    filter: brightness(1.08) !important;
}

body:has(input[type="password"]) form button:has(svg) {
    background: transparent !important;
    box-shadow: none !important;
    color: #00ffaa !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: none !important;
}

body:has(input[type="password"]) form svg {
    color: #00ffaa !important;
}

body:has(input[type="password"]) form a {
    color: #00ffaa !important;
    text-decoration: none !important;
    font-size: 13px !important;
}

body:has(input[type="password"]) form a:hover {
    text-decoration: underline !important;
}

/* FORCE SIDEBAR SPACING (HIGH PRIORITY FIX) */
#app aside,
#app .sidebar,
#app .side-bar {
    padding-top: 18px !important;
}

/* Section spacing */
#app aside section {
    padding: 16px 10px 12px 10px !important;
    margin-bottom: 16px !important;
}

/* Fix YOUR LIBRARY text position */
#app aside section h2,
#app aside .section-title {
    margin-top: 10px !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.08em !important;
    line-height: 1.25 !important;
}

/* Menu spacing */
#app aside li {
    margin: 6px 0 !important;
}

#app aside a {
    padding: 11px 14px !important;
}