/* ==========================================
   CMUSIC - MAIN STYLESHEET
   Import all CSS modules in correct order
   ========================================== */

/* === 1. BASE LAYER === */
/* Variables must come first */
@import url('base/variables.css');

/* Reset and base styles */
@import url('base/reset.css');

/* === 2. UTILITIES === */
@import url('utils/utilities.css');

/* === 3. COMPONENTS === */
@import url('components/sidebar.css');
@import url('components/header.css');
@import url('components/content.css');
@import url('components/card.css');
@import url('components/player.css');
@import url('components/modal.css');
@import url('components/login-signup.css');
@import url('components/toast.css');

/* === 4. RESPONSIVE === */
/* Media queries must come last */
@import url('responsive.css');


/* ==========================================
   Artist
   ========================================== */

/* --- Hero Section (Phần ảnh bìa to) --- */
.section-hero {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    height: 350px;
    margin-bottom: 24px;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, #000 100%),
        url('data:image/jpeg;base64,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');
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
}

.hero-content {
    position: absolute;
    bottom: 20px;
    left: 30px;
    z-index: 2;
}

.hero-content h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.hero-content p {
    font-size: 0.9rem;
    color: #b3b3b3;
}


/* --- Playlist Layout --- */
.playlist-container {
    padding: 0 30px;
    gap: 24px;
}

/* Grid Layout cho các hàng */
/* Cấu trúc cột: [Rank] [Artist Info] [Song Info] [Time/Actions] */
.chart-header,
.track-item-artist {
    display: grid;
    grid-template-columns: 50px 1.5fr 1.5fr 100px;
    /* Chia tỷ lệ cột */
    align-items: center;
    padding: 10px 10px;
}

/* Header chữ nhỏ màu xám */
.chart-header {
    font-size: 14px;
    color: #b3b3b3;
    font-weight: 600;
    letter-spacing: 1px;
}

.chart-header .col-song {
    padding-left: 10px;
}

.chart-header .col-time {
    text-align: right;
}

/* --- */

/* --- Track Item Styling --- */
.track-item-artist {
    border-radius: 6px;
    transition: background-color 0.2s ease;
    padding: 12px 10px;
    margin-bottom: 4px;
}

/* Hover vào hàng */
.track-item-artist:hover {
    background-color: #1A1A1A;
    
    /* Màu xám đậm nền khi active */
}


/* Artist Column */
.col-artist {
    display: flex;
    align-items: center;
    gap: 15px;
}

.artist-avatar {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    /* Bo góc vuông mềm giống ảnh */
    object-fit: cover;
}

.artist-info {
    display: flex;
    flex-direction: column;
}

.artist-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 4px;
}

.artist-sub {
    font-size: 0.75rem;
    color: #b3b3b3;
}

/* Button Theo dõi */
.btn-follow {
    background: transparent;
    border: 1px solid #727272;
    color: #fff;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    margin-left: 20px;
    transition: all 0.2s;
    text-transform: uppercase;
}

.btn-follow:hover {
    border-color: #fff;
    transform: scale(1.05);
}

/* Ẩn nút theo dõi ở các hàng không active nếu muốn giống ảnh */
.track-item-artist:not(.active) .btn-follow {
    display: none;
}

/* Song Column */
.col-song {
    display: flex;
    align-items: center;
    gap: 12px;
}
.song-cover-wrapper {
    position: relative;
    width: 45px;
    height: 45px;
}

.song-cover {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    object-fit: cover;
}

/* Nút play đè lên ảnh bài hát */
.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    opacity: 0;
    /* Ẩn mặc định */
}

/* Hiển thị nút play khi active */
.track-item-artist .play-overlay {
    opacity: 1;
}

.song-info {
    display: flex;
    flex-direction: column;
}

.song-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
}

.song-artist {
    font-size: 0.75rem;
    color: #b3b3b3;
}

/* Time / Actions Column */
.col-time {
    text-align: right;
    font-size: 0.85rem;
    color: #b3b3b3;
    font-variant-numeric: tabular-nums;
}

