/* 
 * ========================================================
 * ULTRA PREMIUM UI/UX OVERHAUL (Billion-Tier Architecture)
 * ========================================================
 */

:root, html, body, html.light, body.light, .light, [data-theme], .theme-light, .theme-dark, #page {
    /* Color System */
    --c-bg-deep: #000000 !important;         /* Pure black for sidebar / extreme depth */
    --c-bg-base: #121212 !important;         /* Main content background */
    --c-bg-elevated: #181818 !important;     /* Cards, Player, Menus */
    --c-bg-highlight: #282828 !important;    /* Hover states */
    
    --c-text-100: #FFFFFF !important;        /* Primary text, Headings */
    --c-text-200: #B3B3B3 !important;        /* Secondary text, Meta */
    --c-text-300: #535353 !important;        /* Disabled, subtle borders */
    
    --c-accent: #00E5FF !important;          /* Electric Cyan */
    --c-accent-hover: #00b3cc !important;
    
    /* Glass & Shadows */
    --glass-bg: rgba(18, 18, 18, 0.85) !important;
    --glass-border: rgba(255, 255, 255, 0.05) !important;
    --shadow-heavy: 0 8px 24px rgba(0,0,0,0.5) !important;
    --shadow-soft: 0 4px 12px rgba(0,0,0,0.3) !important;
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Layout */
    --player-height: 90px;
}

/* Nuke all white backgrounds globally */
.bg-white, .bg-light, .bg-white-only, .wrapper, #content, .site-content, .entry-content, .page-content, .content-area, .content-wrap, .main-content {
    background-color: transparent !important;
    background: transparent !important;
}

/* =========================================
   1. GLOBAL & TYPOGRAPHY
   ========================================= */
body, html {
    background-color: var(--c-bg-base) !important;
    color: var(--c-text-100) !important;
    font-family: var(--font-primary) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Force headings to crisp white */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--c-text-100) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

a {
    color: var(--c-text-100);
    text-decoration: none !important;
    transition: color 0.2s ease, opacity 0.2s ease;
}
a:hover {
    color: var(--c-text-100);
    opacity: 0.8;
}

/* Custom Premium Scrollbar */
::-webkit-scrollbar {
    width: 12px;
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border: 3px solid var(--c-bg-base); /* creates padding effect */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* =========================================
   2. STRUCTURAL LAYOUT (App-Like)
   ========================================= */
/* Sidebar (Left) */
.site-sidebar {
    background-color: var(--c-bg-deep) !important;
    border-right: 1px solid var(--glass-border) !important;
}

/* Master Content Area Overrides */
#content, .site-content, .layout-content, #page, .page-wrapper, .main-content {
    background-color: var(--c-bg-base) !important;
    background: var(--c-bg-base) !important;
}

/* Header (Top) */
.site-header {
    background: transparent !important;
    border: none !important;
    transition: background 0.3s ease;
}
/* Glassmorphism for header when scrolling */
@supports (backdrop-filter: blur(20px)) {
    .site-header {
        background: var(--glass-bg) !important;
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border-bottom: 1px solid var(--glass-border) !important;
    }
}

/* Cards & Content Blocks & Page Headers */
.post, .item, .card, .bg-white, .bg-light, .entry-content-box, .box, .panel,
.header-station, .header-user, .header-album, .header-playlist, .page-header, .entry-header, .play-header {
    background-color: var(--c-bg-elevated) !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: var(--shadow-soft);
    color: var(--c-text-100) !important;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.post:hover, .item:hover, .card:hover, .box:hover, .panel:hover {
    background-color: var(--c-bg-highlight) !important;
    box-shadow: var(--shadow-heavy);
}

/* Text inside cards */
.post-title, .item-title, .track-title, .album-title, .artist-name, .title, .text-dark,
.header-station *, .header-user *, .header-album * {
    color: var(--c-text-100) !important;
}
.post-meta, .item-meta, .track-meta, .text-muted, .subtitle {
    color: var(--c-text-200) !important;
}

/* =========================================
   3. ANIMATIONS & MICRO-INTERACTIONS
   ========================================= */
/* Image Zoom on Hover */
.entry-media, .media, .card-img {
    overflow: hidden;
    border-radius: 6px;
}
.entry-media img, .media img, .card-img img, .post-thumbnail img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: transform;
}
.entry-media:hover img, .media:hover img, .card-img:hover img, .post-thumbnail:hover img {
    transform: scale(1.08) !important;
}

/* Spring Buttons */
.btn, input[type="submit"], .button {
    border-radius: 500px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 32px !important;
    transition: transform 0.1s cubic-bezier(0.4, 0.0, 0.2, 1), filter 0.2s ease !important;
}
.btn:active, .button:active {
    transform: scale(0.95) !important; /* Spring effect when clicked */
}
.btn-primary, .button-primary, .btn-play {
    background-color: var(--c-accent) !important;
    color: #000000 !important;
    border: none !important;
}
.btn-primary:hover, .button-primary:hover, .btn-play:hover {
    background-color: var(--c-accent-hover) !important;
    filter: brightness(1.05) !important;
    color: #000000 !important;
}

