/* core-layout.css: layout grid, gap scale, row, stack, spanning, page wrapper,
   page header, breadcrumb, sections. Linked by common/burble_core_css.php. */

/* ── Layout grid ──────────────────────────────────────────────
   One set of grid primitives for every admin page, replacing the
   per-view grid copies.

   Two breakpoints, the same on every page:
     1100px  a 3- or 4-column grid drops to 2
      768px  every fixed-column grid drops to 1

   Gap is a five-step scale; the default is 20px:
     .bc-grid--2xs   8px   label / control rows
     .bc-grid--xs   12px   dense card tiles
     .bc-grid--sm   16px
     (default)      20px
     .bc-grid--lg   28px   two-column forms

   In a form grid the rows are spaced by the form group's own
   margin-bottom, not by the grid. Add .bc-grid--gap-x so the two
   do not stack into a double gap.

   Usage:
     <div class="bc-grid-2">                            two columns
     <div class="bc-grid-2 bc-grid--lg bc-grid--gap-x"> a form pair
     <div class="bc-grid-3 bc-grid--sm">                card tiles
     <div class="bc-grid-auto">                         as many as fit
     <div class="bc-form-group bc-col-span-2">          full-width field

   The modifiers set `gap` directly rather than through a custom
   property, so a nested grid never inherits its parent's spacing. */
.bc-grid,
.bc-grid-2,
.bc-grid-3,
.bc-grid-4,
.bc-grid-auto,
.bc-grid-fill {
  display: grid;
  gap: 20px;
}
/* minmax(0, …) rather than 1fr: a long unbroken string in a cell
   cannot then push the column past its share. */
.bc-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bc-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bc-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* .bc-grid on its own is a single column — useful where a block
   wants the grid's gap but not its columns. */

/* Intrinsic: as many columns as fit at --ba-grid-min. Override it
   inline (style="--ba-grid-min:260px") where a page needs wider
   cells; the per-class default below stops that value inheriting
   into a nested grid. .bc-grid-auto stretches the last row to fill,
   .bc-grid-fill leaves the empty tracks standing so a lone item
   keeps its natural width. */
.bc-grid-auto,
.bc-grid-fill {
  --ba-grid-min: 220px;
}
.bc-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(var(--ba-grid-min), 1fr));
}
.bc-grid-fill {
  grid-template-columns: repeat(auto-fill, minmax(var(--ba-grid-min), 1fr));
}

/* ── Gap scale ── */
.bc-grid--2xs {
  gap: 8px;
}
.bc-grid--xs {
  gap: 12px;
}
.bc-grid--sm {
  gap: 16px;
}
.bc-grid--lg {
  gap: 28px;
}
.bc-grid--xl {
  gap: 60px;
}
/* Column gap only; the children carry the row rhythm. Declared
   after the scale so it wins whichever step is in play. */
.bc-grid--gap-x {
  row-gap: 0;
}
/* A column of rows that would otherwise run the full card width. */
.bc-grid--narrow {
  max-width: 720px;
}

/* A row of items lined up on their centre line, 10px apart: an icon and its
   text, a field and its button. It does not wrap unless it is .bc-row--wrap. */
.bc-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* display:flex outranks the browser's own [hidden] rule, so a hidden row
   would otherwise stay on screen. */
.bc-row[hidden] {
  display: none;
}
/* ── Stack ────────────────────────────────────────────────────
   Blocks one above another, 16px apart with none outside — for the loose
   pieces of a card that are not form groups. --lg for 24px. */
.bc-stack > * + * {
  margin-top: 16px;
}
.bc-stack--lg > * + * {
  margin-top: 24px;
}

/* A row or block shown but switched off — a hidden field in a field list. */
.is-muted {
  opacity: 0.55;
}

/* Lets the items drop to a new line instead of running out of their box. */
.bc-row--wrap {
  flex-wrap: wrap;
}
/* The first item at the start, the last at the end, any others spread
   evenly between — a label and its action, a title and its badge. */
.bc-row--between {
  justify-content: space-between;
}
/* One item centred on the row, the last at the end — a stepper with its Next
   button. An empty first column keeps the centre centred whatever the
   button's width. Below 640px they stack. */
.bc-row--center-end {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* In a flex parent (a card header) it would shrink to its content and the
     centre would no longer be the parent's centre. */
  flex: 1 1 auto;
}
.bc-row--center-end::before {
  content: "";
}
.bc-row--center-end > :last-child {
  justify-self: end;
}
@media (max-width: 640px) {
  .bc-row--center-end {
    grid-template-columns: 1fr;
  }
  .bc-row--center-end::before {
    display: none;
  }
}

