/* FixMyPDF — Custom styles */
/* CSS variables mirror the tailwind.config brand colors */
:root {
  --brand:    #3B9AE1;
  --navy:     #1E3A52;
  --ink:      #2C3E50;
  --dropzone: #F4F7F9;
}

/* ─── Drag & Drop States ─── */
.drop-zone-active {
  border-color: var(--brand) !important;
  background-color: #EBF5FB !important;
}
.drop-zone-active .upload-icon {
  background-color: #EBF5FB;
  color: var(--brand);
}

/* ─── Compression Option Radios ─── */
.compression-option input[type="radio"]:checked ~ .option-card {
  border-color: var(--brand);
  background-color: #EBF5FB;
}
.compression-option .option-card {
  transition: border-color 0.15s, background-color 0.15s;
  cursor: pointer;
}
.compression-option .option-card:hover {
  border-color: #93C6EB;
}

/* ─── File List Drag-to-reorder ─── */
.file-list-item {
  transition: background-color 0.15s, box-shadow 0.15s;
}
.file-list-item.dragging {
  opacity: 0.5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.file-list-item.drag-over {
  border-top: 2px solid var(--brand);
}
.drag-handle {
  cursor: grab;
  touch-action: none;
}
.drag-handle:active {
  cursor: grabbing;
}

/* ─── Progress Bar ─── */
#progress-bar {
  transition: width 0.3s ease;
}
.progress-indeterminate #progress-bar {
  animation: indeterminate 1.5s ease-in-out infinite;
  width: 40% !important;
}
@keyframes indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* ─── Page Thumbnails (PDF to Image) ─── */
.page-thumb {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.page-thumb:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* ─── Toast Notifications ─── */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast {
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slide-in 0.25s ease;
  max-width: 320px;
}
.toast-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.toast-error   { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.toast-info    { background: #EBF5FB; color: #1E3A52; border: 1px solid #93C6EB; }
@keyframes slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ─── Image Preview Grid (Image to PDF) ─── */
.image-preview-item {
  position: relative;
}
.image-preview-item .remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.image-preview-item:hover .remove-btn {
  opacity: 1;
}

/* ─── Nav placeholder (holds height before nav injects on first visit) ─── */
#site-nav {
  min-height: 4rem;
  background-color: #1E3A52;
}

/* ─── Footer placeholder ─── */
#site-footer {
  min-height: 12rem;
  background-color: #1E3A52;
}

/* ─── Nav Active Link States ─── */
/* Top-bar quick links (navy background) */
.nav-active-topbar {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.18) !important;
  border-radius: 0.375rem;
}
/* Mega-panel links (white background) */
.nav-active-mega {
  background-color: #EBF5FB !important;
  outline: 1.5px solid #93C6EB;
  border-radius: 0.5rem;
}
.nav-active-mega span.text-sm {
  color: #1E3A52 !important;
  font-weight: 600;
}
/* Mobile menu links */
.nav-active-mobile {
  background-color: rgba(59, 154, 225, 0.22) !important;
  border-radius: 0.75rem;
}
.nav-active-mobile span.text-sm {
  color: #ffffff !important;
  font-weight: 600;
}

/* ─── Nav Responsive Fix ─── */
/* Tailwind CDN only scans inline HTML; it misses dynamically fetched partials.
   These rules replicate the responsive utilities used in partials/nav.html. */
@media (min-width: 768px) {
  header .md\:flex  { display: flex !important; }
  header .md\:hidden { display: none !important; }
  header nav.hidden { display: flex !important; }
}
@media (min-width: 1024px) {
  header .lg\:block  { display: block !important; }
  header .lg\:hidden { display: none !important; }
}

/* ─── Password Strength Indicator ─── */
#pw-strength {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 0.35s ease, opacity 0.28s ease, transform 0.28s ease;
}
#pw-strength.pw-visible {
  max-height: 160px;
  opacity: 1;
  transform: translateY(0);
}

/* ─── HTML to PDF — validation warnings ─── */
#html-warnings {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}
#html-warnings.has-warnings {
  max-height: 120px;
  opacity: 1;
}

/* ─── HTML to PDF — live preview ─── */
#preview-section {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
#preview-section.preview-open {
  max-height: 500px;
}
@media (min-width: 1024px) {
  #preview-section {
    max-height: none !important;
    overflow: visible;
    transition: none;
    display: flex !important;
    flex-direction: column;
  }
  #preview-iframe {
    flex: 1;
    height: auto !important;
    min-height: 480px;
  }
}

/* ─── Scrollbar (webkit) ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: #93C6EB; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }