/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
  --bg: #0a0a0c;
  --surface: #131318;
  --surface-2: #1a1a22;
  --surface-3: #23232e;
  --border: #2a2a36;
  --text: #e8e8ed;
  --text-dim: #8888a0;
  --text-muted: #55556a;
  --accent: #6c5ce7;
  --accent-hover: #5a4bd1;
  --accent-light: #a29bfe;
  --accent-glow: rgba(108, 92, 231, 0.25);
  --green: #00cec9;
  --green-glow: rgba(0, 206, 201, 0.2);
  --orange: #e17055;
  --pink: #fd79a8;
  --error: #d63031;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
}



body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #e8e8ed;
    min-height: 100vh;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.5);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 92, 231, 0.7);
}

/* ================================================
   Sidebar Collapse
   ================================================ */
#main-sidebar {
    transition: width 0.25s ease;
}

#main-sidebar.sidebar-collapsed {
    width: 5rem !important;
    min-width: 5rem !important;
    max-width: 5rem !important;
}

#main-sidebar.sidebar-collapsed h1,
#main-sidebar.sidebar-collapsed p.text-xs,
#main-sidebar.sidebar-collapsed .p-7 > div,
#main-sidebar.sidebar-collapsed #your-playlists-container,
#main-sidebar.sidebar-collapsed .sidebar-playlists-title,
#main-sidebar.sidebar-collapsed nav button span:last-child,
#main-sidebar.sidebar-collapsed nav a span:last-child,
#main-sidebar.sidebar-collapsed .p-6 > div:not(:first-child) {
    display: none !important;
}

#main-sidebar.sidebar-collapsed nav button,
#main-sidebar.sidebar-collapsed nav a.flex {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

#main-sidebar.sidebar-collapsed .p-7 {
    padding: 1rem;
    justify-content: center;
}

/* Source Tabs */
.source-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.source-tab {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #2a2a36;
    background: #131318;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #8888a0;
}


.source-tab.active {
    background: #6c5ce7;
    color: #e8e8ed;
    border-color: #6c5ce7;
}


.source-tab:hover:not(.active) {
    border-color: #6c5ce7;
    background: #2a2a36;
}


/* Upload Area */
.upload-area {
    border: 3px dashed #2a2a36;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    background: #131318;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
}


.upload-area:hover {
    border-color: #6c5ce7;
    background: #2a2a36;
}


.file-types {
    color: #8888a0;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}


/* File Info */
.file-info {
    background: #131318;
    padding: 1.5rem;
    border-radius: 10px;
    margin-top: 1rem;
}


/* Progress Bar */
.progress-container {
    background: #2a2a36;
    border-radius: 10px;
    height: 20px;
    margin: 1rem 0;
    position: relative;
    overflow: hidden;
}


.progress-bar {
    background: linear-gradient(90deg, #6c5ce7, #5a4bd1);
    height: 100%;
    width: 0%;
    border-radius: 10px;
    transition: width 0.3s ease;
    position: relative;
}

/* Toggle Buttons */
.toggle-group {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

.toggle-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #2a2a36;
    background: #131318;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #8888a0;
}


.toggle-btn.active {
    background: #6c5ce7;
    color: #e8e8ed;
    border-color: #6c5ce7;
}

.toggle-btn:hover:not(.active) {
    border-color: #6c5ce7;
    background: #2a2a36;
}


/* Test Results */
.test-result {
    margin-left: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
}

.test-result.success {
    background: #064e3b;
    color: #a7f3d0;
}


.test-result.error {
    background: #7f1d1d;
    color: #fecaca;
}


/* Source Info */
.source-info {
    background: #1e3a8a;
    padding: 1.5rem;
    border-radius: 10px;
    margin-top: 1.5rem;
    border: 2px solid #93c5fd;
    border-color: #6c5ce7;
}


/* Hidden Utility */
.hidden {
    display: none;
}

/* Form Controls */
.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #2a2a36;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    background: #131318;
    color: #e8e8ed;
}


.form-control:focus {
    outline: none;
    border-color: #6c5ce7;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.3);
}


textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

/* Character Counters */
.char-counter {
    text-align: right;
    font-size: 0.85rem;
    color: #8888a0;
    margin-top: 0.25rem;
}


/* Buttons */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary {
    background: #6c5ce7;
    color: #e8e8ed;
}

.btn-primary:hover {
    background: #5a4bd1;
    transform: translateY(-2px);
}

.btn-secondary {
    background: #6b7280;
    color: #e8e8ed;
}

.btn-secondary:hover {
    background: #4b5563;
    transform: translateY(-2px);
}

.btn-success {
    background: #00cec9;
    color: #e8e8ed;
}

.btn-success:hover {
    background: #0da271;
    transform: translateY(-2px);
}

.btn-generate {
    background: linear-gradient(135deg, #6c5ce7, #5a4bd1);
    color: #e8e8ed;
    font-size: 1.1rem;
    padding: 1rem 2rem;
    width: 100%;
}

.btn-generate:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(108, 92, 231, 0.3);
}

.btn-generate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Task Status */
.task-status {
    margin-top: 2rem;
}

.status-card {
    background: #131318;
    border: 2px solid #2a2a36;
    border-radius: 12px;
    padding: 1.5rem;
    border-color: #2a2a36;
}


.status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    background: #e17055;
    color: #e8e8ed;
}

