/* Upload Page Styles */
/* Styles for recipe file upload interface */

/* === UPLOAD CONTAINER === */
.upload-container {
  max-width: 600px;
  margin: 0 auto;
  /* Mobile first - compact padding (header padding handled by .page class) */
  padding: var(--spacing-md);
  padding-top: var(--spacing-2xs);
}

.upload-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.upload-header h1 {
  color: var(--accent-color);
  margin-bottom: var(--spacing-xs);
}

.upload-header .app-logo {
  max-width: 100%;
  height: auto;
  display: inline-block;
  /* Mobile first - smaller logo */
  width: 280px;
}

.upload-header p {
  color: var(--text-color);
  font-size: var(--font-lg);
  opacity: 0.8;
  padding: 0 var(--spacing-sm);
}

.upload-area {
  position: relative;
}

/* === UPLOAD ZONE === */
.file-input-container,
.upload-zone {
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius-4xl);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(3px) saturate(180%);
  -webkit-backdrop-filter: blur(3px) saturate(180%);
  cursor: pointer;
  /* Mobile first - compact padding */
  padding: var(--spacing-sm);
  margin: var(--spacing-sm) 0;
  isolation: isolate;
}

.upload-zone {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: var(--box-shadow);
  position: relative;
  z-index: var(--z-ui);
}

.file-input-container:hover,
.upload-zone:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(3px) saturate(180%);
  -webkit-backdrop-filter: blur(3px) saturate(180%);
}

.upload-zone.drag_over,
.upload-zone.drag-over {
  border-color: rgba(79, 187, 64, 0.6);
  background: rgba(79, 187, 64, 0.1);
  backdrop-filter: blur(3px) saturate(180%);
  -webkit-backdrop-filter: blur(3px) saturate(180%);
  border-style: solid;
}

.file-input {
  display: none;
}

.upload-icon {
  /* Mobile first - smaller icon */
  font-size: 1.5rem;
  margin-bottom: var(--spacing-xs);
  opacity: 0.6;
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  pointer-events: none;
}

.upload-zone h3 {
  /* Mobile first - smaller text */
  font-size: 1.1rem;
  margin-bottom: var(--spacing-xs);
}

.upload-zone p {
  font-size: var(--font-xs);
  margin-bottom: var(--spacing-xs);
}

.format-support {
  font-size: var(--font-2xs) !important;
  color: var(--muted-text-color);
  font-style: italic;
  margin-bottom: var(--spacing-sm) !important;
}

/* === UPLOAD RESPONSIVE STYLES === */

/* Large phones and up */
@media (min-width: 481px) {
  .upload-container {
    padding: var(--spacing-md);
    padding-top: var(--spacing-xs);
  }

  .upload-header .app-logo {
    width: 320px;
  }

  .upload-zone {
    padding: var(--spacing-md);
  }

  .upload-zone h3 {
    font-size: 1.2rem;
  }

  .upload-zone p {
    font-size: var(--font-sm);
  }

  .upload-icon {
    font-size: 1.8rem;
  }
}

/* Tablets and up */
@media (min-width: 769px) {
  .upload-container {
    padding: var(--spacing-md);
    padding-top: var(--spacing-sm);
    max-width: 600px;
  }

  .upload-header .app-logo {
    width: 400px;
    max-width: 90vw;
  }

  .upload-zone {
    padding: var(--spacing-lg);
  }

  .upload-zone h3 {
    font-size: 1.4rem;
  }

  .upload-zone p {
    font-size: var(--font-lg);
  }

  .upload-icon {
    font-size: var(--spacing-xl);
  }

  .upload-header p {
    font-size: 1.1rem;
    padding: 0;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .upload-container {
    padding: var(--spacing-md);
    max-width: 600px;
  }

  .upload-header .app-logo {
    width: 460px;
  }

  .upload-zone {
    min-height: 180px;
  }

  .format-support {
    font-size: var(--font-lg) !important;
  }
}

/* === UPLOAD MODALS === */

/* Legacy modal classes - use .modal-base instead */
.duplicate-recipe-modal, .upload-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  background: var(--overlay-medium);
  z-index: var(--z-overlay);
}

/* Image Upload Modal - Updated for new structure */
.image-upload-modal.modal-content-container {
  /* Use the standard modal positioning */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2001 !important;
  /* Remove conflicting background/blur from legacy styles */
  background: none !important;
  backdrop-filter: none !important;
  /* Ensure it behaves like other modal containers */
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.image-upload-modal.modal-content-container.u-flex {
  display: flex !important;
}

.image-upload-modal.modal-content-container .modal-content {
  /* Re-enable pointer events on content */
  pointer-events: auto;
}

/* Image Upload Modal Specific Styles */
.image-upload-modal .modal-content {
  /* Use viewport-aware height constraints for mobile optimization */
  max-height: min(80vh, 700px);
  /* Ensure minimum height for usability */
  min-height: min(400px, 60vh);
  display: flex;
  flex-direction: column;
}

.image-upload-modal .modal-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Prevent body from exceeding available space */
  min-height: 0;
}

