/* ===================================================================
   GrooVVee — Layout
   App shell grid: sidebar + topbar + main content
   =================================================================== */

/* ── Shell Container ────────────────────────────────────────────── */
/* height, not min-height: a real "can't scroll a long page" bug traced back to this. With only a min-height, the
   grid's own block size is indefinite, so its "1fr" main row sizes to ITS CONTENT instead of "whatever's left of
   the viewport" (that's how CSS Grid resolves fr tracks in an indefinite-height container) — .main-content then
   grows to match, ends up with nothing of its own left to scroll, and its overscroll-behavior-y:contain (see
   css/layout.css's .main-content) then swallows a mouse-wheel/trackpad scroll over it instead of handing it to
   the page, on any page long enough to hit this (it surfaced on Admin Settings once it grew several sections
   long). A definite height makes the main row a real "rest of the viewport" — exactly what .main-content's own
   overflow-y:auto already assumed it was scrolling within. */
.shell {
  display: grid;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  height: 100vh; /* dvh fallback — see reset.css's body rule for why both are needed */
  height: 100dvh;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.sidebar {
  grid-area: sidebar;
  height: 100vh; /* dvh fallback — see reset.css's body rule for why both are needed */
  height: 100dvh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px);
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--z-sidebar);
  transition: transform var(--duration-slow) var(--ease-out);
}

.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-5);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sidebar__logo .logo-icon,
.logo-icon-img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.sidebar__close {
  display: none; /* Hidden on desktop */
}

/* Sidebar nav */
.sidebar__nav {
  flex: 1;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow-y: auto;
}

.nav-section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-3) var(--space-3) var(--space-1);
  margin-top: var(--space-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.625rem var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  position: relative;
  text-decoration: none;
}

.nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.nav-item span:not(.nav-item__badge) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item:hover {
  background: var(--glass-bg-hover);
  color: var(--text-primary);
}

.nav-item:hover svg { opacity: 1; }

.nav-item.active {
  background: rgba(28, 28, 30, 0.12);
  color: var(--primary-600);
  border: 1px solid rgba(28, 28, 30, 0.25);
}

