/* Shared portal layout for phone, tablet, and desktop. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

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

#portal-shell > header {
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

#page-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#portal-shell > main {
  min-width: 0;
}

#sidebar {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

button,
a,
select,
summary {
  touch-action: manipulation;
}

@media (max-width: 1279px) {
  #portal-shell > header {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    gap: 0.75rem;
  }

  #portal-shell > header .flex.items-center.gap-4 {
    min-width: 0;
    gap: 0.5rem;
  }

  #page-title {
    font-size: 1.05rem;
  }

  #portal-shell > main {
    padding: 1rem;
  }

  #sidebar-toggle {
    width: 2.75rem;
    height: 2.75rem;
  }
}

@media (max-width: 767px) {
  #portal-shell > main {
    padding: 0.75rem;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* Filter / toolbar rows wrap instead of overflowing. */
#portal-shell > main .flex.items-center.justify-between,
#portal-shell > main .flex.items-end.justify-between,
#portal-shell > main .flex.items-center.gap-3,
#portal-shell > main .flex.items-center.gap-2 {
  flex-wrap: wrap;
}

/* Wide tables stay on-canvas. */
#portal-shell table {
  max-width: 100%;
}

#portal-shell .overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Dialogs fit the viewport on phones and tablets. */
@media (max-width: 767px) {
  .fixed.inset-0 [role="dialog"] {
    max-width: min(100vw - 1rem, 42rem);
    max-height: min(92dvh, 56rem);
    overflow: auto;
  }
}

@media (max-width: 639px) {
  .fixed.inset-0 .relative.min-h-full {
    align-items: flex-end;
    padding: 0;
  }

  .fixed.inset-0 [role="dialog"] {
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 1rem 1rem 0 0;
    margin-bottom: 0;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  #portal-shell > main {
    padding: 1.25rem;
  }
}

@media (max-width: 767px) {
  #portal-shell select {
    max-width: 100%;
    min-width: 0;
  }

  [data-panel-content="invites"] .flex.flex-wrap.items-end > div {
    width: 100%;
  }
}