.refresh-btn {
    padding: 0.4rem 0.75rem;
    border: 2px solid #6c5ce7;
    background: #6c5ce7;
    color: #e8e8ed;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.refresh-btn:hover {
    background: #5a4bd1;
    border-color: #5a4bd1;
    transform: translateY(-1px);
}

.refresh-btn:active {
    transform: translateY(0);
}


.status-progress {
    margin: 1rem 0;
}

.status-details {
    background: #0a0a0c;
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
}


/* Results */
.results {
    margin-top: 2rem;
}

.result-card {
    background: #131318;
    border: 2px solid #00cec9;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}


.audio-player {
    text-align: center;
}

.audio-player h4 {
    color: #00cec9;
    margin-bottom: 1rem;
}

.audio-player-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

audio {
    flex: 1;
    min-width: 0;
}

.btn-download {
    background: #00cec9;
    color: #e8e8ed;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.btn-download:hover {
    background: #0da271;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 206, 201, 0.3);
}

.btn-download:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* History Section */
.history-section {
    margin-top: 2rem;
}

.history-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #2a2a36;
}


.history-stats {
    margin-left: auto;
    font-weight: 600;
    color: #6c5ce7;
    background: #2a2a36;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
}


.loading-indicator {
    text-align: center;
    padding: 3rem;
    color: #8888a0;
    font-size: 1.1rem;
}


.empty-state {
    text-align: center;
    padding: 3rem;
    color: #8888a0;
}


.error-state {
    text-align: center;
    padding: 3rem;
    color: #d63031;
}

.history-container {
    display: grid;
    gap: 1rem;
}

.history-card {
    background: #131318;
    border: 1px solid #2a2a36;
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left-color: #a78bfa;
}


.history-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: #475569;
}


