/* --- Base & Variables --- */
:root {
    --body-bg-light: #f8f9fa;
    --body-color-light: #212529;
    --component-bg-light: #ffffff;
    --border-color-light: #dee2e6;

    --body-bg-dark: #212529; /* Darker background */
    --body-color-dark: #dee2e6; /* Lighter text */
    --component-bg-dark: #343a40; /* Dark component background */
    --border-color-dark: #495057; /* Darker border */

    --primary-rgb: var(--bs-primary-rgb); /* Get primary color RGB */
}

/* Apply theme variables using Bootstrap's data attribute */
[data-bs-theme="light"] {
    --bs-body-bg: var(--body-bg-light);
    --bs-body-color: var(--body-color-light);
    --bs-tertiary-bg: var(--component-bg-light); /* Use for cards/sections */
    --bs-border-color: var(--border-color-light);
    --bs-secondary-bg: #e9ecef; /* Light mode badge bg */
    --bs-secondary-color: #495057; /* Light mode badge text */
    --bs-link-color: #0d6efd; /* Ensure links look ok in light */
    --bs-link-hover-color: #0a58ca;
    --primary-rgb: 13, 110, 253; /* Bootstrap default blue RGB */
}

[data-bs-theme="dark"] {
    --bs-body-bg: var(--body-bg-dark);
    --bs-body-color: var(--body-color-dark);
    --bs-tertiary-bg: var(--component-bg-dark); /* Use for cards/sections */
    --bs-border-color: var(--border-color-dark);
    --bs-secondary-bg: #6c757d; /* Dark mode badge bg */
    --bs-secondary-color: #fff; /* Dark mode badge text */
    --bs-link-color: #6ea8fe; /* Ensure links look ok in dark */
    --bs-link-hover-color: #8bb9fe;
     --primary-rgb: 110, 168, 254; /* Lighter blue for dark mode primary */
}


body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    max-width: 1140px; /* Slightly wider container */
}

/* --- Navbar --- */
.navbar {
    transition: background-color 0.3s ease;
}
/* Ensure navbar text/icons adapt to theme */
[data-bs-theme="light"] .navbar {
   background-color: #e9ecef !important; /* Lighter navbar for light mode */
   border-bottom: 1px solid var(--border-color-light);
}
[data-bs-theme="light"] .navbar-brand,
[data-bs-theme="light"] .nav-link,
[data-bs-theme="light"] .navbar-toggler-icon {
    color: var(--body-color-light) !important;
}
/* Ensure theme button uses correct outline for light mode */
[data-bs-theme="light"] #themeToggleButton {
    border-color: var(--body-color-light);
    color: var(--body-color-light);
}
[data-bs-theme="light"] #themeToggleButton:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .navbar {
   background-color: #2b3035 !important; /* Slightly different dark */
   border-bottom: 1px solid var(--border-color-dark);
}
/* Ensure theme button uses correct outline for dark mode */
[data-bs-theme="dark"] #themeToggleButton {
    border-color: #f8f9fa;
    color: #f8f9fa;
}
[data-bs-theme="dark"] #themeToggleButton:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- Sections & Cards --- */
.upload-section,
.controls-section,
.bulk-preview-section .card { /* Target cards within the bulk section */
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color) !important; /* Override Bootstrap default */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* --- Drag & Drop Zone --- */
.upload-section {
    border-style: dashed !important;
    border-width: 3px !important;
    border-color: var(--bs-link-hover-color) !important; /* Override Bootstrap default */
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.upload-section.dragover {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--primary-rgb), 0.1) !important; /* Use primary color with alpha */
}

/* --- Image Preview Styling (for Bulk Items) --- */
.image-preview-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px; /* Reduced min height */
    height: 180px; /* Fixed height */
    background-color: rgba(128, 128, 128, 0.1); /* Subtle bg */
    border-radius: 0.25rem;
    overflow: hidden; /* Ensure image stays within bounds */
    padding: 5px;
    margin-bottom: 0.5rem; /* Space below image */
}

.preview-image { /* New class for images in bulk preview */
    max-height: 100%; /* Fill container height */
    width: auto;
    max-width: 100%;
    object-fit: contain; /* Scale while preserving aspect ratio */
    display: block;
    border-radius: 0.2rem; /* Slightly rounded corners */
    visibility: hidden; /* Hide initially */
}

.preview-image.loaded {
    visibility: visible; /* Show when loaded */
}

/* Style individual preview cards */
.bulk-preview-area .card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Make cards fill row height */
}

.bulk-preview-area .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow body to grow */
    padding: 0.75rem; /* Adjust padding */
    font-size: 0.875rem; /* Smaller text */
}

.bulk-preview-area .card-text {
    margin-bottom: 0.3rem; /* Smaller margins */
}

.bulk-preview-area .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

.bulk-preview-area .btn-download-single {
    margin-top: auto; /* Push download button to bottom */
    width: 100%;
    font-size: 0.8rem; /* Smaller button text */
    padding: 0.25rem 0.5rem;
}

/* --- Slider --- */
.form-range {
    cursor: pointer;
}
.form-range::-webkit-slider-thumb { background-color: var(--bs-primary); transition: background-color 0.2s ease; }
.form-range::-moz-range-thumb { background-color: var(--bs-primary); transition: background-color 0.2s ease; }
.form-range::-ms-thumb { background-color: var(--bs-primary); transition: background-color 0.2s ease; }

/* --- Number Input --- */
#qualityInput::-webkit-outer-spin-button,
#qualityInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#qualityInput[type=number] { -moz-appearance: textfield; appearance: textfield; }
#qualityInput {
    background-color: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
#qualityInput:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25); }

/* --- Buttons & Badges --- */
.btn { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.badge { transition: background-color 0.3s ease, color 0.3s ease; }

/* --- Footer --- */
footer { border-top-color: var(--bs-border-color) !important; transition: border-color 0.3s ease; }

/* --- Utility --- */
.bg-body-tertiary { background-color: var(--bs-tertiary-bg) !important; }
.d-none { display: none !important; }
input[type="range"]:focus { outline: none; box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25); }

/* Loading/Processing overlay/indicator */
.processing-indicator {
    display: inline-block; /* Or flex if needed */
    margin-left: 5px;
}

/* Ensure long filenames wrap */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}