/* ============================================================
   GODDY TABI — LAYOUT
   Handles app shell, sidebar, top bar, content areas
   Responsive: mobile → tablet → desktop
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   APP SHELL (logged in)
══════════════════════════════════════════════════════════ */
.app-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR — floating left nav, detached from the viewport edge
   Mobile:  hidden (uses bottom nav)
   Tablet:  icon + micro-label rail, 76px
   Desktop: full 240px
══════════════════════════════════════════════════════════ */
.sidebar {
  display: none;
  flex-direction: column;
  background: var(--navy-deep);
  width: var(--sidebar-w-sm);
  position: fixed;
  top: var(--s4); left: var(--s4); bottom: var(--s4);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl), 0 1px 0 rgba(255,255,255,0.04) inset;
  z-index: 500;
  transition: width 280ms cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}

@media (min-width: 768px) {
  .sidebar { display: flex; }
  /* offset left (--s4) + sidebar width + gap to content (--s4) */
  .app-shell .main-wrap { margin-left: calc(var(--sidebar-w-sm) + var(--s4) * 2); }
}

@media (min-width: 1100px) {
  .sidebar { width: var(--sidebar-w); }
  .app-shell .main-wrap { margin-left: calc(var(--sidebar-w) + var(--s4) * 2); }
}

/* ── Sidebar logo area ── */
.sidebar__top {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 18px 14px;
  min-height: 68px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar__logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--navy-mid);
}

.sidebar__app-name {
  font-size: 15px;
  font-weight: var(--bold);
  color: white;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms ease;
  line-height: 1.2;
}

.sidebar__app-name span {
  color: var(--gold);
}

@media (min-width: 1100px) {
  .sidebar__app-name { opacity: 1; }
}

/* ── Nav items ── */
.sidebar__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s3) 10px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.sidebar__nav::-webkit-scrollbar { display: none; }

.sidebar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--fast);
  white-space: nowrap;
  overflow: hidden;
  color: rgba(255,255,255,0.45);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  position: relative;
}

.sidebar__item:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.85);
}

.sidebar__item.active {
  background: rgba(212,160,23,0.14);
  color: white;
}

.sidebar__item svg {
  width: 20px; height: 20px;
  stroke: currentColor;
  flex-shrink: 0;
  stroke-width: 1.8;
}

.sidebar__item.active svg { stroke: var(--gold); }

.sidebar__item-label {
  font-size: var(--text-sm);
  font-weight: var(--semibold);
  opacity: 0;
  transition: opacity 200ms ease;
}

@media (min-width: 1100px) {
  .sidebar__item-label { opacity: 1; }
}

/* Active gold left bar */
.sidebar__item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--gold);
  border-radius: 0 3px 3px 0;
}

/* Tablet: icon + tiny label stacked, instead of icon-only + hover
   tooltip. A hover tooltip never showed at all on a touch tablet (no
   hover event, and it used to get clipped by this same nav's own
   overflow-x anyway) — a permanent micro-label is simpler and works
   on touch. */
@media (min-width: 768px) and (max-width: 1099px) {
  .sidebar { width: var(--sidebar-w-tablet); }
  .app-shell .main-wrap { margin-left: calc(var(--sidebar-w-tablet) + var(--s4) * 2); }

  .sidebar__item {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
  }
  .sidebar__item-label {
    opacity: 1;
    font-size: 9.5px;
    line-height: 1.1;
    text-align: center;
    white-space: normal;
  }
}

/* ── Sidebar divider ── */
.sidebar__divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 4px 10px;
}

/* ── Sidebar bottom (user) ── */
.sidebar__bottom {
  padding: 10px 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-lg);
  cursor: pointer;
  overflow: hidden;
  transition: background var(--fast);
}

.sidebar__user:hover { background: rgba(255,255,255,0.07); }

.sidebar__user-photo {
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: var(--navy-mid);
  border: 2px solid var(--gold);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: var(--text-xs);
  font-weight: var(--bold);
}

.sidebar__user-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--r-full);
}

.sidebar__user-info {
  flex: 1; min-width: 0;
  opacity: 0;
  transition: opacity 200ms ease;
}

@media (min-width: 1100px) {
  .sidebar__user-info { opacity: 1; }
}

