/* ============================================================
 * APEX SALES OS · APP LAYOUT
 * The page-frame that holds every authenticated screen.
 *
 * Token-driven. No hardcoded colors / spacings.
 * Loads AFTER 02-primitives.css; layout-scoped rules below
 * intentionally restate context-bar / crumb declarations so this
 * file is self-contained as the canonical layout sheet.
 *
 * Owner: Worker W2 (r4-002-layout-css).
 * ============================================================ */

.app-frame {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: calc(100vh - 56px); /* below topbar */
}

.context-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  font-size: 12px; color: var(--text-muted);
}
.crumb { color: var(--text-soft); }
.crumb-current { color: var(--text); font-weight: 500; }
.crumb-sep { color: var(--text-faint); margin: 0 4px; }
.context-bar .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Page section header (used inside pages) */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.section-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.section-head .meta { font-size: 12px; color: var(--text-muted); }

/* Grids that recur */
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr);  gap: 12px; }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr);  gap: 12px; }
.grid-2  { display: grid; grid-template-columns: repeat(2, 1fr);  gap: 12px; }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }

/* Card surface (lightweight wrapper used by pages) */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.card-head h3 {
  margin: 0;
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
}
.card-head .meta { font-size: 11.5px; color: var(--text-muted); }