/* Responsive Design */
@media (max-width: 768px) {
    .source-tabs {
        flex-direction: column;
    }
    
    .toggle-group {
        flex-direction: column;
    }
    
    .audio-player-container {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .btn-download {
        width: 100%;
    }
    
    .history-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .history-stats {
        margin-left: 0;
        text-align: center;
    }
}

/* Context Menu Animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-in {
    animation: slideIn 0.2s ease-out;
}

/* Template Context Menu Styles */
.template-context-menu {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Download Context Menu Styles */
.download-context-menu {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.download-context-menu button {
    position: relative;
    overflow: hidden;
}

.download-context-menu button:hover {
    background-color: rgba(242, 13, 242, 0.1);
}

.download-context-menu button .material-symbols-outlined {
    transition: transform 0.2s ease;
}

.download-context-menu button:hover .material-symbols-outlined {
    transform: scale(1.1);
}

.context-menu-item {
    transition: all 0.15s ease;
    border-radius: 0.25rem;
    margin: 0 0.25rem;
}

.context-menu-item:hover {
    background-color: rgba(242, 13, 242, 0.1) !important;
    color: #6c5ce7 !important;
}

.context-menu-item:first-child {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.context-menu-item:last-child {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

/* Apply button with dropdown indicator */
.apply-btn .material-symbols-outlined:last-child {
    font-size: 16px;
    margin-left: 2px;
}

/* Animation for loading states */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Material Icons sizing */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Dark mode adjustments */
.bg-white {
    background-color: #131318;
}

.bg-slate-50 {
    background-color: #0a0a0c;
}

.bg-slate-200 {
    background-color: #2a2a36;
}

.text-slate-900 {
    color: #e8e8ed;
}

.text-slate-500 {
    color: #8888a0;
}

.border-slate-200 {
    border-color: #2a2a36;
}

/* Code styling */
code {
    font-family: 'Consolas', 'Monaco', monospace;
    background: #2a2a36;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #e8e8ed;
}


/* Callback Card Styles */
.callback-card {
    border-left: 4px solid #6c5ce7;
    animation: slideIn 0.3s ease-out;
    border-left-color: #60a5fa;
}


.history-card {
    border-left: 4px solid #8b5cf6;
    animation: slideIn 0.5s ease-out;
}


@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced audio player styles */
.audio-player .enhanced-data {
    background: linear-gradient(135deg, #131318 0%, #0a0a0c 100%);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}


.audio-player .url-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.audio-player .url-item {
    background: #2a2a36;
    border: 1px solid #2a2a36;
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 0.8rem;
    border-color: #475569;
}


.audio-player .url-label {
    font-weight: 600;
    color: #8888a0;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}


.audio-player .url-value {
    color: #e8e8ed;
    word-break: break-all;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
}


/* Status badge variations */
.status-badge-complete {
    background: #00cec9;
    color: #e8e8ed;
}

.status-badge-first {
    background: #e17055;
    color: #e8e8ed;
}

.status-badge-text {
    background: #6c5ce7;
    color: #e8e8ed;
}

.status-badge-error {
    background: #d63031;
    color: #e8e8ed;
}

/* Callback timeline */
.callback-timeline {
    position: relative;
    padding-left: 1.5rem;
}

.callback-timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #475569;
}


.callback-timeline-item {
    position: relative;
    margin-bottom: 1rem;
    padding-left: 1rem;
}

.callback-timeline-item::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #6c5ce7;
    border: 2px solid #131318;
}


.callback-timeline-item.complete::before {
    background: #00cec9;
}

.callback-timeline-item.first::before {
    background: #e17055;
}

.callback-timeline-item.text::before {
    background: #6c5ce7;
}

.callback-timeline-item.error::before {
    background: #d63031;
}

/* Lyrics Display Styles */
.lyrics-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 92, 231, 0.5) rgba(0, 0, 0, 0.1);
}

.lyrics-container::-webkit-scrollbar {
    width: 6px;
}

.lyrics-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.lyrics-container::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.5);
    border-radius: 3px;
}

.lyrics-container::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 92, 231, 0.7);
}

.lyric-line {
    transition: background-color 0.2s ease;
    padding-left: 0.5rem;
    position: relative;
}

.lyric-line:hover {
    background-color: rgba(108, 92, 231, 0.1);
}


.lyric-line::before {
    content: "♪";
    position: absolute;
    left: -0.5rem;
    color: rgba(108, 92, 231, 0.5);
    font-size: 0.8em;
}

.lyric-line:empty {
    display: none;
}

/* Empty lyrics state */
.lyrics-container:empty::before {
    content: "No lyrics available";
    color: #8888a0;
    font-style: italic;
    text-align: center;
    display: block;
    padding: 1rem;
}


/* Video Button Styles */
.btn-video,
.create-video-btn {
    background: #6c5ce7;
    color: #e8e8ed;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    margin-top: 0.5rem;
}

.btn-video:hover,
.create-video-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-video:disabled,
.create-video-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Video Player Styles */
.video-player {
    animation: slideIn 0.3s ease-out;
}

.video-player-container video {
    width: 100%;
    border-radius: 8px;
    background: #000;
}