/* =========================================
   4. THE PLAYER (The Core Experience)
   ========================================= */
/* Lock player to absolute bottom, full width */
#play-player, .play-player, .mejs-container, .mejs-inner, .mejs-controls, .mejs-mediaelement, 
.player-wrapper, #footer, .site-footer, .plyr-playlist, .plyr, .plyr__controls, .plyr-list-wrap, 
.plyr-list, .fixed-bottom, .plyr__row, .plyr__col {
    background-color: var(--c-bg-elevated) !important;
    background: var(--c-bg-elevated) !important;
    color: var(--c-text-100) !important;
    border-color: var(--glass-border) !important;
}

/* Clean up player borders */
.plyr-playlist, .site-footer {
    border-top: 1px solid var(--glass-border) !important;
}

/* Ensure ALL text in player is highly visible */
.mejs-container *, .plyr-playlist *, .plyr * {
    color: var(--c-text-100) !important;
}
.mejs-time, .plyr__time, .plyr__author, .plyr-item-author, .plyr__queue {
    color: var(--c-text-200) !important;
}
/* Player Controls (Play, Pause, Skip) */
.mejs-controls .mejs-button button, .plyr__controls button, .plyr__controls svg {
    color: var(--c-text-200) !important;
    fill: var(--c-text-200) !important;
    background-color: transparent !important;
    transition: all 0.2s ease !important;
}
.mejs-controls .mejs-button button:hover, .plyr__controls button:hover, .plyr__controls svg:hover {
    color: var(--c-text-100) !important;
    fill: var(--c-text-100) !important;
    transform: scale(1.1); /* Slight grow on hover */
}

/* Play Button specific override */
.plyr__controls [data-plyr="play"] {
    background-color: var(--c-text-100) !important;
    color: #000 !important;
    fill: #000 !important;
    border-radius: 50% !important;
    padding: 8px !important;
}
.plyr__controls [data-plyr="play"]:hover {
    transform: scale(1.05);
}

/* Progress Bars */
.mejs-time-current {
    background: var(--c-text-100) !important; /* White like Spotify */
}
.mejs-time-total {
    background: rgba(255, 255, 255, 0.3) !important;
}
.plyr--audio .plyr__controls {
    background: transparent !important;
}
.plyr--full-ui input[type=range] {
    color: var(--c-text-100) !important; /* White progress bar thumb */
}

/* =========================================
   5. PROFILE & SUB-NAVIGATIONS
   ========================================= */
.user-navigation, .navigation, .nav-tab-wrapper, .dropdown-menu {
    background-color: var(--c-bg-elevated) !important;
    background: var(--c-bg-elevated) !important;
    border: 1px solid var(--glass-border) !important;
}
.user-navigation a, .nav-tab-wrapper a, .dropdown-menu a {
    color: var(--c-text-200) !important;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 16px !important;
}
.user-navigation li.active a, .user-navigation a:hover, 
.nav-tab-wrapper a.nav-tab-active, .nav-tab-wrapper a:hover {
    color: var(--c-text-100) !important;
    border-bottom: 2px solid var(--c-accent) !important;
}



/* =========================================
   6. MOBILE NATIVE APP FIXES
   ========================================= */
@media (max-width: 768px) {
    body {
        padding-bottom: 140px !important; /* Space for both mobile nav and player */
    }
    
    /* Make the player float and rounded on mobile */
    .plyr-playlist.fixed-bottom {
        bottom: 70px !important; /* Above bottom nav */
        left: 10px !important;
        right: 10px !important;
        width: calc(100% - 20px) !important;
        border-radius: 8px !important;
        background: var(--c-bg-elevated) !important;
        box-shadow: var(--shadow-heavy) !important;
        padding: 5px !important;
    }
    
    /* Native App Bottom Navigation */
    .app-nav, #mobile-menu, .mobile-menu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: var(--glass-bg) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid var(--glass-border) !important;
        z-index: 9999 !important;
        display: flex;
        justify-content: space-around;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important; /* iPhone Notch */
    }
    .app-nav a, #mobile-menu a, .mobile-menu a {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        color: var(--c-text-200) !important;
        font-size: 10px !important;
        padding: 10px 0 !important;
    }
    .app-nav a.active, #mobile-menu li.current-menu-item a {
        color: var(--c-text-100) !important;
    }
    .app-nav a i, #mobile-menu a i, .app-nav a svg, #mobile-menu a svg {
        margin-bottom: 4px;
        font-size: 20px;
    }
}