@media screen and (max-width: 1024px) {
  body :where(.content, .mk-main) { padding: var(--space-4); }
  body :where(.page-head, .mk-title) { align-items: flex-start; }
  body :where(.filterbar, .filter) { flex-wrap: wrap; }
}

@media screen and (max-width: 768px) {
  body :where(.content, .mk-main, .field-main) { padding: var(--space-3); }
  body :where(.page-head, .mk-title, .title) { display: block; }
  body :where(.page-head h1, .mk-title h1, .title h1) { font-size: 26px; line-height: 32px; }
  body :where(.actions, .mk-actions) {
    display: flex;
    flex-wrap: nowrap;
    margin-top: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-1);
    scrollbar-width: thin;
  }
  body :where(.actions, .mk-actions) > * { flex: 0 0 auto; }
  body :where(.filterbar, .filter) { display: grid; grid-template-columns: 1fr; }
  body :where(.filterbar .search, .filter input[type="search"]) { min-width: 0; }
  body .modal-card,
  body .modal-card.modal-wide { width: min(100%, 94vw); max-height: 92dvh; }
  body .modal-card > #modalBody { max-height: 92dvh; padding: var(--space-4); }
  body .modal-card :where(.form-actions, .client-form-footer, .sticky-actions) {
    bottom: calc(-1 * var(--space-4));
    margin-inline: calc(-1 * var(--space-4));
    margin-bottom: calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  }
  body :where(.tabs, .financial-tabs, [role="tablist"]) { overflow-x: auto; scrollbar-width: thin; }
}

@media screen and (max-width: 390px) {
  body :where(.primary, .secondary, .ghost, .danger, .button, .retry) { padding-inline: 13px; }
  body :where(.card, .metric, .section, .item) { padding: var(--space-3); }
}