/**
 * public/css/app.css
 *
 * WHY: Minimal custom styles for things Tailwind CDN can't handle.
 * Keep this file small — Tailwind utility classes should handle 95%
 * of styling. This covers edge cases and browser quirks.
 */

/* ── Safe areas for notched phones (iPhone X+) ────────── */
/* WHY: Capacitor apps run full-screen. Without safe area padding,
   content gets hidden behind the notch and home indicator. */
.safe-area-top {
  padding-top: env(safe-area-inset-top, 0px);
}
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── HTMX loading indicator ──────────────────────────── */
/* WHY: HTMX adds/removes the htmx-request class during requests.
   We use this to show/hide the loading spinner. */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: flex;
}

/* ── Alpine.js cloak ─────────────────────────────────── */
/* WHY: prevents flash of unstyled Alpine content (like x-show
   elements briefly appearing before Alpine initializes). */
[x-cloak] {
  display: none !important;
}

/* ── Smooth transitions for HTMX page swaps ──────────── */
/* WHY: makes content swaps feel like native app transitions
   instead of jarring full-page reloads. */
#main-content,
#admin-content {
  transition: opacity 150ms ease-in-out;
}
.htmx-swapping #main-content,
.htmx-swapping #admin-content {
  opacity: 0.5;
}

/* ── Typography overrides ────────────────────────────── */
/* WHY: system font stack for fastest possible text rendering.
   No custom fonts = no FOUT and zero extra HTTP requests. */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Form input sizing for 55+ users ─────────────────── */
/* WHY: larger inputs are easier to tap and read for older users.
   The minimum height prevents inputs from being too small on mobile. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
  min-height: 44px; /* Apple's recommended minimum tap target */
  font-size: 16px;  /* Prevents iOS zoom on focus */
}

/* ── Tablet button sizing ────────────────────────────── */
/* WHY: on tablets, buttons and interactive elements should have
   more breathing room since users have larger screens but still
   use touch. */
@media (min-width: 768px) {
  button, .btn, [type="submit"] {
    min-height: 48px;
  }
}

/* ── Tablet typography ───────────────────────────────── */
/* WHY: on larger screens, bump up body text slightly for readability */
@media (min-width: 768px) {
  body {
    font-size: 17px;
  }
}

/* ── Print styles ────────────────────────────────────── */
/* WHY: residents may want to print meeting minutes, budget docs, etc.
   Hide navigation and interactive elements when printing. */
@media print {
  nav,
  .htmx-indicator,
  #toast-container,
  button,
  .no-print {
    display: none !important;
  }
  #main-content {
    padding-bottom: 0;
  }
}