/**
 * custom-song-list.css - CSS cho danh sách bài hát
 * Thay thế cho DataTables với giao diện tùy chỉnh
 */

/* Kiểu dáng cho bảng tùy chỉnh */
.song-table {
    width: 100%;
}

/* Kiểu dáng cho các cột có thể sắp xếp */
th.sortable {
    cursor: pointer;
    position: relative;
    padding-right: 20px !important;
}

th.sortable:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.sortable i.fas {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* Kiểu dáng cho thanh tìm kiếm */
.search-container {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.search-container input {
    max-width: 300px;
    margin-right: 10px;
}

/* Hiệu ứng khi hover vào hàng */
.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.03);
    transition: background-color 0.2s ease;
}

/* Hiệu ứng hàng được chọn */
.table-hover tbody tr.active {
    background-color: rgba(94, 114, 228, 0.1);
}

/* Style cho các nút phân trang */
.pagination .page-item .page-link {
    color: #5e72e4;
}

.pagination .page-item.active .page-link {
    background-color: #5e72e4;
    border-color: #5e72e4;
    color: white;
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 768px) {
    /* Ẩn các cột không cần thiết */
    .mobile-hide {
        display: none;
    }
    
    /* Hiện nút toggle trên mobile */
    .toggle-mobile-details {
        display: flex !important;
        margin-left: auto;
        padding: 0;
        margin-left: 5px;
        transition: transform 0.3s ease;
    }
    
    .toggle-mobile-details.active {
        transform: rotate(180deg);
    }
    
    /* Style cho hàng chi tiết trên mobile */
    .mobile-details-row {
        background-color: #f8f9fa;
    }
    
    .mobile-details {
        border-top: 1px solid #e9ecef;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
        animation: fadeIn 0.3s ease;
    }
    
    .mobile-details h6 {
        font-size: 0.85rem;
        font-weight: 600;
    }
    
    .mobile-details p {
        color: #525f7f;
    }
    
    /* Thêm icon để chỉ thị có thể mở rộng */
    .song-row {
        cursor: pointer;
        position: relative;
    }
    
    /* Làm cho nội dung bảng dễ đọc hơn trên mobile */
    .song-table td {
        padding: 0.75rem 0.5rem;
    }
    
    /* Hiệu ứng khi click vào hàng */
    .song-row.active-row {
        background-color: rgba(94, 114, 228, 0.05);
    }
}

/* CSS cho khu vực lọc nâng cao */
#advanced-filters {
    background-color: #f8f9fa;
    padding: 1rem;
    margin-bottom: 0;
    border-bottom: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

/* Style cho bộ lọc hợp âm dạng nút bấm với màu sắc phong phú */
.chord-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.chord-btn {
    border-radius: 20px;
    font-size: 0.85rem;
    padding: 0.35rem 0.9rem;
    transition: all 0.3s ease;
    margin-right: 8px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(50,50,93,.1);
    border: 2px solid #eaeaea !important;
    font-weight: 500;
}

.chord-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(50,50,93,.15), 0 2px 4px rgba(0,0,0,.1);
}

/* Đặt màu sắc cơ bản cho nút "Tất cả" */
.chord-btn.all-btn {
    color: #5e72e4 !important;
    border-color: #5e72e4 !important;
    background-color: rgba(94, 114, 228, 0.05) !important;
}

.chord-btn.all-btn.active {
    background-color: #5e72e4 !important;
    color: white !important;
    border-color: #5e72e4 !important;
}

/* Màu sắc cho các hợp âm cơ bản (C, F, G) */
.chord-btn[data-chord="C"], 
.chord-btn[data-chord="F"], 
.chord-btn[data-chord="G"] {
    color: #2dce89 !important;
    border-color: #2dce89 !important;
    background-color: rgba(45, 206, 137, 0.05) !important;
}

.chord-btn[data-chord="C"].active, 
.chord-btn[data-chord="F"].active, 
.chord-btn[data-chord="G"].active {
    background-color: #2dce89 !important;
    color: white !important;
    border-color: #2dce89 !important;
}

/* Màu sắc cho các hợp âm thứ (Am, Dm, Em) */
.chord-btn[data-chord="Am"], 
.chord-btn[data-chord="Dm"], 
.chord-btn[data-chord="Em"] {
    color: #fb6340 !important;
    border-color: #fb6340 !important;
    background-color: rgba(251, 99, 64, 0.05) !important;
}

.chord-btn[data-chord="Am"].active, 
.chord-btn[data-chord="Dm"].active, 
.chord-btn[data-chord="Em"].active {
    background-color: #fb6340 !important;
    color: white !important;
    border-color: #fb6340 !important;
}

/* Màu sắc cho các hợp âm 7 (A7, D7, E7, G7) */
.chord-btn[data-chord$="7"] {
    color: #11cdef !important;
    border-color: #11cdef !important;
    background-color: rgba(17, 205, 239, 0.05) !important;
}

.chord-btn[data-chord$="7"].active {
    background-color: #11cdef !important;
    color: white !important;
    border-color: #11cdef !important;
}

/* Màu sắc cho các hợp âm thăng (#) */
.chord-btn[data-chord*="#"] {
    color: #f5365c !important;
    border-color: #f5365c !important;
    background-color: rgba(245, 54, 92, 0.05) !important;
}

