/* tools/reduce-size/style.css */

/* Note: This file now only contains styles specific to the image reducer tool.
   Global styles (like font-family, background-color for body) are assumed
   to be handled by Tailwind CSS classes directly in the EJS templates,
   or could be placed in a common.css if needed for more complex global styling. */

body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6; /* Light gray background */
}

/* Drop Area Styling */
.drop-area {
    border: 2px dashed #cbd5e1; /* Gray border */
    background-color: #ffffff; /* White background */
    transition: all 0.2s ease-in-out;
}

.drop-area.highlight {
    border-color: #3b82f6; /* Blue border on drag over */
    background-color: #eff6ff; /* Light blue background on drag over */
}

/* Custom scrollbar for processed images container */
.processed-images-container::-webkit-scrollbar {
    width: 8px;
}

.processed-images-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.processed-images-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.processed-images-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}