/* Shell -Page chrome widgets (.shell-page-* + .shell-filter-panel)
 *
 * Layout-only widgets that live INSIDE shell-app's body. They compose
 * existing atoms (.kpi, .fchip, .period-toggle, .form-control) rather
 * than redefining them. Pick the ones a page needs -a settings sub-list
 * might only declare .shell-page-head + body. An expenses list takes
 * the full stack: head → period → KPIs → filter-panel → body.
 *
 *   .shell-page-head            Title + caption + primary CTA
 *   .shell-page-period          Promoted period toggle strip
 *   .shell-page-kpis            KPI tile grid (composes .kpi / .stat-band)
 *   .shell-filter-panel         Search row + scrolling filter row
 *   .shell-page-toolbar         Simple inline variant (period | search | CTA)
 *
 * Spec: docs/strategy/design-system/32-shell-system.md §4.3 – §4.7
 * Wireframe: wireframes/shell_mobile/_atlas.html §7
 *
 * Reuse rule: do NOT redefine .kpi, .fchip, .period-toggle. They live
 * in their dedicated component files (12-kpi.css, 42-filter-chip.css,
 * 41-period-toggle.css). This file owns layout, padding, and the
 * widget containers only.
 *
 * Mobile-first. All values via tokens.css.
 */

/* ────────────────────────────────────────────────────────────────
   Page body -canonical content wrapper (spec §4 / padding contract)
   ──────────────────────────────────────────────────────────────── */
/*
 * Replaces feature-prefixed wrappers like .recipes-page, .staff-page,
 * .catalog-page for pages that don't belong to a specific feature
 * family. Provides the page-edge gutter that shell-page-* widgets
 * (head, period, kpis, filter-panel) rely on -see the "Padding
 * contract" note above.
 *
 * Chrome strips like .shell-subnav-tabs / .shell-subnav-chips sit
 * OUTSIDE this wrapper (above it, directly under the topbar) so they
 * keep their full-bleed edge-to-edge presentation.
 */
.shell-page-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  max-width: var(--mobile-content-max-width, 560px);
  margin: 0 auto;
  width: 100%;
}

/* A <form> wrapping page sections is still one flex item of
   .shell-page-body -without this, its own children (section labels,
   cards, alerts) lose the gap rhythm and sit flush against each other. */
.shell-page-body > form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Desktop content reflow (ADR-046). @media can't read a custom
 * property, so 1280px is spelled out literally here (keep in sync with
 * tokens.css's --bp-wide). Scoped to .shell-page-body specifically -
 * NOT to --mobile-content-max-width itself, which several older,
 * unaudited page wrappers also read (see tokens.css's own comment).
 * 1080px, not unconstrained: still a readable measure on a very wide
 * monitor, not an edge-to-edge stretch.
 */
@media (min-width: 1280px) {
  .shell-page-body {
    max-width: 1080px;
  }
}

/* ────────────────────────────────────────────────────────────────
   Page head -title + caption + primary action (§4.3)
   ──────────────────────────────────────────────────────────────── */
/*
 * NOTE on horizontal padding: shell-page-head / -period / -kpis /
 * filter-panel are CONTENT widgets -they live inside a padded page
 * body wrapper (.staff-page, .recipes-page, future .shell-page-body)
 * that owns the page-edge gutter. They DO NOT add horizontal padding
 * themselves; that would double-pad on top of the wrapper.
 *
 * shell-page-toolbar IS chrome (surface background + border-bottom),
 * so it keeps its own horizontal padding and sits flush against
 * page edges like a sub-topbar.
 */
.shell-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-3);
  background: var(--bg);
}

.shell-page-head-body {
  /* 200px, not 0 - with several action buttons (e.g. Catalog's Products
     page), flex-shrink otherwise crushes the title/caption column down
     to a few px instead of wrapping the actions to their own row. */
  min-width: 200px;
  flex: 1;
}

.shell-page-title {
  margin: 0;
  font-size: var(--font-size-page-title);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-page-title);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-page-caption {
  margin: 2px 0 0;
  font-size: var(--font-size-caption);
  color: var(--muted);
  line-height: 1.4;
}

