/*
 * PWA safe-area handling for the standalone iOS app (notch + home indicator).
 * Only takes effect where env(safe-area-inset-*) is supported and non-zero
 * (i.e. installed standalone on notched devices); a no-op everywhere else.
 */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Top app chrome: extend the sticky header / admin top-nav / fixed sidebar up
     into the notch so their content (incl. the mobile hamburger) clears the
     translucent status bar. These elements carry no own top padding, so this
     only adds the inset. */
  header.sticky.top-0,
  nav.glass-nav {
    padding-top: env(safe-area-inset-top);
  }
  aside.fixed.top-0 {
    padding-top: env(safe-area-inset-top);
  }
}

/*
 * Mobile layout safety net (phones/tablets). Desktop-first templates leave a
 * few toolbars/headers/forms wider than the screen; this keeps the page from
 * scrolling sideways and lets control rows wrap instead of overflowing.
 */
@media (max-width: 1023px) {
  /* No sideways page scroll. overflow-x:clip (not hidden) does NOT break the
     sticky nav, and inner .overflow-x-auto regions (tables) still scroll. */
  html, body { overflow-x: clip; max-width: 100%; }

  /* Filter/action/toolbar rows and page headers (title + action button): wrap
     instead of overflowing. flex-wrap only wraps when content doesn't fit, so
     single-line rows are unaffected. */
  .flex.gap-2, .flex.gap-3, .flex.gap-4,
  .flex.items-center.gap-2, .flex.items-center.gap-3, .flex.items-center.gap-4,
  .flex.justify-between {
    flex-wrap: wrap;
  }

  /* ...but keep the top nav / header bars on a single line. */
  nav.glass-nav .flex,
  header .flex {
    flex-wrap: nowrap;
  }

  /* Form controls must never exceed the screen width. */
  input, select, textarea {
    max-width: 100%;
  }
}

/* Toast notifications: the default is a small top-right card that, in the
   standalone iOS app, hides under the status bar/notch. On phones, drop it
   below the safe area and let it span the width. */
@media (max-width: 640px) {
  .fixed.top-4.right-4.max-w-sm {
    top: calc(env(safe-area-inset-top) + 0.75rem);
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
  }

  /* Scrollable tab bars: wrap on phones so all tabs are visible (no cut-off). */
  .flex.scrollbar-hide {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}