.btn-video-download {
    background: #6c5ce7;
    color: #e8e8ed;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.btn-video-download:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Video Progress Bar */
.video-player progress {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.video-player progress::-webkit-progress-bar {
    background-color: #2a2a36;
    border-radius: 4px;
}

.video-player progress::-webkit-progress-value {
    background: linear-gradient(90deg, #6c5ce7, #2563eb);
    border-radius: 4px;
}


/* Video Status */
.video-status {
    background: #1e3a8a;
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
}


/* Debug: Make video button always visible and bright */
[data-video-btn],
.create-video-btn {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #ff4081 !important;
    color: white !important;
    border: 2px solid #ff4081 !important;
    box-shadow: 0 0 10px rgba(255, 64, 129, 0.7) !important;
    z-index: 1000 !important;
    position: relative !important;
}

[data-video-btn]:hover,
.create-video-btn:hover {
    background-color: #f50057 !important;
    border-color: #f50057 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 20px rgba(255, 64, 129, 0.9) !important;
}

/* ============================================================================
   SIDEBAR STYLES - Refactored for Music Generation Dashboard
   ============================================================================ */

/* Sidebar Aside Element - Direct targeting for the actual sidebar */
#main-sidebar {
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Hide overflow on container */
    flex-direction: column !important;
}

/* Mobile responsive for sidebar */
@media (max-width: 1024px) {
    #main-sidebar {
        height: auto;
        min-height: 100vh;
    }
}

/* Navigation inside sidebar aside */
#main-sidebar > nav {
    flex: 1 1 0%;
    overflow-y: auto; /* Enable vertical scrolling */
    scrollbar-width: thin; /* Thin scrollbar for Firefox */
    scrollbar-color: rgba(108, 92, 231, 0.5) rgba(0, 0, 0, 0.1); /* Custom scrollbar colors */
}

/* Webkit scrollbar for sidebar navigation */
#main-sidebar > nav::-webkit-scrollbar {
    width: 6px;
}

#main-sidebar > nav::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

#main-sidebar > nav::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.5);
    border-radius: 3px;
}

#main-sidebar > nav::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 92, 231, 0.7);
}

/* Sidebar Container */
.sidebar-container {
    width: 16rem; /* w-64 */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #2a2a36; /* border-border-dark */
    background-color: #0a0a0c; /* dark:bg-background-dark */
    z-index: 20;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Hide overflow on container */
}


@media (max-width: 768px) {
    .sidebar-container {
        display: none;
    }
    
    .sidebar-container.md\\:flex {
        display: flex;
    }
}

/* Logo/Brand Section */
.sidebar-logo {
    padding: 1.5rem; /* p-6 */
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
}

.sidebar-logo-icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 1 / 1;
    border-radius: 0.5rem; /* rounded-lg */
    width: 2.5rem; /* size-10 */
    height: 2.5rem;
    background-color: rgba(242, 13, 242, 0.2); /* bg-primary/20 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-logo-icon .material-symbols-outlined {
    color: #6c5ce7; /* text-primary */
    font-size: 1.5rem; /* text-2xl */
}

.sidebar-logo-text {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700; /* font-bold */
    letter-spacing: -0.025em; /* tracking-tight */
    color: #e8e8ed; /* dark:text-white */
}


/* Navigation */
.sidebar-nav {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* gap-2 */
    padding: 1rem; /* px-4 py-4 */
    overflow-y: auto; /* Enable vertical scrolling */
    scrollbar-width: thin; /* Thin scrollbar for Firefox */
    scrollbar-color: rgba(108, 92, 231, 0.5) rgba(0, 0, 0, 0.1); /* Custom scrollbar colors */
}

/* Webkit scrollbar for sidebar navigation */
.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.5);
    border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 92, 231, 0.7);
}

/* Navigation Links */
.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    padding: 0.75rem 1rem; /* px-4 py-3 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: all 0.3s ease; /* transition-colors */
    text-decoration: none;
}

.sidebar-nav-link:hover {
    background-color: #131318; /* dark:hover:bg-surface-dark */
    color: #e8e8ed; /* dark:hover:text-white */
}


/* Active Navigation Link */
.sidebar-nav-link.active {
    background-color: rgba(242, 13, 242, 0.1); /* bg-primary/10 */
    color: #6c5ce7; /* text-primary */
}

.sidebar-nav-link.active:hover {
    background-color: rgba(242, 13, 242, 0.15);
}

