/* Semantic layout components (CSP-safe).
   These classes reduce noise from repetitive utility combinations in Razor markup.
   Keep these focused on layout; visual styling stays in existing CSS.
*/

/* Toolbar/header row (typically: title on the left, actions on the right). */
.ow-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Align items to the bottom edge (useful when the right side contains form-controls). */
.ow-toolbar--end {
  align-items: flex-end;
}

.ow-toolbar--gap10 { gap: 10px; }
.ow-toolbar--gap8 { gap: 8px; }
.ow-toolbar--gap6 { gap: 6px; }

/* Filter form row. */
.ow-filterRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.ow-filterRow--gap12 { gap: 12px; }
.ow-filterRow--center { align-items: center; }

/* Row of actions/buttons aligned to the right. */
.ow-actionsRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.ow-actionsRow--gap12 { gap: 12px; }

/* Simple flex flow row with wrapping (no forced alignment). */
.ow-flowRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ow-flowRow--gap12 { gap: 12px; }
.ow-flowRow--gap8 { gap: 8px; }
.ow-flowRow--gap6 { gap: 6px; }

/* Compact inline row (no wrapping by default). */
.ow-inlineRow {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ow-inlineRow--wrap { flex-wrap: wrap; }
.ow-inlineRow--gap12 { gap: 12px; }
.ow-inlineRow--gap8 { gap: 8px; }
.ow-inlineRow--gap6 { gap: 6px; }

/* ------------------------------
   Semantic blocks for cards, lists and forms
   ------------------------------ */

/* Card header (typically inside .ow-card): title/summary on the left, actions on the right. */
.ow-cardHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.ow-cardHeader--center { align-items: center; }
.ow-cardHeader--gap10 { gap: 10px; }
.ow-cardHeader--gap8 { gap: 8px; }
.ow-cardHeader--gap6 { gap: 6px; }

.ow-cardHeader__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

/* List header/footer (pagination and meta around tables). */
.ow-listHeader {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

.ow-listFooter {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

.ow-listHeader__actions,
.ow-listFooter__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Form grid: replaces frequent ow-u-d-grid/ow-u-gtc*/
.ow-formGrid {
  display: grid;
  gap: 12px;
}

.ow-formGrid--gap10 { gap: 10px; }
.ow-formGrid--gap14 { gap: 14px; }

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

.ow-formGrid--2-220 { grid-template-columns: minmax(0, 1fr) 220px; }