.image-upload-modal .tab-content {
  flex: 1;
  overflow-y: auto;
  /* Ensure content can shrink if needed */
  min-height: 0;
}

/* Ensure inactive tabs are hidden */
.image-upload-modal .tab-content.u-hidden {
  display: none !important;
}

.image-upload-modal .image-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1;
  justify-content: flex-start;
  /* Ensure preview container can shrink */
  min-height: 0;
}

/* Ensure image preview is hidden when inactive */
.image-upload-modal .image-preview.u-hidden {
  display: none !important;
}

.image-upload-modal #preview-image {
  max-width: 50%;
  /* Dynamic height calculation to ensure buttons remain visible */
  max-height: min(
    400px,
    calc(80vh - 200px),
    calc(100vh - 300px)
  );
  padding: var(--spacing-sm);
  border-radius: var(--border-radius);
  object-fit: contain;
  margin: 0 auto;
  display: block;
  /* Ensure image doesn't force container overflow */
  flex-shrink: 1;
}

.image-upload-modal .preview-controls {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  justify-content: center;
  /* Ensure buttons stay at bottom and don't shrink */
  flex-shrink: 0;
  margin-top: var(--spacing-sm);
}

.image-upload-modal .preview-controls .btn {
  /* Ensure all buttons align properly regardless of content */
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-upload-modal .upload-zone {
  margin-top: 1rem;
}

.image-upload-modal #image-file-input {
  width: 100%;
}

.image-upload-modal .url-input-group {
  width: 100%;
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

.image-upload-modal #image-url-input {
  flex: 1;
}

/* === UPLOAD BUTTON VARIANTS === */


/* === RESPONSIVE UPLOAD STYLES === */

/* Mobile-specific optimizations for iOS */
@media screen and (max-width: 768px) {
  .image-upload-modal .modal-content {
    /* More aggressive height constraints on mobile */
    max-height: min(90vh, 600px);
    min-height: min(350px, 70vh);
    width: 95%;
    margin: var(--spacing-xs);
  }

  .image-upload-modal #preview-image {
    /* Tighter constraints for mobile screens */
    max-height: min(
      300px,
      calc(90vh - 180px),
      calc(100vh - 250px)
    );
    padding: var(--spacing-xs);
  }

  .image-upload-modal .preview-controls {
    gap: var(--spacing-sm);
    flex-wrap: wrap;
  }

  .image-upload-modal .preview-controls .btn {
    min-width: 120px;
    flex: 1;
    /* Ensure mobile-friendly touch targets */
    min-height: 44px;
    padding: var(--spacing-md-sm) var(--spacing-md);
  }
}

/* iOS-specific fixes for viewport handling */
@supports (-webkit-touch-callout: none) {
  .image-upload-modal .modal-content {
    /* Use -webkit-fill-available for better iOS viewport handling */
    max-height: min(80vh, -webkit-fill-available - 100px);
  }

  .image-upload-modal #preview-image {
    /* iOS-specific height calculation */
    max-height: min(
      350px,
      calc(-webkit-fill-available - 200px),
      calc(100vh - 250px)
    );
  }
}

/* Landscape orientation adjustments for mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
  .image-upload-modal .modal-content {
    max-height: min(95vh, 500px);
    width: 90%;
  }

  .image-upload-modal #preview-image {
    max-height: min(
      250px,
      calc(95vh - 150px),
      calc(100vh - 200px)
    );
  }
}

/* Additional responsive improvements for very small screens */
@media screen and (max-height: 600px) {
  .image-upload-modal .modal-content {
    max-height: 95vh;
    min-height: 300px;
  }

  .image-upload-modal #preview-image {
    max-height: min(
      200px,
      calc(95vh - 120px)
    );
  }

  .image-upload-modal .modal-header {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .image-upload-modal .modal-body {
    padding: var(--spacing-sm);
  }
}

/* Extra small screens (iPhone SE, etc.) */
@media screen and (max-width: 375px) {
  .image-upload-modal .modal-content {
    width: 98%;
    margin: var(--spacing-2xs);
  }

  .image-upload-modal .preview-controls {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .image-upload-modal .preview-controls .btn {
    width: 100%;
    max-width: 200px;
  }
}