.shell-page-head-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex-shrink: 0;
}

.shell-page-head-cta {
  background: var(--primary);
  color: var(--surface);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: var(--font);
  font-size: var(--font-size-small);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}

.shell-page-head-cta:hover,
.shell-page-head-cta:focus-visible {
  background: var(--primary-dark);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  outline: none;
}

.shell-page-head-cta:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Layout-transparent wrapper for a head CTA that must POST (e.g. an
   order-create endpoint that rejects GET). The button stays the flex
   item in .shell-page-head-actions exactly as a bare link did. */
.shell-page-head-cta-form {
  display: contents;
}

.shell-page-head-cta svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ────────────────────────────────────────────────────────────────
   Page period strip -promoted period toggle (§4.4)
   ──────────────────────────────────────────────────────────────── */
/*
 * Sits between .shell-page-head and .shell-page-kpis. Date scope
 * is meta to the page, not a peer filter -that's why it's its own
 * row, not buried in shell-filter-panel-row.
 *
 * Wraps the existing .period-toggle (41-period-toggle.css). Do NOT
 * redefine period-toggle atoms here.
 */
.shell-page-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: 0 0 var(--space-3);
  background: var(--bg);
}
/*
 * No overflow-x: auto here even though the row may carry the toggle
 * plus scoped action buttons. Horizontal scrolling implies a clipped
 * Y-axis (CSS doesn't allow per-axis visibility), which kills the
 * Custom date-picker popover that pops below .period-toggle. Wrapping
 * lets the popover render outside the row freely while letting
 * adjacent buttons fall to a second line on narrow viewports.
 */

.shell-page-period > .period-toggle {
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────
   Page KPIs -tile grid (§4.5)
   ──────────────────────────────────────────────────────────────── */
/*
 * Layout-only. Tiles inside use the existing .kpi component
 * (12-kpi.css) with .kpi.success / .warning / .error for whole-card
 * state tint. Alternative: .stat-band (also 12-kpi.css) for
 * cost-vs-target blocks with target/delta meta rows.
 *
 * Do NOT add a top accent strip, shadow, or new tile styles here —
 * the production .kpi design is whole-card tint.
 */
.shell-page-kpis {
  display: grid;
  gap: var(--space-2);
  padding: 0 0 var(--space-3);
  background: var(--bg);
}

.shell-page-kpis.is-2up {
  grid-template-columns: repeat(2, 1fr);
}

.shell-page-kpis.is-3up {
  grid-template-columns: repeat(3, 1fr);
}

/* 4-up KPI band -atlas §1.1 sync inspector pattern. Keeps the
 * four tiles on one row even at phone width so the operator reads
 * Saved / Waiting / Failed / Conflicts at a glance. The .kpi
 * component below tightens its padding inside this density so the
 * tile contents fit a ~85px column without truncating. */
.shell-page-kpis.is-4up {
  grid-template-columns: repeat(4, 1fr);
}

.shell-page-kpis.is-4up .kpi {
  padding: 8px 6px;
  min-width: 0;
}

.shell-page-kpis.is-4up .kpi .label,
.shell-page-kpis.is-4up .kpi .meta {
  font-size: var(--font-size-nano);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-page-kpis.is-4up .kpi .value {
  font-size: var(--font-size-prominent);
  font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────────────────────────────
   Filter panel -search + scrolling filter row (§4.6)
   ──────────────────────────────────────────────────────────────── */
.shell-filter-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 0 var(--space-3);
  background: var(--bg);
}

.shell-filter-panel-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--font-size-body);
}

.shell-filter-panel-search svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.shell-filter-panel-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--text);
  outline: none;
}

.shell-filter-panel-search input::placeholder {
  color: var(--muted);
}

/*
 * Filter row -items inside are the existing .fchip
 * (42-filter-chip.css, optionally with <span class="n"> count) and
 * .form-control selects (15-form-controls.css). Do NOT redefine
 * those atoms here. NOT the home for .period-toggle -that lives in
 * .shell-page-period.
 */
.shell-filter-panel-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}

.shell-filter-panel-row::-webkit-scrollbar {
  display: none;
}

