/* ==========================================================================
   mo-layout.css — MuveOne Pricer LAYOUT ENGINE (Flexbox + CSS Grid layer)
   --------------------------------------------------------------------------
   Loaded LAST (after Materialize CDN, mo-ui.css and mo-theme.css) so it wins.
   No build step: static CSS only. Uses the brand tokens from mo-theme.css.

   What this file does:
     (A) Re-implements Materialize's FLOAT-based .row/.col 12-col grid on top
         of Flexbox — WITHOUT touching Materialize's per-column width rules
         (.col.s1..s12 / .m1..m12 / .l1..l12 still set the widths). Every page
         that already uses .row / .col keeps working, just on flex not floats.
     (B) A small modern layout-utility layer (stack / cluster / between / fill
         / grid) that per-section agents compose instead of nested .row/.col.

   GUARDRAIL: this affects EVERY page. The .col widths are percentages that
   Materialize sets via `width:` — we must NOT set `flex:1` (that would ignore
   them). Cols stay `flex: 0 0 auto` and keep their width% / padding gutter.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout design tokens (gaps). Additive — augments mo-theme.css :root.
   -------------------------------------------------------------------------- */
:root {
  --mo-gap:    1rem;
  --mo-gap-sm: .5rem;
  --mo-gap-lg: 1.5rem;
}

/* ==========================================================================
   (A) MATERIALIZE GRID, RE-IMPLEMENTED ON FLEXBOX
   ==========================================================================
   Materialize's .row used a float clearfix (::after { clear:both }) and each
   .col floated left. We switch the row to a flex container and neutralise the
   floats on the columns. Materialize's width% + 0.75rem side padding (gutter)
   are preserved, so column sizing and spacing are unchanged.

   NOTE: Materialize's own margins on .row (margin-bottom, auto side margins)
   are intentionally NOT overridden here — only its display model changes. */

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;   /* was a float clearfix; independent column heights */
}

/* Neutralise the float; keep Materialize's border-box + width% + gutter padding.
   flex: 0 0 auto -> honour the width% Materialize set; never grow/shrink past it.
   min-width: 0   -> let long content (tables, inputs) shrink instead of overflow. */
.row > .col,
.row .col {
  float: none;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 0;
}

/* A .row's direct children that are NOT .col — a bare <table>/DataTables wrapper,
   a note <p>, or a NESTED .row — were full-width blocks under floats. As flex
   items they would shrink to content width, so keep them full-width. This fixes
   e.g. a `.row > table` DataTable that stopped mid-page and a nested mass/volume
   `.row` that cramped to the left. */
.row > *:not(.col):not(script):not(style) {
  flex: 1 1 100%;
  min-width: 0;
}

/* Opt-in equal-height columns (e.g. side-by-side cards). */
.row.row--stretch {
  align-items: stretch;
}
.row.row--stretch > .col,
.row.row--stretch .col {
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Container — keep Materialize's max-width; add comfortable responsive
   horizontal padding. box-sizing keeps the padding INSIDE the width so the
   page body never scrolls horizontally.
   -------------------------------------------------------------------------- */
.container {
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .container { padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 601px) and (max-width: 992px) {
  .container { padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 993px) {
  .container { padding-left: 24px; padding-right: 24px; }
}

/* ==========================================================================
   (B) MODERN LAYOUT UTILITIES
   ==========================================================================
   Compose these instead of nested .row/.col where a flat flex/grid is cleaner.
   Defined ONCE here; per-section agents reference (never redefine) them. */

/* Vertical rhythm: a column of children with a consistent gap. */
.mo-stack {
  display: flex;
  flex-direction: column;
  gap: var(--mo-gap);
}

/* Horizontal group that wraps; items vertically centred (button rows, chips). */
.mo-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mo-gap);
}

/* Push two groups apart (title left / actions right); wraps on small screens. */
.mo-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mo-gap);
  flex-wrap: wrap;
}

/* An item that greedily fills the free space in a flex row (e.g. a search box).
   min-width:0 lets it shrink below its content size instead of overflowing. */
.mo-fill {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- CSS Grid helpers ---------------------------------------------------- */
.mo-grid {
  display: grid;
  gap: var(--mo-gap);
}

/* Auto-fitting card grid: as many 240px+ columns as fit, each flexing to 1fr. */
.mo-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Fixed column counts, responsive. Mobile (<=600px): always a single column. */
.mo-grid--2,
.mo-grid--3,
.mo-grid--4 {
  grid-template-columns: 1fr;
}

/* Tablet (601–992px): 2-up. */
@media (min-width: 601px) {
  .mo-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .mo-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .mo-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop (>=993px): 3-up and 4-up open out fully. */
@media (min-width: 993px) {
  .mo-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .mo-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Gap size modifiers (compose with any stack/cluster/grid) ------------- */
.mo-gap-sm { gap: var(--mo-gap-sm); }
.mo-gap-lg { gap: var(--mo-gap-lg); }

/* ==========================================================================
   Navbar — light flex treatment of Materialize's .nav-wrapper.
   ==========================================================================
   Materialize positions .brand-logo absolutely and floats ul.right. We turn
   the wrapper into a flex bar on desktop so the brand sits at the start and
   the actions push to the end (no floats). The mobile layout — centred logo
   + hamburger — is restored below the breakpoint so nothing regresses.
   .brand-logo / .button-collapse / .dropdown-button / ul.right are untouched
   structurally; only their box positioning is reflowed. */
@media (min-width: 993px) {
  nav .nav-wrapper {
    display: flex;
    align-items: center;
  }
  nav .nav-wrapper > .brand-logo {
    position: static;
    transform: none;
    flex: 0 0 auto;
  }
  /* Push the primary action list (Map / Setup / user / logout) to the end. */
  nav .nav-wrapper > ul.right {
    margin-left: auto;
    float: none;
  }
}
/* At/below the tablet breakpoint Materialize's own rules (centred brand,
   visible .button-collapse, hidden ul.right) remain in force — we add nothing. */