/* General body and container styles */
body {
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    color: #343A40;
    background-color: #F8F9FA;
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    /* max-width defined by Tailwind max-w-5xl */
}

/* Headings */
.font-heading {
    font-family: 'Noto Sans SC', sans-serif;
}

/* Sections - common styling */
section {
    background-color: #FFFFFF;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    padding: 1.5rem; /* p-6 */
    margin-bottom: 2.5rem; /* mb-10 */
    transition: box-shadow 0.3s ease-in-out;
}

section:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
}

/* Drop Zone */
#drop-zone {
    border: 2px dashed #ADB5BD;
    border-radius: 0.5rem; /* rounded-lg */
    padding: 2rem; /* p-8 */
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#drop-zone.drag-active, /* Combined selector for active drag state */
#drop-zone:hover {
    border-color: #E55B3A; 
    background-color: #FFF5F2; /* Custom light orange for drop hover/active */
}


#drop-zone img {
    /* Tailwind text-[#ADB5BD] applied directly */
}

/* Buttons */
button {
    transition: all 0.2s ease-in-out;
}

button:hover:not(:disabled) {
     opacity: 0.9; 
}

button:active:not(:disabled) {
    transform: scale(0.95); 
}

button:disabled {
    opacity: 0.5; 
    cursor: not-allowed; 
}

#select-file-btn, #compress-btn {
    background-color: #E55B3A;
    color: #FFFFFF;
    border-radius: 0.5rem; /* rounded-lg */
}


#download-all-btn {
    background-color: #28A745; 
    color: #FFFFFF;
    font-weight: 700; /* font-bold */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
}


#select-file-btn {
    padding: 0.5rem 1.5rem; /* py-2 px-6 */
    font-weight: 500; /* font-medium */
}

#compress-btn { 
     font-weight: 700; /* font-bold */
     padding: 0.75rem 2rem; /* py-3 px-8 */
     font-size: 1.125rem; /* text-lg */
}


#compress-new-btn {
    border: 1px solid #ADB5BD;
    color: #343A40;
    font-weight: 500; /* font-medium */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
}

#compress-new-btn:hover:not(:disabled) {
    background-color: #F8F9FA; /* hover:bg-[#F8F9FA] */
}

/* Inputs & Selects */
input[type="number"], select {
    padding: 0.5rem; /* p-2 */
    border: 1px solid #ADB5BD;
    border-radius: 0.375rem; /* rounded-md */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type="number"]:focus, select:focus {
    border-color: #E55B3A; 
    box-shadow: 0 0 0 0.2rem rgba(229, 91, 58, 0.25); 
    outline: none; 
}

input[type="number"]:disabled, select:disabled {
    background-color: #E9ECEF; 
}

