/* ==========================================================================
   Job Card Public Mobile-First Design
   Complete mobile-first redesign with fixed header/footer and scrollable content
   ========================================================================== */

/* Base mobile-first layout (up to 1279px) */
@media (max-width: 1279px) {
  html.job-card-public,
  body.job-card-public {
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.job-card-public #root {
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.job-card-public #root > * {
    height: 100% !important;
    width: 100% !important;
  }

  /* Main wrapper - fixed viewport container */
  body.job-card-public .job-card-public-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background-color: #f3f4f6 !important;
  }

  /* Hide desktop sidebar on mobile/tablet */
  body.job-card-public .job-card-public-wrapper > aside {
    display: none !important;
  }

  /* Ensure main content area takes full width */
  body.job-card-public .job-card-public-wrapper > div.flex-1 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Fixed Header */
  body.job-card-public .job-card-public-wrapper > header {
    flex-shrink: 0 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
  }

  /* Scrollable Content Area - MUST BE VISIBLE */
  body.job-card-public .job-card-public-wrapper .job-card-scrollable-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Footer removed - buttons are now inline at end of each step */

  /* Form styling */
  body.job-card-public .job-card-public-wrapper form {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* All nested elements reset */
  body.job-card-public .job-card-public-wrapper * {
    box-sizing: border-box !important;
  }

  /* Remove any transforms or positioning that might cause issues */
  body.job-card-public .job-card-public-wrapper .max-w-4xl,
  body.job-card-public .job-card-public-wrapper .max-w-2xl {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Step badges mobile scroll */
  body.job-card-public .mobile-step-scroll {
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-snap-type: x mandatory !important;
  }

  body.job-card-public .mobile-step-scroll::-webkit-scrollbar {
    display: none !important;
  }

  /* Touch-friendly inputs - reasonable sizes */
  body.job-card-public .job-card-public-wrapper input,
  body.job-card-public .job-card-public-wrapper select,
  body.job-card-public .job-card-public-wrapper textarea {
    font-size: 16px !important;
    min-height: 44px !important;
    max-height: 200px !important; /* Prevent inputs from taking full page */
    height: auto !important;
    padding: 10px 12px !important; /* Reduced padding */
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  /* Select dropdowns - limit height when open */
  body.job-card-public .job-card-public-wrapper select {
    max-height: 60px !important; /* Closed state */
    height: 44px !important;
    overflow: hidden !important; /* Hide overflow when closed */
  }

  /* Textareas - reasonable max height */
  body.job-card-public .job-card-public-wrapper textarea {
    min-height: 100px !important;
    max-height: 200px !important;
    resize: vertical !important;
  }

  /* Ensure select dropdowns work properly - options must be visible */
  body.job-card-public .job-card-public-wrapper select {
    z-index: auto !important;
    position: relative !important;
    overflow: visible !important;
    -webkit-appearance: menulist !important;
    appearance: menulist !important;
  }

  body.job-card-public .job-card-public-wrapper select option {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    position: static !important;
    background-color: white !important;
    color: black !important;
    padding: 8px 12px !important;
  }

  /* Ensure parent containers don't clip dropdown options */
  body.job-card-public .job-card-public-wrapper section,
  body.job-card-public .job-card-public-wrapper .max-w-4xl,
  body.job-card-public .job-card-public-wrapper .job-card-scrollable-content {
    overflow: visible !important;
    z-index: auto !important;
  }

  /* Map Modal Styles - Ensure map is visible */
  body.job-card-public .fixed.inset-0.z-50 {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
  }

  /* Map Container - Ensure Leaflet map displays */
  body.job-card-public [ref*="mapContainer"],
  body.job-card-public .map-container,
  body.job-card-public div[class*="map"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Leaflet map tiles */
  body.job-card-public .leaflet-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
    z-index: 1 !important;
    position: relative !important;
  }

  /* Leaflet map tiles */
  body.job-card-public .leaflet-tile-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.job-card-public .job-card-public-wrapper button {
    min-height: 44px !important;
    border-radius: 8px !important;
    touch-action: manipulation !important;
  }

  /* Typography improvements */
  body.job-card-public .job-card-public-wrapper .text-sm {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  body.job-card-public .job-card-public-wrapper .text-xs {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
  }

  body.job-card-public .job-card-public-wrapper label {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }

  body.job-card-public .job-card-public-wrapper h2 {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
  }

  body.job-card-public .job-card-public-wrapper p {
    line-height: 1.5 !important;
  }

  /* Section cards - reasonable sizes */
  body.job-card-public .job-card-public-wrapper section {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important; /* Allow natural height but prevent excessive expansion */
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin: 0 0 1rem 0 !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Grid layouts - single column on mobile */
  body.job-card-public .job-card-public-wrapper .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  body.job-card-public .job-card-public-wrapper .grid.grid-cols-2,
  body.job-card-public .job-card-public-wrapper .grid.grid-cols-3,
  body.job-card-public .job-card-public-wrapper .grid.grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Signature field - ensure it's visible and functional on mobile */
  body.job-card-public .signature-canvas {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 250px !important;
    height: 250px !important;
    background-color: white !important;
    border: none !important;
    border-radius: 0 !important;
    touch-action: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2 !important;
    cursor: crosshair !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  
  body.job-card-public .signature-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.5rem 0 !important;
    padding: 0 !important;
    min-height: 250px !important;
    height: 250px !important;
    touch-action: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }
  
  /* iOS Safari specific fixes */
  @supports (-webkit-touch-callout: none) {
    body.job-card-public .signature-canvas,
    body.job-card-public canvas[class*="signature"] {
      -webkit-transform: translateZ(0) !important;
      transform: translateZ(0) !important;
      will-change: auto !important;
    }
  }
  
  /* Ensure signature canvas overlay text doesn't interfere */
  body.job-card-public .signature-wrapper > div[class*="pointer-events-none"] {
    pointer-events: none !important;
    z-index: 0 !important;
  }
  
  /* Map - ensure it's visible in forms */
  body.job-card-public .job-card-public-wrapper div[class*="map"],
  body.job-card-public .job-card-public-wrapper .map-container,
  body.job-card-public .job-card-public-wrapper [ref*="mapContainer"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  body.job-card-public .job-card-public-wrapper .leaflet-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 200px !important;
  }
}

/* Medium screens (700px and below) - ensure proper layout */
@media (max-width: 700px) {
  body.job-card-public .job-card-public-wrapper {
    flex-direction: column !important;
  }

  body.job-card-public .job-card-public-wrapper > aside {
    display: none !important;
  }

  body.job-card-public .job-card-public-wrapper > div.flex-1 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  body.job-card-public .job-card-public-wrapper .job-card-scrollable-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ensure all content fits */
  body.job-card-public .job-card-public-wrapper .max-w-4xl {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  body.job-card-public .job-card-public-wrapper section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.875rem !important;
  }
}

/* Extra small screens (300px and below) */
@media (max-width: 340px) {
  body.job-card-public .job-card-public-wrapper > header {
    padding: 0.5rem !important;
  }

  body.job-card-public .job-card-public-wrapper > header h1 {
    font-size: 1rem !important;
  }

  body.job-card-public .job-card-public-wrapper > header p {
    font-size: 0.75rem !important;
  }

  body.job-card-public .job-card-public-wrapper .mobile-step-scroll button {
    min-width: 140px !important;
    padding: 0.5rem 0.75rem !important;
  }

  body.job-card-public .job-card-public-wrapper section {
    padding: 0.75rem !important;
  }

  body.job-card-public .job-card-public-wrapper input,
  body.job-card-public .job-card-public-wrapper select,
  body.job-card-public .job-card-public-wrapper textarea {
    font-size: 16px !important;
    padding: 10px 12px !important;
  }
}

/* Desktop styles (above 1280px - xl breakpoint) */
@media (min-width: 1280px) {
  body.job-card-public .job-card-public-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
  }

  /* Desktop Sidebar - Thinner */
  body.job-card-public .job-card-public-wrapper > aside {
    width: 14rem !important;
    max-width: 14rem !important;
    flex-shrink: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Main content area - scrollable when zoomed */
  body.job-card-public .job-card-public-wrapper > div.flex-1 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Scrollable content - works when zoomed */
  body.job-card-public .job-card-public-wrapper .job-card-scrollable-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  /* Ensure form content is scrollable */
  body.job-card-public .job-card-public-wrapper form {
    overflow: visible !important;
  }

  /* Footer stays fixed at bottom */
  body.job-card-public .job-card-public-wrapper > div.flex-1 > footer {
    flex-shrink: 0 !important;
    position: relative !important;
  }
}

/* Tablet range (701px - 1279px) - ensure mobile layout */
@media (min-width: 701px) and (max-width: 1279px) {
  body.job-card-public .job-card-public-wrapper {
    flex-direction: column !important;
  }

  body.job-card-public .job-card-public-wrapper > aside {
    display: none !important;
  }

  body.job-card-public .job-card-public-wrapper > div.flex-1 {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Ensure scrolling works when zoomed in */
@media (min-width: 1280px) {
  body.job-card-public .job-card-public-wrapper .job-card-scrollable-content {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
  }

  /* When zoomed, allow horizontal scroll if needed */
  @media (max-width: 1400px) {
    body.job-card-public .job-card-public-wrapper {
      overflow-x: auto !important;
    }
  }
}