/**
 * ============================================================================
 * DollarHuge - Modern Mobile Bottom Menubar (Navigation Dock)
 * ============================================================================
 * Pixel-perfect, theme-adaptive, high-aesthetic bottom navigation bar for mobile.
 * Strict uniform alignment for all 5 tabs:
 * Format: Home, Referrals, Payments, Tasks, Account.
 */

:root {
  --dh-bnav-bar-height: 64px;
  --dh-bnav-bg-light: #ffffff;
  --dh-bnav-border-light: rgba(0, 0, 0, 0.08);
  --dh-bnav-shadow-light: 0 -4px 20px rgba(0, 0, 0, 0.07), 0 -1px 0 rgba(0, 0, 0, 0.05);
  --dh-bnav-text-light: #64748b;
  --dh-bnav-active-color-light: #00b894;
  --dh-bnav-active-pill-light: rgba(0, 184, 148, 0.12);

  --dh-bnav-bg-dark: #0d1424;
  --dh-bnav-border-dark: rgba(255, 255, 255, 0.09);
  --dh-bnav-shadow-dark: 0 -8px 30px rgba(0, 0, 0, 0.6), 0 -1px 0 rgba(255, 255, 255, 0.08);
  --dh-bnav-text-dark: #94a3b8;
  --dh-bnav-active-color-dark: #00e6a8;
  --dh-bnav-active-pill-dark: rgba(0, 230, 168, 0.16);

  --dh-bnav-emerald-grad: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
  --dh-bnav-emerald-glow: 0 4px 14px rgba(0, 184, 148, 0.4);
}

