/* General Styles */
.cursor-pointer {
    cursor: pointer;
}

/* Color Sample Styles */
.color-sample {
    transition: transform 0.2s ease;
}

tr:hover .color-sample {
    transform: scale(1.1);
}

/* Palette Color Styles */
.palette-color {
    transition: all 0.2s ease;
}

.palette-color:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

/* Custom Range Slider Styling */
.form-range::-webkit-slider-thumb {
    background: #8E4585;
    border: 1px solid #e0e0e0;
}

.form-range::-moz-range-thumb {
    background: #8E4585;
    border: 1px solid #e0e0e0;
}

.form-range::-ms-thumb {
    background: #8E4585;
    border: 1px solid #e0e0e0;
}

.form-range::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #8E4585, #673147, #AA6F8E, #4E2639, #DDA0DD);
}

.form-range::-moz-range-track {
    background: linear-gradient(to right, #8E4585, #673147, #AA6F8E, #4E2639, #DDA0DD);
}

.form-range::-ms-track {
    background: linear-gradient(to right, #8E4585, #673147, #AA6F8E, #4E2639, #DDA0DD);
}

/* Preset Color Button Styles */
.preset-color {
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.preset-color:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.preset-color.active {
    border: 2px solid #333;
}

/* Copy Button Styles */
.copy-icon {
    transition: all 0.2s ease;
    opacity: 0.7;
}

.copy-icon:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Current Color Display */
#currentColor {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    transition: background-color 0.3s ease;
}

/* Plum-specific Styles */
.plum-shadow {
    box-shadow: 0 5px 15px rgba(142, 69, 133, 0.3);
}

.plum-border {
    border: 2px solid #8E4585;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .palette-color {
        height: 80px;
    }
    
    #currentColor {
        height: 120px;
    }
}

/* Animation for Plum Color Elements */
@keyframes plumGlow {
    0% {
        box-shadow: 0 0 5px rgba(142, 69, 133, 0.5);
    }
    50% {
        box-shadow: 0 0 15px rgba(142, 69, 133, 0.8);
    }
    100% {
        box-shadow: 0 0 5px rgba(142, 69, 133, 0.5);
    }
}

.plum-glow {
    animation: plumGlow 2s infinite;
}

/* Accessibility Improvements */
.form-range:focus {
    outline: none;
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(142, 69, 133, 0.25);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(142, 69, 133, 0.25);
}

.form-range:focus::-ms-thumb {
    box-shadow: 0 0 0 3px rgba(142, 69, 133, 0.25);
}

/* Toast Animation */
.toast {
    transition: opacity 0.3s ease;
}

/* Color Palette Links */
.col a {
    transition: all 0.3s ease;
}

.col a:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/* Plum Color Spectrum Gradient */
.plum-gradient {
    background: linear-gradient(to right, #8E4585, #673147, #AA6F8E, #4E2639, #DDA0DD);
    background-size: 200% 100%;
    animation: plumGradientShift 10s ease infinite;
}

@keyframes plumGradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
    .bg-light {
        background-color: #222 !important;
    }
    
    .bg-white, .card, .navbar {
        background-color: #333 !important;
    }
    
    .text-dark, .card-body, .fs-4, .fs-5, h1, h2, h3, p, .table {
        color: #f0f0f0 !important;
    }
    
    .text-secondary {
        color: #aaa !important;
    }
    
    .border-top, .table, .table td, .table th {
        border-color: #444 !important;
    }
    
    .table-light {
        background-color: #444 !important;
    }
    
    .badge.bg-light.text-dark {
        background-color: #555 !important;
        color: #f0f0f0 !important;
    }
}