/* ============================================
   MOBILE-ONLY STYLESHEET
   This file is loaded ONLY on mobile devices
   ============================================ */

/* STEP 1 - Global Fix: Remove horizontal scroll but allow vertical */
html, body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.container, 
.main-content, 
.job-results-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.job-card {
  width: 100% !important;
  max-width: 100% !important;
}

/* Reset all containers to full width */
.container,
.nav-container,
.main-layout,
.content-area,
.search-section,
.search-container,
.search-input-container,
.unified-search-container,
.search-input-wrapper,
.roles-grid-container,
.roles-row,
.roles-row-items,
.popular-roles-revamped,
.popular-roles-grid,
.popular-roles-section,
.popular-roles-chips,
.role-grid,
.jobs-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Main layout stacks vertically */
.main-layout {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px !important;
  gap: 16px !important;
}

/* Jobs container proper spacing */
.jobs-container {
  padding: 0 !important;
  margin: 0 !important;
}

/* Search section */
.search-section {
  padding: 16px 12px !important;
}

.search-input-container {
  flex-direction: column !important;
  gap: 10px !important;
}

.search-input,
.location-input,
.search-btn {
  width: 100% !important;
  font-size: 16px !important;
}

/* Fix #4 - Popular Roles Section */
.popular-roles-revamped {
  padding: 16px 12px !important;
  width: 100% !important;
}

/* Grid collapses cleanly on mobile - 2 columns to save space */
.popular-roles-grid,
.role-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Role buttons with proper sizing - compact for 2 columns */
.role-card,
.role-chip {
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: white !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  font-size: 0.85rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Role chips - use grid for 2 columns */
.popular-roles-chips,
.roles-row-items {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Stack categories vertically */
.roles-row {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin-bottom: 16px !important;
}

.roles-row-title {
  width: 100% !important;
  margin-bottom: 8px !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

/* Fix #1 - Make job cards fully responsive */
.job-card,
.job-card-compact,
.job-card-option2 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  background: white !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  overflow: hidden !important;
}

/* Inner layout wraps on smaller screens */
.job-card-header,
.header-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
}

.left-section,
.title-company,
.job-title,
.job-title-compact,
.company-name,
.company-name-compact {
  width: 100% !important;
  max-width: 100% !important;
}

.job-title,
.job-title-compact {
  font-size: 1rem !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.job-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Save / Apply buttons responsive */
.job-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.job-actions button,
.job-actions a {
  flex: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  font-size: 0.9rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* AI Assist button should not overflow */
.job-actions button[class*="ai"],
.job-actions button[class*="assist"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}

/* Navigation */
.nav-container {
  padding: 0 12px !important;
}

/* Hide filters sidebar on mobile */
.filters-sidebar {
  display: none !important;
}

/* STEP 1 continued - Pagination fix */
.pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: center !important;
  margin-top: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 8px !important;
  overflow-x: hidden !important;
}

.pagination button {
  flex: 0 0 auto !important;
  min-width: 36px !important;
  max-width: 50px !important;
  text-align: center !important;
  padding: 6px 8px !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* Previous/Next buttons can be slightly wider */
.pagination button:first-child,
.pagination button:last-child {
  max-width: 80px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid #a78bfa !important;
  color: #7c3aed !important;
  font-weight: 500 !important;
}

.page-btn {
  flex: 1 !important;
  min-width: 60px !important;
  text-align: center !important;
}

.page-btn:hover,
.page-btn.active {
  background: #f3f0ff !important;
}

/* STEP 2-5 - Fix main layout and columns */
.main-layout {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

/* Left filter column - full width on mobile */
.filters-sidebar {
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  top: auto !important;
}

/* Right job list column - full width on mobile */
.content-area,
.job-results-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

/* Job cards wrapper */
.jobs-container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Remove any fixed widths from inline styles */
div[style*="width:"],
span[style*="width:"] {
  max-width: 100% !important;
}

/* Ensure all text wraps */
.job-title,
.job-title-compact,
.company-name,
.company-name-compact,
.job-description,
.job-meta-item {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* Fix any absolute positioned elements */
.match-section,
.match-section-slick {
  position: relative !important;
  width: 100% !important;
}

/* Ensure buttons don't overflow */
button,
.btn,
.btn-primary,
.btn-secondary,
.btn-pill {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Fix salary and location badges */
.job-meta-item,
.badge,
.pill {
  flex-shrink: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Ensure all divs respect mobile width */
div {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* CRITICAL FIX: Force all job card elements to respect container width */
.job-card *,
.job-card-compact *,
.job-card-option2 * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Force button containers to not overflow */
.actions-compact,
.job-actions,
.btn-group {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Force all buttons to fit within container */
.btn-pill,
.job-action-btn,
.job-action-btn-compact,
button,
a.btn {
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* Mobile Filter Button */
.mobile-filter-btn {
  position: fixed !important;
  bottom: 80px !important;
  right: 16px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  cursor: pointer !important;
  z-index: 1000 !important;
  transition: all 0.3s ease !important;
}

.mobile-filter-btn:active {
  transform: scale(0.95) !important;
}

/* Mobile Filter Overlay */
.mobile-filter-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 9998 !important;
  display: none !important;
}

.mobile-filter-overlay.active {
  display: block !important;
}

/* Mobile Filter Panel */
.mobile-filter-panel {
  position: fixed !important;
  bottom: -100% !important;
  left: 0 !important;
  width: 100% !important;
  max-height: 80vh !important;
  background: white !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2) !important;
  z-index: 9999 !important;
  transition: bottom 0.3s ease !important;
  overflow-y: auto !important;
  padding: 20px !important;
}

.mobile-filter-panel.active {
  bottom: 0 !important;
}

.mobile-filter-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 2px solid #e5e7eb !important;
}

.mobile-filter-header h3 {
  margin: 0 !important;
  font-size: 1.25rem !important;
  color: #333 !important;
}

.mobile-filter-close {
  background: none !important;
  border: none !important;
  font-size: 28px !important;
  color: #999 !important;
  cursor: pointer !important;
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* Mobile Active Filters Indicator */
.mobile-only {
  display: none !important;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }
  
  .mobile-only.active-filters-indicator {
    margin: 16px 12px !important;
    padding: 12px !important;
    background: white !important;
    border: 2px solid #667eea !important;
    border-radius: 12px !important;
  }
}


/* Help Center - Feature Grid Mobile Fix */
.feature-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.feature-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 20px !important;
  overflow-x: hidden !important;
}

.feature-card h3 {
  font-size: 17px !important;
}

.feature-card p {
  font-size: 13px !important;
}

.feature-list {
  font-size: 13px !important;
}

/* Help Center - All sections responsive */
.popular-section {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  padding: 24px 20px !important;
}

.help-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  padding: 0 20px !important;
}