.shell-filter-panel-row > * {
  flex-shrink: 0;
}

/*
 * Select-based filters (typed pickers for many options) get their own
 * row inside .shell-filter-panel -they sit directly between the
 * search row and the chip row. The select stretches to fill the column.
 *
 * Threshold rule (spec §4.6): use .fchip inline inside
 * .shell-filter-panel-row for ≤6 mutually-exclusive values; use a
 * .form-control select on its own row for ≥7 values.
 */
.shell-filter-panel select.form-control,
.shell-filter-panel > form > select.form-control {
  width: 100%;
  max-width: 100%;
}

/* ────────────────────────────────────────────────────────────────
   Page toolbar -simple inline variant (§4.7)
   ──────────────────────────────────────────────────────────────── */
/*
 * For pages without KPI tiles or multi-filter -period · search ·
 * CTA in a single row. If the page needs more, use the full stack
 * (head → period → KPIs → filter-panel) instead.
 */
.shell-page-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3);
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}

.shell-page-toolbar-period {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--space-3);
  background: var(--surface-soft);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-small);
  font-weight: 700;
  color: var(--text);
}

.shell-page-toolbar-period svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

.shell-page-toolbar-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--space-3);
  background: var(--surface-soft);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--font-size-small);
}

.shell-page-toolbar-search svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
}

.shell-page-toolbar-cta {
  height: 36px;
  padding: 0 var(--space-3);
  background: var(--primary);
  color: var(--surface);
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: var(--font-size-small);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.shell-page-toolbar-cta svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

/* ================================================================
   DESKTOP CONTENT LAYOUT (>=1024px) -reusable across every app page.

   Mobile-first, every .shell-page-body is a single ~560px column. A
   page opts into the wider desktop canvas + richer layout with three
   drop-in primitives -no page-specific layout CSS required:

     .is-wide (on .shell-page-body)  Widen to the desktop content max
                                     and grow the page gutter. Also
                                     scales the KPI band up from the
                                     phone density (bigger value, more
                                     padding) for desktop legibility.
     .shell-split                    Responsive two-column region -
       .shell-split-main             stacks on mobile, main | side at
       .shell-split-side             >=1024px. Track ratio is the
                                     --shell-split-cols custom property
                                     (default 1.7fr 1fr).
     .shell-page-kpis.is-4up-lg      KPI band that is 2-up on phone and
                                     4-up on desktop (the common shape
                                     for a 4-metric headline band).

   Adopted first by standard/dashboard.html; any app surface
   (inventory, recipes, costing, financials, reports...) composes the
   same primitives. Target: wireframes/shell_desktop/.
   ================================================================ */

/* Responsive two-column split -single column on mobile. */
.shell-split {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.shell-split-main,
.shell-split-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* KPI band -2-up on phone, 4-up on desktop. */
.shell-page-kpis.is-4up-lg {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1024px) {
  /* Wider content column + roomier gutter for opted-in pages. */
  .shell-page-body.is-wide {
    max-width: var(--desktop-content-max-width, 1120px);
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  /* Two-column split engages. Track ratio overridable per page via the
     --shell-split-cols custom property. */
  .shell-split {
    display: grid;
    grid-template-columns: var(--shell-split-cols, 1.7fr 1fr);
    gap: var(--space-4) var(--space-5);
    align-items: start;
  }

  /* 4-metric headline band fans out to one row. */
  .shell-page-kpis.is-4up-lg {
    grid-template-columns: repeat(4, 1fr);
  }

  /* KPI tiles read bigger on a wide desktop page -the phone shrink
     (12-kpi.css @max-width:1023 + the is-4up density) is a small-screen
     constraint. Tokens only. Scoped to .is-wide so legacy narrow pages
     are untouched. */
  .shell-page-body.is-wide .shell-page-kpis .kpi {
    padding: var(--space-4);
  }
  .shell-page-body.is-wide .shell-page-kpis .kpi .value {
    font-size: var(--font-size-display-lg);
  }
  .shell-page-body.is-wide .shell-page-kpis .kpi .label,
  .shell-page-body.is-wide .shell-page-kpis .kpi .meta {
    font-size: var(--font-size-small);
  }
}