/**
 * RESPONSIVE DESIGN SYSTEM
 * =========================
 *
 * Mobile-first responsive utilities for all apps in the ecosystem.
 *
 * Key Principles:
 * 1. Mobile-first (base styles = mobile, use sm/md/lg for larger screens)
 * 2. Touch targets minimum 44x44px (Apple HIG, Android Material Design)
 * 3. Readable text (16px minimum, 1.5 line-height)
 * 4. Generous spacing on mobile (avoid cramped layouts)
 *
 * Breakpoints (Tailwind defaults):
 * - sm: 640px
 * - md: 768px
 * - lg: 1024px
 * - xl: 1280px
 */

/* ======================
   TOUCH-FRIENDLY BUTTONS
   ====================== */

/**
 * All interactive elements should be at least 44x44px for comfortable touch targets.
 * This includes buttons, links, form inputs, and clickable icons.
 */

.btn-touch {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 20px;
  font-size: 16px;
  line-height: 1.25;
}

/* Smaller buttons for desktop only */
.btn-sm {
  min-height: 44px; /* Still touch-friendly on mobile */
  padding: 10px 16px;
  font-size: 14px;
}

@media (min-width: 768px) {
  .btn-sm {
    min-height: 36px; /* Smaller on desktop */
    padding: 8px 14px;
  }
}

/* Icon buttons (still touch-friendly) */
.btn-icon {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

/* ======================
   RESPONSIVE TYPOGRAPHY
   ====================== */

/**
 * Mobile text should be at least 16px to avoid zoom on iOS.
 * Line height 1.5 for readability.
 */

.text-mobile-base {
  font-size: 16px;
  line-height: 1.5;
}

.text-mobile-lg {
  font-size: 18px;
  line-height: 1.5;
}

/* Headings scale appropriately */
.heading-1 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}

@media (min-width: 768px) {
  .heading-1 {
    font-size: 32px;
  }
}

.heading-2 {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
}

@media (min-width: 768px) {
  .heading-2 {
    font-size: 24px;
  }
}

/* ======================
   RESPONSIVE CONTAINERS
   ====================== */

/**
 * Containers with appropriate padding for mobile.
 * Use generous spacing on mobile to avoid cramped layouts.
 */

.container-mobile {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 640px) {
  .container-mobile {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 768px) {
  .container-mobile {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container-mobile {
    max-width: 1024px;
  }
}

/* ======================
   RESPONSIVE FORMS
   ====================== */

/**
 * Form inputs with touch-friendly sizing.
 */

.input-mobile {
  min-height: 44px;
  padding: 12px 16px;
  font-size: 16px; /* Prevents zoom on iOS */
  border: 1px solid #d1d5db;
  border-radius: 6px;
  width: 100%;
}

.input-mobile:focus {
  outline: none;
  border-color: #3b82f6;
  ring: 2px;
  ring-color: #3b82f6;
  ring-opacity: 0.5;
}

/* Label spacing for mobile */
.label-mobile {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

/* ======================
   RESPONSIVE TABLES
   ====================== */

/**
 * Three patterns for responsive tables:
 * 1. Horizontal scroll (default)
 * 2. Stacked cards (via Stimulus)
 * 3. Priority columns (hide less important columns)
 */

/* Horizontal scroll container */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Priority-based columns */
.table-priority-1 {
  /* Always visible */
}

.table-priority-2 {
  display: none;
}

@media (min-width: 640px) {
  .table-priority-2 {
    display: table-cell;
  }
}

.table-priority-3 {
  display: none;
}

@media (min-width: 768px) {
  .table-priority-3 {
    display: table-cell;
  }
}

/* ======================
   RESPONSIVE NAVIGATION
   ====================== */

/**
 * Mobile navigation patterns.
 * See _responsive_nav.html.erb for full implementation.
 */

.nav-mobile-item {
  display: block;
  min-height: 44px;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.25;
  text-decoration: none;
  color: #374151;
  transition: background-color 0.15s ease;
}

.nav-mobile-item:hover,
.nav-mobile-item:focus {
  background-color: #f3f4f6;
  color: #2563eb;
}

.nav-mobile-item.active {
  background-color: #dbeafe;
  color: #1d4ed8;
  font-weight: 500;
}

/* ======================
   UTILITY CLASSES
   ====================== */

/* Hide on mobile, show on desktop */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
}

/* Show on mobile, hide on desktop */
.show-mobile {
  display: block;
}

@media (min-width: 768px) {
  .show-mobile {
    display: none;
  }
}

/* Responsive spacing */
.spacing-mobile {
  padding: 16px;
}

@media (min-width: 768px) {
  .spacing-mobile {
    padding: 24px;
  }
}

/* Full width on mobile, auto on desktop */
.full-mobile {
  width: 100%;
}

@media (min-width: 768px) {
  .full-mobile {
    width: auto;
  }
}

/* ======================
   MOBILE-SPECIFIC FIXES
   ====================== */

/* Prevent text resize on orientation change (iOS) */
html {
  -webkit-text-size-adjust: 100%;
}

/* Better tap highlighting */
* {
  -webkit-tap-highlight-color: rgba(59, 130, 246, 0.1);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Fix iOS input zoom */
@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents zoom on focus */
  }
}