/* Toolbar sizing overrides: mobile bottom-nav shows 5 icons per view,
   with horizontal scroll for additional icons. Icons scale with item width. */

/* Apply mobile toolbar styles only on mobile screens (max-width: 767px) */
@media (max-width: 767px) {
  /* Compute icon size - dynamic based on viewport to fit 5 icons */
  nav.bottom-nav {
    --bottom-nav-icon-size: clamp(28px, calc((100vw - 100px) / 5), 40px);
    /* Prevent layout shift and flashing - disable all animations and force stability */
    will-change: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
    animation: none !important;
    /* Force position and visibility stability */
    position: fixed !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
  }
}

  /* Layout: scrollable with 5 icons visible at once */
  nav.bottom-nav {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 2px !important;
    min-height: calc(var(--bottom-nav-icon-size) + 32px) !important;
    padding: 8px 6px !important;
    scroll-snap-type: none !important;
    /* Prevent reflow on re-render */
    contain: layout style !important;
    /* Add spacing for scrollbar and extra space */
    padding-right: 10px !important;
    padding-left: 6px !important;
    white-space: nowrap !important;
    /* Disable all transitions and animations */
    transition: none !important;
    animation: none !important;
    /* Maintain scroll position on navigation */
    overflow-anchor: none !important;
    scroll-behavior: auto !important;
  }

  /* Firefox-specific: force explicit height to avoid collapsing */
  @-moz-document url-prefix() {
    nav.bottom-nav {
      height: calc(var(--bottom-nav-icon-size) + 32px) !important;
      min-height: calc(var(--bottom-nav-icon-size) + 32px) !important;
    }
  }

  /* Bottom nav items: icons only with fixed sizing for horizontal scroll */
  nav.bottom-nav > .nav-item {
    flex: 0 0 auto !important;
    min-width: 64px !important;
    max-width: 64px !important;
    width: 64px !important;
    height: calc(var(--bottom-nav-icon-size) + 16px) !important;
    padding: 8px !important;
    gap: 0 !important;
    font-size: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    scroll-snap-align: none !important;
    border-radius: 8px !important;
    /* Prevent overlap and flashing - disable all animations and force stability */
    overflow: visible !important;
    box-sizing: border-box !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
    /* Force item stability during re-renders */
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
    contain: layout paint !important;
  }

  /* Hide labels in mobile bottom nav - icons only */
  nav.bottom-nav .nav-item span:not(.nav-icon),
  nav.bottom-nav .nav-item .nav-label {
    display: none !important;
  }

  /* Normalize icon container and scale with available width */
  nav.bottom-nav .nav-icon {
    margin: 0 !important;
    width: var(--bottom-nav-icon-size) !important;
    height: var(--bottom-nav-icon-size) !important;
    font-size: var(--bottom-nav-icon-size) !important; /* emoji/symbol size */
    line-height: var(--bottom-nav-icon-size) !important;
    /* Prevent icon flashing */
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  /* Force image-based icons to match computed size */
  nav.bottom-nav .nav-icon img,
  nav.bottom-nav .nav-icon img.info-icon {
    width: var(--bottom-nav-icon-size) !important;
    height: var(--bottom-nav-icon-size) !important;
    object-fit: contain;
    /* Prevent image flashing and force stability */
    transition: none !important;
    animation: none !important;
    transform: none !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    /* Force image to stay visible and positioned */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    position: relative !important;
    contain: layout paint style !important;
  }

  /* Disabled placeholder items: keep slot stable, no taps */
  nav.bottom-nav > .nav-item.disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
    background: transparent !important;
  }

  /* Schedule icon is 20% smaller in mobile toolbar */
  nav.bottom-nav .nav-icon img.schedule-icon {
    width: calc(var(--bottom-nav-icon-size) * 0.8) !important;
    height: calc(var(--bottom-nav-icon-size) * 0.8) !important;
    object-fit: contain;
  }

  /* Attendance icon is 20% bigger in mobile toolbar */
  nav.bottom-nav .nav-icon img[alt="Attendance"] {
    width: calc(var(--bottom-nav-icon-size) * 1.2) !important;
    height: calc(var(--bottom-nav-icon-size) * 1.2) !important;
    object-fit: contain;
  }
}