/* Toolbar sizing overrides: the mobile bottom-nav shows up to 5 equal slots
   (top-4 destinations + More, or every item when they all fit). No horizontal
   scroll; each slot is icon over a small label. */

@media (max-width: 767px) {
  nav.bottom-nav {
    --bottom-nav-icon-size: 24px;
    /* 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;
    position: fixed !important; /* bottom-anchored: Chrome glues this to the visible bottom */
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    /* Equal slots, single row, nothing off-screen */
    justify-content: stretch !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    gap: 0 !important;
    min-height: 60px !important;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    /* Prevent reflow on re-render */
    contain: layout style !important;
  }

  /* Bottom nav items: equal flex slots, icon + label stacked */
  nav.bottom-nav > .nav-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 4px 2px !important;
    gap: 2px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !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;
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
    contain: layout paint !important;
  }

  /* The More trigger is a button but must look like its NavLink siblings */
  nav.bottom-nav > .nav-more-trigger {
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    cursor: pointer !important;
    position: relative !important;
  }

  /* Count pill clipped onto the More icon's top-right corner when a sheet
     destination has a live badge (app-icon badge look) */
  nav.bottom-nav .nav-more-trigger .nav-icon,
  nav.bottom-nav .nav-item .nav-icon {
    position: relative !important;
    overflow: visible !important;
  }

  nav.bottom-nav .nav-more-count,
  nav.bottom-nav .nav-entry-count {
    position: absolute;
    top: -5px;
    right: -9px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--nav-bg); /* ring separates the pill from the icon/bar */
    box-sizing: content-box;
  }

  /* Small single-line labels under the icons */
  nav.bottom-nav .nav-item .nav-label {
    display: block !important;
    font-size: clamp(9px, 2.8vw, 11px) !important;
    line-height: 1.15 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Normalize icon container */
  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;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    position: relative !important;
    contain: layout paint style !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;
  }
}