.chord-btn[data-chord*="#"].active {
    background-color: #f5365c !important;
    color: white !important;
    border-color: #f5365c !important;
}

/* Màu sắc cho các hợp âm giảm (b) */
.chord-btn[data-chord*="b"] {
    color: #8965e0 !important;
    border-color: #8965e0 !important;
    background-color: rgba(137, 101, 224, 0.05) !important;
}

.chord-btn[data-chord*="b"].active {
    background-color: #8965e0 !important;
    color: white !important;
    border-color: #8965e0 !important;
}

/* Màu sắc cho các hợp âm còn lại */
.chord-btn:not(.all-btn):not([data-chord="C"]):not([data-chord="F"]):not([data-chord="G"]):not([data-chord="Am"]):not([data-chord="Dm"]):not([data-chord="Em"]):not([data-chord$="7"]):not([data-chord*="#"]):not([data-chord*="b"]) {
    color: #ffd600 !important;
    border-color: #ffd600 !important;
    background-color: rgba(255, 214, 0, 0.05) !important;
}

.chord-btn:not(.all-btn):not([data-chord="C"]):not([data-chord="F"]):not([data-chord="G"]):not([data-chord="Am"]):not([data-chord="Dm"]):not([data-chord="Em"]):not([data-chord$="7"]):not([data-chord*="#"]):not([data-chord*="b"]).active {
    background-color: #ffd600 !important;
    color: #212529 !important;
    border-color: #ffd600 !important;
}

/* Hiệu ứng khi chọn hợp âm */
.chord-btn.active {
    font-weight: 600 !important;
    position: relative;
    overflow: hidden;
    transform: translateY(-2px);
}

/* Ghi đè Bootstrap cho các nút */
.btn-outline-primary {
    background-color: transparent !important;
}

.chord-btn.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 0.8s ease-out;
}

@keyframes ripple {
    to {
        transform: scale(3);
        opacity: 0;
    }
}

/* Style cho các label trong bộ lọc */
#advanced-filters label {
    font-weight: 600;
    color: #525f7f;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

/* Style cho label khi bộ lọc được chọn */
#advanced-filters label.text-primary {
    color: #5e72e4 !important;
}

/* Style cho nút đặt lại bộ lọc */
#reset-filters {
    transition: all 0.2s ease;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02);
}

#reset-filters:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
}

/* Hiệu ứng khi thay đổi bộ lọc */
.filter-changed {
    animation: highlightChange 1s ease;
}

@keyframes highlightChange {
    0% { background-color: rgba(94, 114, 228, 0.2); }
    100% { background-color: transparent; }
}

/* Hiệu ứng loading cho tìm kiếm */
.searching input {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" fill="currentColor"%3E%3Cpath d="M32 8c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm0 6c9.941 0 18 8.059 18 18s-8.059 18-18 18-18-8.059-18-18 8.059-18 18-18z" /%3E%3C/svg%3E');
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 16px;
    animation: spin 1s linear infinite;
}

/* Animation cho hiệu ứng loading */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Tooltip cho các chức năng và phím tắt */
[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
}

/* Style cho thông báo "không tìm thấy" */
.no-results-message {
    padding: 2rem;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* Kiểu dáng cho các cột lời bài hát trên desktop */
.first-lyric-column, .chorus-column {
    width: 22%;
    min-width: 180px;
}

/* Kiểu dáng cho cột lời bài hát trên mobile */
.lyrics-column {
    min-width: 280px;
}

/* Style cho container chứa lời đầu và điệp khúc trên mobile */
.song-lyrics {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Style cho mỗi phần lời (lời đầu/điệp khúc) */
.lyrics-item {
    position: relative;
}

/* Style cho nhãn (chỉ hiển thị trên mobile) */
.lyrics-label {
    display: block;
    font-weight: 600;
    font-size: 0.75rem;
    color: #5e72e4;
    margin-bottom: 4px;
}

/* Style cho nội dung lời bài hát */
.lyrics-text {
    color: #525f7f;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}

/* Style cho vạch phân cách (chỉ hiển thị trên mobile) */
.lyrics-divider {
    width: 100%;
    height: 1px;
    background-color: #e9ecef;
    margin: 8px 0;
}

/* Style cho badge hiển thị hợp âm */
.chord-badge {
    background-color: #5e72e4;
    color: white;
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
}

/* Style cho badge thể loại */
.badge-soft-primary {
    color: #5e72e4;
    background-color: rgba(94, 114, 228, 0.1);
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 0.375rem;
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 768px) {
    /* Tăng số dòng hiển thị trên mobile */
    .lyrics-text {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
    
    /* Điều chỉnh padding để tối ưu không gian */
    .song-table td {
        padding: 0.75rem 0.5rem;
    }
    
    /* Giảm kích thước font trên mobile */
    .song-table {
        font-size: 0.875rem;
    }
    
    /* Cải thiện hiển thị các badge */
    .badge-soft-primary, .chord-badge {
        display: inline-block;
        margin-bottom: 5px;
    }
}

/* Hiệu ứng cho hàng khi hover */
.song-row:hover .lyrics-text {
    color: #32325d;
}