/* Breakpoint overrides: tighter gutters on a tablet, and on a phone a
 * topbar that fits (the controller search shrinks to its icon). */

@media (max-width:980px){
  .app-content, .page-header{ padding-left:16px; padding-right:16px; }
  .app-content{ padding-top:16px; padding-bottom:48px; }
  .page-header{ padding-top:16px; }

  .topbar{ gap:14px; padding:0 14px; }
  /* The tabs scroll sideways rather than squeeze; the status takes what is left. */
  .tabbar{ flex-shrink:1; min-width:0; overflow-x:auto; }
}

/* ── Phone: logo + name take the free space, the search is an icon button
 *    beside the account menu, and its panel spans the screen under the
 *    topbar. ── */
@media (max-width:600px){
  .topbar{ display:flex; gap:12px; }
  .topbar-start{ flex:1; gap:14px; }
  .topbar .app-name{ white-space:normal; font-size:13px; line-height:1.2; }
  .topbar .app-version{ display:none; } /* no room: the login screen still shows it */
  .cs-label{ display:none; }
  .cs-btn{ padding:0 9px; gap:5px; }
  .cs-panel{ position:fixed; top:62px; left:12px; right:12px; width:auto; max-width:none; transform:none; }
  .cs-list{ max-height:min(270px, calc(100vh - 140px)); }
}

@media (max-width:520px){
  .page-title{ font-size:18px; flex-wrap:wrap; }
  /* The header stays pinned (layout.css), so keep it short: the serial sits
   * beside the title and the gaps tighten. */
  .page-header{ padding-top:10px; padding-bottom:8px; gap:10px; }
  .page-heading, .period-controls{ gap:8px; }
  .page-title-block{ flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:2px 10px; }
  .page-heading, .period-controls, .period-bar{ width:100%; }
  .pb-date{ flex:1; width:auto; }
  .stats-card{ padding:4px 14px 10px; }
  .stats-table td.share{ width:64px; }
}