/*
 * App shell — the authenticated layout used at /dashboard, /profile, /settings.
 * The template uses a SIDEBAR layout (different from the marketing site, which
 * has a centred top nav). The sidebar styling lives in _sidebar.css; this file
 * only defines the outer shell + the shared marketing-style topbar used by the
 * Astro site and any non-authenticated routes.
 */

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.shell__topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--pgsx-bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: var(--pgsx-rule-weight) solid var(--pgsx-rule);
}

.shell__topbar-inner {
  max-width: var(--pgsx-shell-max-width);
  margin: 0 auto;
  padding: var(--pgsx-space-4) var(--pgsx-shell-gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--pgsx-space-8);
}

.shell__main {
  flex: 1;
  max-width: var(--pgsx-shell-max-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--pgsx-space-12) var(--pgsx-shell-gutter);
}

/* App-shell container with sidebar + content. Used by the Angular layout.
   `height: 100vh` (not `min-height`) so the grid items are constrained to the
   viewport — otherwise the inner content area's `overflow-y: auto` has nothing
   to overflow against and the page becomes the only scroll surface. */
.app-shell {
  position: relative; /* anchor for the floating collapse toggle on the sidebar border */
  display: grid;
  grid-template-columns: var(--pgsx-sidebar-width) minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
  background: var(--pgsx-bg);
  transition: grid-template-columns var(--pgsx-duration-default) var(--pgsx-easing-standard);
}

.app-shell--collapsed {
  grid-template-columns: var(--pgsx-sidebar-collapsed-width) minmax(0, 1fr);
}

/* Sidebar collapse/expand toggle — a circular button centred on the sidebar's
   right border line, at the header's vertical midpoint. Lives here (not in the
   sidebar) because `.sidebar` has `overflow-x: hidden` which would clip a
   border-straddling element. Slides with the rail when collapsing. */
.app-shell__toggle {
  position: absolute;
  top: calc(var(--pgsx-topbar-height) / 2);
  left: var(--pgsx-sidebar-width);
  transform: translate(-50%, -50%);
  z-index: 20; /* above the topbar (15) and sidebar (10) */
  width: 28px;
  height: 28px;
  border-radius: var(--pgsx-radius-full);
  background: var(--pgsx-surface);
  border: 1px solid var(--pgsx-rule);
  color: var(--pgsx-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    left var(--pgsx-duration-default) var(--pgsx-easing-standard),
    color var(--pgsx-duration-default) var(--pgsx-easing-standard),
    border-color var(--pgsx-duration-default) var(--pgsx-easing-standard);
}

.app-shell__toggle:hover {
  color: var(--pgsx-text-primary);
  border-color: var(--pgsx-text-muted);
}

.app-shell--collapsed .app-shell__toggle {
  left: var(--pgsx-sidebar-collapsed-width);
}

.app-shell__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0; /* allow the flex child below to shrink so its overflow kicks in */
}

.app-shell__content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--pgsx-space-8) var(--pgsx-shell-gutter);
}

.pgsx-shell {
  max-width: var(--pgsx-shell-max-width);
  margin-inline: auto;
  padding-inline: var(--pgsx-shell-gutter);
}

.brand {
  font-family: var(--pgsx-font-display);
  font-variation-settings:
    "opsz" 144,
    "SOFT" 30,
    "wght" 500;
  font-size: var(--pgsx-text-xl);
  line-height: 1;
  letter-spacing: var(--pgsx-tracking-tight);
  color: var(--pgsx-text-primary);
  white-space: nowrap;
}

.brand__prefix {
  color: var(--pgsx-accent);
}

.brand__dot {
  color: var(--pgsx-accent);
  font-variation-settings:
    "opsz" 144,
    "wght" 700;
}

.brand__sub {
  font-family: var(--pgsx-font-mono);
  font-size: 10px;
  letter-spacing: var(--pgsx-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pgsx-text-muted);
  margin-left: var(--pgsx-space-3);
  padding-left: var(--pgsx-space-3);
  border-left: 1px solid var(--pgsx-rule);
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}

.nav {
  display: flex;
  gap: var(--pgsx-space-8);
  justify-content: center;
  font-size: var(--pgsx-text-sm);
  letter-spacing: var(--pgsx-tracking-loose);
  text-transform: uppercase;
  font-weight: 500;
}

.nav a {
  position: relative;
  color: var(--pgsx-text-secondary);
  padding-block: var(--pgsx-space-2);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--pgsx-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--pgsx-duration-default) var(--pgsx-easing-standard);
}

.nav a:hover {
  color: var(--pgsx-text-primary);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav a[aria-current="page"] {
  color: var(--pgsx-text-primary);
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--pgsx-space-6);
}