/**
 * Spotify Demo — Refactored with Modern CSS (2024)
 * 
 * Features: @layer, @container, color-mix(), CSS nesting, 
 * subgrid, content-visibility, scroll-driven animations
 */

@layer spotify-reset, spotify-tokens, spotify-components, spotify-utilities;

@layer spotify-tokens {
  .spotify-demo {
    /* Spotify brand */
    --spotify-green: oklch(0.75 0.18 150);
    --spotify-green-hover: color-mix(in oklch, var(--spotify-green), black 15%);
    
    /* Dark theme */
    --spotify-black: oklch(0.08 0 0);
    --spotify-base: oklch(0.12 0 0);
    --spotify-highlight: oklch(0.16 0 0);
    --spotify-elevated: oklch(0.2 0 0);
    
    /* Text */
    --text-base: oklch(1 0 0);
    --text-subdued: oklch(0.7 0 0);
    --text-disabled: oklch(0.45 0 0);
    
    /* Animation */
    --spotify-transition: 200ms ease;
  }
}

@layer spotify-reset {
  .spotify-demo {
    font-family: 'Circular', -apple-system, BlinkMacSystemFont, sans-serif;
    color-scheme: dark;
    
    *, *::before, *::after {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      background: var(--spotify-black);
      color: var(--text-base);
      height: 100vh;
      overflow: hidden;
    }
  }
}

