/* EstateFlow OS — TABLET tier (721px–1024px: iPads, small laptops).
   Sits between the desktop base (style.css) and the phone tier
   (mobile.css). Keeps the desktop layout but relaxes it for touch. */

@media (min-width: 721px) and (max-width: 1024px) {
  /* roomier touch targets in the nav and submenus */
  .modtab { padding: 8px 12px; }
  .submenu a { padding: 4px 2px; }

  /* forms: rows wrap so three-across fields become two-across */
  .form .row { flex-wrap: wrap; }
  .form .row label { flex: 1 1 240px; }

  /* cards and containers: slightly tighter gutters than desktop */
  .container { margin: 14px 12px; padding: 16px 14px; }

  /* tables: wide listings scroll sideways instead of clipping */
  .table { display: block; overflow-x: auto; max-width: 100%;
    -webkit-overflow-scrolling: touch; }

  /* the tab strip gets its own swipeable line, like on phones — three-row
     wrapped navigation on an iPad reads like a ransom note */
  .topbar-row { flex-wrap: wrap; }
  .modules, .topbar-main .modules { order: 10; flex: 1 0 100%;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .modules::-webkit-scrollbar { display: none; }
  .modules .menu-panel { position: fixed; left: 14px; right: auto; top: auto; }

  /* touch-friendly buttons */
  .btn-primary, .btn-ghost, .btn-danger { padding: 9px 16px; }
  .btn-primary.sm, .btn-ghost.sm, .btn-danger.sm { padding: 6px 12px; }

  /* dialogs fill more of the screen */
  .dlg { width: min(560px, 92vw); }
}