/* ============================================
   Mobile Layout Fixes - All Pages
   ============================================ */

/* Base mobile viewport fixes */
* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow-x: hidden;
}

/* Typography - prevent text overflow */
h1, h2, h3, h4, h5, h6 {
  word-break: break-word;
  overflow-wrap: break-word;
}

p, span, label, a {
  word-wrap: break-word;
  word-break: break-word;
}

/* Forms - prevent iOS zoom on focus (font-size must be ≥16px) */
@media (max-width: 768px) {
  input, textarea, select {
    font-size: 16px; /* Prevents zoom on iOS */
    min-height: 44px; /* Touch target */
    -webkit-tap-highlight-color: transparent;
  }

  button {
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Navigation - mobile only */
@media (max-width: 768px) {
  nav ul.mobile-nav,
  nav ol.mobile-nav {
    flex-direction: column;
  }
}

/* Cards and containers - mobile only */
@media (max-width: 768px) {
  .card, .box {
    margin-bottom: 16px;
  }
}

/* Tables - always horizontal scroll; stacking only on very small screens */
table {
  font-size: 14px;
  width: 100%;
}

@media (max-width: 480px) {
  table.sf-stack-mobile {
    display: block;
    overflow-x: auto;
  }

  table.sf-stack-mobile thead,
  table.sf-stack-mobile tbody {
    display: block;
  }

  table.sf-stack-mobile tr {
    display: block;
    border-bottom: 8px solid #f0f0f0;
    margin-bottom: 8px;
  }

  table.sf-stack-mobile td,
  table.sf-stack-mobile th {
    display: block;
    padding: 8px 0 !important;
    text-align: left;
    min-height: 44px;
  }
}

/* Lists */
ul, ol {
  padding-left: 20px;
  line-height: 1.8;
}

li {
  margin-bottom: 8px;
}

/* Images - responsive */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Modals/Dialogs - mobile only to prevent desktop override */
@media (max-width: 640px) {
  .modal, .dialog {
    width: 100vw !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    max-height: 90vh !important;
  }
}

/* Dropdowns/Selects */
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  padding-right: 40px;
}

/* Spacing utilities for mobile */
@media (max-width: 768px) {
  /* General spacing */
  .container {
    padding: 12px !important;
    margin: 0 !important;
  }

  /* Section spacing */
  section {
    padding: 16px 12px !important;
    margin-bottom: 16px !important;
  }

  /* Text sizing */
  h1 { font-size: 24px !important; line-height: 1.3; }
  h2 { font-size: 20px !important; line-height: 1.3; }
  h3 { font-size: 18px !important; line-height: 1.4; }
  h4 { font-size: 16px !important; }
  p, span, a { font-size: 16px !important; }
  small { font-size: 13px !important; }

  /* Remove fixed widths */
  [style*="width: 300px"],
  [style*="width: 400px"],
  [style*="width: 500px"],
  [style*="width: 600px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Flex adjustments */
  .flex, .flexbox {
    flex-direction: column !important;
  }

  .flex-row {
    flex-direction: column !important;
  }

  /* Hide desktop-only elements */
  .desktop-only {
    display: none !important;
  }

  /* Show mobile-only elements */
  .mobile-only {
    display: block !important;
  }

  /* Button sizing - only form submit buttons get full width */
  button[type="submit"],
  .btn-block,
  .btn-full {
    display: block;
    width: 100%;
    margin-bottom: 8px;
  }

  /* Escape hatch for inline/icon buttons */
  .btn-inline,
  .btn-icon,
  .btn-small,
  .close-style,
  .am-close {
    width: auto !important;
    display: inline-flex !important;
    margin-bottom: 0 !important;
  }

  /* Margin/Padding resets */
  .no-pad-mobile {
    padding: 0 !important;
  }

  .no-margin-mobile {
    margin: 0 !important;
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  h1 { font-size: 20px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }

  .container {
    padding: 8px !important;
  }

  section {
    padding: 12px 8px !important;
    margin-bottom: 12px !important;
  }

  input, textarea, select, button {
    padding: 10px 12px !important;
  }
}