.nav-item.active svg {
  opacity: 1;
  color: var(--primary-400);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  background: var(--gradient-mixed);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.nav-item__badge {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.nav-item--disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Sidebar footer */
.sidebar__footer {
  padding: var(--space-4) var(--space-3);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

/* The account-menu trigger now lives here (bottom-left) instead of the
   topbar — same hover affordance as any other clickable sidebar row. */
.sidebar-user:hover {
  background: var(--glass-bg-hover);
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg-scrim);
  z-index: calc(var(--z-sidebar) - 1);
  opacity: 0;
  transition: opacity var(--duration-base) ease;
  backdrop-filter: blur(4px);
}

.sidebar-overlay.active { display: block; opacity: 1; }

/* ── Topbar ─────────────────────────────────────────────────────── */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--topbar-height);
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.topbar__brand {
  display: none; /* Hidden on desktop — logo is in sidebar */
  align-items: center;
  gap: var(--space-2);
}

.topbar__brand .logo-icon-img {
  width: 24px;
  height: 24px;
}

.topbar__center {
  flex: 1;
  display: flex;
  justify-content: center;
  max-width: 480px;
  margin: 0 auto;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Hidden by default (desktop keeps the sidebar) — shown only under the mobile breakpoint below */
.bottom-nav { display: none; }

/* ── Main Content ───────────────────────────────────────────────── */
/* max-height alongside min-height (not just min-height) is the actual fix for a real "can't scroll a long page"
   bug: .shell only sets min-height:100vh, so with no ceiling here a tall page (e.g. Admin Settings once it grew
   several sections long) made .main-content grow to fit ALL its content instead of clipping to the viewport —
   at that point it has nothing of its own to scroll (scrollHeight equals clientHeight), so a mouse wheel or
   trackpad swipe over it did nothing at all: overscroll-behavior-y:contain right above stops that "empty" scroll
   attempt from ever reaching the real scrollable ancestor (document) the way it would with `contain` removed.
   With a real ceiling, .main-content is what actually scrolls internally, exactly as its own overflow-y:auto
   already implied it should. */
.main-content {
  overscroll-behavior-y: contain;
  grid-area: main;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: calc(100vh - var(--topbar-height)); /* dvh fallback — see reset.css's body rule for why both are needed */
  min-height: calc(100dvh - var(--topbar-height));
  max-height: calc(100vh - var(--topbar-height));
  max-height: calc(100dvh - var(--topbar-height));
  background: transparent;
}

/* ── Auth Container ─────────────────────────────────────────────── */
.auth-container {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  padding: var(--space-6);
  /* Was the branded illustration (assets/bg.jpg) under a translucent
     white wash — plain neutral base for now, no color. */
  background: var(--bg-base);
  /* Plain block + overflow-y:auto (not flex align-items:center) — centering
     an over-tall child with flex align-items:center clips its start and
     makes it unreachable by scrolling up. The inner .auth-page handles its
     own centering and grows naturally in normal flow when it's taller than
     the viewport, so it stays fully scrollable from the very top. */
  overflow-y: auto;
}

@media (max-width: 480px) {
  .auth-container {
    padding: var(--space-4);
  }
}

/* ── Responsive (Mobile < 768px) ────────────────────────────────── */
@media (max-width: 767px) {
  .shell {
    grid-template-areas:
      "topbar"
      "main";
    grid-template-columns: 1fr;
    /* auto, not a fixed --topbar-height — the topbar now wraps to two rows
       here (icons, then the search bar on its own row below). */
    grid-template-rows: auto 1fr;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    z-index: var(--z-sidebar);
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  .sidebar__close { display: flex; }

  .topbar__brand { display: flex; }

  /* Ask AI and Networking have no sidebar or bottom-nav entry of their
     own — the topbar icon is their ONLY way in on mobile too, so none of
     these 8 icons can just be hidden on a phone the way the comment below
     does for routes that genuinely do have another entry point. Instead,
     let the icon row itself wrap onto a second line on a phone narrow
     enough that they don't all fit on one — every icon stays reachable;
     it just isn't forced into a single row that pushes right-edge icons
     (and previously the feed's own right-side action rail, and the
     bottom nav) past the visible edge of a narrower screen. */
  .topbar__right {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: var(--space-2);
    column-gap: 4px;
    max-width: 100%;
  }

  /* Slightly smaller tap targets so all 8 icons sit on ONE row at 360px
     instead of the last (Language) icon dropping onto a row of its own. */
  .topbar__right .btn-icon { width: 34px; height: 34px; }
  .topbar__right .btn-icon svg { width: 18px; height: 18px; }

  /* Was hidden entirely on mobile — wraps to its own full-width row below
     the icon row instead, so Home (and every page) still has a visible
     search bar on phone. */
  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding-block: var(--space-2);
    row-gap: var(--space-2);
  }

  .topbar__center {
    display: flex;
    order: 3;
    flex: 1 1 100%;
    max-width: 100%;
    margin: 0;
  }

  /* These routes are already one tap away via the bottom nav (Discover) or
     the sidebar (opened by the bottom nav's Menu button) — keeping them in
     the topbar too would overflow a phone-width topbar. Inbox stays: it has
     no bottom-nav slot of its own. */
  .btn-icon.topbar__quick-icon--desktop-only {
    display: none;
  }

  .topbar {
    padding: 0 var(--space-4);
  }

  .section {
    padding: var(--space-6) var(--space-4);
  }

  /* Bottom-nav is now just Home/Shorts/Subscriptions/You — the hamburger
     (top-left, next to the brand) is the only way to reach the sidebar
     on mobile, so it stays visible here instead of being hidden. */

  :root { --bottom-nav-height: 56px; }

  /* min-height: auto, not calc(100dvh - var(--topbar-height)) — the topbar
     no longer has a fixed height on mobile now that it wraps to two rows. */
  .main-content { padding-bottom: var(--bottom-nav-height); min-height: auto; }

  .bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--bottom-nav-height);
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    z-index: var(--z-sidebar);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.625rem;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
    height: 100%;
  }

  .bottom-nav__item svg { width: 22px; height: 22px; }

  .bottom-nav__item.active,
  .bottom-nav .nav-item.active { color: var(--primary-600); }

  .bottom-nav__create {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 32px;
    border-radius: var(--radius-lg);
    background: var(--gradient-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
  }

  .bottom-nav__create svg { width: 20px; height: 20px; }
}

/* ── Responsive (Tablet 768–1023px) ─────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .shell {
    grid-template-columns: var(--sidebar-collapsed-w) 1fr;
  }

  .sidebar__logo .logo-text,
  .nav-item span:not(.nav-item__badge),
  .nav-section-label,
  .sidebar__footer .user-name,
  .sidebar__footer .user-email {
    display: none;
  }

  .sidebar__logo { justify-content: center; }
  .sidebar__header { padding: var(--space-4); justify-content: center; }

  .nav-item {
    justify-content: center;
    padding: 0.625rem;
  }
  .nav-item svg { opacity: 1; }

  .topbar__center { display: none; }
}

/* ── Responsive (Large ≥ 1024px) ───────────────────────────────── */
@media (min-width: 1024px) {
  #sidebar-toggle { display: none; }
}

/* ── Print ──────────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .ambient-bg, .toast-container { display: none; }
  .shell { display: block; }
  .main-content { min-height: auto; overflow: visible; }
}

/* Very narrow phones (≤340px): one step smaller again so the icon row still doesn't wrap. */
@media (max-width: 340px) {
  .topbar__right .btn-icon { width: 30px; height: 30px; }
  .topbar__right { column-gap: 2px; }
}