/**
 * layout.css
 * ----------------------------------------------------------------------------
 * Defines the four structural regions of the app shell:
 *   Header -> System Bar -> (Sidebar + Content) -> Footer
 *
 * This file only positions and sizes regions. It never styles buttons,
 * cards, or other reusable widgets — that belongs in components.css.
 * Splitting the two means a designer can restyle a button everywhere
 * without touching how the page is put together, and vice versa.
 */

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

.app-shell[data-sidebar='collapsed'] {
  grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

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

.app-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

.app-header__search {
  flex: 1;
  max-width: 420px;
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

/* ---- System bar (signature element) --------------------------------------
   A slim, live status strip beneath the header — the product's "operating
   system" metaphor made literal. It always tells you, at a glance, which
   environment you're in, whether you're looking at demo data, the running
   version, and the current time. It reads from config.js, never hard-coded. */
.system-bar {
  grid-area: systembar;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 0 var(--space-5);
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  overflow-x: auto;
  white-space: nowrap;
}

:root[data-theme='dark'] .system-bar {
  background: #05070a;
}

.system-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 0.85;
}

.system-bar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}

/* ---- Sidebar --------------------------------------------------------------- */
.app-sidebar {
  grid-area: sidebar;
  background: var(--color-surface);
  border-right: var(--border-width) solid var(--color-border);
  overflow-y: auto;
  position: sticky;
  top: calc(var(--header-height) + var(--systembar-height));
  height: calc(100vh - var(--header-height) - var(--systembar-height));
}

.app-sidebar__nav {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ---- Content area ---------------------------------------------------------- */
.app-content {
  grid-area: content;
  padding: var(--space-6);
  max-width: var(--content-max-width);
  width: 100%;
}

/* ---- Footer ----------------------------------------------------------------- */
.app-footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  background: var(--color-surface);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
}

/* ---- Responsive: tablet ------------------------------------------------------ */
@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: var(--sidebar-width-collapsed) 1fr;
  }
  .app-content {
    padding: var(--space-5);
  }
}

/* ---- Responsive: mobile -------------------------------------------------------
   Sidebar becomes an off-canvas panel that slides in over the content rather
   than sharing the grid, so small screens keep the full width for content. */
@media (max-width: 720px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      'header'
      'systembar'
      'content'
      'footer';
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(80vw, 300px);
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-standard);
    z-index: var(--z-sidebar);
    box-shadow: var(--shadow-lg);
  }

  .app-shell[data-sidebar='open'] .app-sidebar {
    transform: translateX(0);
  }

  .app-header__search {
    display: none;
  }

  .system-bar {
    font-size: 0.6875rem;
    gap: var(--space-4);
  }
}