/* =========================================================
   NELLA BOTTOM NAV V2
   File: css/bottom-nav-v2.css

   PURPOSE
   ---------------------------------------------------------
   - Keep 5 navigation items balanced
   - Tanya NELLA stays on ONE line
   - Center button remains visually prominent
   - Clean desktop + mobile layout
   - Does not disturb other NELLA dashboard CSS
========================================================= */


/* =========================================================
   BOTTOM NAV
========================================================= */

.bottom-nav {
  position: fixed !important;

  left: 50% !important;
  bottom: 18px !important;

  transform:
    translateX(-50%) !important;

  width:
    min(
      calc(100% - 32px),
      760px
    ) !important;

  min-height:
    86px !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    ) !important;

  align-items:
    center !important;

  gap:
    4px !important;

  padding:
    10px 12px !important;

  box-sizing:
    border-box !important;

  border:
    1px solid
    rgba(92, 76, 65, .08) !important;

  border-radius:
    34px !important;

  background:
    rgba(
      255,
      250,
      246,
      .97
    ) !important;

  box-shadow:
    0 16px 40px
    rgba(77, 62, 51, .12) !important;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  z-index:
    1000 !important;
}


/* =========================================================
   ALL NAV ITEMS
========================================================= */

.bottom-nav
.nav-item {
  position:
    relative !important;

  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    64px !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    5px !important;

  margin:
    0 !important;

  padding:
    7px 3px !important;

  box-sizing:
    border-box !important;

  border:
    0 !important;

  border-radius:
    23px !important;

  color:
    #806f64 !important;

  text-align:
    center !important;

  text-decoration:
    none !important;

  transition:
    transform .18s ease,
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease !important;
}


/* =========================================================
   NAV ICONS
========================================================= */

.bottom-nav
.nav-icon {
  width:
    auto !important;

  min-width:
    0 !important;

  height:
    23px !important;

  min-height:
    23px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  margin:
    0 !important;

  padding:
    0 !important;

  font-size:
    21px !important;

  line-height:
    1 !important;

  color:
    inherit !important;
}


/* =========================================================
   NORMAL LABELS
========================================================= */

.bottom-nav
.nav-item
small {
  display:
    block !important;

  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    inherit !important;

  font-family:
    inherit !important;

  font-size:
    11px !important;

  font-weight:
    500 !important;

  line-height:
    1.1 !important;

  letter-spacing:
    0 !important;

  text-align:
    center !important;

  white-space:
    nowrap !important;

  word-break:
    keep-all !important;

  overflow:
    hidden !important;

  text-overflow:
    ellipsis !important;
}


/* =========================================================
   ACTIVE NORMAL ITEM
========================================================= */

.bottom-nav
.nav-item.active:not(.ai-nav) {
  background:
    #6f9579 !important;

  color:
    #ffffff !important;

  box-shadow:
    0 9px 22px
    rgba(79, 119, 91, .16) !important;
}


/* =========================================================
   TANYA NELLA CENTER ITEM
========================================================= */

.bottom-nav
.ai-nav {
  position:
    relative !important;

  width:
    calc(100% + 10px) !important;

  min-width:
    0 !important;

  min-height:
    75px !important;

  justify-self:
    center !important;

  align-self:
    center !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    5px !important;

  margin:
    0 !important;

  padding:
    9px 2px !important;

  border-radius:
    48% / 44% !important;

  background:
    #d88d9a !important;

  color:
    #ffffff !important;

  transform:
    translateY(-8px) !important;

  box-shadow:
    0 14px 30px
    rgba(200, 121, 137, .23) !important;

  overflow:
    visible !important;

  z-index:
    3 !important;
}


/* =========================================================
   TANYA NELLA ICON
========================================================= */

