/* =============================================================================
 * layout.css — application shell
 * -----------------------------------------------------------------------------
 * Grid: a fixed sidebar column + a top navbar + a scrollable content region.
 * Fully token-driven; the shell markup itself is mounted by task #100513.
 *
 *   +----------------------------------------------------+
 *   | sidebar |            navbar                        |
 *   |         +-----------------------------------------+
 *   |         |                                         |
 *   |         |            content (scrolls)            |
 *   |         |                                         |
 *   +----------------------------------------------------+
 * ========================================================================== */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--navbar-height) 1fr;
  grid-template-areas:
    "sidebar navbar"
    "sidebar content";
  min-height: 100vh;
  height: 100vh;
}

/* Collapsed sidebar variant (toggled by the shell) */
.app-shell[data-sidebar="collapsed"] {
  grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

/* -----------------------------------------------------------------------------
 * Sidebar
 * -------------------------------------------------------------------------- */
.app-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: var(--color-chrome);
  color: var(--color-chrome-text);
  border-right: var(--border-width) solid var(--color-chrome-border);
  overflow: hidden;
}

.app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--navbar-height);
  padding: 0 var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-chrome-text);
  border-bottom: var(--border-width) solid var(--color-chrome-border);
  flex: none;
}

.app-sidebar__nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.app-sidebar__section {
  padding: var(--space-4) var(--space-3) var(--space-1);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-chrome-muted);
}

.app-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-chrome-muted);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast),
    background-color var(--transition-fast);
}

.app-sidebar__link:hover {
  color: var(--color-chrome-text);
  background-color: var(--color-chrome-2);
  text-decoration: none;
}

.app-sidebar__link[aria-current],
.app-sidebar__link.is-active {
  color: var(--color-chrome-active);
  background-color: var(--color-chrome-active-bg);
}

.app-sidebar__footer {
  flex: none;
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-width) solid var(--color-chrome-border);
  color: var(--color-chrome-muted);
  font-size: var(--font-size-xs);
}

/* -----------------------------------------------------------------------------
 * Navbar
 * -------------------------------------------------------------------------- */
.app-navbar {
  grid-area: navbar;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--navbar-height);
  padding: 0 var(--space-5);
  background-color: var(--color-chrome);
  color: var(--color-chrome-text);
  border-bottom: var(--border-width) solid var(--color-chrome-border);
  position: sticky;
  top: 0;
  z-index: var(--z-navbar);
}

.app-navbar__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-chrome-text);
}

.app-navbar__spacer {
  flex: 1 1 auto;
}

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

/* -----------------------------------------------------------------------------
 * Content region (the only scrolling area under normal use)
 * -------------------------------------------------------------------------- */
.app-content {
  grid-area: content;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background-color: var(--color-bg);
  padding: var(--space-5);
}

.app-content__inner {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* -----------------------------------------------------------------------------
 * Generic layout primitives used across pages
 * -------------------------------------------------------------------------- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.page-header__titles h1 {
  font-size: var(--font-size-2xl);
}

.page-header__subtitle {
  color: var(--color-muted);
  margin-top: var(--space-1);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

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

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.card {
  background-color: var(--card-bg);
  border: var(--border-width) solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-5);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* -----------------------------------------------------------------------------
 * Responsive: collapse the sidebar into an overlay on narrow viewports
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "navbar"
      "content";
  }

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

  .app-shell[data-sidebar="open"] .app-sidebar {
    transform: translateX(0);
    box-shadow: var(--shadow-3);
  }
}