/* Inactive Navigation Link */
.sidebar-nav-link.inactive {
    color: #8888a0; /* dark:text-slate-400 */
}


/* Navigation Icons */
.sidebar-nav-icon {
    font-size: 1.125rem; /* text-lg */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.sidebar-nav-link.active .sidebar-nav-icon {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Navigation Text */
.sidebar-nav-text {
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    line-height: 1.25rem;
}

.sidebar-nav-link.active .sidebar-nav-text {
    font-weight: 700; /* font-bold */
}

/* Divider */
.sidebar-divider {
    height: 1px;
    background-color: #2a2a36; /* bg-border-dark */
    margin: 0.5rem 1rem; /* my-2 mx-4 */
    opacity: 0.5;
}

/* Playlists Section */
.sidebar-playlists {
    padding: 0.5rem 1rem; /* px-4 py-2 */
}

.sidebar-playlists-title {
    font-size: 0.75rem; /* text-xs */
    font-weight: 700; /* font-bold */
    color: #8888a0;
    text-transform: uppercase;
    letter-spacing: 0.05em; /* tracking-wider */
    margin-bottom: 0.75rem; /* mb-3 */
}


/* Playlist Items */
.sidebar-playlist-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* gap-3 */
}

.sidebar-playlist-link {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    color: #8888a0; /* text-slate-400 */
    font-size: 0.875rem; /* text-sm */
    text-decoration: none;
    transition: color 0.3s ease; /* transition-colors */
}

.sidebar-playlist-link:hover {
    color: #6c5ce7; /* hover:text-primary */
}

.sidebar-playlist-icon {
    font-size: 1.125rem; /* text-[18px] */
}

/* Upgrade Button */
.sidebar-upgrade-button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* gap-2 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 0.75rem 1rem; /* py-3 px-4 */
    background-color: #131318; /* bg-surface-dark */
    border: 1px solid #2a2a36; /* border border-border-dark */
    transition: all 0.3s ease; /* transition-colors */
    cursor: pointer;
}

.sidebar-upgrade-button:hover {
    background-color: rgba(39, 27, 39, 0.8); /* hover:bg-opacity-80 */
}

.sidebar-upgrade-icon {
    color: #6c5ce7; /* text-primary */
    font-size: 0.875rem; /* text-sm */
}

.sidebar-upgrade-text {
    color: #e8e8ed; /* text-white */
    font-size: 0.875rem; /* text-sm */
    font-weight: 700; /* font-bold */
}

/* User Section */
.sidebar-user-section {
    padding: 1rem; /* p-4 */
    border-top: 1px solid #2a2a36; /* border-t border-border-dark */
}

/* User Profile */
.sidebar-user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    margin-top: 1rem; /* mt-4 */
    padding: 0 0.5rem; /* px-2 */
}