/* ── Spanning ── */
/* In the grid's last column, whatever the column count: a search at the right
   of a .bc-grid-2. On a phone, where the grid is one column, that column. */
.bc-col-end {
  grid-column: -2 / -1;
}
.bc-col-span-2 {
  grid-column: span 2;
}
.bc-col-span-3 {
  grid-column: span 3;
}
.bc-col-span-full {
  grid-column: 1 / -1;
}

@media (max-width: 1100px) {
  .bc-grid-3,
  .bc-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .bc-grid-2,
  .bc-grid-3,
  .bc-grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
  /* There is nothing left to span across. */
  .bc-col-span-2 {
    grid-column: span 1;
  }
}

/* ── Page header ─────────────────────────────────────────────
   Breadcrumb, back button and title block used on every admin page.
   Rendered by the components in views/common/burble-admin/components/
   (breadcrumb.php, page_header.php). */
.bc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.bc-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sl-500);
  text-decoration: none;
  transition: color 0.15s;
}
.bc-breadcrumb-item:hover {
  color: var(--teal);
  text-decoration: none;
}
.bc-breadcrumb-item.current {
  color: var(--sl-700);
  font-weight: 600;
  cursor: default;
}
/* Separator — the character between two things on a line: a breadcrumb
   chevron, the pipe between View and Remove. Colour only, so it takes the
   size and spacing of its row. A 1px hairline between controls is not text
   and uses --sep-color as a background instead. */
.bc-sep {
  color: var(--sep-color);
}
.bc-breadcrumb .bc-sep {
  display: flex;
  align-items: center;
  font-size: 11px;
  margin-bottom: 2px;
}

/* The page wrapper every admin page uses: left-aligned, no width cap unless
   a --narrow modifier is added. */
.bc-page {
  margin-left: 0;
  margin-right: auto;
}
/* A page of one form, which would otherwise stretch its fields across a wide
   screen. Usage: <div class="bc-page bc-page--narrow"> */
.bc-page--narrow {
  max-width: 1080px;
}

.bc-page--x-narrow {
  max-width: 800px;
}

/* On a phone the content area has no gutter of its own, so the page would sit
   flush against both edges. */
@media (max-width: 640px) {
  .bc-page {
    padding: 16px;
  }
}

.bc-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.bc-back-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-color);
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  text-decoration: none;
  flex-shrink: 0;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.bc-back-btn:hover {
  border-color: var(--teal);
  background: var(--teal-bg);
  text-decoration: none;
  color: var(--teal-strong);
}
.bc-page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.bc-page-subtitle {
  font-size: 12px;
  color: var(--text-soft);
  margin: 2px 0 0 0;
}
/* The page header's actions (Save, Duplicate, …) are a .bc-push-end. The header
   itself does not wrap, so the buttons wrap inside their group instead. */
.bc-page-header > .bc-push-end {
  flex-wrap: wrap;
}

/* ── Push to end ──────────────────────────────────────────────
   A group of controls pushed to the right-hand end of a flex row (a table
   toolbar, a modal footer): its auto margin takes the free space. It stays
   on one line, so the row wraps it down as a group; on a phone it may wrap.
     <div class="bc-modal-footer">
       <button …>Add</button>
       <div class="bc-push-end"><button …>Cancel</button><button …>Save</button></div>
     </div> */
.bc-push-end {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin-left: auto;
}
@media (max-width: 640px) {
  .bc-push-end {
    margin-left: 0;
    flex-wrap: wrap;
  }
}

/* ── Section ──────────────────────────────────────────────────
   A block inside a .bc-card: its .bc-section-title plus whatever
   follows it, used instead of inline margins between sections.
   Sections are 30px apart; the first sits flush with the top of the
   card body and the last with the bottom. No divider — the title
   carries its own bottom border. */
.bc-section {
  margin-bottom: 40px;
}

.bc-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
}

.bc-section:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ── Section title ────────────────────────────────────────────
   The small uppercase heading that opens a block inside a card. Not to be
   confused with .bc-card-title, the dark sentence-case heading that
   names a whole card. */
.bc-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sl-400);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}
/* At the title's 11px a tooltip mark is too small to find or hit; it takes
   the size of one beside a field label, and a little more. */
.bc-section-title .bc-tooltip {
  font-size: 13px;
}