/* 🪟 GLASS MORPHISM - RIO'S POLISH 2025 ✨ */

/* Category Cards - Glass Effect */
.category-card {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 
        0 8px 32px rgba(31, 38, 135, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
}

/* 🛑 REMOVED: Card hover effect - may be causing header color change */

/* Category Header - Glass Effect */
.category-header {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.1), 
        rgba(139, 92, 246, 0.1)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #1f2937 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 🛑 NO HOVER EFFECT - User requested no color change */
/* Removed all .category-header:hover styles */

/* Active header stays blue with white text */
.category-header.active {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.95), 
        rgba(139, 92, 246, 0.95)) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 
        0 4px 16px rgba(59, 130, 246, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    color: white !important;
}

/* 🛑 NO HOVER EFFECT on active header either */
/* The header stays as-is, no color changes on hover */

/* Checklist Items - Glass Effect */
.checklist-item {
    background: rgba(249, 250, 251, 0.5) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.checklist-item:hover {
    background: rgba(243, 244, 246, 0.7) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
    transform: translateX(4px);
}

/* 🔧 FIX: Text in unchecked items should be dark on hover */
.checklist-item:hover .item-text {
    color: #0f172a !important;
    font-weight: 500;
}

.checklist-item.checked {
    background: linear-gradient(135deg, 
        rgba(16, 185, 129, 0.15), 
        rgba(167, 243, 208, 0.2)) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 🎨 RIO'S FIX: Perfect hover for checked items */
.checklist-item.checked:hover {
    background: linear-gradient(135deg, 
        rgba(5, 150, 105, 0.85), 
        rgba(4, 120, 87, 0.9)) !important;
    border-color: rgba(5, 150, 105, 1) !important;
    box-shadow: 
        0 6px 20px rgba(16, 185, 129, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    transform: translateX(4px);
}

.checklist-item.checked:hover .item-text {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 🔧 Default text for checked items */
.checklist-item.checked .item-text {
    color: #0f172a !important;
    text-decoration: line-through;
    font-weight: 600;
}

/* Custom Checkbox - Glass Effect */
.custom-checkbox {
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 2px solid rgba(209, 213, 219, 0.5) !important;
}

.custom-checkbox:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(59, 130, 246, 0.8) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.custom-checkbox.checked {
    background: linear-gradient(135deg, 
        rgba(16, 185, 129, 0.95), 
        rgba(5, 150, 105, 0.95)) !important;
    border-color: rgba(16, 185, 129, 1) !important;
    box-shadow: 
        0 4px 12px rgba(16, 185, 129, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}

/* Category Actions Bar - Glass Effect */
.category-actions {
    background: linear-gradient(135deg, 
        rgba(249, 250, 251, 0.6), 
        rgba(243, 244, 246, 0.6)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(229, 231, 235, 0.3) !important;
}

/* Button - Glass Effect */
.btn-check-all {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.95), 
        rgba(37, 99, 235, 0.95)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 4px 12px rgba(59, 130, 246, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.btn-check-all:hover {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 1), 
        rgba(37, 99, 235, 1)) !important;
    box-shadow: 
        0 6px 20px rgba(59, 130, 246, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

/* Season Buttons - Glass Effect */
.season-btn {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(229, 231, 235, 0.5) !important;
}

.season-btn:hover {
    background: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(59, 130, 246, 0.8) !important;
}

.season-btn.active {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.95), 
        rgba(139, 92, 246, 0.95)) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-color: transparent !important;
    box-shadow: 
        0 6px 16px rgba(59, 130, 246, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

/* Complete Badge - Glass Effect */
.category-complete-badge {
    background: linear-gradient(135deg, 
        rgba(209, 250, 229, 0.8), 
        rgba(167, 243, 208, 0.8)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .category-card {
        background: rgba(17, 24, 39, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .checklist-item {
        background: rgba(31, 41, 55, 0.5) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .item-text {
        color: #f3f4f6 !important;
    }
    
    .category-title {
        color: #f3f4f6 !important;
    }
}