/* --- Leubuzzi OCR :: Modern Minimalist Theme --- */

/* 1. Root Variables & Reset */
:root {
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-text-secondary: #555555;
  --color-accent: #E53935; /* Stronger, slightly darker red */
  --color-accent-dark: #C62828;
  --color-primary: #111111;
  --color-primary-dark: #333333;
  --color-border: #e0e0e0;
  --color-border-focus: #111111;
  --color-disabled: #bbbbbb;
  --color-success: #10b981; /* Keep success color for download */
  --color-success-dark: #059669;
  --color-error-bg: rgba(255, 228, 228, 0.85);
  --color-error-border: #f43f5e;

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --border-radius: 8px;
  --spacing-unit: 1rem;
  --transition-speed: 0.2s;
  --transition-timing: ease-in-out;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Align container to top */
  padding: calc(var(--spacing-unit) * 2);
}

/* 2. Layout */
.container {
  width: 100%;
  max-width: 650px; /* Slightly wider for better spacing */
  background-color: var(--color-bg);
  padding: calc(var(--spacing-unit) * 2.5);
  border-radius: var(--border-radius);
  /* Optional subtle shadow for depth */
  /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); */
}

/* 3. Typography */
h1 {
  font-weight: 700;
  font-size: 2rem; /* Bolder title */
  margin-bottom: calc(var(--spacing-unit) * 0.5);
  color: var(--color-text);
  text-align: center; /* Center title */
}

.subtitle {
  color: var(--color-text-secondary);
  margin-bottom: calc(var(--spacing-unit) * 2);
  font-size: 1.1rem;
  text-align: center; /* Center subtitle */
}

.form-label { /* Now used in login.html */
  font-weight: 600;
  color: var(--color-text);
  display: block; /* Ensure it takes space */
  margin-bottom: calc(var(--spacing-unit) * 0.5);
}

/* 4. Forms & Controls */
.form-flex {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 1.5); /* Consistent gap */
  align-items: stretch;
}

/* .form-flex-item is not strictly needed if direct children handle flex */
.form-group {
  display: flex;
  flex-direction: column; /* Stack label and input */
}

.form-control,
.form-select {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  font-family: inherit; /* Ensure consistent font */
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition-speed) var(--transition-timing),
              box-shadow var(--transition-speed) var(--transition-timing);
  appearance: none; /* Needed for custom select arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-border-focus);
  outline: none;
  /* Optional focus ring using accent */
  /* box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.3); */
}

/* Custom File Input */
input[type="file"].form-control {
  border-style: dashed;
  background-color: #fafafa;
  cursor: pointer;
  text-align: center; /* Center placeholder text */
  color: var(--color-text-secondary); /* Placeholder text color */
  transition: border-color var(--transition-speed) var(--transition-timing),
              background-color var(--transition-speed) var(--transition-timing);
}

input[type="file"].form-control::file-selector-button {
  /* Hide default button - styling done on the input itself */
  display: none;
}

input[type="file"].form-control:hover {
  border-color: var(--color-text-secondary);
  background-color: #f5f5f5;
}

/* Custom Select Arrow */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23${'var(--color-text-secondary)'.substring(1)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 40px; /* Make space for arrow */
}

/* 5. Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  font-family: inherit;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  padding: 12px 24px; /* Consistent padding */
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-speed) var(--transition-timing),
              opacity var(--transition-speed) var(--transition-timing),
              transform var(--transition-speed) var(--transition-timing);
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px); /* Subtle lift on hover */
}

.btn:active:not(:disabled) {
  transform: translateY(0px); /* Press down effect */
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-bg);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-dark);
}

.btn-danger {
  background-color: var(--color-accent);
  color: var(--color-bg);
  font-size: 0.9rem; /* Make remove slightly smaller */
  padding: 4px 8px; /* Smaller padding for remove */
  line-height: 1; /* Ensure text aligns well */
  border-radius: 4px; /* Smaller radius for remove */
}
.btn-danger:hover:not(:disabled) {
  background-color: var(--color-accent-dark);
  transform: none; /* No lift for small inline buttons */
}
.btn-danger:active:not(:disabled) {
  transform: none;
}

