/* Mobile-specific enhancements for student experience */

/* Hidden by default; enabled via media query and JS for students */
#mobile-tabbar {
  display: none;
}

@media (max-width: 768px) {
  .mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 8px;
    z-index: 1000;
    padding: 0 calc(env(safe-area-inset-right) + 8px) env(safe-area-inset-bottom) calc(env(safe-area-inset-left) + 8px);
  }

  .mobile-tabbar button {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 8px;
  }

  .mobile-tabbar button.active {
    background: var(--bg-panel);
    color: var(--accent);
  }

  .mobile-tabbar svg {
    width: 20px;
    height: 20px;
  }

  /* Ensure content isn't hidden behind the tab bar */
  #content {
    padding-bottom: 84px; /* 64px bar + spacing */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
  }

  /* Make classes grid scroll when many cards are present */
  .assignments-grid {
    max-height: calc(var(--vh, 1vh) * 100 - 60px - 84px - 24px); /* viewport - navbar - tabbar - padding */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure modal content fits well on small screens */
  .modal .modal-content {
    width: 95vw;
    max-width: 95vw;
    max-height: calc(100vh - 4rem);
  }

  /* Hide sidebar on small screens for cleaner mobile layout; JS will control for students */
  .sidebar.mobile-hidden {
    display: none !important;
  }
}