.sidebar-user-avatar {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 9999px; /* rounded-full */
    width: 2.5rem; /* size-10 */
    height: 2.5rem;
    box-shadow: 0 0 0 2px rgba(242, 13, 242, 0.3); /* ring-2 ring-primary/30 */
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

.sidebar-user-name {
    color: #e8e8ed; /* text-white */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-tier {
    color: #8888a0; /* text-slate-500 */
    font-size: 0.75rem; /* text-xs */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .sidebar-container {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #2a2a36;
    }
    
    .sidebar-nav {
        padding: 0.75rem;
    }
    
    .sidebar-logo {
        padding: 1rem;
    }
}

/* Animation for sidebar elements */
@keyframes sidebarSlideIn {
    from {
        opacity: 0;
        transform: translateX(-1rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sidebar-animate-in {
    animation: sidebarSlideIn 0.3s ease-out;
}

/* Focus states for accessibility */
.sidebar-nav-link:focus-visible,
.sidebar-playlist-link:focus-visible,
.sidebar-upgrade-button:focus-visible {
    outline: 2px solid #6c5ce7;
    outline-offset: 2px;
    border-radius: 0.375rem;
}

/* ============================================================================
   ADDBUTTON COMPONENT STYLES
   ============================================================================ */

/* Base AddButton styles */
.add-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto !important; /* Ensure button is always clickable */
    transition: all 0.3s ease;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.add-button:focus-visible {
    outline: 2px solid #6c5ce7;
    outline-offset: 2px;
}

.add-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Size variants */
.add-button.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.add-button.btn-medium {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.add-button.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Variant styles */
.add-button.btn-primary {
    background: #6c5ce7;
    color: #e8e8ed;
    border: 2px solid #6c5ce7;
}

.add-button.btn-primary:hover:not(:disabled) {
    background: #5a4bd1;
    border-color: #5a4bd1;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
}

.add-button.btn-secondary {
    background: #6b7280;
    color: #e8e8ed;
    border: 2px solid #6b7280;
}

.add-button.btn-secondary:hover:not(:disabled) {
    background: #4b5563;
    border-color: #4b5563;
    transform: translateY(-1px);
}

.add-button-minimal {
    background: transparent;
    color: #6c5ce7;
    border: 1px solid #6c5ce7;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.add-button-minimal:hover:not(:disabled) {
    background: #6c5ce7;
    color: #e8e8ed;
}

/* State-specific styles */
.add-button.btn-loading {
    pointer-events: none;
}

.add-button.btn-success {
    background: #00cec9;
    border-color: #00cec9;
    color: #e8e8ed;
}

.add-button.btn-success:hover:not(:disabled) {
    background: #0d9488;
    border-color: #0d9488;
}

.add-button.btn-error {
    background: #d63031;
    border-color: #d63031;
    color: #e8e8ed;
}

.add-button.btn-error:hover:not(:disabled) {
    background: #dc2626;
    border-color: #dc2626;
}

/* Icon styles */
.add-button .material-symbols-outlined {
    font-size: 1.2em;
    line-height: 1;
}

.add-button.btn-sm .material-symbols-outlined {
    font-size: 1em;
}

.add-button.btn-lg .material-symbols-outlined {
    font-size: 1.4em;
}

/* Loading animation */
.add-button .animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Text visibility management */
.add-button .btn-text {
    transition: opacity 0.3s ease;
}

.add-button.btn-loading .btn-text {
    opacity: 0.7;
}

/* Tooltip styles */
.add-button-tooltip {
    position: absolute;
    background: #374151;
    color: #e8e8ed;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.add-button-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

.add-button-tooltip::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #374151;
}

/* Dark mode tooltip */


/* Responsive design */
@media (max-width: 768px) {
    .add-button {
        width: 100%;
        justify-content: center;
    }
    
    .add-button .btn-text {
        display: none;
    }
    
    .add-button .material-symbols-outlined {
        margin: 0;
    }
}

@media (max-width: 480px) {
    .add-button {
        padding: 0.75rem;
    }
    
    .add-button.btn-lg {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .add-button {
        border-width: 2px;
    }
    
    .add-button:focus-visible {
        outline-width: 3px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .add-button {
        transition: none;
    }
    
    .add-button .animate-spin {
        animation: none;
    }
    
    .add-button:hover:not(:disabled) {
        transform: none;
    }
}

/* Print styles */
/* Wrapper for positioning, ensure it's on top of other elements */
.button-wrapper {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10; /* Increased z-index to avoid overlap */
}

@media print {
    .add-button {
        display: none;
    }
    
    .add-button-tooltip {
        display: none;
    }
}

/* ============================================================================
   ADDBUTTON CARD COMPONENT STYLES
   ============================================================================ */

/* AddButtonCard base styles */
.add-button-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: #131318;
    border: 1px solid #2a2a36;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    color: #e8e8ed;
}


.add-button-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.add-button-card.adding-to-playlist {
    border-color: #6c5ce7;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
}

.add-button-card.add-success {
    border-color: #00cec9;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.add-button-card.add-error {
    border-color: #d63031;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Song info section */
.add-button-card-song-info {
    flex: 1;
}

.add-button-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #e8e8ed;
    line-height: 1.4;
}


.add-button-card-artist {
    font-size: 1rem;
    color: #8888a0;
    margin: 0 0 0.75rem 0;
    font-weight: 500;
}


.add-button-card-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.add-button-card-duration,
.add-button-card-genre,
.add-button-card-album {
    font-size: 0.875rem;
    color: #8888a0;
    background: #2a2a36;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
}

/* Button container */
.add-button-card-button-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #2a2a36;
}


.add-button-card-button {
    min-width: 120px;
}

/* Playlist selector */
.add-button-card-playlist-selector {
    margin-bottom: 1rem;
}

.add-button-card-playlist-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #4b5563;
    border-radius: 0.5rem;
    background: #374151;
    font-size: 0.875rem;
    color: #e8e8ed;
    transition: border-color 0.3s ease;
}

.add-button-card-playlist-select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}


/* Animation effects */
.add-button-card.add-success-animation {
    animation: addSuccessPulse 0.6s ease-in-out;
}

.add-button-card.add-error-animation {
    animation: addErrorShake 0.6s ease-in-out;
}

.add-button-card.optimistic-update {
    opacity: 0.8;
    transform: scale(0.98);
    transition: all 0.3s ease;
}

@keyframes addSuccessPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 206, 201, 0.7);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(0, 206, 201, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 206, 201, 0);
    }
}

