/* ==========================================================================
   Toral Panel — Userside mobile bottom navigation bar
   Rendered by ToralPanel\Frontend\Userside\UI\BottomNav (called from Shell).
   Phones only (<= 640px); above that the bar is display:none. Consumes only
   tokens from toral-userside-tokens.css, so all six themes and both
   directions work with no extra rules. No script, and the only motion is one
   short transform/opacity animation on the raised item.

   Geometry of the raised (current-page) item, all in px from the TOP edge of
   the bar (y grows downward):
     icon disc   46 across, 14 (30%) above the bar  -> centre at y = +9
     ring        56 across (5 ring width), same centre, painted in the page
                 colour so it reads as a scoop cut out of the bar
     fillets     8 radius, centres at x = +-36 from the item centre, tangent
                 to the ring and to the top edge: they round the two corners
                 where the bar meets the scoop (the ::after strip)
   ========================================================================== */

.tp-us-bnav { display: none; }

@media (max-width: 640px) {

  :root {
    --tp-us-bnav-h: 62px;
    /* Free space kept between the content and the top of the bar. Holds the
       raised disc (14px) and its ring (5px) without touching the content. */
    --tp-us-bnav-gap: 18px;
  }

  /* Room for the bar: the app grid gets shorter, so the content column (and
     its footer) end above the bar instead of being hidden underneath it. */
  .tp-us-app.tp-us-app--bnav {
    height: calc(100% - var(--tp-us-bnav-h) - var(--tp-us-bnav-gap));
  }
  /* Sunset has no body padding, so the bar's own offset is added. */
  [data-tp-us-theme="sunset"] .tp-us-app.tp-us-app--bnav {
    height: calc(100% - var(--tp-us-bnav-h) - var(--tp-us-bnav-gap) - 8px - env(safe-area-inset-bottom, 0px));
  }

  /* ---- The bar ---- */
  .tp-us-bnav {
    position: fixed;
    z-index: 40; /* under the drawer backdrop (45), drawer (50) and every modal */
    inset-inline: 8px;
    inset-block-end: calc(8px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: stretch;
    height: var(--tp-us-bnav-h);
    /* Top corners much rounder than the bottom ones. */
    border-radius: 14px 14px 14px 14px;
    /* A clearer tint of the theme colour than the first version, which was
       so pale the bar was easy to overlook (owner request, option A). Still
       built only from the theme's own tokens, so every theme keeps its look. */
    background: var(--tp-us-surface-3);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--tp-us-surface) 82%, var(--tp-us-accent) 18%) 0%,
      color-mix(in srgb, var(--tp-us-surface-3) 62%, var(--tp-us-accent) 38%) 100%
    );
    border-top: 1px solid color-mix(in srgb, transparent 55%, var(--tp-us-accent) 45%);
    box-shadow: 0 -3px 14px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .06);
  }

  /* ---- One entry ---- */
  .tp-us-bnav__item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 2px 0;
    /* Full text colour: the softer grey faded into the stronger tint. */
    color: var(--tp-us-text);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 14px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .tp-us-bnav__item:hover,
  .tp-us-bnav__item:focus { color: var(--tp-us-text); text-decoration: none; }
  .tp-us-bnav__item:focus-visible {
    outline: 2px solid var(--tp-us-accent);
    outline-offset: -3px;
    border-radius: 16px;
  }

  .tp-us-bnav__icon {
    position: relative;
    z-index: 2; /* above the scoop (::before / ::after, z-index 1) */
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
  }

  .tp-us-bnav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tp-us-bnav__badge {
    position: absolute;
    inset-block-start: -5px;
    inset-inline-end: -9px;
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    border-radius: var(--tp-us-radius-pill);
    background: var(--tp-us-red);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }

  /* ---- The raised (current page) entry ---- */
  .tp-us-bnav__item.is-active,
  .tp-us-bnav__item.is-active:hover,
  .tp-us-bnav__item.is-active:focus {
    color: var(--tp-us-text);
    font-weight: 700;
  }

  /* Ring: a disc in the page colour, so the bar looks scooped out. */
  .tp-us-bnav__item.is-active::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset-block-start: -19px;
    left: calc(50% - 28px);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--tp-us-app-bg);
  }

  /* Rounded shoulders where the bar's top edge meets the ring. The two end
     pieces are 8px squares with a quarter-circle left transparent; the middle
     is solid. Same page colour as the ring, so it joins it seamlessly. */
  .tp-us-bnav__item.is-active::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset-block-start: -1px;
    left: calc(50% - 36px);
    width: 72px;
    height: 9px;
    background:
      radial-gradient(circle at 0 100%, transparent 7.5px, var(--tp-us-app-bg) 8px) 0 100% / 8px 8px no-repeat,
      radial-gradient(circle at 100% 100%, transparent 7.5px, var(--tp-us-app-bg) 8px) 100% 100% / 8px 8px no-repeat,
      linear-gradient(var(--tp-us-app-bg), var(--tp-us-app-bg)) 7.5px 0 / calc(100% - 15px) 100% no-repeat;
  }

  /* The disc itself: the 24px icon box moves up 13px, the disc is drawn
     around it, so the disc centre lands on y = +9. */
  .tp-us-bnav__item.is-active .tp-us-bnav__icon {
    color: var(--tp-us-on-accent);
    transform: translateY(-13px);
    animation: tp-us-bnav-rise 300ms cubic-bezier(.2, .8, .3, 1) both;
  }
  .tp-us-bnav__item.is-active .tp-us-bnav__icon::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: var(--tp-us-accent);
    background: linear-gradient(
      160deg,
      color-mix(in srgb, var(--tp-us-accent) 80%, #fff 20%),
      var(--tp-us-accent)
    );
    box-shadow: 0 5px 12px rgba(0, 0, 0, .22);
  }
  .tp-us-bnav__item.is-active .tp-us-bnav__badge {
    inset-block-start: -12px;
    inset-inline-end: -12px;
  }

  @keyframes tp-us-bnav-rise {
    from { transform: translateY(0) scale(.7); opacity: 0; }
    to   { transform: translateY(-13px); opacity: 1; }
  }

  /* ---- Floating things move up so the bar never covers them ---- */
  .tp-us-bnav ~ .tp-us-toasts {
    inset-block-end: calc(var(--tp-us-bnav-h) + var(--tp-us-bnav-gap) + 16px + env(safe-area-inset-bottom, 0px));
  }
  .tp-us-bnav ~ .tp-us-rewardsfab {
    inset-block-end: calc(var(--tp-us-bnav-h) + var(--tp-us-bnav-gap) + 16px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .tp-us-bnav__item.is-active .tp-us-bnav__icon { animation: none; }
}