/* Input errors */
input.border-red-500 { /* Applied by JS */
    border-color: #EF4444 !important; /* text-red-500, important to override focus style if needed */
}
.text-red-500 { color: #EF4444; }
.text-orange-500 { color: #F97316; }
.text-orange-600 { color: #EA580C; }
.text-orange-700 { color: #C2410C; }
.bg-orange-50 { background-color: #FFF7ED; }
.bg-orange-100 { background-color: #FFEDD5; }
.border-orange-200 { border-color: #FED7AA; }
.border-orange-300 { border-color: #FDBA74; }

.text-blue-700 { color: #1D4ED8; }
.bg-blue-100 { background-color: #DBEAFE; }
.border-blue-300 { border-color: #93C5FD; }

.text-red-700 { color: #B91C1C; }
.bg-red-100 { background-color: #FEE2E2; }
.border-red-300 { border-color: #FCA5A5; }


/* Quality Slider */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px; 
    background: #DEE2E6; 
    border-radius: 4px;
    outline: none;
    margin: 8px 0; 
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; 
    height: 20px; 
    background: #E55B3A; 
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input[type="range"]::-moz-range-thumb {
    width: 20px; 
    height: 20px; 
    background: #E55B3A; 
    border-radius: 50%;
    cursor: pointer;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     border: none; /* FF fix */
}
input[type="range"]::-ms-thumb {
    width: 20px; 
    height: 20px; 
    background: #E55B3A; 
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none; /* IE fix */
}

input[type="range"]:disabled {
    opacity: 0.5;
}
input[type="range"]:disabled::-webkit-slider-thumb {
     cursor: not-allowed;
}
input[type="range"]:disabled::-moz-range-thumb {
     cursor: not-allowed;
}
input[type="range"]:disabled::-ms-thumb {
     cursor: not-allowed;
}


/* Quality Presets */
.quality-preset {
    border: 1px solid #ADB5BD;
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.375rem 0.5rem; /* py-1.5 px-2 */
    font-size: 0.875rem; /* text-sm */
    text-align: center;
    background-color: transparent;
    color: #343A40;
}

.quality-preset:hover:not(:disabled) {
    background-color: #F8F9FA; /* hover:bg-[#F8F9FA] */
}

.quality-preset.active-preset { /* Updated class name from .active to avoid conflict */
    background-color: #E55B3A; 
    color: #FFFFFF; 
    border-color: #E55B3A; 
}

/* Progress Bar (Overall Batch) */
[role="progressbar"] { 
     background-color: #F8F9FA; 
     border-radius: 9999px; 
     height: 1rem; /* h-4 */
     overflow: hidden; 
}

[role="progressbar"] > div { 
    background-color: #E55B3A; 
    height: 100%;
    border-radius: 9999px; 
    transition: width 0.3s ease-in-out; 
}


/* File Queue Specific Styles */
#file-queue-list-container {
    scrollbar-width: thin;
    scrollbar-color: #ADB5BD #F8F9FA;
}

#file-queue-list-container::-webkit-scrollbar {
    width: 8px;
}

#file-queue-list-container::-webkit-scrollbar-track {
    background: #F8F9FA;
    border-radius: 4px;
}

#file-queue-list-container::-webkit-scrollbar-thumb {
    background-color: #ADB5BD;
    border-radius: 4px;
    border: 2px solid #F8F9FA;
}
#file-queue-list-container::-webkit-scrollbar-thumb:hover {
    background-color: #868E96;
}


.file-item [data-role="progress-bar-container"] {
    background-color: #F0F0F0; 
    border-radius: 9999px;
    height: 0.375rem; /* h-1.5 */
    overflow: hidden;
}
.file-item [data-role="progress-bar"] {
    background-color: #E55B3A; 
    height: 100%;
    border-radius: 9999px;
    transition: width 0.2s ease-out;
}

/* Status text colors in file item */
.file-item [data-role="status"].status-queued { color: #6C757D; }
.file-item [data-role="status"].status-processing { color: #0D6EFD; } /* Bootstrap blue */
.file-item [data-role="status"].status-completed { color: #198754; } /* Bootstrap green */
.file-item [data-role="status"].status-failed { color: #DC3545; } /* Bootstrap red */


/* Utility/Helper classes */
.hidden { display: none !important; } 

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-10%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}


/* Tailwind direct color classes (some might be redundant if Tailwind handles them fully) */
.text-\[\#ADB5BD\] { color: #ADB5BD; }
.text-\[\#343A40\] { color: #343A40; }
.text-\[\#E55B3A\] { color: #E55B3A; }
.bg-\[\#F8F9FA\] { background-color: #F8F9FA; }
.bg-\[\#E55B3A\] { background-color: #E55B3A; }
.border-\[\#ADB5BD\] { border-color: #ADB5BD; }
.border-\[\#E55B3A\] { border-color: #E55B3A; }
.hover\:border-\[\#E55B3A\]:hover { border-color: #E55B3A; }
.focus\:border-\[\#E55B3A\]:focus { border-color: #E55B3A; }
.accent-\[\#E55B3A\] { accent-color: #E55B3A; }

.text-\[\#28A745\] { color: #28A745; } 
.bg-\[\#28A745\] { background-color: #28A745; }

/* Custom background for dropzone hover if needed beyond Tailwind */
.hover\:bg-\[\#FFF5F2\]:hover { background-color: #FFF5F2; }