/* ==========================================================================
   responsive.css — desktop-first. This is an internal CRM; the desktop case
   is the real one. Below it, things collapse rather than reflow cleverly.
   ========================================================================== */

/* --- Laptop --------------------------------------------------------------- */
@media (max-width: 1400px) {
  .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-strip .kpi:nth-child(3n) { border-right: 0; }
  .kpi-strip .kpi:nth-child(-n+3) { border-bottom: 1px solid var(--color-border); }
}

@media (max-width: 1240px) {
  .grid-main-rail,
  .grid-rail-main { grid-template-columns: minmax(0, 1fr); }
  .campaign-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Tablet --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .app { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

  /* On tablet the sidebar overlays instead of squeezing the content. */
  .app[data-sidebar="expanded"] .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: var(--sidebar-w);
    box-shadow: var(--shadow-lg);
  }
  .app[data-sidebar="expanded"] .brand-text,
  .app[data-sidebar="expanded"] .nav-group__label,
  .app[data-sidebar="expanded"] .nav-item__label,
  .app[data-sidebar="expanded"] .nav-item__count,
  .app[data-sidebar="expanded"] .user-card__text { display: block; }
  .app[data-sidebar="expanded"] .nav-item { justify-content: flex-start; padding: 0 var(--space-4); }
  .app[data-sidebar="expanded"] .sidebar__brand { justify-content: flex-start; padding: 0 var(--space-4); }

  .scrim {
    position: fixed;
    inset: 0;
    background: rgba(26, 24, 21, 0.4);
    z-index: calc(var(--z-sidebar) - 1);
  }

  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-layout { grid-template-columns: minmax(0, 1fr); }
  .settings-nav { flex-direction: row; overflow-x: auto; position: static; padding-bottom: var(--space-2); }
  .convo-layout { grid-template-columns: 264px minmax(0, 1fr); }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .ring { justify-self: start; }
}

/* --- Small tablet / large phone ------------------------------------------ */
@media (max-width: 860px) {
  .page__inner { padding: var(--space-4) var(--space-4) var(--space-10); }
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-strip .kpi { border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
  .kpi-strip .kpi:nth-child(2n) { border-right: 0; }
  .kpi-strip .kpi:nth-last-child(-n+2) { border-bottom: 0; }

  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .import-summary { grid-template-columns: repeat(2, 1fr); }

  .header__context { display: none; }
  .header__search { max-width: none; }

  /* The conversation list and thread become one pane at a time. */
  .convo-layout { grid-template-columns: minmax(0, 1fr); height: auto; }
  .convo-layout[data-pane="thread"] .convo-list { display: none; }
  .convo-layout[data-pane="list"] .thread { display: none; }
  .convo-list { border-right: 0; max-height: 62dvh; }
  .thread__head [data-back] { display: inline-grid; }
  .thread { min-height: 60dvh; }

  .page-head { flex-direction: column; align-items: stretch; }
  .modal-overlay { padding: var(--space-4) var(--space-3); }
  .cal-cell { min-height: 76px; }
  .cadence-lane { grid-template-columns: 58px 1fr 62px; }
  .cadence__axis { padding-left: calc(58px + var(--space-3)); padding-right: calc(62px + var(--space-3)); }
}

@media (max-width: 620px) {
  .kpi-strip { grid-template-columns: minmax(0, 1fr); }
  .kpi-strip .kpi { border-right: 0; }
  .toolbar, .filter-bar { flex-direction: column; align-items: stretch; }
  .toolbar > *, .filter-bar > * { width: 100%; }
  .stat-row { gap: var(--space-4); }
  .msg__bubble { max-width: 86%; }
}

/* --- Print: the tables are the useful part ------------------------------- */
@media print {
  .sidebar, .header, .toolbar, .pagination, .row-actions, .page-head__actions { display: none !important; }
  .app { grid-template-columns: 1fr; height: auto; }
  body { overflow: visible; }
  .page { overflow: visible; }
  .card { box-shadow: none; border-color: #ccc; }
}