/*
 * Structural arrangement: the page shell every app can start from. Visual
 * skin (color, border, radius) for individual pieces lives in
 * components.css - same separation apps/inventory-web/src/styles/layout.css
 * already established.
 *
 * This is the genuinely generic subset of that file - a page shell, brand
 * lockup, and a shared spacing rhythm. Anything domain-specific (a kanban
 * board's columns, a character strip, a tenant grid) stays local to the
 * app that needs it, not here - see ADR 0098 and docs/guides/adding-a-
 * package.md's "don't generalize before a second consumer needs it" rule.
 */

/* Page shell: body is a full-height flex column so a short page's footer
   still sits at the bottom of the viewport rather than immediately under
   the content - header and footer keep their own natural height, main
   grows to fill whatever space is left between them. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

/* A text wordmark (no logo asset shipped in this package) sized to sit
   correctly in a compact header, rather than at its unconstrained
   context-dependent default (identity.md §5.3's .display is deliberately
   size-agnostic everywhere else). */
.site-header .display {
  font-size: 20px;
}

/* Header nav - a bare <a> in a bare <nav> would otherwise render as
   default underlined link-blue text crammed against the wordmark, with no
   visual weight or way to show which page is current. Same treatment as
   .sidebar below, so the two page shells read as one system. */
.site-header nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-header nav a {
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
}

.site-header nav a:hover {
  background: var(--fill-soft);
  color: var(--text-primary);
}

.site-header nav a[aria-current="page"] {
  background: var(--fill-soft);
  color: var(--text-primary);
  font-weight: 600;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand-mark {
  display: block;
  /* identity.md §4.7: horizontal lockup minimum width is 220px. */
  width: 220px;
  height: auto;
}

.brand-mark--dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .brand-mark--light {
    display: none;
  }

  .brand-mark--dark {
    display: block;
  }
}

main {
  flex: 1 0 auto;
  padding: var(--space-4);
}

/* A bare <section> gets a sensible default rhythm with no class needed -
   .section/.section-lg below stay available for wherever a different
   rhythm is deliberately wanted instead. */
section {
  margin-bottom: var(--space-6);
}

/* A bare <footer> gets a sensible default treatment - a quiet divider
   above secondary, muted page-level information. A sibling of <main>,
   not nested inside .wrap, so its own border/background span the full
   page width the same way .site-header's do - put its actual text in a
   nested .wrap (see preview/*.html) so it still lines up with the
   content column above it. */
footer {
  margin-top: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: 13px;
}

/* Shared section-spacing utility - for wherever a section needs a
   different rhythm than the bare-element default above. */
.section {
  margin-top: var(--space-5);
}

.section-lg {
  margin-top: var(--space-6);
}

/* A centered, reading-width content wrapper - the default outermost
   container for any page's content. */
.wrap {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* A horizontal row of items with consistent gap - the single most common
   "put some things next to each other" layout need. .row-tight is the
   same idea at a smaller gap, for a tightly-paired icon+label. */
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.row-tight {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* A vertical stack of elements with consistent spacing between them - the
   vertical counterpart to .row, so stacked pieces never need their own
   one-off margin. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* A simple responsive grid - override the card width via
   style="--grid-min: 200px" where the 160px default doesn't fit. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 160px), 1fr));
  gap: var(--space-3);
}

/* A narrow sidebar (nav, filters) beside a wider main content area - the
   other common page shell, alongside .wrap's single centered column.
   Stacks to one column below 720px rather than crushing the sidebar. */
.with-sidebar {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-5);
}

@media (max-width: 720px) {
  .with-sidebar {
    grid-template-columns: 1fr;
  }
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  color: var(--text-secondary);
  text-decoration: none;
}

.sidebar a:hover {
  background: var(--fill-soft);
  color: var(--text-primary);
}

.sidebar a[aria-current="page"] {
  background: var(--fill-soft);
  color: var(--text-primary);
  font-weight: 600;
}