.sidebar__user-name {
  font-size: 13px;
  font-weight: var(--semibold);
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__user-role {
  font-size: 10px;
  color: var(--gold);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   MAIN WRAP — content + top bar
══════════════════════════════════════════════════════════ */
.main-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Top bar (replaces heavy header) ── */
.topbar {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  /* flex-end (not center): --header-h already includes
     env(safe-area-inset-top) — anchoring content to the bottom of the
     box keeps it in exactly the same visual 60px band as before on
     every device with no inset, while automatically clearing the
     status bar/notch on ones that have it. */
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--s5);
  position: sticky;
  top: 0;
  z-index: 400;
  gap: var(--s4);
}

/* Mobile: show school name in topbar */
.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.topbar__logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--navy);
}

.topbar__name {
  font-size: var(--text-base);
  font-weight: var(--bold);
  color: var(--navy);
}

/* On tablet/desktop: hide brand (sidebar shows it) */
@media (min-width: 768px) {
  .topbar__brand { display: none; }
}

.topbar__page-title {
  font-size: var(--text-md);
  font-weight: var(--bold);
  color: var(--text-primary);
  display: none;
}

@media (min-width: 768px) {
  .topbar__page-title { display: block; }
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-left: auto;
}

/* On mobile: avatar in topbar opens settings */
.topbar__avatar {
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: var(--navy);
  border: 2px solid var(--gold);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: var(--text-xs);
  font-weight: var(--bold);
  transition: all var(--fast);
}
.topbar__avatar:active { transform: scale(0.92); }
.topbar__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--r-full);
}

/* Hide on tablet/desktop — sidebar has it */
@media (min-width: 768px) {
  .topbar__avatar { display: none; }
}

/* ── Page content ── */
.page-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s5) var(--s4);
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
  .page-content {
    padding: var(--s6);
    padding-bottom: var(--s8);
  }
}

.page-content__inner {
  max-width: 960px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════
   BOTTOM NAV — mobile only. A floating rounded dock rather than a
   flush edge-to-edge bar, with an elevated "3D" chip behind the
   active icon (gradient + inner/outer shadow) instead of the old
   flat tint + underline dot.
══════════════════════════════════════════════════════════ */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  justify-content: center;
  padding: 0 var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  pointer-events: none; /* the track below re-enables it; the empty
                            strip around it must not block content */
  z-index: 500;
}

/* Hide on tablet/desktop */
@media (min-width: 768px) { .bottom-nav { display: none; } }

.bottom-nav__track {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 26px;
  padding: 7px;
  box-shadow: var(--shadow-xl), 0 1px 0 rgba(255,255,255,0.7) inset;
  border: 1px solid rgba(15,30,66,0.05);
}

.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 5px 2px 6px;
  border-radius: 20px;
  transition: background var(--fast);
  position: relative;
}

.bottom-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  transition: all 240ms cubic-bezier(0.34,1.56,0.64,1);
}

.bottom-nav__icon svg {
  width: 19px; height: 19px;
  stroke: var(--text-muted);
  stroke-width: 1.9;
  transition: stroke var(--fast);
}

.bottom-nav__label {
  font-size: 9.5px;
  font-weight: var(--semibold);
  color: var(--text-muted);
  transition: color var(--fast);
  white-space: nowrap;
}

/* Active — raised gold-to-navy glossy chip behind the icon, giving
   it a "3D" pressed-button look instead of a flat tint. */
.bottom-nav__item.active .bottom-nav__icon {
  background: linear-gradient(155deg, var(--navy-mid) 0%, var(--navy-deep) 100%);
  box-shadow:
    0 6px 14px rgba(15,30,66,0.38),
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 -3px 5px rgba(0,0,0,0.2) inset;
  transform: translateY(-5px) scale(1.08);
}
.bottom-nav__item.active .bottom-nav__icon svg { stroke: var(--gold-light); }
.bottom-nav__item.active .bottom-nav__label { color: var(--navy); font-weight: var(--bold); }

.bottom-nav__item:active .bottom-nav__icon { transform: scale(0.9); }

/* ══════════════════════════════════════════════════════════
   CONTENT GRIDS
══════════════════════════════════════════════════════════ */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
@media (min-width: 900px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR GROUP HEADINGS
   The admin menu carries thirteen destinations. A flat list of
   thirteen is its own kind of unusable, so they are grouped by
   what the person is doing — the people in the school, the work
   of each day, talking, and running the place.

   In the collapsed (icon-only) sidebar the words would be noise,
   so the heading becomes a hairline that still separates.
   ══════════════════════════════════════════════════════════════ */
.sidebar__group {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  padding: 16px 14px 6px;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar__group:first-child { padding-top: 6px; }

.sidebar.collapsed .sidebar__group,
.sidebar--icons .sidebar__group {
  font-size: 0;
  padding: 10px 12px 9px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 4px;
}