/* =========================================================
   Mobile nav-aware layout fit
   - When the bottom nav is minimised, Plans and Family content
     can use the freed screen space.
   - Keeps a small reserved area for the reveal arrow so content
     does not cover it.
   - Mobile/tablet only; desktop is untouched.
   ========================================================= */

@media (max-width: 820px) {
  :root {
    --fc-nav-reveal-arrow-clearance: calc(46px + env(safe-area-inset-bottom));
  }

  .mobile-nav-collapse-button,
  .mobile-nav-expand-button {
    z-index: 3205 !important;
  }

  body.mobile-nav-minimised {
    --mobile-nav-height: var(--fc-nav-reveal-arrow-clearance) !important;
    --fc-mobile-nav-height: var(--fc-nav-reveal-arrow-clearance) !important;
    --schedule-mobile-nav-clearance: var(--fc-nav-reveal-arrow-clearance) !important;
  }

  /* Plans tab: let the calendar stretch lower once the nav is hidden,
     while keeping the month controls above the small reveal arrow. */
  body.mobile-nav-minimised[data-active-tab="schedule"] #scheduleTab .schedule-page-panel,
  body.mobile-nav-minimised:has(#scheduleTab.active) #scheduleTab .schedule-page-panel {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding-bottom: 0 !important;
  }

  body.mobile-nav-minimised[data-active-tab="schedule"] #scheduleTab .schedule-calendar-card,
  body.mobile-nav-minimised:has(#scheduleTab.active) #scheduleTab .schedule-calendar-card {
    height: 100% !important;
    min-height: 0 !important;
    padding-bottom: calc(
      var(--fc-nav-reveal-arrow-clearance) +
      var(--schedule-month-nav-height, 34px) +
      var(--schedule-month-nav-gap, 12px) +
      8px
    ) !important;
    margin-bottom: 0 !important;
  }

  body.mobile-nav-minimised[data-active-tab="schedule"] #scheduleTab .schedule-calendar-toolbar-below,
  body.mobile-nav-minimised[data-active-tab="schedule"] #scheduleTab .schedule-calendar-card-header.schedule-calendar-toolbar-below,
  body.mobile-nav-minimised:has(#scheduleTab.active) #scheduleTab .schedule-calendar-toolbar-below,
  body.mobile-nav-minimised:has(#scheduleTab.active) #scheduleTab .schedule-calendar-card-header.schedule-calendar-toolbar-below {
    bottom: calc(var(--fc-nav-reveal-arrow-clearance) + var(--schedule-month-nav-gap, 12px)) !important;
    z-index: 1190 !important;
  }

  body.mobile-nav-minimised[data-active-tab="schedule"] #scheduleTab .big-calendar-grid,
  body.mobile-nav-minimised:has(#scheduleTab.active) #scheduleTab .big-calendar-grid {
    min-height: 0 !important;
    height: 100% !important;
  }

  /* Family tab in the lower nav currently opens #messagesTab. Keep the
     family/message cards clear of the reveal arrow but remove the old
     bottom-nav sized gap. */
  body.mobile-nav-minimised[data-active-tab="messages"] #messagesTab,
  body.mobile-nav-minimised:has(#messagesTab.active) #messagesTab {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding-bottom: var(--fc-nav-reveal-arrow-clearance) !important;
  }

  body.mobile-nav-minimised[data-active-tab="messages"] #messagesTab .message-list-panel,
  body.mobile-nav-minimised:has(#messagesTab.active) #messagesTab .message-list-panel {
    min-height: calc(100dvh - var(--fc-nav-reveal-arrow-clearance)) !important;
    padding-bottom: calc(var(--fc-nav-reveal-arrow-clearance) + 10px) !important;
  }

  body.mobile-nav-minimised[data-active-tab="messages"] #messagesTab .conversation-list,
  body.mobile-nav-minimised:has(#messagesTab.active) #messagesTab .conversation-list {
    padding-bottom: calc(var(--fc-nav-reveal-arrow-clearance) + 8px) !important;
  }

  /* Safety for the old family/list container if it is reused on a mobile tab. */
  body.mobile-nav-minimised #friendsTab .family-members-card,
  body.mobile-nav-minimised #friendsTab .full-page-panel.family-list-panel {
    padding-bottom: calc(var(--fc-nav-reveal-arrow-clearance) + 12px) !important;
  }
}