/* =========================================================
   Mobile bottom navigation minimise / expand control
   - Adds a small down arrow at the top centre of the nav
   - Hides the nav when minimised
   - Shows one small up arrow at the bottom of the screen
   - Desktop/sidebar layout is untouched
   ========================================================= */

.mobile-nav-collapse-button,
.mobile-nav-expand-button {
  display: none;
}

@media (max-width: 820px) {
  .mobile-bottom-nav {
    transition:
      transform 0.24s ease,
      opacity 0.2s ease !important;
  }

  .mobile-nav-collapse-button,
  .mobile-nav-expand-button {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 50%;
    z-index: 1225;
    display: grid;
    place-items: center;
    color: #6f7890;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 26px rgba(22, 28, 45, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      transform 0.22s ease,
      opacity 0.18s ease,
      background 0.18s ease,
      color 0.18s ease;
  }

  .mobile-nav-collapse-button i,
  .mobile-nav-expand-button i {
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
  }

  .mobile-nav-collapse-button {
    width: 34px;
    height: 18px;
    bottom: calc(70px + max(12px, env(safe-area-inset-bottom)));
    transform: translateX(-50%);
    border-radius: 999px;
  }

  .mobile-nav-expand-button {
    width: 36px;
    height: 24px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    transform: translate(-50%, 12px);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
  }

  .mobile-nav-collapse-button:hover,
  .mobile-nav-expand-button:hover,
  .mobile-nav-collapse-button:focus-visible,
  .mobile-nav-expand-button:focus-visible {
    color: #5b35f5;
    background: rgba(255, 255, 255, 0.98);
    outline: none;
  }

  .mobile-nav-collapse-button:active,
  .mobile-nav-expand-button:active {
    transform: translateX(-50%) scale(0.94);
  }

  body[data-active-tab="family"].mobile-nav-minimised .mobile-bottom-nav {
    transform: translateY(calc(100% + 34px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body[data-active-tab="family"].mobile-nav-minimised .mobile-nav-collapse-button {
    transform: translate(-50%, 26px);
    opacity: 0;
    pointer-events: none;
  }

  body[data-active-tab="family"].mobile-nav-minimised .mobile-nav-expand-button {
    transform: translateX(-50%);
    opacity: 1;
    pointer-events: auto;
  }



  .mobile-nav-collapse-button[hidden],
  .mobile-nav-expand-button[hidden],
  body:not([data-active-tab="family"]) .mobile-nav-collapse-button,
  body:not([data-active-tab="family"]) .mobile-nav-expand-button {
    display: none !important;
  }

  body.mobile-chat-open .mobile-nav-collapse-button,
  body.mobile-chat-open .mobile-nav-expand-button,
  body.modal-open .mobile-nav-collapse-button,
  body.modal-open .mobile-nav-expand-button,
  body.add-family-modal-open .mobile-nav-collapse-button,
  body.add-family-modal-open .mobile-nav-expand-button,
  body.family-management-modal-open .mobile-nav-collapse-button,
  body.family-management-modal-open .mobile-nav-expand-button,
  body.calendar-modal-open .mobile-nav-collapse-button,
  body.calendar-modal-open .mobile-nav-expand-button,
  body.overview-profile-modal-open .mobile-nav-collapse-button,
  body.overview-profile-modal-open .mobile-nav-expand-button,
  body.overview-task-modal-open .mobile-nav-collapse-button,
  body.overview-task-modal-open .mobile-nav-expand-button,
  body.overview-shopping-modal-open .mobile-nav-collapse-button,
  body.overview-shopping-modal-open .mobile-nav-expand-button {
    display: none !important;
  }
}

@media (min-width: 821px) {
  body[data-active-tab="family"].mobile-nav-minimised .mobile-bottom-nav {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}