/* --- Drag & Drop Zone --- */
.drop-zone {
    position: relative; /* This is crucial for positioning the input inside */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 150px;
    padding: 25px;
    border: 2px dashed var(--apple-card-border);
    border-radius: 1rem;
    background-color: var(--apple-hover-bg);
    color: var(--apple-secondary-text);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: center;
}
.drop-zone:hover {
    border-color: var(--apple-accent-color);
    color: var(--apple-accent-color);
}
.drop-zone.drag-over {
    border-style: solid;
    border-color: var(--apple-accent-color);
    background-color: rgba(var(--apple-accent-color-rgb, 108, 99, 255), 0.1);
    box-shadow: 0 0 15px var(--button-glow);
}
.drop-zone.has-file {
     border-color: var(--apple-accent-color);
     color: var(--apple-text-color);
}
.drop-zone-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}
.drop-zone.drag-over .drop-zone-icon {
    transform: scale(1.1) translateY(-5px);
}
/* This is the actual <input type="file"> */
.drop-zone-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* --- Status & Loader Animations --- */
.conversion-status-container .status-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px; /* Ensure placeholder has height */
    color: var(--apple-secondary-text);
    text-align: center;
}
.conversion-status-container .status-placeholder i {
    font-size: 3rem;
}
/* Hide placeholder when active */
.conversion-status-container.active .status-placeholder {
    display: none;
}

/* --- Status Box (holds loader/icon, content, batch list) --- */
.status-box {
    display: flex;
    flex-direction: column; /* Stack icon/spinner and text vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
    text-align: center;
    width: 100%;
    min-height: 150px; /* Give it some space */
    /* Removed background, border, and padding from the box itself */
}
.status-content {
    margin-left: 0; /* Removed side margin */
    margin-top: 1.5rem; /* Add space *below* the icon/spinner */
}
.status-content strong {
    font-size: 1.1rem;
    color: var(--apple-text-color);
    display: block;
    margin-bottom: 0.25rem;
}
.status-content p {
    margin-bottom: 0;
    color: var(--apple-secondary-text);
}

