/**
 * EventLens — Shared Mobile Responsive CSS v1.0
 * Include in ALL pages: <link rel="stylesheet" href="mobile-ux.css">
 * 
 * Covers:
 * - Touch targets (44px minimum)
 * - Input zoom prevention (16px font)
 * - Safe area padding (iPhone notch)
 * - Scroll containers (tables, horizontal lists)
 * - Typography scaling
 * - Grid responsiveness
 * - Form layout
 * - Modal/overlay fixes
 */

/* ═══ BASE RESETS ═══ */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ═══ TOUCH TARGETS ═══ */
/* Minimum 44x44px touch area for all interactive elements */
button, a, select, [role="button"], .clickable, .chip, .tab, .nav-item {
  min-height: 44px;
  min-width: 44px;
}

/* Small icon buttons get invisible touch expansion */
.btn-icon, .dot, .action-btn, .close-btn, .nav-btn {
  position: relative;
}
.btn-icon::after, .dot::after, .action-btn::after {
  content: '';
  position: absolute;
  inset: -8px;
}

/* ═══ INPUT ZOOM PREVENTION ═══ */
/* iOS zooms on focus if font < 16px */
input, select, textarea {
  font-size: 16px !important;
  min-height: 44px;
  border-radius: 8px;
}

/* ═══ SAFE AREA (Notch/Home Indicator) ═══ */
body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Fixed bottom bars need safe area */
.bottom-bar, .submit-bar, .bottom-nav, #mobileNav {
  padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
}

/* ═══ SCROLL CONTAINERS ═══ */
.table-scroll, .scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Scroll hint shadow on right edge */
.scroll-hint {
  position: relative;
}
.scroll-hint::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 30px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.15));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.scroll-hint.scrollable::after {
  opacity: 1;
}

/* ═══ MOBILE BREAKPOINTS ═══ */

/* Tablets and below (< 900px) */
@media (max-width: 900px) {
  /* Pricing grids: 2 columns */
  .price-grid, .l-price-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  
  /* Feature grids: single column */
  .feature-grid, .l-feat-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Comparison grids */
  .comparison-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Phone landscape / small tablet (< 768px) */
@media (max-width: 768px) {
  /* Typography scaling */
  h1, .l-h1 { font-size: 28px !important; line-height: 1.2 !important; }
  h2, .l-h2 { font-size: 22px !important; }
  h3 { font-size: 17px !important; }
  
  /* All grids single column */
  .grid, .stats-grid, .kpi-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* 2-col grids go to 1 */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Cards */
  .card, .panel {
    padding: 14px !important;
    border-radius: 10px;
  }
  
  /* Buttons row → wrap */
  .btn-row, .action-row, .row {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  /* Tables horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  
  table th, table td {
    padding: 8px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  
  /* Modals full width */
  .modal-box, .modal-content, .dialog {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh;
    overflow-y: auto;
    margin: 5vh auto;
    padding: 16px !important;
  }
  
  /* Lightbox swipe-friendly */
  .lightbox {
    touch-action: pan-y pinch-zoom;
  }
  
  /* Stats/KPI boxes — 2 column */
  .kpi-grid, .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* Phone portrait (< 480px) */
@media (max-width: 480px) {
  body { font-size: 14px; }
  
  h1, .l-h1 { font-size: 24px !important; }
  h2, .l-h2 { font-size: 20px !important; }
  
  /* Pricing: single column on small phones */
  .price-grid, .l-price-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Gallery grid: 2 columns */
  .gallery-grid, .photo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 3px !important;
  }
  
  /* KPI boxes — stack */
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Navigation links — smaller */
  nav a, .nav-link {
    font-size: 12px;
  }
  
  /* Page padding */
  .container, .wrap, .content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Very small phones (< 360px) */
@media (max-width: 360px) {
  h1, .l-h1 { font-size: 22px !important; }
  
  .gallery-grid, .photo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  button, .btn {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
}

/* ═══ PRINT ═══ */
@media print {
  nav, .topbar, .bottom-nav, .submit-bar, #mobileNav, .pwa-bar {
    display: none !important;
  }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ FORM MOBILE OPTIMIZATION ═══ */
@media (max-width: 768px) {
  /* Form fields stack vertically */
  .form-row, .input-row {
    flex-direction: column !important;
    gap: 10px;
  }
  
  /* Full width inputs */
  .form-row input, .form-row select, .form-row textarea,
  .input-row input, .input-row select {
    width: 100% !important;
  }
  
  /* Labels above inputs */
  label {
    display: block;
    margin-bottom: 4px;
  }
  
  /* Textarea min height */
  textarea {
    min-height: 100px;
  }
}

/* ═══ POLITICAL FORMS MOBILE ═══ */
@media (max-width: 768px) {
  /* Camera capture buttons */
  .capture-btn, .photo-btn {
    min-height: 48px;
    font-size: 15px;
    padding: 12px 20px;
  }
  
  /* Photo preview smaller */
  .preview-img, .photo-preview {
    max-height: 200px;
    object-fit: contain;
  }
  
  /* Radio/checkbox groups stack */
  .radio-group, .checkbox-group {
    flex-direction: column;
    gap: 8px;
  }
  
  .radio-group label, .checkbox-group label {
    padding: 10px 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

/* ═══ DASHBOARD TABLE MOBILE ═══ */
@media (max-width: 768px) {
  /* Wrap tables in scrollable container */
  .styled-table {
    min-width: 600px;
  }
  
  /* Alternating row colors for readability */
  .styled-table tbody tr:nth-child(even) {
    background: rgba(255,255,255,0.02);
  }
}