/*
 * Mobile + PWA layer for the admin/user panel.
 * Everything here is scoped to <= 991.98px, so the desktop layout is untouched.
 *
 * The bottom toolbar is `position: fixed`, which takes it out of flow — nothing
 * below it reserves space on its own. Every rule tagged "overlap guard" exists to
 * put that space back, so no content ever sits underneath the bar.
 */

:root {
  /* Bar height + the iOS home-indicator inset. env() resolves to 0px where unsupported. */
  --mnav-height: 58px;
  --mnav-safe: env(safe-area-inset-bottom, 0px);
  --mnav-total: calc(var(--mnav-height) + var(--mnav-safe));
}

/* Desktop: the bar does not exist. d-lg-none also hides it, this is belt and braces. */
.mobile-bottom-nav { display: none; }

@media (max-width: 991.98px) {

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    inset-inline: 0;                 /* honours both LTR and RTL */
    bottom: 0;
    z-index: 1030;                   /* above content, below modals (1050) */
    height: var(--mnav-total);
    padding-bottom: var(--mnav-safe);
    background: #fff;
    border-top: 1px solid #e9ecef;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .07);
    justify-content: space-around;
    align-items: stretch;
  }

  .mobile-bottom-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;                    /* lets long labels shrink instead of overflowing */
    padding: 6px 2px;
    border: 0;
    background: none;
    color: #8898aa;
    font-size: 10.5px;
    line-height: 1.1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease;
  }

  .mobile-bottom-nav__item i { font-size: 18px; }

  .mobile-bottom-nav__item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-bottom-nav__item:hover,
  .mobile-bottom-nav__item:focus { color: var(--ms-green-deep, #06996f); text-decoration: none; }

  .mobile-bottom-nav__item.is-active { color: var(--ms-green-deep, #06996f); font-weight: 600; }

  /* Active marker sits on the top edge; inset-inline keeps it centred in RTL too. */
  .mobile-bottom-nav__item.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    width: 26px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--ms-green, #10d67a);
  }
  .mobile-bottom-nav__item { position: relative; }

  /* ---- overlap guards ------------------------------------------------ */

  /* 1. The page itself. Argon's .main-content holds all panel content; the public
   *    site has no such wrapper, so it opts in with a body class instead. Only one
   *    of the two ever applies, so the space is never reserved twice. */
  .main-content { padding-bottom: var(--mnav-total); }
  body.ms-has-bottomnav { padding-bottom: var(--mnav-total); }

  /* The site's own back-to-top button is pinned bottom-right and would land on
     the bar. */
  body.ms-has-bottomnav .scroll-top { bottom: calc(var(--mnav-total) + 14px) !important; }

  /* Sign-in / dashboard slot is the primary action, so it carries the brand colour. */
  .mobile-bottom-nav__cta { color: var(--ms-green-deep, #06996f); font-weight: 600; }

  /* 2. Anything the app pins to the bottom of the viewport — the chat composer,
   *    sticky action bars, floating buttons — would otherwise sit under the bar. */
  .fixed-bottom,
  .chat-compose,
  .chat-footer,
  .conversation-composer,
  .sticky-actions,
  .floating-action {
    bottom: var(--mnav-total) !important;
  }

  /* 3. Scroll panes sized to the viewport (chat threads) must stop above the bar. */
  .chat-scroll,
  .conversation-scroll,
  .messages-scroll { padding-bottom: var(--mnav-total); }

  /* 4. Toasts, so a "message sent" notice is never hidden behind the bar. */
  .toastify.toastify-bottom { bottom: calc(var(--mnav-total) + 12px) !important; }

  /* 5. The sidebar overlay must cover the bar while it is open. */
  body.g-sidenav-pinned .mobile-bottom-nav { z-index: 1010; }

  /* ---- general mobile polish ----------------------------------------- */

  /* Wide tables scroll inside their own box rather than the page going sideways. */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  body { overflow-x: hidden; }

  /* Argon pulls content up under the header with mt--6; too aggressive on phones. */
  .container-fluid.mt--6 { margin-top: -3rem !important; }

  .card { border-radius: .5rem; }
  .card-body { padding: 1rem; }

  /* Comfortable tap targets (Apple/Google both recommend ~44px). */
  .btn { min-height: 38px; }
  .navbar-nav .nav-link { padding-top: .6rem; padding-bottom: .6rem; }

  /* Stop iOS Safari zooming the page when a field is focused: it zooms below 16px. */
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
  select, textarea { font-size: 16px; }
}

/* Standalone (installed) PWA: no browser chrome, so pad the top for the status bar. */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: contain; }   /* no rubber-band "pull to refresh" */
  .navbar-top { padding-top: env(safe-area-inset-top, 0px); }
}