/* Mobile refinements. The off-canvas drawer and most per-page breakpoints live
   in their own files; this file closes the remaining gaps: horizontal overflow
   from wide grids, a cramped topbar, and the toolbar/board on small screens. */

@media (max-width: 768px) {
  /* Let the page title ellipsize instead of shoving the topbar wider. */
  .topbar-title,
  .topbar-breadcrumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { gap: 6px; }
  /* Running-timer chip: drop the task name so the clock + stop stay compact. */
  .timer-chip-task { display: none; }

  /* One board column fills the screen; swipe horizontally for the rest. */
  .board-column { min-width: 80vw; max-width: none; }

  /* Trix toolbar wraps instead of overflowing off-screen. */
  trix-toolbar .trix-button-row { flex-wrap: wrap; row-gap: 6px; }

  /* Comfortable tap targets + a little more breathing room. */
  .shell-content { padding-left: 16px; padding-right: 16px; }
}

/* Dashboard projects "table": the fixed 5-column grid (~450px) overflows a
   phone, so stack each row — name and progress full width, figures wrapping. */
@media (max-width: 640px) {
  .dash-table-head { display: none; }
  .dash-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
  }
  .dash-project-name,
  .dash-progress { flex: 1 1 100%; }
  .dash-num { flex: 0 0 auto; text-align: left; }
}

/* Very small screens: single-column KPIs so the big numbers never clip. */
@media (max-width: 480px) {
  .kpi-row { grid-template-columns: 1fr; }
}

/* U7 (R22/KTD9): the Needs You panel stays usable on a phone — a row's badge
   strip wraps under the title instead of squeezing it, and chain rows lose the
   extra indent so titles keep their width. */
@media (max-width: 640px) {
  .needs-you-row { flex-wrap: wrap; }
  .needs-you-badges { margin-left: 0; flex-basis: 100%; }
  .needs-you-chain .dash-feed-row { padding-left: 18px; }
}

/* Client detail hero: on phones the Edit/Deactivate/Delete buttons collided
   with the client name — drop them onto their own line below it. */
@media (max-width: 640px) {
  .client-detail-hero { flex-wrap: wrap; }
  .client-detail-actions { flex-basis: 100%; }
}