/* Mobile-Responsive Postcard Creation Flow
 * Feature: 007-mobile-responsive
 * Date: 2025-11-16
 *
 * Responsive CSS for optimizing postcard creation flow on mobile devices
 * Including: TUI Image Editor touch optimization, step indicator, form controls
 */

/* ===================================================================
 * Mobile-Specific Breakpoint: < 768px (iPhone, Android phones)
 * =================================================================== */

@media (max-width: 768px) {
  /* Ensure TUI editor container fits mobile screen */
  .tui-image-editor-container {
    max-width: 100% !important;
  }

  .tui-image-editor-main-container {
    width: 100% !important;
  }

  .tui-image-editor {
    width: 100% !important;
  }

  /* Touch Target Sizing for TUI Image Editor Buttons
   * iOS Human Interface Guidelines: minimum 44×44px touch targets
   * Using 60×50px for comfortable touch interaction */
  .tui-image-editor-menu > .tui-image-editor-item {
    min-width: 60px !important;
    min-height: 50px !important;
    padding: 8px !important;
  }

  /* Make submenu items also touch-friendly */
  .tui-image-editor-submenu > div {
    min-height: 44px !important;
  }

  /* Ensure canvas doesn't overflow */
  .tui-image-editor-canvas-container {
    max-width: 100% !important;
  }

  .upper-canvas, .lower-canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Prevent iOS Auto-Zoom on Input Focus
   * iOS Safari auto-zooms if font-size < 16px
   * This prevents disruptive zoom when editing text overlays */
  .tui-image-editor-textarea,
  input[type="text"],
  textarea {
    font-size: 16px !important;
  }

  /* Touch-Optimized Range Sliders
   * Default slider thumbs are too small for touch interaction
   * Increase thumb size to 24px for easier dragging */
  .tui-image-editor-range::-webkit-slider-thumb {
    width: 24px !important;
    height: 24px !important;
  }

  .tui-image-editor-range::-moz-range-thumb {
    width: 24px !important;
    height: 24px !important;
  }

  /* Editor Height Responsive Rules
   * Mobile portrait: 600px (prevents vertical overflow)
   * Ensures editor fits within viewport with menu visible */
  #editor-container,
  .tui-image-editor-canvas-container {
    height: 600px !important;
    max-height: 600px !important;
  }

  /* Step Indicator Mobile Compact View
   * Display compact counter instead of full horizontal stepper */
  .step-indicator-mobile {
    display: block;
  }

  .step-indicator-desktop {
    display: none;
  }

  /* Progress Bar Styling */
  .progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: #e5e7eb; /* gray-200 */
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 8px;
  }

  .progress-bar-fill {
    height: 100%;
    background-color: #3b82f6; /* blue-500 */
    transition: width 0.3s ease-in-out;
  }
}

/* ===================================================================
 * Tablet-Specific: 768px - 1024px (iPad)
 * =================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet Editor Height: 750px (larger than mobile, smaller than desktop) */
  #editor-container,
  .tui-image-editor-canvas-container {
    height: 750px !important;
    max-height: 750px !important;
  }

  /* Step Indicator: Show Desktop Version on Tablets */
  .step-indicator-mobile {
    display: none;
  }

  .step-indicator-desktop {
    display: block;
  }
}

/* ===================================================================
 * Desktop: >= 768px (Default behavior)
 * =================================================================== */

@media (min-width: 768px) {
  /* Step Indicator: Full Horizontal Stepper */
  .step-indicator-mobile {
    display: none;
  }

  .step-indicator-desktop {
    display: block;
  }

  /* Step Indicator Connection Lines */
  .step-connector {
    flex: 1;
    height: 2px;
    background-color: #d1d5db; /* gray-300 */
    margin: 0 8px;
  }

  .step-connector.completed {
    background-color: #10b981; /* green-500 */
  }

  /* Step Circle Styling */
  .step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: 2px solid #d1d5db; /* gray-300 */
    background-color: white;
  }

  .step-circle.completed {
    background-color: #10b981; /* green-500 */
    border-color: #10b981;
    color: white;
  }

  .step-circle.current {
    background-color: #3b82f6; /* blue-500 */
    border-color: #3b82f6;
    color: white;
  }

  .step-circle.upcoming {
    background-color: white;
    border-color: #d1d5db; /* gray-300 */
    color: #6b7280; /* gray-500 */
  }
}

/* ===================================================================
 * Mobile Landscape Orientation: max-height 500px
 * =================================================================== */

@media (max-width: 768px) and (orientation: landscape) {
  /* Reduce editor height in landscape to prevent vertical overflow */
  #editor-container,
  .tui-image-editor-canvas-container {
    height: 500px !important;
    max-height: 500px !important;
  }

  /* Compact menu bar in landscape */
  .tui-image-editor-menu {
    padding: 4px !important;
  }
}

/* ===================================================================
 * Character Counter Styling (Message Page)
 * =================================================================== */

.character-counter {
  font-size: 0.875rem; /* text-sm */
  margin-top: 4px;
  transition: color 0.2s ease-in-out;
}

.character-counter.valid {
  color: #6b7280; /* gray-500 */
}

.character-counter.over-limit {
  color: #dc2626; /* red-600 */
  font-weight: 700; /* font-bold */
}

/* ===================================================================
 * Validation Error Display
 * =================================================================== */

.validation-error {
  background-color: #fee2e2; /* red-100 */
  border: 1px solid #f87171; /* red-400 */
  color: #991b1b; /* red-800 */
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 8px;
  font-size: 0.875rem;
}

/* ===================================================================
 * Button Positioning (Editor Page)
 * =================================================================== */

@media (max-width: 768px) {
  /* "Format Carte Postale" button - top right positioning */
  .format-postcard-button {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 100;
  }

  /* "Enregistrer et continuer" button - bottom positioning */
  .save-continue-button {
    margin-top: 16px;
    width: 100%;
  }
}

/* ===================================================================
 * Accessibility Enhancements
 * =================================================================== */

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus visible states for keyboard navigation */
.tui-image-editor-item:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #3b82f6; /* blue-500 */
  outline-offset: 2px;
}

/* ===================================================================
 * Performance Optimizations
 * =================================================================== */

/* Use CSS containment for step indicator to improve rendering performance */
.step-indicator-mobile,
.step-indicator-desktop {
  contain: layout style;
}

/* Reduce motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .progress-bar-fill,
  .character-counter,
  .step-connector {
    transition: none;
  }
}

/* ===================================================================
 * Moderation Pages Mobile Responsive (Feature: 016)
 * Date: 2025-12-22
 *
 * Responsive CSS for moderation queue and detail pages on mobile devices
 * Including: Touch target sizing, card layouts, action button positioning
 * =================================================================== */

/* Touch Target Utility Class
 * iOS Human Interface Guidelines: minimum 44×44px touch targets
 * WCAG 2.1 Success Criterion 2.5.5 */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* Mobile Card Layout for Moderation Queue */
@media (max-width: 1023px) {
  /* Card thumbnail sizing for mobile */
  .moderation-card-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 0.375rem;
  }

  /* Ensure adequate touch targets on mobile cards */
  .moderation-card-checkbox {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}