.bottom-nav
.ai-nav
.ai-nav-icon,
.bottom-nav
.ai-nav
.nav-icon {
  width:
    auto !important;

  height:
    24px !important;

  min-height:
    24px !important;

  flex:
    0 0 24px !important;

  margin:
    0 !important;

  font-size:
    23px !important;

  line-height:
    1 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   TANYA NELLA LABEL
   CRITICAL: NEVER BREAK INTO 2 LINES
========================================================= */

.bottom-nav
.ai-nav
.ai-nav-label {
  display:
    block !important;

  width:
    auto !important;

  max-width:
    none !important;

  min-width:
    max-content !important;

  height:
    auto !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    #ffffff !important;

  font-family:
    inherit !important;

  font-size:
    10.5px !important;

  font-weight:
    650 !important;

  line-height:
    1 !important;

  letter-spacing:
    0 !important;

  text-align:
    center !important;

  white-space:
    nowrap !important;

  word-break:
    keep-all !important;

  overflow-wrap:
    normal !important;

  overflow:
    visible !important;

  text-overflow:
    clip !important;
}


/* =========================================================
   ACTIVE TANYA NELLA
   Used when user is inside ai.html
========================================================= */

.bottom-nav
.ai-nav.active {
  background:
    #6f9579 !important;

  color:
    #ffffff !important;

  box-shadow:
    0 15px 31px
    rgba(79, 119, 91, .24) !important;
}


/* =========================================================
   TAP / CLICK FEEDBACK
========================================================= */

.bottom-nav
.nav-item:active {
  transform:
    scale(.96) !important;
}


.bottom-nav
.ai-nav:active {
  transform:
    translateY(-8px)
    scale(.96) !important;
}


/* =========================================================
   DESKTOP HOVER
========================================================= */

@media
(hover: hover) {

  .bottom-nav
  .nav-item:hover:not(.ai-nav) {
    background:
      rgba(111, 149, 121, .08) !important;

    color:
      #587161 !important;
  }


  .bottom-nav
  .nav-item.active:hover:not(.ai-nav) {
    background:
      #6f9579 !important;

    color:
      #ffffff !important;
  }


  .bottom-nav
  .ai-nav:hover {
    box-shadow:
      0 17px 34px
      rgba(200, 121, 137, .28) !important;
  }


  .bottom-nav
  .ai-nav.active:hover {
    box-shadow:
      0 17px 34px
      rgba(79, 119, 91, .28) !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media
(max-width: 600px) {

  .bottom-nav {
    left:
      50% !important;

    bottom:
      14px !important;

    width:
      calc(100% - 24px) !important;

    min-height:
      82px !important;

    grid-template-columns:
      repeat(
        5,
        minmax(0, 1fr)
      ) !important;

    gap:
      1px !important;

    padding:
      9px 7px !important;

    border-radius:
      30px !important;
  }


  .bottom-nav
  .nav-item {
    min-height:
      61px !important;

    gap:
      5px !important;

    padding:
      6px 1px !important;

    border-radius:
      21px !important;
  }


  .bottom-nav
  .nav-icon {
    height:
      22px !important;

    min-height:
      22px !important;

    font-size:
      20px !important;
  }


  .bottom-nav
  .nav-item
  small {
    font-size:
      10px !important;

    line-height:
      1 !important;
  }


  /* =============================================
     CENTER BUTTON MOBILE
  ============================================= */

  .bottom-nav
  .ai-nav {
    width:
      calc(100% + 16px) !important;

    min-height:
      74px !important;

    gap:
      4px !important;

    margin:
      0 -8px !important;

    padding:
      8px 0 !important;

    transform:
      translateY(-8px) !important;

    border-radius:
      48% / 44% !important;
  }


  .bottom-nav
  .ai-nav
  .ai-nav-icon,
  .bottom-nav
  .ai-nav
  .nav-icon {
    height:
      24px !important;

    min-height:
      24px !important;

    flex:
      0 0 24px !important;

    font-size:
      23px !important;
  }


  .bottom-nav
  .ai-nav
  .ai-nav-label {
    width:
      auto !important;

    max-width:
      none !important;

    min-width:
      max-content !important;

    font-size:
      10px !important;

    line-height:
      1 !important;

    white-space:
      nowrap !important;

    overflow:
      visible !important;

    text-overflow:
      clip !important;
  }


  .bottom-nav
  .ai-nav:active {
    transform:
      translateY(-8px)
      scale(.96) !important;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media
(max-width: 390px) {

  .bottom-nav {
    width:
      calc(100% - 18px) !important;

    padding:
      8px 5px !important;
  }


  .bottom-nav
  .nav-item {
    padding-left:
      1px !important;

    padding-right:
      1px !important;
  }


  .bottom-nav
  .nav-item
  small {
    font-size:
      9.4px !important;
  }


  .bottom-nav
  .ai-nav {
    width:
      calc(100% + 18px) !important;

    margin:
      0 -9px !important;
  }


  .bottom-nav
  .ai-nav
  .ai-nav-label {
    font-size:
      9.6px !important;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media
(max-width: 340px) {

  .bottom-nav {
    width:
      calc(100% - 12px) !important;

    padding-left:
      3px !important;

    padding-right:
      3px !important;
  }


  .bottom-nav
  .nav-item
  small {
    font-size:
      8.7px !important;
  }


  .bottom-nav
  .ai-nav {
    width:
      calc(100% + 15px) !important;

    margin:
      0 -7px !important;
  }


  .bottom-nav
  .ai-nav
  .ai-nav-label {
    font-size:
      8.9px !important;
  }

}


/* =========================================================
   SAFE AREA FOR IPHONE
========================================================= */

@supports
(
  padding-bottom:
  env(safe-area-inset-bottom)
) {

  .bottom-nav {
    bottom:
      max(
        14px,
        env(safe-area-inset-bottom)
      ) !important;
  }

}


/* =========================================================
   END NELLA BOTTOM NAV V2
========================================================= */