/* Mobile bottom tab bar.
 *
 * Styled via a dedicated class instead of inline styles so the
 * generic [style*="grid-template-columns: ..."] mobile overrides in
 * mobile.css can never rewrite its column count. Column count is
 * picked with a modifier class (--5 student / --4 teacher).
 *
 * The bar hides itself at the Tailwind md breakpoint (>=768px), so
 * templates do not need an extra md:hidden wrapper.
 */

.mobile-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
}

.mobile-tabbar--5 {
  grid-template-columns: repeat(5, 1fr);
}

.mobile-tabbar--4 {
  grid-template-columns: repeat(4, 1fr);
}

.mobile-tabbar__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  color: var(--text-muted);
}

.mobile-tabbar__tab.is-active {
  color: var(--primary-700);
  font-weight: 600;
}

@media (min-width: 768px) {
  .mobile-tabbar {
    display: none;
  }
}