@layer spotify-components {
  /* ──────────────────────────────────────────────────────────────────────────
   * App Layout
   * ──────────────────────────────────────────────────────────────────────── */
  .spotify-app {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: 1fr 90px;
    height: 100vh;
    gap: var(--gutter-sm);
    padding: var(--gutter-sm);
    
    @container (max-width: 900px) {
      grid-template-columns: 80px 1fr;
      
      & .sidebar {
        & .nav-text { display: none; }
        & .logo { display: none; }
      }
    }
  }
  
  /* ──────────────────────────────────────────────────────────────────────────
   * Sidebar
   * ──────────────────────────────────────────────────────────────────────── */
  .sidebar {
    background: var(--spotify-black);
    border-radius: var(--radius-md);
    padding: var(--pad-md);
    display: flex;
    flex-direction: column;
    gap: var(--gutter-md);
    content-visibility: auto;
    
    & .logo {
      font-size: var(--text-xl);
      font-weight: var(--font-bold);
      color: var(--text-base);
      display: flex;
      align-items: center;
      gap: var(--gutter-sm);
    }
    
    & .nav-menu {
      display: flex;
      flex-direction: column;
      gap: var(--gutter-xs);
      
      & .nav-item {
        display: flex;
        align-items: center;
        gap: var(--gutter-md);
        padding: var(--pad-sm);
        color: var(--text-subdued);
        text-decoration: none;
        border-radius: var(--radius-sm);
        transition: all var(--spotify-transition);
        font-weight: var(--font-semibold);
        
        &:hover {
          color: var(--text-base);
        }
        
        &:has(.active) {
          color: var(--text-base);
          background: var(--spotify-highlight);
        }
        
        & .nav-icon {
          font-size: var(--text-xl);
        }
      }
    }
    
    & .playlist-section {
      margin-top: var(--marg-md);
      padding-top: var(--pad-md);
      border-top: 1px solid var(--spotify-highlight);
      
      & .playlist-title {
        font-size: var(--text-xs);
        font-weight: var(--font-bold);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: var(--marg-sm);
      }
      
      & .playlist-list {
        display: flex;
        flex-direction: column;
        gap: var(--gutter-xs);
        max-height: 200px;
        overflow-y: auto;
        
        & .playlist-item {
          padding: var(--pad-xs) var(--pad-sm);
          color: var(--text-subdued);
          font-size: var(--text-sm);
          border-radius: var(--radius-sm);
          cursor: pointer;
          transition: all var(--spotify-transition);
          
          &:hover {
            color: var(--text-base);
          }
        }
      }
    }
  }
  
  /* ──────────────────────────────────────────────────────────────────────────
   * Main Content
   * ──────────────────────────────────────────────────────────────────────── */
  .main-content {
    background: linear-gradient(180deg, color-mix(in oklch, var(--spotify-green), transparent 85%) 0%, var(--spotify-base) 40%);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    
    & .content-header {
      padding: var(--pad-lg);
      display: flex;
      align-items: flex-end;
      gap: var(--gutter-lg);
      
      & .playlist-cover {
        width: 200px;
        height: 200px;
        background: linear-gradient(135deg, var(--spotify-green), var(--spotify-black));
        border-radius: var(--radius-md);
        box-shadow: 0 8px 24px rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
        flex-shrink: 0;
      }
      
      & .playlist-info {
        & .playlist-type {
          font-size: var(--text-xs);
          font-weight: var(--font-bold);
          text-transform: uppercase;
        }
        
        & .playlist-name {
          font-size: clamp(2rem, 5vw, 4rem);
          font-weight: var(--font-black);
          margin: var(--marg-sm) 0;
          line-height: 1;
        }
        
        & .playlist-description {
          color: var(--text-subdued);
          font-size: var(--text-sm);
          margin-top: var(--marg-md);
        }
      }
    }
    
    & .content-body {
      padding: var(--pad-lg);
      flex: 1;
      overflow-y: auto;
      
      /* Action buttons */
      & .actions {
        display: flex;
        align-items: center;
        gap: var(--gutter-md);
        margin-bottom: var(--marg-lg);
        
        & .play-btn {
          width: 56px;
          height: 56px;
          border-radius: 50%;
          background: var(--spotify-green);
          border: none;
          color: var(--spotify-black);
          font-size: var(--text-xl);
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all var(--spotify-transition);
          
          &:hover {
            background: var(--spotify-green-hover);
            transform: scale(1.05);
          }
        }
        
        & .action-btn {
          background: none;
          border: 1px solid var(--text-disabled);
          color: var(--text-subdued);
          padding: var(--pad-xs) var(--pad-md);
          border-radius: var(--radius-full);
          font-size: var(--text-sm);
          font-weight: var(--font-semibold);
          cursor: pointer;
          transition: all var(--spotify-transition);
          
          &:hover {
            border-color: var(--text-base);
            color: var(--text-base);
          }
        }
      }
      
      /* Track list with subgrid */
      & .track-list {
        display: grid;
        grid-template-columns: 40px 1fr 1fr 80px;
        gap: var(--gutter-md);
        padding: var(--pad-sm) var(--pad-md);
        border-bottom: 1px solid var(--spotify-highlight);
        font-size: var(--text-xs);
        color: var(--text-subdued);
        text-transform: uppercase;
        
        &.track-row {
          grid-template-columns: 40px 1fr 1fr 80px;
          padding: var(--pad-sm) var(--pad-md);
          border-radius: var(--radius-sm);
          cursor: pointer;
          transition: background var(--spotify-transition);
          align-items: center;
          
          &:hover {
            background: color-mix(in oklch, white, transparent 90%);
          }
          
          &:has(.playing) {
            background: color-mix(in oklch, var(--spotify-green), transparent 85%);
            
            & .track-number {
              color: var(--spotify-green);
            }
          }
          
          & .track-number {
            color: var(--text-subdued);
            font-size: var(--text-sm);
          }
          
          & .track-info {
            display: flex;
            flex-direction: column;
            gap: var(--gutter-xs);
            
            & .track-title {
              color: var(--text-base);
              font-size: var(--text-base);
              font-weight: var(--font-medium);
            }
            
            & .track-artist {
              color: var(--text-subdued);
              font-size: var(--text-sm);
            }
          }
          
          & .track-album {
            color: var(--text-subdued);
            font-size: var(--text-sm);
          }
          
          & .track-duration {
            color: var(--text-subdued);
            font-size: var(--text-sm);
            text-align: right;
          }
        }
      }
    }
  }
  
  /* ──────────────────────────────────────────────────────────────────────────
   * Player Bar
   * ──────────────────────────────────────────────────────────────────────── */
  .player-bar {
    grid-column: 1 / -1;
    background: var(--spotify-elevated);
    border-radius: var(--radius-md);
    padding: var(--pad-sm) var(--pad-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter-md);
    content-visibility: auto;
    
    & .player-left {
      display: flex;
      align-items: center;
      gap: var(--gutter-md);
      min-width: 180px;
      
      & .now-playing {
        display: flex;
        align-items: center;
        gap: var(--gutter-md);
        
        & .album-art {
          width: 56px;
          height: 56px;
          background: linear-gradient(135deg, var(--spotify-green), var(--spotify-black));
          border-radius: var(--radius-sm);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.5rem;
        }
        
        & .track-details {
          & .track-name {
            font-size: var(--text-sm);
            font-weight: var(--font-medium);
            margin: 0;
          }
          
          & .artist-name {
            font-size: var(--text-xs);
            color: var(--text-subdued);
          }
        }
      }
      
      & .like-btn {
        background: none;
        border: none;
        color: var(--text-subdued);
        cursor: pointer;
        font-size: var(--text-lg);
        transition: color var(--spotify-transition);
        
        &:hover {
          color: var(--text-base);
        }
      }
    }
    
    & .player-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--gutter-xs);
      flex: 1;
      max-width: 600px;
      
      & .player-controls {
        display: flex;
        align-items: center;
        gap: var(--gutter-lg);
        
        & .control-btn {
          background: none;
          border: none;
          color: var(--text-subdued);
          cursor: pointer;
          font-size: var(--text-lg);
          transition: all var(--spotify-transition);
          
          &:hover {
            color: var(--text-base);
            transform: scale(1.1);
          }
        }
        
        & .play-pause-btn {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: var(--text-base);
          color: var(--spotify-black);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: var(--text-base);
          
          &:hover {
            transform: scale(1.1);
            color: var(--spotify-black);
          }
        }
      }
      
      & .progress-bar {
        display: flex;
        align-items: center;
        gap: var(--gutter-sm);
        width: 100%;
        font-size: var(--text-xs);
        color: var(--text-subdued);
        
        & .progress-track {
          flex: 1;
          height: 4px;
          background: var(--spotify-highlight);
          border-radius: 2px;
          position: relative;
          cursor: pointer;
          
          & .progress-fill {
            width: 35%;
            height: 100%;
            background: var(--text-base);
            border-radius: 2px;
            position: relative;
            
            &::after {
              content: '';
              position: absolute;
              right: -6px;
              top: 50%;
              transform: translateY(-50%);
              width: 12px;
              height: 12px;
              background: var(--text-base);
              border-radius: 50%;
              opacity: 0;
              transition: opacity var(--spotify-transition);
            }
          }
          
          &:hover .progress-fill::after {
            opacity: 1;
          }
        }
      }
    }
    
    & .player-right {
      display: flex;
      align-items: center;
      gap: var(--gutter-md);
      min-width: 180px;
      justify-content: flex-end;
      
      & .volume-slider {
        display: flex;
        align-items: center;
        gap: var(--gutter-xs);
        width: 120px;
        
        & .volume-track {
          flex: 1;
          height: 4px;
          background: var(--spotify-highlight);
          border-radius: 2px;
          position: relative;
          
          & .volume-fill {
            width: 70%;
            height: 100%;
            background: var(--text-base);
            border-radius: 2px;
          }
        }
      }
    }
  }
}

@layer spotify-utilities {
  .spotify-demo {
    & .text-subdued { color: var(--text-subdued); }
  }
}