/* Responsive refinements for dense CRM workflows. Loaded after module styles. */
/* These wrappers keep the desktop composer inline and group controls on phones. */
.composer__tools,
.composer__delivery { display: contents; }

@media (max-width: 900px) {
  /* Keep each status column inside the viewport, with the next one visible. */
  .board {
    min-width: 0;
    max-width: 100%;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 1px;
  }
  .board__col {
    flex-basis: min(296px, calc(100% - 20px));
    min-width: 0;
    max-height: none;
    scroll-snap-align: start;
  }
  .board__card { overflow-wrap: anywhere; }

  /* A frozen name preserves the employee context while the week is scrolled. */
  .schedule-table-wrap { isolation: isolate; overscroll-behavior-x: contain; }
  .schedule-table th:first-child,
  .schedule-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 136px;
    max-width: 160px;
    background: var(--surface-solid);
    box-shadow: 1px 0 0 var(--line);
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .schedule-table thead th:first-child { z-index: 3; background: var(--bg-sunken); }
  .schedule-table td:first-child .row { flex-wrap: nowrap; }
  .schedule-table td:first-child .userlink { min-width: 0; }
}

@media (max-width: 760px) {
  /* Original card minima can exceed the width of a padded phone card. */
  .kb-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); }
  .ly-campaigns { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
  .ly-insight-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .ly-offers { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
  .ly-choice { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
  .ly-templates,
  .ly-rfm-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
  .ly-network { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
  .ly-form > *,
  .ly-cond,
  .ly-cond__row > * { min-width: 0; max-width: 100%; }
  .ly-cond__field { width: 100%; }
  .ly-cond__head,
  .ly-seg-actions,
  .ly-savebar { flex-wrap: wrap; }
  .ly-cond--nested { padding: 8px; }
  .ly-savebar { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .ly-search { min-width: 0; }
  .ly-search .input { min-width: 0; }

  /* The primary send controls remain separate from optional attachment tools. */
  .composer { min-width: 0; padding-inline: 8px; }
  .composer__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 6px; }
  .composer__tools {
    grid-column: 1 / -1;
    display: flex;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .composer__delivery { display: flex; grid-column: 2; grid-row: 2; gap: 2px; align-items: center; }
  .composer__also { grid-column: 1; grid-row: 2; margin-left: 4px; line-height: 1.3; }
  .composer__bar > .spacer { display: none; }
  .composer__tools > .icon-btn,
  .composer__delivery > .icon-btn,
  .composer__delivery > .composer__send { flex: 0 0 44px; width: 44px; height: 44px; }
  .composer__send { margin-left: 0; }
  .composer__typing { height: auto; min-height: 20px; overflow-wrap: anywhere; }
  .chat__bar { padding: 8px; }
  .chat-stream,
  .chat-thread__body { overscroll-behavior-y: contain; }
  .csearch__kbd,
  .csearch__foot { display: none; }
  .csearch__scope { max-width: 35%; }

  .shifts__time { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  .shifts__time .datefield { width: auto; flex: 1 1 90px; min-width: 0; }
  .shifts__time > .t-xs { flex-basis: 100%; }
}

@media (max-width: 560px) {
  /* Phone calendar becomes a readable agenda, preserving chronological order. */
  .calplan { grid-template-columns: minmax(0, 1fr); }
  .calday { min-height: 84px; }
  .calevent { min-height: 40px; overflow-wrap: anywhere; }
  .calday__body:empty { min-height: 24px; }

  /* Chat titles and actions get separate rows so neither collapses to nothing. */
  .chat-head { height: auto; min-height: 62px; flex-wrap: wrap; gap: 4px; padding: 6px 8px; }
  .chat-head__main { flex: 1 1 calc(100% - 52px); }
  .chat-head__actions { width: 100%; justify-content: flex-end; }
  .chat-head__actions .icon-btn { width: 44px; height: 40px; }
  .chat-head__back { width: 44px; height: 44px; flex: none; }
  .chat-intro { padding-inline: 16px; }
  .chat-intro h2 { overflow-wrap: anywhere; }
  .chat-intro .row { flex-wrap: wrap; }
  .csearch__field { gap: 5px; padding-inline: 8px; }

  .kb-icons { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ly-flow__row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
  .ly-flow__row > .ly-bar { grid-column: 1 / -1; grid-row: 2; }
  .ly-burn { grid-template-columns: minmax(0, 1fr); }
  .la-hbar { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
  .la-hbar__track { grid-row: 2; grid-column: 1 / -1; }
  .la-hbar__label { white-space: normal; }
  .ly-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ly-facts dd { margin-bottom: 8px; overflow-wrap: anywhere; }
}