/* The page header every module can use: what the page is, in one line, with
   its actions beside it. Palette tokens only, so a custom palette and dark
   mode reach it.

   <header class="pg-head">
     <span class="pg-head-icon pg-tone-info"><i class="mdi mdi-..."></i></span>
     <div class="pg-head-text"><h4>Title</h4><p>What it is for.</p></div>
     <div class="pg-head-actions">buttons</div>
   </header>                                                              */
.pg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  background: var(--bs-paper-bg, var(--bs-body-bg));
}
.pg-head-icon {
  flex: 0 0 auto;
  align-self: flex-start;   /* beside the title, however tall the text below it grows */
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .75rem;
  font-size: 1.5rem;
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .12);
}
.pg-tone-info { color: var(--bs-info); background: rgba(var(--bs-info-rgb), .13); }
.pg-tone-success { color: var(--bs-success); background: rgba(var(--bs-success-rgb), .13); }
.pg-tone-warning { color: var(--bs-warning); background: rgba(var(--bs-warning-rgb), .15); }
.pg-tone-danger { color: var(--bs-danger); background: rgba(var(--bs-danger-rgb), .12); }
.pg-head-text { flex: 1 1 20rem; min-width: 0; }
.pg-head-text h4 { margin: 0 0 .2rem; font-weight: 600; color: var(--bs-heading-color); }
/* a status badge beside the title is a label, not part of the heading's size */
.pg-head-text h4 .badge { font-size: .75rem; font-weight: 500; vertical-align: middle; }
.pg-head-text p { margin: 0; max-width: 56rem; font-size: .875rem; color: var(--bs-secondary-color); }
.pg-head-text p.pg-head-meta { margin-top: .45rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .85rem; }
.pg-head-meta .badge { font-weight: 500; text-transform: none; }
.pg-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* A page with many tools (a manuscript: read, export, share, redevelop...)
   lays them in a strip along the header's bottom edge instead of crowding
   the title or the breadcrumb.
     <header class="pg-head"> icon, text, <div class="pg-head-tools">buttons</div> */
.pg-head-tools {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  margin-top: -.15rem;
  padding-top: .65rem;
  border-top: 1px solid var(--bs-border-color);
}
.pg-head-tools .btn { white-space: nowrap; }
@media (max-width: 575.98px) {
  /* one row that scrolls sideways, not five rows of buttons; a dropdown in
     it needs data-bs-popper-config='{"strategy":"fixed"}' so its menu is not
     clipped by the scroll box. No mask-image fade here: a mask hides every
     descendant outside the strip, the open menu included. */
  .pg-head-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
                   margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
  .pg-head-tools::-webkit-scrollbar { display: none; }
  .pg-head-tools .btn { flex: 0 0 auto; }
}
@media (max-width: 575.98px) {
  .pg-head { padding: .9rem 1rem; }
  .pg-head-text p.pg-head-meta { margin-top: .45rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.pg-head-meta .badge { font-weight: 500; text-transform: none; }
.pg-head-actions { width: 100%; }
}

/* The breadcrumb sits the same distance above a page header on every page.
   Pages carried py-3 mb-2 or pt-3 pb-2 on their breadcrumb, so the gap
   under it differed from page to page (Teams sat lower than Routines). */
nav:has(+ .pg-head), nav:has(+ .pg-head-wrap), nav:has(+ .pb-pane-head),
nav:has(+ * > .pg-head:first-child) { padding-top: 1rem !important; padding-bottom: .5rem !important; margin-bottom: 0 !important; }
/* Only a header at the very top of the page (no breadcrumb above it) gets the
   breadcrumb's top gap; one that merely opens a wrapper below a breadcrumb
   must not add a second gap. */
.container-p-y > .pg-head:first-child,
.container-p-y > :first-child:not(nav) > .pg-head:first-child { margin-top: 1rem; }

/* A table that opens or closes a card keeps the card's rounded corners: the
   head row's background painted square over them (API clients, and every
   other card whose first child is a table). The wrapper already scrolls, so
   rounding it clips nothing that was not clipped before. */
.card > .table-responsive:first-child,
.card > .table:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.card > .table-responsive:last-child,
.card > .table:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }

/* A page whose content is a narrow column (a builder, a form) puts its
   header in the same column, so the header is not wider than the page. */
.pg-head-wrap { max-width: var(--pg-width, 100%); margin-left: auto; margin-right: auto; }

/* A page that wraps its content in its own `container-xxl container-p-y`
   sits inside the layout's, so it got the top gap and the side gutter twice:
   its breadcrumb started lower and its cards ran narrower than every other
   page. The layout already pads; the inner wrapper keeps its role as a hook
   (ids, data attributes) and gives up the second padding. */
.container-p-y .container-p-y {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.container-p-y .container-xxl.container-p-y,
.container-p-y .container-fluid.container-p-y {
  padding-left: 0;
  padding-right: 0;
}