/* =========================================================
   MAIN APP
   ========================================================= */

.app {
  min-height: 100vh;

  display: grid;

  /* var(--sidebar-width), not a hardcoded column width — see
     css/sidebar.css for the collapse/resize behavior that changes it. */
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 90px;

  gap: 8px;
  padding: 8px;

  background: var(--bg);
}

/* A collapsed sidebar narrows its own column too. Without this the
   rail shrank but the grid column kept --sidebar-width, leaving a
   ~200px empty strip beside it. Mobile uses a drawer, not a column. */
@media (min-width: 768px) {
  .app:has(.sidebar.collapsed) {
    grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
  }
}

@media (min-width: 1101px) {
  /* Lock the app shell to exactly the viewport height on desktop —
     `min-height` (the base rule, kept as-is for mobile's natural
     page-flow scrolling) lets the whole page grow taller than the
     screen and scroll as one long document. On desktop that's wrong:
     it means grid row 1's height — and so any child's `height:100%`,
     including the queue panel's — resolves against an inflated,
     content-grown height instead of the real visible area, so
     "100% tall" ends up taller than the screen instead of filling it.
     Locking here makes each panel's own internal
     `overflow-y:auto` (.tracks, .playlists, .queue-panel-body) the
     only thing that scrolls, the way Spotify's desktop shell works. */
  .app {
    height: 100vh;
  }
}

/* =========================================================
   MAIN
   ========================================================= */

.main {
  grid-column: 2;
  grid-row: 1;

  min-width: 0;
  min-height: 0;

  display: flex;
  flex-direction: column;

  gap: 8px;

  overflow: hidden;
}

/* =========================================================
   HEADER
   ========================================================= */

.header {
  min-height: 56px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
  padding: 0 4px;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hidden on desktop — the sidebar is always visible there.
   Shown only inside the <=767px media query below. `.header` in the
   selector because .btn (components.css, loaded later) sets display
   too and was winning, so ☰ showed on desktop next to the sidebar's
   own collapse button. */
.header .menu-toggle {
  display: none;
  flex-shrink: 0;
}

/* Back/Forward sit at the left edge with the page, not floating in
   the middle of the header: the header's space-between was spreading
   three groups (☰, arrows, search) across the full width. */
.nav-controls {
  margin-right: auto;
}

/* Off-canvas backdrop for the mobile sidebar drawer. Hidden/inert
   on desktop and whenever the drawer is closed. */
.sidebar-backdrop {
  display: none;
}

.header-right {
  display: flex;
  align-items: center;

  gap: 12px;
  min-width: 0;
}

/* =========================================================
   CONTENT
   ========================================================= */

.content {
  flex: 1;

  min-height: 0;

  display: flex;
  flex-direction: row;

  gap: 8px;

  overflow: hidden;
}

.left-col {
  flex: 1;

  min-width: 0;
  min-height: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

/* =========================================================
   PAGE GUTTER (desktop)
   =========================================================
   One horizontal inset for the whole content column, so the header,
   the page header card and every scrolling page share the same left
   and right edges, and a scrollbar always has room of its own.

   The padding sits inside each scroll area (not on .left-col around
   it): a scrollbar draws at its scroll area's own edge, so with
   content running to that edge, macOS's overlay scrollbar landed on
   top of the cards. scrollbar-gutter reserves room for the classic
   always-on scrollbars (Windows), so pages don't shift sideways when
   they become long enough to scroll.

   Selectors are scoped under .left-col so they outrank the per-view
   padding in css/components.css (which loads after this file). */
@media (min-width: 768px) {
  :root {
    --page-gutter: 16px;
  }

  .header {
    padding-inline: var(--page-gutter);
  }

  .left-col > .home-shelves,
  .left-col > .library-view,
  .left-col > .search-home,
  .left-col > .tracks-scroll {
    padding-inline: var(--page-gutter);

    scrollbar-gutter: stable;
  }

  .left-col > .hero {
    margin-inline: var(--page-gutter);
  }
}

@media (min-width: 1100px) {
  :root {
    --page-gutter: 24px;
  }
}

@media (min-width: 1600px) {
  :root {
    --page-gutter: 32px;
  }
}

/* Same rule for the side panels that scroll on their own: room for a
   scrollbar between the content and the panel's edge (a macOS
   scrollbar grows to about 11px while you drag it). */
@media (min-width: 768px) {
  .sidebar .playlists,
  .queue-panel .queue-panel-body,
  .save-to-menu .save-to-list,
  .ai-body,
  .prefs-panel {
    scrollbar-gutter: stable;
  }

  /* Left 0: playlist covers must sit at the same x as on the rail
     (css/sidebar.css, ".playlists .playlist-item"). */
  .sidebar .playlists {
    padding-inline: 0 12px;
  }

  .queue-panel .queue-panel-body {
    padding-inline: 12px;
  }
}