/**
 * App Shell — persistent wrapper (Navigation_Model). Tokens only (gate 2).
 * Breakpoints: ≥1280 rail+drawer (expanded), 960–1279 rail only (medium),
 * ≤959 bottom nav (compact). No blended states.
 */

.app-shell {
  display: grid;
  grid-template-areas: "nav topbar" "nav banner" "nav content";
  grid-template-columns: var(--layout-sidebar-width) 1fr;
  grid-template-rows: var(--layout-topbar-height) auto 1fr;
  min-height: 100vh;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
}

/* ── Nav (drawer at ≥1280, rail 960–1279, hidden ≤959) ─────────────────── */
.app-shell__nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-surface-01);
  border-right: 1px solid var(--color-outline-variant);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.nav-item--active {
  background: var(--nav-active-bg);
  color: var(--nav-active-fg);
}

.nav-item__icon { width: var(--space-4); text-align: center; }

/* ── Top app bar ────────────────────────────────────────────────────────── */
.app-shell__topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  background: var(--color-surface-01);
  border-bottom: 1px solid var(--color-outline-variant);
}

.topbar__title { font-size: var(--type-title-lg-size); margin: 0; flex: 0 0 auto; }

.topbar__range { display: flex; gap: var(--space-1); }

.topbar__range-btn {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-outline);
  border-radius: var(--chip-radius);
  background: var(--color-surface-01);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.topbar__range-btn--active {
  background: var(--chip-active-bg);
  color: var(--chip-active-fg);
  border-color: var(--chip-active-fg);
}

.topbar__freshness { display: flex; gap: var(--space-2); margin-left: auto; }
.topbar__queue-badge { color: var(--color-warning); font-size: var(--type-body-sm-size); }
.topbar__theme-toggle {
  border: none; background: none; color: var(--color-text-secondary);
  font-size: var(--type-title-lg-size); cursor: pointer;
}

/* Sign-out — a subtle bordered button that reads on the topbar in both
   themes (previously unstyled → a washed-out default white button). */
.topbar__logout {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--chip-radius);
  background: var(--color-surface-01);
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm-size);
  cursor: pointer;
}
.topbar__logout:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }

/* ── Banner slot ────────────────────────────────────────────────────────── */
.app-shell__banner-slot { grid-area: banner; }

.banner {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--banner-border);
}

.banner--info { background: var(--banner-info-bg); color: var(--banner-info-fg); }
.banner--warning { background: var(--banner-warning-bg); color: var(--banner-warning-fg); }
.banner__detail { color: var(--color-text-muted); font-size: var(--type-body-sm-size); }

/* ── Content zone (the only region that swaps) ──────────────────────────── */
.app-shell__content {
  grid-area: content;
  padding: var(--space-6);
  max-width: var(--layout-content-max-width);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Bottom nav (compact only) ──────────────────────────────────────────── */
.app-shell__bottom-nav { display: none; }

.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 0;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--type-body-sm-size);
}

.bottom-nav__item--active { color: var(--nav-active-fg); }

/* ── Side sheet ─────────────────────────────────────────────────────────── */
.side-sheet-scrim {
  position: fixed; inset: 0;
  background: var(--color-scrim);
  z-index: var(--z-drawer);
}

.side-sheet {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--side-sheet-width);
  background: var(--side-sheet-bg);
  border-left: 1px solid var(--color-outline);
  padding: var(--space-5);
  overflow-y: auto;
  z-index: var(--z-modal);
  box-sizing: border-box;
}

.side-sheet__close {
  border: none; background: none; cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--type-body-md-size);
  float: right;
}

/* ── Breakpoints (Navigation_Model §3 — no blended states) ─────────────── */
@media (max-width: 1279px) {
  .app-shell { grid-template-columns: var(--layout-rail-width) 1fr; }
  .nav-item__label { display: none; }
  .nav-item { justify-content: center; }
}

@media (max-width: 959px) {
  .app-shell {
    grid-template-areas: "topbar" "banner" "content";
    grid-template-columns: 1fr;
    padding-bottom: var(--layout-bottomnav-height);
  }
  .app-shell__nav { display: none; }
  .app-shell__bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--layout-bottomnav-height);
    background: var(--color-surface-01);
    border-top: 1px solid var(--color-outline-variant);
    z-index: var(--z-sticky);
  }
  /* Mobile row (Operational_States §4): same states, condensed
     presentation — banners shrink to a chip-height strip, the date-range
     control collapses, freshness chips wrap. */
  .banner { padding: var(--space-1) var(--space-3); font-size: var(--type-body-sm-size); }
  .banner__detail { display: none; }
  .topbar__title { font-size: var(--type-title-md-size); }
  .topbar__range { display: none; }
}