/* Core mobile tweaks */
:root { --touch-min: 44px; }

@media (max-width: 640px) {
  html, body { font-size: 16px; }
  .touch { min-height: var(--touch-min); min-width: var(--touch-min); }
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
}

/* Table → cards pattern */
table.responsive-table { width: 100%; border-collapse: collapse; }

@media (max-width: 640px) {
  table.responsive-table thead { display: none; }
  table.responsive-table tr { display: block; border: 1px solid #e5e7eb; border-radius: 8px; margin: 0 0 .75rem 0; padding: .25rem .5rem; }
  table.responsive-table td { display: flex; justify-content: space-between; padding: .5rem .25rem; }
  table.responsive-table td::before { content: attr(data-label); font-weight: 600; margin-right: 1rem; }
}

/* Bottom nav */
.mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e5e7eb; height: 56px; display: none; z-index: 1000; }
.mobile-nav a { flex: 1; text-align: center; line-height: 56px; text-decoration: none; color: #111827; }

@media (max-width: 640px) { 
  .mobile-nav { display: flex; } 
  .main-content { padding-bottom: 56px; } 
}

/* Inputs */
input[type=number], input[type=tel] { font-size: 16px; } /* prevent iOS zoom */

/* Safe-area insets for notched devices */
@supports (padding: max(0px)) {
  @media (max-width: 640px) {
    body { padding-bottom: max(56px, env(safe-area-inset-bottom)); }
    .mobile-nav { padding-bottom: env(safe-area-inset-bottom); }
  }
}