/* ============================================================
   LAYOUT PRIMITIVES
   Composition-level building blocks. Token-driven gaps so the
   spacing recipes (docs/spacing.md) can be applied as classes
   instead of re-decided per-screen.

   Five primitives:
     .u-stack       vertical flex, gap-driven
     .u-cluster     horizontal wrapping flex, gap-driven
     .u-row         horizontal non-wrapping flex (use sparingly)
     .u-grid        responsive grid, gap-driven
     .u-page        page container (padding + max-width)

   Plus two organism scaffolds (.u-page-header, .u-toolbar) used
   to anchor pages in the manager world.

   All gaps are exposed via the --u-gap custom property so they
   can be tweaked inline (`style="--u-gap: var(--u-space-5)"`)
   while still tracking the token scale.
   ============================================================ */


/* ============================================================
   STACK — vertical sibling gap
   ============================================================ */
.u-stack {
  display: flex;
  flex-direction: column;
  gap: var(--u-gap, var(--u-space-4));
  min-width: 0;
}

.u-stack--1  { --u-gap: var(--u-space-1); }
.u-stack--2  { --u-gap: var(--u-space-2); }
.u-stack--3  { --u-gap: var(--u-space-3); }
.u-stack--4  { --u-gap: var(--u-space-4); }
.u-stack--5  { --u-gap: var(--u-space-5); }
.u-stack--6  { --u-gap: var(--u-space-6); }
.u-stack--8  { --u-gap: var(--u-space-8); }
.u-stack--10 { --u-gap: var(--u-space-10); }
.u-stack--12 { --u-gap: var(--u-space-12); }
.u-stack--16 { --u-gap: var(--u-space-16); }

/* Named density roles — pick by what the gap is FOR, not by pixels.
   Resolve to world-specific defaults when wrapped in .urbino-cit.
   Density-mode attribute selectors ([data-density]) also override
   the consumed tokens — those wins over these defaults inside their
   scope. See tokens/density.css + docs/spacing.md.

   Block / section gaps consume the canonical --u-block-gap and
   --u-section-gap so density modes propagate automatically. */
.u-stack--data    { --u-gap: 0;                              }  /* border-driven separation */
.u-stack--tight   { --u-gap: var(--u-space-2);              }   /* manager Work mode block gap */
.u-stack--block   { --u-gap: var(--u-block-gap);            }
.u-stack--section { --u-gap: var(--u-section-gap);          }
.u-stack--page    { --u-gap: var(--u-space-8);              }   /* manager Canvas page-level */
.urbino-cit .u-stack--tight   { --u-gap: var(--u-space-3); }
.urbino-cit .u-stack--page    { --u-gap: var(--u-space-10); }


/* ============================================================
   CLUSTER — horizontal wrapping group (buttons, chips, meta)
   ============================================================ */
.u-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u-gap, var(--u-space-2));
  min-width: 0;
}

.u-cluster--1  { --u-gap: var(--u-space-1); }
.u-cluster--2  { --u-gap: var(--u-space-2); }
.u-cluster--3  { --u-gap: var(--u-space-3); }
.u-cluster--4  { --u-gap: var(--u-space-4); }
.u-cluster--5  { --u-gap: var(--u-space-5); }
.u-cluster--6  { --u-gap: var(--u-space-6); }

/* Named density roles */
.u-cluster--tight    { --u-gap: var(--u-space-1); }   /* icon-only button group, action-cell */
.u-cluster--buttons  { --u-gap: var(--u-space-2); }   /* manager labeled button row */
.u-cluster--chips    { --u-gap: var(--u-space-2); }   /* chip/tag row */
.u-cluster--meta     { --u-gap: var(--u-space-3); }   /* inline metadata: category · address · time */
.u-cluster--toolbar  { --u-gap: var(--u-space-4); }   /* between toolbar groups */
.urbino-cit .u-cluster--buttons { --u-gap: var(--u-space-3); }

/* Alignment modifiers */
.u-cluster--start    { justify-content: flex-start; }
.u-cluster--center   { justify-content: center; }
.u-cluster--end      { justify-content: flex-end; }
.u-cluster--between  { justify-content: space-between; }
.u-cluster--baseline { align-items: baseline; }
.u-cluster--top      { align-items: flex-start; }


/* ============================================================
   ROW — horizontal non-wrapping flex
   For when wrap would break meaning (e.g. table cells).
   Prefer .u-cluster otherwise.
   ============================================================ */
.u-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--u-gap, var(--u-space-3));
  min-width: 0;
}

.u-row--1 { --u-gap: var(--u-space-1); }
.u-row--2 { --u-gap: var(--u-space-2); }
.u-row--3 { --u-gap: var(--u-space-3); }
.u-row--4 { --u-gap: var(--u-space-4); }
.u-row--5 { --u-gap: var(--u-space-5); }
.u-row--6 { --u-gap: var(--u-space-6); }

.u-row--baseline { align-items: baseline; }
.u-row--top      { align-items: flex-start; }

/* Spacer — pushes subsequent children to the end */
.u-row__spacer,
.u-cluster__spacer { flex: 1 1 auto; min-width: 0; }


/* ============================================================
   GRID — responsive equal-column grid
   ============================================================ */
.u-grid {
  display: grid;
  gap: var(--u-gap, var(--u-space-4));
  min-width: 0;
}

