/* MapFactory layout primitives. Requires mf-tokens.css.
   Load after mf-components.css. Replaces what you'd use Bootstrap's grid for.
   Gap modifiers: add --gap-sm / --gap-lg on any primitive. */

:root { --bp-md: 900px; --bp-lg: 1280px; } /* reference only — media queries can't read vars */

/* Page shell for non-SPA pages (sits under the fixed nav) */
.page {
  width: 100%; max-width: var(--content-max); margin: 0 auto;
  padding: calc(var(--nav-height) + var(--sp-5)) var(--sp-6) var(--sp-10);
}
.page--full { max-width: none; }

/* Vertical flow with consistent gap */
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Wrapping horizontal row: toolbars, button groups, filters */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.push { margin-left: auto; } /* push an item to the far end of a cluster */

/* Auto-fit grid: columns reflow on their own, no breakpoints needed */
.grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 280px), 100%), 1fr));
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Tune per use: <div class="grid" style="--grid-min:200px"> */

/* Label/value form grid */
.form-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); align-items: center; }
.form-grid--2 { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); column-gap: var(--sp-4); }   /* two label/value pairs per row */

/* Sidebar + main (full-height app pages) */
.split { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.split > .split-side { width: var(--sidebar-width); flex-shrink: 0; overflow-y: auto; border-right: 1px solid var(--border); }
.split > .split-main { flex: 1; min-width: 0; overflow: auto; }

/* Full-height app column under the nav */
.app-shell { display: flex; flex-direction: column; height: calc(100vh - var(--nav-height)); margin-top: var(--nav-height); }

/* Horizontal scroll wrapper for wide tables */
.scroll-x { overflow-x: auto; max-width: 100%; }

/* Gap modifiers */
.stack--gap-sm, .cluster--gap-sm, .grid--gap-sm { gap: var(--sp-2); }
.stack--gap-lg, .cluster--gap-lg, .grid--gap-lg { gap: var(--sp-6); }

/* Breakpoints: only where a page genuinely needs to change */
@media (max-width: 1280px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .page { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .form-grid, .form-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .split { flex-direction: column; overflow: auto; }
  .split > .split-side { width: 100%; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--border); }
}