.actions {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    align-items: center;
}

.track-item-artist .icon-heart {
    display: none;
    color: #fff;
    /* Trái tim màu trắng trong hình */
    cursor: pointer;
}

.track-item-artist .icon-more {
    display: none;
    color: #b3b3b3;
    cursor: pointer;
}

.icon-heart:hover {
    display: none;
    color: red;
}

/* Xanh Spotify khi hover */
.icon-more:hover {
    color: #fff;
}

.track-item-artist:hover .icon-heart,
.track-item-artist:hover .icon-more {
    display: block;
}

.track-item-artist:hover .time {
    display: none;
}

/* Responsive cơ bản */
@media (max-width: 768px) {

    .chart-header,
    .track-item-artist {
        grid-template-columns: 40px 1fr 60px;
        /* Thu gọn trên mobile */
    }

    .col-song,
    .btn-follow,
    .artist-sub {
        display: none;
        /* Ẩn bớt thông tin */
    }
}


/* ==========================================
   Favorite
   ========================================== */

/* --- Playlist Hero Section --- */
.playlist-hero {
    position: relative;
    display: flex;
    align-items: flex-end; /* Căn nội dung xuống đáy */
    padding: 40px 30px;
    height: 350px;
    margin-bottom: 20px;
    overflow: hidden;
}

/* Hiệu ứng nền xanh/tím tỏa sáng phía trên */
.hero-bg-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #2b4cde 0%, rgba(0,0,0,0) 100%);
    opacity: 0.6;
    z-index: 1;
}