@keyframes addErrorShake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

/* Size variants */
.add-button-card.size-small {
    padding: 1rem;
}

.add-button-card.size-small .add-button-card-title {
    font-size: 1rem;
}

.add-button-card.size-small .add-button-card-artist {
    font-size: 0.875rem;
}

.add-button-card.size-large {
    padding: 2rem;
}

.add-button-card.size-large .add-button-card-title {
    font-size: 1.25rem;
}

.add-button-card.size-large .add-button-card-artist {
    font-size: 1.125rem;
}

/* Compact variant */
.add-button-card.compact {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.add-button-card.compact .add-button-card-song-info {
    flex: 1;
}

.add-button-card.compact .add-button-card-button-container {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.add-button-card.compact .add-button-card-title {
    margin-bottom: 0.25rem;
}

.add-button-card.compact .add-button-card-artist {
    margin-bottom: 0.5rem;
}

/* Playlist mode */
.add-button-card.playlist-mode {
    background: linear-gradient(135deg, #131318 0%, #0a0a0c 100%);
    border-color: #475569;
}


/* Loading state */
.add-button-card.loading {
    pointer-events: none;
    opacity: 0.7;
}

.add-button-card.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(30, 41, 59, 0.8);
    border-radius: 12px;
    z-index: 10;
}


/* Responsive design */
@media (max-width: 768px) {
    .add-button-card {
        padding: 1rem;
    }
    
    .add-button-card.compact {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .add-button-card-button-container {
        justify-content: center;
    }
    
    .add-button-card-button {
        width: 100%;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .add-button-card {
        border-radius: 8px;
    }
    
    .add-button-card-metadata {
        justify-content: center;
    }
    
    .add-button-card-duration,
    .add-button-card-genre,
    .add-button-card-album {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .add-button-card {
        border-width: 2px;
    }
    
    .add-button-card-title,
    .add-button-card-artist {
        font-weight: 700;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .add-button-card {
        transition: none;
    }
    
    .add-button-card:hover {
        transform: none;
    }
    
    .add-button-card.add-success-animation,
    .add-button-card.add-error-animation {
        animation: none;
    }
    
    .add-button-card.optimistic-update {
        transform: none;
        opacity: 1;
    }
}

/* Print styles */
@media print {
    .add-button-card {
        border: 1px solid #000;
        box-shadow: none;
        transform: none;
    }
    
    .add-button-card-button-container {
        display: none;
    }
    
    .add-button-card-playlist-selector {
        display: none;
    }
}

/* ============================================
   Sidebar - Your Playlists Component Styles
   ============================================ */

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#playlists-list a,
#playlists-list-compact a {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    color: #8888a0;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

#playlists-list a:hover,
#playlists-list-compact a:hover {
    background-color: #1f2937;
    color: #a5b4fc;
}

#playlists-list-compact a {
    justify-content: center;
    padding: 0.75rem;
}

#playlists-list a:focus-visible,
#playlists-list-compact a:focus-visible {
    outline: 2px solid #6c5ce7;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #your-playlists-container,
    #playlists-list a,
    #playlists-list-compact a {
        transition: none;
    }
}