.btn-success {
  background-color: var(--color-success);
  color: var(--color-bg);
}
.btn-success:hover:not(:disabled) {
  background-color: var(--color-success-dark);
}

#submit-button,
#login-button,
#global-download {
  width: 100%; /* Make main action buttons full width */
  padding: 14px 24px; /* Slightly larger padding for main actions */
  font-size: 1.1rem;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-disabled);
  color: var(--color-text-secondary);
}
/* Specific disabled styles if needed (e.g., keep primary bg but faded) */
.btn-primary:disabled {
    background-color: var(--color-primary);
    opacity: 0.5;
    color: var(--color-bg);
}
.btn-success:disabled {
    background-color: var(--color-success);
    opacity: 0.5;
    color: var(--color-bg);
}


/* 6. File List & Items */
.file-list {
  margin-top: var(--spacing-unit);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-unit);
}

.file-item {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-unit);
  background-color: #fdfdfd; /* Slightly off-white */
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 0.5);
  opacity: 0; /* Start hidden for animation */
  transform: translateY(10px); /* Start slightly lower */
  transition: opacity 0.4s var(--transition-timing),
              transform 0.4s var(--transition-timing),
              border-color var(--transition-speed) var(--transition-timing);
}

.file-item--added {
  opacity: 1;
  transform: translateY(0);
}

.file-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing-unit) * 0.75);
}

.file-icon {
  font-size: 1.3rem;
  color: var(--color-text-secondary);
  flex-shrink: 0; /* Prevent shrinking */
}

.file-name {
  font-weight: 600;
  flex-grow: 1; /* Take available space */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove-btn { /* Using .btn .btn-danger */
  flex-shrink: 0;
}

.page-info {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  min-height: 1.2em; /* Reserve space */
}

.status-message {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  min-height: 1.3em; /* Reserve space */
  text-align: center; /* Center status */
}
.file-item.processing .status-message {
    color: var(--color-text);
}
.file-item.done .status-message {
    color: var(--color-success);
}
.file-item.error .status-message {
    color: var(--color-accent);
}
.file-item.stopped .status-message {
    color: var(--color-text-secondary);
}


/* 7. Progress Bar */
.progress {
  width: 100%;
  height: 10px; /* Slimmer progress bar */
  background-color: var(--color-border);
  border-radius: 5px; /* Match height */
  overflow: hidden;
  margin-top: calc(var(--spacing-unit) * 0.25);
  margin-bottom: calc(var(--spacing-unit) * 0.25);
  /* display: none; Initially hidden via JS */
}

.progress-bar {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: 5px;
  transition: width 0.5s cubic-bezier(0.4, 1.5, 0.6, 1); /* Bouncy transition */
  /* Text removed from bar for minimalism */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--color-bg);
  font-weight: 600;
}

/* 8. Utility Classes */
.hidden {
  display: none !important; /* Use !important for overrides if needed */
}

/* 9. Responsiveness */
@media (max-width: 700px) {
  body {
    padding: var(--spacing-unit);
  }
  .container {
    padding: var(--spacing-unit) * 1.5;
  }
  h1 {
    font-size: 1.8rem;
  }
  .subtitle {
    font-size: 1rem;
    margin-bottom: var(--spacing-unit) * 1.5;
  }
  .form-control, .form-select, .btn {
    font-size: 0.95rem; /* Slightly smaller font on mobile */
  }
  #submit-button, #login-button, #global-download {
      padding: 12px 20px;
      font-size: 1rem;
  }
  .file-item {
      padding: calc(var(--spacing-unit) * 0.75);
  }
  .file-name {
      /* Allow slightly more wrapping if needed */
  }
}