/* ============================================================
   URBINO DS PATCH · PAGE-LAYOUT CLASSES — layout.css ADDITIONS
   ============================================================

   Merge into: components/layout.css
   Location:   end of file, after the existing .u-page--cit-web block
               (around line 165) and before .u-page-header

   Why:        docs/spacing.md §4.2 documents three manager content
               widths (canvas 1280 / form ~720–960 / detail 1280+sidebar)
               but only "canvas" had a CSS class (.u-page--mgr).
               Form-orientált screenek (Beállítások, hír-szerkesztő)
               és detail-view kétoszlopos screenek inline-hand-rolling-ot
               kényszerítettek.

   New classes:
     .u-page--detail   — two-column manager detail view
                         (main col flexes + 320px right rail)
     .u-page--form     — narrower content for readable form line-length
                         (max-width: --u-page-max-w-form = 960)

   No breaking changes. Existing .u-page--mgr / .u-page--mgr-dense
   unchanged.
   ============================================================ */


/* ============================================================
   PAGE — DETAIL VIEW (two-column manager layout)
   docs/spacing.md §4.2 row "Manager detail".
   The page itself only sets max-width (same as canvas, 1280).
   The 2-column body grid is a SEPARATE utility .u-detail-grid
   applied to the body region — this lets the page have full-width
   header bands (back nav, status track) 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. */
.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 class names so the markup self-documents.
   Use .u-page__main inside the flexing column, .u-page__sidebar inside the rail. */
.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 */
}

/* Sidebar can stick when content scrolls.
   Apply .u-page__sidebar--sticky on the rail element. */
.u-page__sidebar--sticky {
  position: sticky;
  top: calc(56px + var(--u-space-4));  /* below the 56px top-bar with a 16px gutter */
  align-self: start;
}

/* Below 1080px the rail drops underneath. */
@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 — new row introduced by this patch.
   Use for screens whose primary content is a stacked form with
   label-above-input fields: Beállítások (general / categories
   / groups / users), hír-szerkesztő, program-szerkesztő, info-
   szerkesztő. Forms wider than ~640 chars of input become hard
   to scan (eye has to track across the screen for short labels).
   ============================================================ */
.u-page--form {
  max-width: var(--u-page-max-w-form);
}


/* ============================================================
   PAGE — TREE (split: navigation rail + editor pane)
   For Kategória-kezelő style screens: left rail showing tree
   structure, right pane editing the selected node. Distinct from
   --detail because it has no max-width (uses the full canvas)
   and the left rail is narrower (260) for taxonomy lists.
   ============================================================ */
.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);
  }
}