/* ============================================================
   styles.css — PDF Compressor (Grifo Tools)
   Responsabilidade: Estilos proprios (dropzone, progresso,
     toast) + dark mode
   ============================================================ */

html { scroll-behavior: smooth; }
:focus { outline: 2px solid #802B22; outline-offset: 2px; }

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

/* ── Dropzone ── */
.dropzone {
  user-select: none;
}
.dropzone:hover,
.dropzone.dragover {
  border-color: #802B22;
  background-color: #FAF0EF;
}

/* ── File info row ── */
.file-info-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ── Actions row ── */
.actions-row {
  display: none;
}
.actions-row.show {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ── Ghostscript spinner ── */
.gs-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e5e5e5;
  border-top-color: #802B22;
  border-radius: 50%;
  animation: gs-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes gs-spin {
  to { transform: rotate(360deg); }
}

/* ── Level cards ── */
.level-card {
  cursor: pointer;
  user-select: none;
}
.level-card:hover:not(.level-active) {
  border-color: #D47A72;
  background-color: #FAF0EF;
}
.level-card.level-active {
  border-color: #802B22;
  background-color: #FAF0EF;
}
.level-card.level-active .level-card-icon {
  background-color: #F3D5D2;
}
.level-card.level-active .level-card-icon svg {
  color: #802B22;
}
.level-card.level-active .level-card-title {
  color: #802B22;
}
.level-card.level-active .level-card-estimate {
  color: #9E342B;
}

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #171717;
  color: #f5f5f5;
  padding: 0.5rem 1.25rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

/* ── Dark mode ── */
html.dark body { background-color: #0f0f0f; color: #f5f5f5; }

html.dark .bg-white { background-color: #1a1a1a; }
html.dark .bg-neutral-50 { background-color: #141414; }
html.dark .bg-neutral-100 { background-color: #222222; }

html.dark .border-neutral-200 { border-color: #2a2a2a; }
html.dark .border-neutral-300 { border-color: #333333; }

html.dark .text-neutral-900 { color: #f5f5f5; }
html.dark .text-neutral-800 { color: #e5e5e5; }
html.dark .text-neutral-700 { color: #d4d4d4; }
html.dark .text-neutral-600 { color: #a3a3a3; }
html.dark .text-neutral-500 { color: #a0a0a0; }
html.dark .text-neutral-400 { color: #737373; }

html.dark .dropzone {
  border-color: #2a2a2a;
  background-color: transparent;
}
html.dark .dropzone:hover,
html.dark .dropzone.dragover {
  border-color: #802B22;
  background-color: #1a0d0b;
}

html.dark #fileInfo {
  background-color: #111111;
  border-color: #2a2a2a;
}

html.dark .bg-brand-100 { background-color: #2a0f0b; }
html.dark .text-brand-600 { color: #D47A72; }

html.dark .gs-spinner {
  border-color: #2a2a2a;
  border-top-color: #D47A72;
}

html.dark .level-card {
  background-color: #1a1a1a;
  border-color: #2a2a2a;
}
html.dark .level-card:hover:not(.level-active) {
  border-color: #802B22;
  background-color: #1a0d0b;
}
html.dark .level-card.level-active {
  border-color: #802B22;
  background-color: #1a0d0b;
}
html.dark .level-card .level-card-icon {
  background-color: #222222;
}
html.dark .level-card .level-card-icon svg {
  color: #737373;
}
html.dark .level-card.level-active .level-card-icon {
  background-color: #2a0f0b;
}
html.dark .level-card.level-active .level-card-icon svg {
  color: #D47A72;
}
html.dark .level-card .level-card-title {
  color: #e5e5e5;
}
html.dark .level-card.level-active .level-card-title {
  color: #D47A72;
}
html.dark .level-card .level-card-estimate {
  color: #525252;
}
html.dark .level-card.level-active .level-card-estimate {
  color: #BA4F46;
}
html.dark .level-card-track {
  background-color: #222222;
}

html.dark #resultSection .bg-neutral-50 { background-color: #111111; }
html.dark #resultSection .border-neutral-200 { border-color: #2a2a2a; }
html.dark #resultSection .text-neutral-800 { color: #e5e5e5; }

html.dark #actionsSection button.bg-white {
  background-color: #1a1a1a;
  border-color: #2a2a2a;
  color: #d4d4d4;
}
html.dark #actionsSection button.bg-white:hover {
  background-color: #222222;
}