/**
 * Kratevia mobile guardrails
 *
 * Additive safety layer for app pages. Keep page-specific layout in the
 * relevant feature CSS; this file only protects cross-page invariants:
 * no global horizontal overflow, contained modals/sheets, iOS safe-area
 * padding, readable inputs, and practical tap targets.
 */

html,
body {
  max-width: 100%;
}

body.app-page,
body.app-body,
body.auth-page {
  margin: 0;
  overflow-x: hidden;
}

.app-shell,
.app-main,
.app-content,
.page-content,
[data-page-content] {
  min-width: 0;
}

/* Keep desktop shell containers governed by app.css/page CSS.
   Wrapping guardrails must be applied to leaf content, not inherited by
   structural containers such as calendar day headers. */

img,
video,
canvas,
svg {
  max-width: 100%;
}

button,
[role="button"],
a,
input,
select,
textarea,
.btn,
.header-action-btn,
.mobile-menu-btn {
  touch-action: manipulation;
}

@media (max-width: 575px) {
  body.app-page,
  body.app-body,
  body.auth-page {
    min-width: 0;
  }

  .app-main,
  .app-content,
  .page-content,
  [data-page-content] {
    width: 100%;
    min-width: 0;
  }

  input,
  select,
  textarea {
    font-size: max(16px, 1rem);
  }

  .btn:not(.btn-xs),
  .header-action-btn,
  .mobile-menu-btn,
  .notifications-view-btn,
  .ks-segmented button,
  [data-mobile-critical-control] {
    min-width: var(--ks-tap-target-min, 44px);
    min-height: var(--ks-tap-target-min, 44px);
  }

  .ks-modal,
  .ui-dialog,
  .friends-modal-dialog,
  .subscription-limit-modal,
  .notification-modal {
    max-width: calc(100vw - (var(--ks-mobile-gutter, 1rem) * 2));
    max-height: var(--ks-modal-mobile-max-height, calc(100dvh - 2rem));
  }

  .ks-modal__body,
  .ui-dialog-body,
  .friends-modal-body,
  .subscription-limit-modal__list,
  .notification-modal-body {
    min-height: 0;
    overscroll-behavior: contain;
  }

  .ks-modal__footer,
  .ui-dialog-footer,
  .friends-modal-footer,
  .subscription-limit-modal__footer {
    padding-bottom: var(--ks-mobile-safe-padding-bottom, max(1rem, env(safe-area-inset-bottom, 0px)));
  }

  .ks-popover,
  .ks-popover--mobile-sheet,
  .picker-popover,
  .profile-dropdown,
  .notifications-dropdown {
    max-width: calc(100vw - (var(--ks-mobile-gutter, 1rem) * 2));
  }

  .ks-popover--mobile-sheet,
  .picker-popover--mobile-sheet,
  [data-bottom-sheet="true"] {
    max-height: var(--ks-bottom-sheet-max-height, calc(100dvh - 0.75rem));
    padding-bottom: var(--ks-mobile-safe-padding-bottom, max(1rem, env(safe-area-inset-bottom, 0px)));
  }
}

@media (max-width: 768px) {
  body.ks-layout-animating .app-shell .app-header {
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    overflow: hidden;
  }

  body.ks-layout-animating .app-shell .app-header-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

@media (display-mode: standalone) {
  body.app-page,
  body.app-body,
  body.auth-page {
    padding-left: var(--ks-safe-area-left, env(safe-area-inset-left, 0px));
    padding-right: var(--ks-safe-area-right, env(safe-area-inset-right, 0px));
  }
}