/* ── Phone & tablet layout (loaded last) ────────────────────────────────────
   Below 820px the sidebar becomes a slide-in drawer (☰), a bottom tab bar gives one-tap
   access to the main screens, tables scroll sideways inside their card, modals open as
   bottom sheets, and inputs are 16px so iPhone doesn't zoom in. */
.nav-toggle, .bottom-nav, .nav-scrim, .install-hint { display: none; }

@media (max-width: 820px) {
  html, body { overflow-x: hidden; }
  #app { display: block; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; width: 280px; max-width: 86vw;
    z-index: 90; transform: translateX(-105%); transition: transform .22s ease;
    padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: calc(10px + env(safe-area-inset-bottom));
    box-shadow: 8px 0 30px rgba(0,0,0,.25);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(10,20,35,.45); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  .nav-link { padding: 11px 12px; font-size: 15px; }

  .topbar { padding: calc(10px + env(safe-area-inset-top)) 12px 10px; gap: 8px; }
  .topbar > div:first-child, #pageTitle { flex: 1; min-width: 0; }
  #pageTitle { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); background: #fff; border-radius: 10px; font-size: 20px; color: #0f2a44; cursor: pointer; flex: none; }
  .topbar-right .badge { display: none !important; }

  .view { padding: 14px 12px calc(84px + env(safe-area-inset-bottom)); }
  .card { padding: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card > table, .card table { min-width: 560px; }
  .card table.fit, .cp-metric table { min-width: 0; }
  table { font-size: 13px; }
  th, td { padding: 8px 8px; }

  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr 1fr !important; }
  .form-grid { grid-template-columns: 1fr !important; }
  .cp-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .toolbar { gap: 8px; }
  .toolbar > * { max-width: 100%; }
  h2 { font-size: 19px; }

  input, select, textarea, .input { font-size: 16px !important; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }

  /* Modals as bottom sheets */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal, .modal.modal-wide { max-width: 100%; width: 100%; border-radius: 18px 18px 0 0; max-height: 92dvh; padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); }
  .modal table { min-width: 520px; }
  .modal > div:has(> table) { overflow-x: auto; }

  /* Bottom tab bar */
  .bottom-nav {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: #fff; border-top: 1px solid var(--border); padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(15,42,68,.06);
  }
  .bottom-nav a, .bottom-nav button {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; font-size: 10.5px; color: #5f6b7a;
    text-decoration: none; background: none; border: none; position: relative; cursor: pointer; font-family: inherit;
  }
  .bottom-nav .ti { font-size: 22px; }
  .bottom-nav a.active { color: #185fa5; font-weight: 600; }
  .bottom-nav .bn-badge { position: absolute; top: 2px; left: 55%; background: #e02020; color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 0 5px; line-height: 16px; min-width: 16px; text-align: center; }

  /* Screen-specific touches */
  .pos-layout { display: block !important; }
  .pos-cart { position: static !important; width: auto !important; margin-top: 12px; max-height: none !important; }
  .ibx { height: calc(100dvh - 150px) !important; }
  .toast { left: 12px !important; right: 12px !important; bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 480px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
  .cp-metric .v { font-size: 20px; }
  .flex.gap-8 { flex-wrap: wrap; }
}

/* Installed app (standalone): no browser bar, respect the notch on desktop-installed windows too */
@media (display-mode: standalone) {
  .install-btn { display: none !important; }
}
.install-btn { margin-top: 8px; width: 100%; justify-content: center; background: #b8955a !important; border-color: #b8955a !important; color: #fff !important; }