/* --- Your walking person spinner --- */
.loader {
  width: 20px;
  height: 80px;
  background: #935936;
  position: relative;
  /* --- Hide by default --- */
  display: none;
}
.loader:before {
  content: "";
  position: absolute;
  top: 10px;
  left: -22px;
  width: 25px;
  height: 60px;
  background:
    radial-gradient(farthest-side,#fff 92%,#0000) 60% 6px/4px 4px,
    radial-gradient(50% 60%,#53707b 92%,#0000) center/70% 55%,
    radial-gradient(farthest-side,#53707b 92%,#0000) 50% 3px/14px 14px,
    radial-gradient(142% 100% at bottom right,#0000 64%,#53707b 65%) bottom/57% 40%,
    conic-gradient(from -120deg at right,#53707b 36deg,#0000 0)100% 3px/51% 12px,
    conic-gradient(from 120deg at top left,#0000 ,#ef524a 2deg 40deg,#0000 43deg) top/100% 10px;
  background-repeat: no-repeat;
  transform: rotate(-26deg);
  transform-origin: 100% 80%;
  animation: l16 .25s infinite linear alternate;
}
.loader:after {
  content: "";
  position: absolute;
  width: 6px;
  height: 12px;
  left: -6px;
  bottom: 15px;
  border-radius: 100px 0 0 100px;
  background: #53707b;
}
@keyframes l16 {
  100% {transform: rotate(0)}
}


/* --- Status Icons --- */
.status-icon-success, .status-icon-danger, .status-icon-info {
    font-size: 2.5rem; /* 40px */
    flex-shrink: 0;
}
.status-icon-success { color: #198754; } /* Green */
.status-icon-danger { color: #dc3545; } /* Red */
.status-icon-info { color: var(--apple-secondary-text); }

/* --- Error Log in Status Box --- */
.error-log {
    background: rgba(0,0,0,0.1);
    border: 1px solid var(--apple-card-border);
    padding: 10px;
    border-radius: 5px;
    max-height: 150px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin-top: 1rem;
    font-size: 0.85rem;
    text-align: left; /* Keep logs left-aligned */
}
[data-bs-theme="dark"] .error-log {
    background: rgba(255,255,255,0.05);
}

/* --- Form Styles --- */
.conversion-form .form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.conversion-form .form-control,
.conversion-form .form-select {
    background-color: var(--apple-hover-bg);
    border: 1px solid var(--apple-card-border);
    color: var(--apple-text-color);
    border-radius: 0.6rem;
}
.conversion-form .form-control::file-selector-button {
    background-color: var(--apple-accent-color);
    color: #fff;
    border: 0;
    border-radius: 0.4rem 0 0 0.4rem;
    margin: -0.375rem -0.75rem;
    padding: 0.375rem 0.75rem;
    margin-right: 0.75rem;
    transition: background-color 0.2s ease;
}
[data-bs-theme="dark"] .conversion-form .form-control::file-selector-button {
    color: #1c1c1e;
}
.conversion-form .form-control:hover::file-selector-button {
     background-color: var(--accent-hover);
}
.conversion-form .form-control:focus,
.conversion-form .form-select:focus {
    background-color: var(--apple-hover-bg);
    border-color: var(--apple-accent-color);
    box-shadow: 0 0 0 2px var(--button-glow);
    color: var(--apple-text-color);
}

/* --- Dark Mode Dropdown Fix --- */
[data-bs-theme="dark"] .conversion-form .form-select {
    background-color: var(--apple-hover-bg);
    color: var(--apple-text-color);
    border-color: var(--apple-card-border);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f2f2f7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3C/svg%3e");
}
[data-bs-theme="dark"] .conversion-form .form-select option {
    background-color: var(--sidebar-bg-color);
    color: var(--sidebar-text-color);
}

/* --- Cancel Button Style (in status box) --- */
.btn-cancel-job {
    background-color: var(--apple-hover-bg) !important;
    border: 1px solid var(--apple-card-border) !important;
    color: var(--apple-secondary-text) !important;
    padding: 0.45rem 0.9rem;
    border-radius: 0.6rem;
    transition: all 0.25s ease, box-shadow 0.2s ease;
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
}
.btn-cancel-job:hover {
    color: #fff !important;
    background-color: #dc3545 !important; /* Red */
    border-color: #dc3545 !important;
    box-shadow: 0 0 12px rgba(220, 53, 69, 0.4); /* Red glow */
    transform: translateY(-3px);
}
.btn-cancel-job:disabled {
    color: var(--apple-secondary-text) !important;
    background-color: var(--apple-hover-bg) !important;
    opacity: 0.5;
    text-decoration: none;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
[data-bs-theme="dark"] .btn-cancel-job:hover {
    color: #fff !important;
}

/* --- Upload Progress Bar --- */
.upload-progress-container {
    /* Hidden by default via inline style */
}
.upload-progress-bar-wrapper {
    width: 100%;
    height: 10px;
    background-color: var(--apple-hover-bg);
    border: 1px solid var(--apple-card-border);
    border-radius: 5px;
    overflow: hidden;
}
.upload-progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--apple-accent-color);
    transition: width 0.3s ease;
}
.upload-progress-text {
    color: var(--apple-secondary-text);
}

/* --- Timer Style (in status box) --- */
.job-timer {
    display: none; /* Hide by default, shown by JS */
    font-weight: 600;
    margin-left: 0.25rem;
}

/* --- Completed Files List (Shared styles for batch list & history list) --- */
.completed-files-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem; /* Space above header */
    margin-bottom: 0.5rem; /* Space below header */
}
.completed-files-header h6 {
    margin-bottom: 0;
    color: var(--apple-text-color); /* Ensure header text color */
}
/* Style UL for both lists */
.completed-files-list,
#conversion-history-list ul {
    list-style: none;
    padding: 0;
    margin: 0; /* Remove default margin */
    margin-top: 0;
    border: 1px solid var(--apple-card-border);
    border-radius: 0.6rem;
    background-color: var(--apple-hover-bg);
}
/* Limit height for batch list */
[data-status="completed-list"] .completed-files-list {
     max-height: 150px;
     overflow-y: auto;
}
/* Style LI for both lists */
.completed-files-list li,
#conversion-history-list li {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--apple-card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    gap: 1rem;
}
.completed-files-list li:last-child,
#conversion-history-list li:last-child {
    border-bottom: none;
}
/* Filename styling */
.completed-files-list .filename,
#conversion-history-list .filename {
    color: var(--apple-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 1rem;
    font-weight: 500;
}
/* Action buttons container */
.completed-files-list .file-actions,
#conversion-history-list .file-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
/* Shared download button style */
.btn-download-sm {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    background-color: var(--apple-accent-color);
    color: white !important; /* Ensure high contrast */
    border: none;
    border-radius: 0.4rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}
[data-bs-theme="dark"] .btn-download-sm {
    color: #1c1c1e !important; /* Dark text on light accent */
}
.btn-download-sm:hover {
    background-color: var(--accent-hover);
}
/* Shared delete button style */
.btn-delete-sm {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    background-color: transparent;
    color: var(--apple-secondary-text);
    border: 1px solid var(--apple-card-border);
    border-radius: 0.4rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}
.btn-delete-sm:hover {
    color: #dc3545; /* Red */
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}
.btn-delete-sm .spinner-border {
    width: 0.9rem;
    height: 0.9rem;
}


/* --- Conversion History Card Specific Styles --- */
#conversion-history-card h2 {
    font-size: 1.5rem; /* Slightly smaller than main titles maybe */
}
/* Container for the history list */
#conversion-history-list {
    margin-top: 1rem; /* Space below header */
    max-height: 400px; /* Give history more potential height */
    overflow-y: auto;
    /* Styles like border, background inherited from #conversion-history-list ul */
}
/* Placeholder inside history */
#conversion-history-list .history-placeholder {
    padding: 2rem;
}
/* Details container in history list item */
#conversion-history-list .history-item-details {
    display: flex;
    flex-direction: column; /* Stack filename and date */
    overflow: hidden; /* Prevent long names pushing buttons out */
    flex-grow: 1; /* Allow details to take up space */
    text-align: left; /* Align text left */
}
/* Timestamp style */
#conversion-history-list .timestamp {
    font-size: 0.75rem;
    color: var(--apple-secondary-text);
    margin-top: 0.1rem;
}