/* Ảnh bìa playlist (Gradient + Heart Icon) */
.hero-cover {
    position: relative;
    z-index: 2;
    width: 220px;
    height: 220px;
    background: linear-gradient(135deg, #00c6ff, #0072ff, #a18cd1, #fbc2eb); /* Gradient giả lập màu */
    background: linear-gradient(135deg, #38ef7d, #11998e); /* Nếu muốn màu xanh lá thì đổi đây, dưới đây là màu tím xanh như ảnh */
    background: linear-gradient(135deg, #4facfe 0%, #a6c1ee 100%);
    background: linear-gradient(to bottom right, #24C6DC, #514A9D); /* Màu sát với ảnh nhất */
    
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
    margin-bottom: 0px;
    flex-shrink: 0;
}

/* icon more */
.hero-cover span {
    font-size: 80px;
    color: #fff;
}

.hero-info {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 220px;
}

.playlist-subtitle {
    font-size: 0.9rem;
    color: #aaa; /* Màu chữ xám nhạt */
    margin-bottom: 8px;
}

.playlist-title {
    font-size: 3rem; /* Chữ to đậm */
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.1;
}

/* Nút "Phát tất cả" */
.btn-play-all {
    background: linear-gradient(90deg, #4e54c8, #8f94fb);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    transition: transform 0.2s;
}

.btn-play-all:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* --- Track List --- */
/* .track-list-container {
    padding: 0 30px;
} */ 
/* bỏ */

/* Grid Layout: Định nghĩa độ rộng các cột */
/* Cấu trúc: [Index] [Title] [Artist] [Album] [Time] */
.track-header, .track-item {
    display: grid;
    grid-template-columns: 50px 2fr 1.5fr 1.5fr 80px;
    align-items: center;
    padding: 10px 10px;
}

.track-header {
    text-transform: uppercase;
    color: #b3b3b3;
    font-size: 0.8rem;
    font-weight: 600;
    border-bottom: 1px solid #333;
    margin-bottom: 10px;
}

.track-header .col-time {
    text-align: right;
    padding-right: 15px;
}

/* Track Item Style */
.track-item {
    border-radius: 4px;
    color: #fff;
    transition: background-color 0.2s;
}

.track-item:hover {
    background-color: rgba(255,255,255,0.1);
}

/* Active Row Style (Bài đang hát) */
.track-item.active {
    background-color: #1c1c1c; /* Nền xám đậm */
}

/* Đổi màu chữ xanh cho hàng Active */
.track-item.active .col-title .song-name,
.track-item.active .col-artist,
.track-item.active .col-album {
    color: #5189ff; /* Màu xanh dương nhạt giống ảnh */
}

.col-index {
    color: #b3b3b3;
    font-size: 1rem;
}

.track-item.active .col-index {
    color: #fff; /* Icon play màu trắng */
}

/* Cột Tiêu đề (Hình + Tên) */
.col-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.track-img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
}

.song-name {
    font-weight: 600;
    font-size: 0.95rem;
}

/* Các cột còn lại */
.col-artist, .col-album {
    font-size: 0.9rem;
    color: #b3b3b3;
}

/* Nếu hàng thường (không active) thì chữ trắng hơn chút */
.track-item:not(.active) .col-artist,
.track-item:not(.active) .col-album {
    color: #b3b3b3; 
}
.track-item:not(.active) .song-name {
    color: #fff;
}

.col-time {
    text-align: right;
    color: #b3b3b3;
    font-size: 0.85rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.track-item .icon-more {
    display: none; /* Ẩn dấu 3 chấm mặc định */
    cursor: pointer;
}

.track-item:hover .icon-more {
    display: block; /* Hiện khi hover */
}

/* --- Xem thêm --- */
.see-more {
    margin-top: 15px;
    padding-left: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.see-more:hover {
    text-decoration: underline;
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .playlist-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: auto;
    }
    .hero-cover { margin-right: 0; margin-bottom: 20px; }
    .hero-info { height: auto; align-items: center; }
    
    .track-header, .track-item {
        grid-template-columns: 40px 1fr 60px; /* Ẩn cột Artist/Album */
    }
    .col-artist, .col-album { display: none; }
}

/* ==========================================
   Profile
   ========================================== */

/* --- 1. Header Profile --- */
.profile-hero {
    position: relative;
    background: linear-gradient(to bottom, #1e3c72, #000); /* Gradient Xanh đậm -> Đen */
    padding: 30px;
    height: 300px;
    display: flex;
    align-items: center;
    border-radius: 0 0 20px 20px;
    margin-bottom: 20px;
}

.profile-content {
    display: flex;
    align-items: center;
    gap: 30px;
    z-index: 2;
    width: 100%;
}

/* Ảnh đại diện tròn */
.profile-avatar img {
    width: 180px;
    height: 180px;
    border-radius: 50%; /* Làm tròn ảnh */
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    object-fit: cover;
    border: 4px solid rgba(255,255,255,0.1);
}

.profile-info {
    display: flex;
    flex-direction: column;
}

.profile-tag {
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.profile-name {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1;
}

.profile-stats {
    font-size: 0.95rem;
    color: #ccc;
    margin-bottom: 20px;
}

.btn-play-profile {
    background: linear-gradient(90deg, #5b7fff, #3366ff);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    transition: transform 0.2s;
}

.btn-play-profile:hover {
    transform: scale(1.05);
}

/* --- 2. Quick Access Cards (Grid 2 cột) --- */
.quick-access-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia đôi */
    gap: 20px;
    padding: 0 30px;
    margin-bottom: 40px;
}

.qa-card {
    background-color: #181818;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0; /* Ảnh tràn viền trái */
    overflow: hidden;
    cursor: pointer;
    transition: background 0.3s;
}

.qa-card:hover {
    background-color: #2a2a2a;
}

.qa-img-box {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
}

.gradient-heart {
    background: linear-gradient(135deg, #8a2387, #e94057, #f27121);
}

.gradient-blue {
    background: linear-gradient(135deg, #00c6ff, #0072ff);
}

.gradient-heart span,
.gradient-blue span {
    font-size: 30px;
    font-weight: 600;
}

.qa-info {
    padding-left: 15px;
}

.qa-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 4px;
}

.qa-sub {
    font-size: 0.8rem;
    color: #b3b3b3;
}