/* EliteHost — PWA + mobile polish.
   Loaded AFTER main.css (and the page-specific sheets) so it can refine them.
   Everything here is additive and degrades to a no-op on desktop / non-notch
   devices (env(safe-area-inset-*) resolves to 0). */

/* ── 1) Kill accidental horizontal overflow + iOS text inflation ─────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overflow-x: clip; /* clip (not hidden) — doesn't break position:sticky */
}
img, svg, video, canvas { max-width: 100%; }
img, video { height: auto; }
/* Flex/grid children must be allowed to shrink, or long content forces overflow. */
.app, .content, .page, .card { min-width: 0; }

/* ── 2) Safe-area insets (notch / home indicator) ───────────────────────── */
/* Top: only when running as an installed app under the status bar. */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
}
/* Bottom-anchored floating UI: lift above the home indicator. */
@supports (padding: env(safe-area-inset-bottom)) {
  .fab { bottom: calc(22px + env(safe-area-inset-bottom)); }
  .chat-window { bottom: calc(90px + env(safe-area-inset-bottom)); }
  body.dashboard.nav-minimalistic .hotbar { bottom: calc(22px + env(safe-area-inset-bottom)); }
  body.dashboard.nav-minimalistic .content { padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
}

/* ── 3) Wide admin/manage tables → horizontal scroll, not a broken layout ── */
@media (max-width: 760px) {
  .adm-table,
  .t {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ── 4) Stop iOS auto-zooming when a form field is focused (needs ≥16px) ─── */
@media (max-width: 560px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* ── 5) Comfortable tap targets for the densest small-screen controls ───── */
@media (max-width: 560px) {
  .topbar__menu,
  .icon-btn,
  .bell {
    min-width: 40px;
    min-height: 40px;
  }
}