/*
 * Phone layout, shared by every Zenorix app. Keep identical in all apps; load it after the app's own CSS.
 * On phones the top navigation becomes a bottom tab bar (it used to be hidden, leaving no way to switch pages).
 */
@media (max-width: 760px) {
  /* No blur on the top bar here: backdrop-filter would make it the containing block for the fixed tab bar below. */
  .topbar { padding: 10px 14px; gap: 8px; padding-top: max(10px, env(safe-area-inset-top)); backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5, 6, 10, 0.96); }
  .topbar .icon-btn { width: 40px; height: 40px; }
  .user-chip { padding: 3px; }

  .nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; margin: 0; gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(5, 6, 10, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; justify-content: space-around;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 1 0 auto; min-width: 64px; flex-direction: column; justify-content: center; gap: 3px; padding: 7px 6px; border-radius: 12px; font-size: 10.5px; font-weight: 700; line-height: 1.1; text-align: center; white-space: nowrap; }
  .nav a svg { width: 20px; height: 20px; }
  .nav a .count, .nav a .soon { position: absolute; transform: translate(14px, -12px); margin: 0; }
  .nav a { position: relative; }
  /* A single link (e.g. Home) needs no tab bar. */
  .nav:has(> a:only-child) { display: none; }
  main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body:has(.nav:has(> a:only-child)) main { padding-bottom: 48px; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }

  /* 16px inputs stop iPhones zooming in on focus; bigger tap targets. */
  input.input, select.input, textarea.input, .input { font-size: 16px; }
  .btn { min-height: 42px; }
  .btn.sm { min-height: 36px; }
  .chip { min-height: 34px; }

  /* Wide tables scroll sideways instead of stretching the page. */
  .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .card { padding: 18px; }
  h1 { overflow-wrap: anywhere; }

  /* Apps menu: full width under the top bar. */
  .zx-launch { position: static; }
  .zx-launch-panel { position: fixed; left: 12px; right: 12px; top: 62px; width: auto; max-width: none; max-height: calc(100vh - 160px); overflow-y: auto; }

  /* Dialogs sit at the bottom like a sheet, clear of the tab bar. */
  .modal-bg { align-items: end; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .nav a { min-width: 56px; font-size: 10px; }
  .topbar .logo img { height: 18px; }
}