/* --- Delete All History Button --- */
#delete-all-history-btn {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    background-color: transparent;
    color: var(--apple-secondary-text);
    border: 1px solid var(--apple-card-border);
    border-radius: 0.4rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0; /* Prevent shrinking */
    width: auto !important;      /* Unlock the width */
    height: auto !important;     /* Unlock the height */
    padding: 0.4rem 1rem !important; /* Add proper padding for text */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Add space between the trash icon and the text */
    border-radius: 0.5rem;
}
#delete-all-history-btn:hover {
    color: #dc3545; /* Red */
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}
#delete-all-history-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
}
#delete-all-history-btn .spinner-border {
    width: 0.9rem;
    height: 0.9rem;
    margin-right: 0.3rem;
}
/* Hide initially by inline style, JS shows/hides */

/* Ensure loader centers correctly */
.loader {
    margin: 0 auto 1.5rem auto; /* Center horizontally and add bottom margin */
}

/* Completed Files Header in Status Box */
.completed-files-header {
    width: 100%;
    text-align: left;
    padding-left: 0.5rem;
    margin-bottom: 0.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--apple-card-border);
    padding-top: 1rem;
}
.completed-files-header h6 {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--apple-text-color);
}

/* Ensure status box completed list fits nicely */
[data-status="completed-list"] {
    width: 100%;
    margin-top: 0.5rem;
}

/* ==========================================================================
   VISUAL FIXES (Append to bottom of styles.css)
   ========================================================================== */

/* --- 2. Fix for "Clear All" Button Text --- */
/* The original .btn-delete-sm class forces a 28px width. We override it here. */