/* Breakpoint rules shared by every screen.
   Mobile:  < 768px   (Parent/Teacher primary; Admin/Super Admin fallback)
   Tablet:  768-1023px
   Desktop: >= 1024px (Admin/Super Admin primary) */

/* Mobile-first defaults: bottom nav visible, sidebar hidden, single column */
.bottom-nav { display: flex; }
.sidebar:not(.is-mobile-open) { display: none; }
.topbar .mobile-menu-btn { display: inline-flex; }
.grid-responsive { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }

/* Screens that don't use a bottom nav (Admin/Super Admin) hide it explicitly
   via [data-bottom-nav="false"] on the body, set by navigation.js */
body[data-bottom-nav="false"] .bottom-nav { display: none; }
body[data-bottom-nav="false"] .app-main { padding-bottom: var(--space-6); }

@media (min-width: 768px) {
  .grid-responsive { grid-template-columns: repeat(2, 1fr); }

  body[data-app="parent"] .app-main,
  body[data-app="teacher"] .app-main {
    padding-bottom: calc(var(--bottom-nav-height) + var(--space-6));
  }
}

@media (min-width: 1024px) {
  .grid-responsive { grid-template-columns: repeat(3, 1fr); }

  /* Admin / Super Admin: sidebar layout replaces bottom nav entirely */
  body[data-bottom-nav="false"] .bottom-nav { display: none; }
  body[data-bottom-nav="false"] .topbar .mobile-menu-btn { display: none; }
  body[data-bottom-nav="false"] .sidebar { display: flex; }

  /* Parent/Teacher keep bottom nav even on desktop per spec (mobile-first,
     "also support 768px+") but gain breathing room */
  body[data-app="parent"] .app-main,
  body[data-app="teacher"] .app-main {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 1023px) {
  body[data-bottom-nav="false"] .sidebar:not(.is-mobile-open) { display: none; }
}