/* Color Picker Tool Styles */

/* Color picker cursor */
#colorPickerCursor {
    z-index: 1000;
    transition: all 0.1s ease;
}

/* Color preview in results */
#colorPreview {
    border: 2px solid #dee2e6;
    transition: all 0.2s ease;
}

[data-bs-theme="dark"] #colorPreview {
    border-color: #495057;
}

/* Color history items */
#colorHistory .position-relative {
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 2px solid var(--bs-primary-text-emphasis) !important;
}

#colorHistory .position-relative:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 10;
    border-color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] #colorHistory .position-relative {
    box-shadow: 0 2px 4px rgba(255,255,255,0.1);
}

[data-bs-theme="dark"] #colorHistory .position-relative:hover {
    box-shadow: 0 4px 8px rgba(255,255,255,0.2);
}

/* Image preview with cursor */
#imagePreview {
    transition: all 0.2s ease;
}

#imagePreview:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

[data-bs-theme="dark"] #imagePreview:hover {
    box-shadow: 0 4px 12px rgba(255,255,255,0.1);
}

/* Copy buttons - using Bootstrap btn-success */

/* Color values input styling */
.form-control-sm {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
}

/* Instructions card */
#instructionsCard {
    border-left: 4px solid var(--bs-primary);
}

[data-bs-theme="dark"] #instructionsCard {
    border-left-color: var(--bs-primary);
}

/* Color results card */
#colorResultsCard {
    border: none;
}

[data-bs-theme="dark"] #colorResultsCard {
    border: none;
}

/* Color history card */
#colorHistoryCard {
    border-left: 4px solid var(--bs-info);
}

[data-bs-theme="dark"] #colorHistoryCard {
    border-left-color: var(--bs-info);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #colorHistory .position-relative {
        width: 35px !important;
        height: 35px !important;
    }

    .btn-outline-primary {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }

    .btn-outline-primary img {
        width: 12px !important;
        height: 12px !important;
    }
}

/* Animation for color selection */
@keyframes colorPicked {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.color-picked {
    animation: colorPicked 0.3s ease;
}

/* Color name styling */
#colorName {
    font-size: 1.1rem;
    color: var(--bs-body-color);
}

/* Coordinates styling */
#colorCoordinates {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}