/* Evening palette normalized */
/* Responsive stability fixes for narrow screens and embedded mobile WebViews. */
html {
  max-width: 100%;
}

body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body:not(.auth-viewport-locked) {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

#root,
.app-shell,
.dashboard,
.dashboard > *,
.shop-page,
.partner-store-page,
.partner-store-page > *,
.partner-store-toolbar {
  min-width: 0;
}

#root,
.shop-page,
.partner-store-page {
  max-width: 100%;
}

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

/* Grid items otherwise keep their min-content width (about 644 px here). */
.store-management-layout,
.store-management-layout > *,
.store-manage-products,
.store-incoming-purchases,
.store-history,
.store-manage-list,
.store-manage-list > article,
.store-manage-copy,
.store-section-heading,
.store-section-heading > div {
  min-width: 0;
  max-width: 100%;
}

.store-manage-products,
.store-incoming-purchases,
.store-history {
  width: 100%;
}

.store-manage-copy {
  overflow: hidden;
}

.store-manage-copy > div {
  min-width: 0;
  flex-wrap: wrap;
}

.store-manage-copy h3 {
  max-width: 100%;
}

.store-manage-actions {
  flex: 0 0 auto;
}

.store-section-heading button {
  max-width: 100%;
  white-space: normal;
}

.partner-task-tabs {
  max-width: 100%;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Shared browser/PWA header geometry, including desktop. The profile block
   previously sat at 2px while other controls were at 17px or 20px. */
.home-hero > .home-topbar {
  min-height: 78px;
  justify-content: flex-start;
  gap: 20px;
}

.home-topbar > .profile-area {
  position: relative;
  top: auto;
  right: auto;
  margin-left: auto;
  flex-shrink: 0;
}

.home-topbar > .profile-area,
.dashboard > .page-profile-area {
  min-height: 44px;
  align-items: center;
}

.home-topbar .profile-area > .icon-button,
.home-topbar .profile-area > .ln-notification-bell,
.dashboard > .page-profile-area > .icon-button,
.dashboard > .page-profile-area > .ln-notification-bell {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.home-topbar .profile-button { min-width: 0; max-width: 220px; }
.home-topbar .profile-button > span { min-width: 0; }
.home-topbar .profile-button b,
.home-topbar .profile-button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 980px) {
  /* The home topbar also has z-index: 20 and otherwise covers the left
     button at scrollTop=0. Stay below the sidebar scrim (40) and dialogs. */
  .app-shell > .mobile-menu-button {
    z-index: 30;
    top: 17px;
  }

  .dashboard > .page-profile-area {
    top: 17px;
    height: 44px;
    align-items: center;
  }

  .home-topbar > .profile-area {
    top: auto;
    height: 44px;
  }

}

@media (max-width: 900px) {
  .store-management-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mobile browser chrome can make 100vh taller than the visible area. Keep
   existing dialogs inside the dynamic viewport and retain native touch scroll. */
@media (max-width: 760px) {
  .partner-task-modal-backdrop,
  .root-modal-backdrop {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .partner-task-modal,
  .root-modal {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}

@media (max-width: 600px) {
  .store-manage-products,
  .store-incoming-purchases,
  .store-history {
    padding: 16px;
  }

  .store-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .store-section-heading button {
    width: 100%;
  }

  .store-manage-list > article {
    gap: 10px;
  }

  .partner-store-image.compact {
    width: 54px;
    height: 54px;
  }
}

@media (max-width: 360px) {
  .store-manage-list > article {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
  }

  .partner-store-image.compact {
    width: 52px;
    height: 52px;
  }

  .store-manage-copy {
    width: 100%;
  }

  .store-manage-actions {
    grid-column: 2;
    justify-self: end;
  }
}