/* Pango v13 — final mobile shell safety layer. Loaded LAST on every page. */
@media (max-width: 768px) {
  :root { --pango-mobile-header-h: 58px; --pango-mobile-footer-clearance: 112px; }

  /* Any app-shell header is a flat, compact top bar — never a floating card. */
  body.app-shell-page > header.page-header,
  body.rentor-shell-page > header.page-header,
  body.notifications-v9 > header.page-header,
  body.public-listing-v9 > header.page-header {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 var(--pango-mobile-header-h) !important;
    height: var(--pango-mobile-header-h) !important;
    min-height: var(--pango-mobile-header-h) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 58%, transparent) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: 900 !important;
  }
  body.app-shell-page > header.page-header > .header-row,
  body.app-shell-page > header.page-header > .container.header-row,
  body.rentor-shell-page > header.page-header > .header-row,
  body.rentor-shell-page > header.page-header > .container.header-row,
  body.notifications-v9 > header.page-header > .header-row,
  body.notifications-v9 > header.page-header > .container.header-row,
  body.public-listing-v9 > header.page-header > .header-row,
  body.public-listing-v9 > header.page-header > .container.header-row {
    height: var(--pango-mobile-header-h) !important;
    min-height: var(--pango-mobile-header-h) !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 .65rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: .4rem !important;
  }

  /* Prevent the title from stealing the icon row's space. */
  body.app-shell-page header.page-header .title-cluster,
  body.rentor-shell-page header.page-header .title-cluster { min-width: 0 !important; flex: 1 1 auto !important; }
  body.app-shell-page header.page-header h1,
  body.rentor-shell-page header.page-header h1 { font-size: .96rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  body.app-shell-page header.page-header .header-actions,
  body.rentor-shell-page header.page-header .header-actions { flex: 0 0 auto !important; display:flex !important; align-items:center !important; flex-wrap:nowrap !important; gap:.2rem !important; }

  /* Bottom safe-space: the last content can always scroll fully above the appearing footer. */
  body.app-shell-page > .app-shell-scroll,
  body.rentor-shell-page > .app-shell-scroll,
  body.rentor-shell-page > main.rentor-scroll-area,
  body.dashboard-page.landlord-page .dashboard-scroll-area,
  body.dashboard-page.landlord-page .dashboard-main-scroll,
  body.dashboard-page.landlord-page main.dashboard-main,
  body.public-listing-v9 > .app-shell-scroll,
  body.notifications-v9 > .app-shell-scroll {
    padding-bottom: calc(var(--pango-mobile-footer-clearance) + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(var(--pango-mobile-footer-clearance) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Generic fallback for pages whose main content is the scrolling element. */
  body.app-shell-page main.page-content,
  body.app-shell-page main.container.page-content {
    padding-bottom: calc(var(--pango-mobile-footer-clearance) + env(safe-area-inset-bottom, 0px)) !important;
  }
}