/* --------------------------------------------------------------------------
   Desktop: Completely Hidden (> 768px)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  #dh-mobile-bottom-nav,
  .dh-mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile Viewport Styles (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Prevent container padding stacking; footer handles its own bottom dock clearance */
  body.has-mobile-bottom-nav,
  body.has-mobile-bottom-nav #app,
  body.has-mobile-bottom-nav .m-content,
  body.has-mobile-bottom-nav .main-wrap,
  body:has(#dh-mobile-bottom-nav),
  body:has(#dh-mobile-bottom-nav) #app,
  body:has(#dh-mobile-bottom-nav) .m-content,
  body:has(#dh-mobile-bottom-nav) .main-wrap {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Fallback clearance strictly for pages without a footer */
  body.has-mobile-bottom-nav:not(:has(.dh-footer)),
  body:has(#dh-mobile-bottom-nav):not(:has(.dh-footer)) {
    padding-bottom: calc(var(--dh-bnav-bar-height) + env(safe-area-inset-bottom, 0px) + 16px) !important;
  }

  /* Lift PWA Install Banner cleanly above the bottom navigation bar ONLY when dock is present */
  body.has-mobile-bottom-nav #dollarhuge-pwa-banner,
  body.has-mobile-bottom-nav .dh-pwa-banner,
  body:has(#dh-mobile-bottom-nav) #dollarhuge-pwa-banner,
  body:has(#dh-mobile-bottom-nav) .dh-pwa-banner {
    bottom: calc(var(--dh-bnav-bar-height) + env(safe-area-inset-bottom, 0px) + 12px) !important;
    z-index: 99990 !important;
  }

  /* When bottom nav is not present (e.g. index/landing pages), keep PWA banner near screen bottom with small space */
  #dollarhuge-pwa-banner,
  .dh-pwa-banner {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    z-index: 99990 !important;
  }

  /* Lift Chatbot Launcher cleanly above bottom navigation bar */
  #dh-chatbot-launcher {
    bottom: calc(var(--dh-bnav-bar-height) + env(safe-area-inset-bottom, 0px) + 14px) !important;
    right: 16px !important;
  }
  #dh-chatbot-window {
    bottom: calc(var(--dh-bnav-bar-height) + env(safe-area-inset-bottom, 0px) + 80px) !important;
  }

  /* Lift Promo Footer Strip */
  .promo-footer-strip {
    bottom: calc(var(--dh-bnav-bar-height) + env(safe-area-inset-bottom, 0px) + 10px) !important;
  }

  /* Main Bottom Dock Container - Solid opaque background prevents footer text bleed */
  .dh-mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(var(--dh-bnav-bar-height) + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    z-index: 99980 !important;
    background: var(--dh-bnav-bg-light) !important;
    border-top: 1px solid var(--dh-bnav-border-light) !important;
    box-shadow: var(--dh-bnav-shadow-light) !important;
    padding: 0 0 env(safe-area-inset-bottom, 0px) 0 !important;
    margin: 0 !important;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    overflow: hidden !important;
  }

  /* Dark Theme Dock */
  .theme--dark .dh-mobile-bottom-nav,
  html.theme--dark .dh-mobile-bottom-nav,
  #app.theme--dark .dh-mobile-bottom-nav {
    background: var(--dh-bnav-bg-dark) !important;
    border-top-color: var(--dh-bnav-border-dark) !important;
    box-shadow: var(--dh-bnav-shadow-dark) !important;
  }

  /* Horizontal Flex Container */
  .dh-bnav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    height: var(--dh-bnav-bar-height) !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  /* Each Navigation Tab Item - Identical height, alignment, and flex behavior */
  .dh-bnav-item {
    flex: 1 1 0 !important;
    height: var(--dh-bnav-bar-height) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 2px 7px 2px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    gap: 3px !important;
    text-decoration: none !important;
    color: var(--dh-bnav-text-light) !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    position: relative !important;
    transition: color 0.2s ease, transform 0.12s cubic-bezier(0.2, 0, 0, 1) !important;
  }

  .theme--dark .dh-bnav-item,
  html.theme--dark .dh-bnav-item,
  #app.theme--dark .dh-bnav-item {
    color: var(--dh-bnav-text-dark) !important;
  }

  /* Active Top Accent Line - Smooth animated indicator */
  .dh-bnav-item::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) scaleX(0) !important;
    width: 28px !important;
    height: 3px !important;
    border-radius: 0 0 4px 4px !important;
    background: var(--dh-bnav-active-color-light) !important;
    box-shadow: 0 2px 8px var(--dh-bnav-active-color-light) !important;
    opacity: 0 !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease !important;
    pointer-events: none !important;
  }

  .theme--dark .dh-bnav-item::before,
  html.theme--dark .dh-bnav-item::before,
  #app.theme--dark .dh-bnav-item::before {
    background: var(--dh-bnav-active-color-dark) !important;
    box-shadow: 0 2px 10px var(--dh-bnav-active-color-dark) !important;
  }

  .dh-bnav-item.active::before {
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(1) !important;
  }

  /* Universal Icon Container - IDENTICAL dimensions (46px x 28px) for ALL 5 tabs */
  .dh-bnav-icon-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    border-radius: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    transition: background 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease, box-shadow 0.2s ease !important;
  }

  /* Strictly centered Material Icons inside the icon box */
  .dh-bnav-icon-box i.material-icons {
    font-size: 22px !important;
    line-height: 22px !important;
    height: 22px !important;
    width: 22px !important;
    color: inherit !important;
    text-align: center !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Active Pill Capsule for standard tabs */
  .dh-bnav-item.active:not(.dh-bnav-center) .dh-bnav-icon-box {
    background: var(--dh-bnav-active-pill-light) !important;
    color: var(--dh-bnav-active-color-light) !important;
    animation: dhNavSpringBounce 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  }

  .theme--dark .dh-bnav-item.active:not(.dh-bnav-center) .dh-bnav-icon-box,
  html.theme--dark .dh-bnav-item.active:not(.dh-bnav-center) .dh-bnav-icon-box,
  #app.theme--dark .dh-bnav-item.active:not(.dh-bnav-center) .dh-bnav-icon-box {
    background: var(--dh-bnav-active-pill-dark) !important;
    color: var(--dh-bnav-active-color-dark) !important;
  }

  /* Center Tab (Payments) - When INACTIVE, exactly uniform with other tabs (no borders, transparent) */
  .dh-bnav-item.dh-bnav-center .dh-bnav-icon-box {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
  }

  /* Center Tab (Payments) - When ACTIVE, jewel gradient capsule */
  .dh-bnav-item.dh-bnav-center.active .dh-bnav-icon-box {
    background: var(--dh-bnav-emerald-grad) !important;
    box-shadow: var(--dh-bnav-emerald-glow) !important;
    color: #ffffff !important;
    animation: dhNavSpringBounce 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  }

  .dh-bnav-item.dh-bnav-center.active .dh-bnav-icon-box i.material-icons {
    color: #ffffff !important;
  }

  /* Universal Tab Label - Fully visible, no bottom clipping */
  .dh-bnav-label {
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 14px !important;
    height: 14px !important;
    letter-spacing: -0.15px !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    display: block !important;
    transition: color 0.2s ease, font-weight 0.2s ease !important;
  }

  /* Active Tab Label */
  .dh-bnav-item.active {
    color: var(--dh-bnav-active-color-light) !important;
  }

  .theme--dark .dh-bnav-item.active,
  html.theme--dark .dh-bnav-item.active,
  #app.theme--dark .dh-bnav-item.active {
    color: var(--dh-bnav-active-color-dark) !important;
  }

  .dh-bnav-item.active .dh-bnav-label {
    font-weight: 700 !important;
  }

  /* Tap Press Interaction */
  .dh-bnav-item:active {
    transform: scale(0.93) !important;
  }
}

/* --------------------------------------------------------------------------
   Animations Keyframes
   -------------------------------------------------------------------------- */
@keyframes dhNavSpringBounce {
  0% {
    transform: scale(1) translateY(0);
  }
  30% {
    transform: scale(0.88) translateY(2px);
  }
  65% {
    transform: scale(1.12) translateY(-2px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  .dh-bnav-item.active .dh-bnav-icon-box,
  .dh-bnav-item::before {
    animation: none !important;
    transition: none !important;
  }
}