/* PPP FilePond overrides
   Load AFTER filepond.min.css and the image-preview plugin CSS.
   Goal: small thumbnails, flowing grid (no tall stacked cards).
*/

/* Easy tweak knobs */
.filepond--root {
  --ppp-pond-thumb: 100px;   /* thumbnail square size */
  --ppp-pond-gap: 10px;     /* spacing between thumbs */
}

.filepond--credits {
  display: none !important;
}

/* Let the list grow naturally */
.filepond--list-scroller {
  height: auto !important;
  overflow: visible !important;
}

/* Turn the item list into a wrapping row/grid */
.filepond--list {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--ppp-pond-gap) !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}

/* FilePond normally absolutely-positions items (so they stack).
   Override that so flexbox can lay them out. */
.filepond--item {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;

  width: var(--ppp-pond-thumb) !important;
  height: var(--ppp-pond-thumb) !important;
  margin: 0 !important;
}

/* Remove the "big card" look */
.filepond--panel-root,
.filepond--file-wrapper,
.filepond--item-panel {
  border-radius: 10px !important;
}

/* Make the preview fill the tile */
.filepond--image-preview-wrapper,
.filepond--image-preview,
.filepond--image-preview canvas,
.filepond--image-preview img {
  width: 100% !important;
  height: 100% !important;
}

/* Hide file info by default (shown via JS for non-image files) */
.filepond--file-info {
  display: none !important;
}

/* Show file status (progress indicator) */
.filepond--file-status {
  position: absolute !important;
  bottom: 4px !important;
  left: 4px !important;
  right: 4px !important;
  font-size: 10px !important;
  background: rgba(0,0,0,0.6) !important;
  border-radius: 4px !important;
  padding: 2px 4px !important;
}

/* Hide status text when complete */
.filepond--item[data-filepond-item-state="processing-complete"] .filepond--file-status {
  display: none !important;
}

/* Tighter action buttons */
.filepond--action-remove-item,
.filepond--action-abort-item-processing,
.filepond--action-retry-item-processing {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
}

/* Position remove button - must be above overlay */
.filepond--action-remove-item {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  z-index: 10 !important;
}

/* Don't let the drop area become huge */
.filepond--drop-label {
  min-height: 80px !important;
  padding: 16px !important;
}

.filepond--drop-label label {
  font-size: 14px !important;
  color: #666 !important;
}

/* =============================================
   Custom overlay for non-image files (PDF, AI, EPS, SVG)
   ============================================= */

/* Items with file type overlay - ensure relative positioning */
.filepond--item[data-ppp-file-type] {
  position: relative !important;
}

/* Hide the panel backgrounds */
.filepond--item[data-ppp-file-type] .filepond--item-panel {
  background: transparent !important;
  opacity: 0 !important;
}

.ppp-file-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
  border-radius: 10px;
  z-index: 1 !important;
  padding: 8px;
  box-sizing: border-box;
}

.ppp-file-overlay-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.ppp-file-overlay-icon svg {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.ppp-file-overlay-name {
  font-size: 9px;
  color: rgba(255,255,255,0.9);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90%;
  line-height: 1.2;
}

.ppp-file-overlay-ext {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.4);
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* Color-code by file type */
.ppp-file-overlay:has(.ppp-file-overlay-ext:contains("PDF")) {
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
}

/* Since :has() with :contains() isn't widely supported, use JS classes instead */
.ppp-file-overlay[data-ext="pdf"] {
  background: linear-gradient(135deg, #a93226 0%, #c0392b 100%);
}
.ppp-file-overlay[data-ext="ai"] {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
}
.ppp-file-overlay[data-ext="eps"] {
  background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
}
.ppp-file-overlay[data-ext="svg"] {
  background: linear-gradient(135deg, #1e8449 0%, #27ae60 100%);
}

/* Progress ring styling */
.filepond--progress-indicator {
  width: 32px !important;
  height: 32px !important;
}

/* Processing state */
.filepond--item[data-filepond-item-state="processing"] .filepond--item-panel {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Complete state */
.filepond--item[data-filepond-item-state="processing-complete"] .filepond--item-panel {
  background: #27ae60 !important;
}

/* Error state */
.filepond--item[data-filepond-item-state="processing-error"] .filepond--item-panel {
  background: #e74c3c !important;
}

/* Idle state (waiting) */
.filepond--item[data-filepond-item-state="idle"] .filepond--item-panel {
  background: #f5f5f5 !important;
}