/* Shared responsive primitives. Wide data sets scroll inside their own panels;
   the page itself stays sized to the viewport. Module adaptations follow this file. */
.content, .page, .grid > *, .card__body, .modal__body { min-width: 0; }
.page__title h1 { overflow-wrap: anywhere; }
.global-search__head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.global-search__head > .topbar__search { flex: 1; min-width: 0; max-width: none; }
.global-search__head > .icon-btn { flex: none; }
.global-search { width: min(94vw, 640px); max-height: calc(100dvh - 140px); }

@media (max-width: 1080px) {
  .page {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 760px) {
  .page { padding-top: 18px; }
  .page__head { gap: 14px; margin-bottom: 18px; }
  .page__title { width: 100%; }
  .page__title h1 { font-size: clamp(1.4rem, 5.8vw, 1.75rem); line-height: 1.2; flex-wrap: wrap; gap: 6px 10px; }
  .page__subtitle { line-height: 1.5; overflow-wrap: anywhere; }
  .page__actions { width: 100%; gap: 8px; min-width: 0; }
  .page__actions > :is(.btn, .select, .input, .rangepick) { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .page__actions > .rangepick > .rangepick__control { width: 100%; justify-content: center; }
  .page__actions > .btn { height: auto; white-space: normal; padding-top: 9px; padding-bottom: 9px; }

  /* 16px inputs prevent iOS from zooming the entire CRM on focus. */
  .input, .select, .textarea, .datefield .datefield__input, .topbar__search input,
  .mention-input, .composer__input, .csearch__input, .cnav__filter input {
    font-size: 16px;
    min-width: 0;
  }
  .input, .select { min-height: 44px; }
  .input--sm, .select--sm { height: 44px; }
  .btn, .chip, .icon-btn, .rangepick__control, .datefield__control { min-height: 44px; }
  .btn--icon, .btn--icon.btn--sm, .icon-btn { min-width: 44px; }
  .icon-btn, .btn--icon, .btn--icon.btn--sm { flex-shrink: 0; }
  .chip { height: auto; padding-top: 8px; padding-bottom: 8px; }
  .checkbox, .switch { min-height: 44px; }
  .checkbox, .switch, .field__hint, .field__error { overflow-wrap: anywhere; }
  .switch__track { flex-shrink: 0; }

  .filterbar { padding: 10px; gap: 8px; align-items: stretch; }
  .filterbar > :is(.input, .select, .datefield, .topbar__search) {
    flex: 1 1 160px;
    min-width: 0;
    max-width: 100%;
  }
  .filterbar > .topbar__search { flex-basis: 100%; max-width: none !important; }
  .filterbar > .topbar__search svg { top: 14px; }
  .filterbar > .spacer { display: none; }
  .filterbar > .rangepick { min-width: 0; max-width: 100%; }
  .rangepick__control { max-width: 100%; }
  .rangepick__label { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .datefield__control { max-width: 100%; }
  .datefield__value { min-width: 0; }

  .grid { gap: 12px; }
  .card__head { flex-wrap: wrap; padding: 14px; gap: 8px 12px; }
  .card__head > :is(h3, .stack) { min-width: 0; overflow-wrap: anywhere; }
  .card__body { padding: 14px; }
  .card__body--tight { padding: 12px; }
  .card__foot { padding: 12px 14px; overflow-wrap: anywhere; }
  .card__head > .row { min-width: 0; }
  .notice { flex-wrap: wrap; }
  .notice > svg { flex-shrink: 0; }

  .tabs { max-width: 100%; min-width: 0; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .tab { flex-shrink: 0; min-height: 44px; padding: 11px 14px; }
  .table-wrap { overscroll-behavior: contain; scrollbar-gutter: auto; scrollbar-width: thin; }
  .table th, .table td { padding: 12px; }
  .table td { overflow-wrap: break-word; }
  .table .btn { min-height: 44px; }
  .pagination { flex-wrap: wrap; padding-top: 14px; gap: 10px; }
  .pagination > .row { flex-wrap: nowrap; margin-left: auto; }

  /* Dialog headers and save actions stay visible while their body scrolls. */
  .modal:not(.modal--top) {
    inset: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
    height: fit-content;
    margin: auto;
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: var(--r-lg);
    transform: none;
    animation: none;
  }
  .drawer, .drawer--wide { width: 100%; max-height: 100dvh; animation: none; }
  .modal__head { padding: max(12px, env(safe-area-inset-top)) 14px 12px; gap: 8px; }
  .modal__head > .stack { min-width: 0; }
  .modal__head h3 { overflow-wrap: anywhere; }
  .modal__head > .icon-btn { align-self: flex-start; }
  .modal__body { padding: 14px; min-height: 0; overscroll-behavior: contain; }
  .modal__foot { padding: 12px 14px max(12px, env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .modal__foot .btn { height: auto; padding-top: 10px; padding-bottom: 10px; white-space: normal; }
  .global-search.modal--top { top: max(8px, env(safe-area-inset-top)); left: 8px; right: 8px; width: auto; max-height: calc(100dvh - 24px); transform: none; animation: none; }
  .global-search__head { padding: 10px; }
  .global-search .topbar__search svg { top: 14px; }

  /* Date controls become bounded sheets, including in nested forms. */
  .rangepick__pop, .datefield__pop, .datefield--dt .datefield__pop {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: auto;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    translate: none !important; /* keepInView also positions desktop dropdowns. */
  }
  .rangepick__presets { flex-wrap: wrap; flex-shrink: 0; }
  .rangepick__preset { min-height: 44px; white-space: normal; }
  .rangepick__cal { flex-shrink: 0; }
  .rangepick__months { gap: 16px; }
  .rangepick__month { flex-shrink: 0; }
  .rangepick__day, .datefield__day { height: 42px; }
  .rangepick__monthhead .icon-btn { min-width: 44px; }
  .rangepick__foot { position: sticky; bottom: -12px; background: var(--bg-elevated); padding-bottom: 12px; }
  .datefield__month, .datefield__year, .datefield__preset { min-height: 44px; }
  .datefield__pop--dt .datefield__cols { grid-template-columns: minmax(0, 1fr); }

  .toasts { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .toast { min-width: 0; max-width: 100%; }
  .toast__body { overflow-wrap: anywhere; }
  .popover__item { min-height: 44px; overflow-wrap: anywhere; }
  .popover__label { overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  .filterbar > :is(.input, .select, .datefield) { flex-basis: 100%; width: 100% !important; max-width: none; }
  .grid--2, .grid--3, .grid--cards, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .pagination__info { flex-basis: 100%; }
  .modal__foot > .btn { flex: 1 1 auto; }
}

@media (hover: none) and (pointer: coarse) {
  .btn, .chip, .icon-btn, .tab, .nav-link { touch-action: manipulation; }
  .kpi:hover, .card--hover:hover { transform: none; }
}