/* CRM page: ribbon + table fill full height; table-wrap is the scroll container */
#page-crm.active {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Autofit the pane width — the page shell itself must never scroll
     horizontally. min-width:0 lets it shrink inside the flex/grid pane;
     overflow:hidden clips any stray overflow so the only scrollers are the
     ribbon's own dropdowns (position:fixed) and the columns area
     (.crm-table-wrap, overflow:auto). */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* ── CRM ribbon — small-screen polish ──────────────────────────────────────
   The JS overflow ("⋯ More") does the heavy lifting at any width; these just
   tighten the in-bar commands so more of them stay reachable before overflow. */
@media (max-width: 640px) {
  .crm-ribbon {
    padding: 5px 10px;
    gap: 6px;
  }
  .crm-ribbon .btn-ribbon {
    padding: 5px 8px;
    gap: 5px;
  }
}

/* Tightest mode: in-bar commands go icon-only (Fluent's compact commands).
   Labels stay in the DOM for the overflow flyout and for accessibility
   (title / aria-label), just hidden in the horizontal bar. */
@media (max-width: 480px) {
  .ribbon-cmd-bar .btn-ribbon .ribbon-cmd-label,
  .ribbon-cmd-bar .btn-ribbon .ribbon-cmd-caret {
    display: none;
  }
  .crm-search {
    width: clamp(70px, 30vw, 140px);
  }
}