.u-grid--2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.u-grid--3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.u-grid--4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.u-grid--6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Auto-fit cards: each child wants at least 280px, otherwise wraps. */
.u-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.u-grid--gap-2  { --u-gap: var(--u-space-2); }
.u-grid--gap-3  { --u-gap: var(--u-space-3); }
.u-grid--gap-4  { --u-gap: var(--u-space-4); }
.u-grid--gap-5  { --u-gap: var(--u-space-5); }
.u-grid--gap-6  { --u-gap: var(--u-space-6); }
.u-grid--gap-8  { --u-gap: var(--u-space-8); }


/* ============================================================
   PAGE — outer page container
   Token-driven padding via --u-page-px / --u-page-py.
   ============================================================ */
.u-page {
  width: 100%;
  margin-inline: auto;
  padding: var(--u-page-py) var(--u-page-px);
  max-width: var(--u-page-max-w);
  box-sizing: border-box;
}

/* World shortcuts — for pages that don't have .urbino-mgr / .urbino-cit on a parent */
.u-page--mgr {
  /* Defaults already match manager :root tokens.
     Listed for symmetry with --cit / --mgr-dense variants. */
}
.u-page--mgr-dense {
  padding: var(--u-space-4) var(--u-space-5);
}
.u-page--cit-mobile {
  --u-page-px: var(--u-space-4);
  --u-page-py: var(--u-space-4);
  --u-page-max-w: 100%;
}
.u-page--cit-web {
  --u-page-px: var(--u-space-8);
  --u-page-py: var(--u-space-10);
  --u-page-max-w: 1120px;
}
@media (min-width: 1280px) {
  .u-page--cit-web {
    --u-page-px: var(--u-space-12);
    --u-page-py: var(--u-space-10);
  }
}


/* ============================================================
   PAGE — DETAIL VIEW (manager two-column layout)
   docs/spacing.md §4.2 row "Manager detail".
   The page itself only sets max-width (1280) — same as canvas.
   The 2-column grid is a separate utility (.u-detail-grid)
   applied to the BODY region, so the page can have full-width
   header bands (status track, breadcrumb-row) above the split.
   ============================================================ */
.u-page--detail {
  max-width: var(--u-page-max-w-detail);
}

/* The 2-column body grid: flexing main + 320 fixed right rail.
   Use as a direct child of .u-page--detail (or anywhere a detail
   split is needed — e.g. inside a card). */
.u-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--u-detail-sidebar-w);
  gap: var(--u-space-6);                /* 24 — manager section gap */
}

/* Detail-view slots — semantic names so markup self-documents. */
.u-page__main    { min-width: 0; }
.u-page__sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--u-space-4);                /* 16 — block gap inside the rail */
}
.u-page__sidebar--sticky {
  position: sticky;
  top: calc(56px + var(--u-space-4));   /* below 56px top-bar + 16 gutter */
  align-self: start;
}
@media (max-width: 1080px) {
  .u-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .u-page__sidebar--sticky { position: static; }
}


/* ============================================================
   PAGE — FORM (narrower readable content)
   docs/spacing.md §4.2 row "Manager form" — added in patch.
   Use for screens whose primary content is a stacked form with
   label-above-input fields: Beállítások, content editors,
   user-invite dialog body.
   ============================================================ */
.u-page--form {
  max-width: var(--u-page-max-w-form);
}


/* ============================================================
   PAGE — TREE (split: narrow nav rail + editor pane)
   For Kategória-kezelő. No outer max-width — the split fills.
   ============================================================ */
.u-page--tree {
  max-width: none;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--u-space-5);
}
@media (max-width: 960px) {
  .u-page--tree { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   PAGE HEADER — title bar between top bar and toolbar / canvas
   Header density. Generous breathing room around the title.
   ============================================================ */
.u-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--u-space-2);
  padding: var(--u-space-4) var(--u-space-6);
  border-bottom: 1px solid var(--u-border);
  background: var(--u-surface);
}
.u-page-header__row {
  display: flex;
  align-items: center;
  gap: var(--u-space-3);
  min-width: 0;
}
.u-page-header__row > .u-page-header__spacer { flex: 1 1 auto; }
.u-page-header__title {
  font-family: var(--u-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--u-fg-1);
  margin: 0;
}
.u-page-header__subtitle {
  font-size: 13px;
  color: var(--u-fg-2);
  line-height: 1.5;
  margin: 0;
}

.u-page-header--cit {
  padding: var(--u-space-8) var(--u-space-8) var(--u-space-6);
  gap: var(--u-space-3);
}
.u-page-header--cit .u-page-header__title { font-size: 28px; }


/* ============================================================
   TOOLBAR — action / filter bar above a canvas region
   Work density. Tight, 56px tall.
   ============================================================ */
.u-toolbar {
  display: flex;
  align-items: center;
  gap: var(--u-space-4);
  padding: var(--u-space-3) var(--u-space-6);
  min-height: 56px;
  background: var(--u-surface);
  border-bottom: 1px solid var(--u-border);
  box-sizing: border-box;
}
.u-toolbar__group {
  display: flex;
  align-items: center;
  gap: var(--u-space-2);
  min-width: 0;
}
.u-toolbar__spacer { flex: 1 1 auto; }

.u-toolbar--flush  { padding-inline: 0; }
.u-toolbar--inset  { padding-inline: var(--u-space-5); }
.u-toolbar--bare   { background: transparent; border-bottom: none; }


/* ============================================================
   FILLER — push to end inside a stack
   ============================================================ */
.u-stack__spacer { flex: 1 1 auto; min-height: 0; }