/* burble-core.css / core-card.css: Card and panel.
   Linked by common/burble_core_css.php, in the order listed there. */

/* ── Card ────────────────────────────────────────────────────
   The content surface: a header strip with an optional tinted icon and a
   title, a padded body, and an optional footer.

     <div class="bc-card">
       <div class="bc-card-header">
         <div class="bc-card-header-left">
           <div class="bc-card-header-icon teal"><i class="fas fa-box"></i></div>
           <div class="bc-card-title">Hubspot</div>
         </div>
       </div>
       <div class="bc-card-body">…</div>
     </div>
*/
.bc-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-rest);
  overflow: hidden;
  max-width: 1400px;
  margin-bottom: 16px;
}

.bc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 12px;
  flex-wrap: wrap;
  gap: 12px;
}
/* The short bottom padding leads into the body below. A header with nothing
   visible after it (no body, table or footer, or only [hidden] ones) is the
   whole card, so it is padded evenly. */
.bc-card-header:not(
  :has(~ :is([class^="bc-"], [class*=" bc-"]):not([hidden]))
) {
  padding-bottom: 18px;
}

/* A header holding only actions, no title: they sit at the right, where
   they would be beside a title.
   Usage: <div class="bc-card-header bc-card-header--end"><button …></div> */
.bc-card-header--end {
  justify-content: flex-end;
}

.bc-card-body {
  padding: 32px 24px;
}
/* Under a header, whose own 12px bottom padding already opens the gap. */
.bc-card-header + .bc-card-body {
  padding-top: 18px;
}

/* Plain body copy only: :where() leaves the rule no specificity, so a
   paragraph with a class of its own (.bc-help, .bc-panel-text, …) keeps that
   class's size. */
:where(.bc-card-body p) {
  font-size: 13px;
}

.bc-card-body-sm {
  padding: 16px 12px;
}

/* A header's two groups: the title (with its icon, badge or picker) on the
   left, the buttons on the right. Both wrap rather than overflow on a phone;
   min-width: 0 lets the title group shrink to wrap at all. */
.bc-modal-header-left,
.bc-card-header-left,
.bc-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.bc-modal-header-left,
.bc-card-header-left {
  min-width: 0;
}
.bc-card-actions {
  flex-shrink: 0;
}

.bc-modal-header-icon,
.bc-card-header-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bc-modal-header-icon.blue,
.bc-card-header-icon.blue {
  background: var(--blue-bg);
  color: var(--blue);
}
.bc-modal-header-icon.teal,
.bc-card-header-icon.teal {
  background: var(--teal-bg);
  color: var(--teal-strong);
}
.bc-modal-header-icon.purple,
.bc-card-header-icon.purple {
  background: var(--purple-bg);
  color: var(--purple);
}
.bc-modal-header-icon.orange,
.bc-card-header-icon.orange {
  background: var(--warn-bg);
  color: var(--warn-strong);
}
.bc-modal-header-icon.green,
.bc-card-header-icon.green {
  background: var(--success-bg);
  color: var(--success);
}
/* The set had no red; warning dialogs need one. */
.bc-modal-header-icon.danger,
.bc-card-header-icon.danger {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Grid and table cards: the table draws its own edges, so the body keeps
   only a slim 10px inset. */
.bc-card-body--flush {
  padding: 10px;
}
/* Under a header, the table would sit hard against the header's bottom
   edge; a top gap separates them. The sides stay flush. */
.bc-card-header + .bc-card-body--flush {
  padding: 18px 10px;
}

/* A card's title, in its header or its body (a link tile), and the line
   under it. */
.bc-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.bc-modal-header-subtitle,
.bc-card-subtitle {
  font-size: 12.5px;
  color: var(--text-soft);
  margin: 2px 0 0;
}

.bc-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 24px;
  border-top: 1px solid var(--border-color);
}

/* --overflow-visible lets a dropdown (Manage Users' Chosen) escape the card.
   --clip (the Manage Products grids) keeps the rounded corners without
   making the card a scroll container, as hidden would. */
.bc-card--overflow-visible {
  overflow: visible;
}
.bc-card--clip {
  overflow: clip;
}
/* Past the 1400px cap, for a wide grid that scrolls sideways (Manage
   Products). */
.bc-card--full {
  max-width: 100%;
}
/* A smaller card: tighter corners and 16px of padding in every part, for a
   stack of short cards in a narrow column (the customer portal). */
.bc-card--compact {
  border-radius: 12px;
}
.bc-card--compact > .bc-card-header,
.bc-card--compact > .bc-card-body,
.bc-card--compact > .bc-card-footer {
  padding: 16px;
}

/* Its body centred, icon over label, for an icon-and-name tile (the
   customer portal's menus). An unavailable tile is a <div> with .is-muted,
   aria-disabled="true" and no --lift. */
.bc-card--center > .bc-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* A card that answers the pointer: it rises 2px, its border turns teal and
   its shadow deepens. Either the whole card is an <a> (a Settings tile; a
   .bc-card-arrow in it sits top right and nudges on hover), or it is a
   plain card holding its own links (a release in Release History), since
   links do not nest.
     <a href="…" class="bc-card bc-card--lift">
       <div class="bc-card-body">…</div>
       <i class="fas fa-chevron-right bc-card-arrow" aria-hidden="true"></i>
     </a> */
.bc-card--lift {
  position: relative;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.bc-card--lift:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
/* Outranks the base a / a:hover (teal, underlined on hover) and the base
   a:has(> i) inline-flex, which the arrow would otherwise trigger. */
a.bc-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.bc-card:hover {
  color: inherit;
  text-decoration: none;
}
.bc-card-arrow {
  position: absolute;
  top: 20px;
  right: 18px;
  color: var(--sl-300);
  transition:
    color 0.15s,
    transform 0.15s;
}
.bc-card--lift:hover .bc-card-arrow {
  color: var(--teal);
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .bc-card--lift:hover,
  .bc-card--lift:hover .bc-card-arrow {
    transform: none;
  }
}
/* In a grid the grid's gap does the spacing, not the card's margin. */
:is(.bc-grid, .bc-grid-2, .bc-grid-3, .bc-grid-4, .bc-grid-auto, .bc-grid-fill)
  > .bc-card {
  margin-bottom: 0;
}

/* A rule between two parts of a card body. */
.bc-divider {
  height: 1px;
  margin: 24px 0;
  border: 0;
  background: var(--sl-200);
}
/* Upright, between items in a row: the height of a control, no margin (the
   row's gap spaces it). */
.bc-divider--vertical {
  flex-shrink: 0;
  width: 1px;
  height: 22px;
  margin: 0;
  background: var(--sep-color);
}

/* ── Panel ───────────────────────────────────────────────────────
   A titled, boxed block inside a card, such as one tile of a settings grid.
   Not a nested .bc-card (a second shadowed surface) nor a .bc-section (an
   unboxed band). The header is a .bc-feature-icon--xs and a .bc-panel-title;
   wrap title and .bc-panel-subtitle in a <div> to stack them.

     <div class="bc-panel">
       <div class="bc-panel-header">
         <div class="bc-feature-icon bc-feature-icon--xs bc-feature-icon--teal">…</div>
         <div class="bc-panel-title">Waiver — Tandem Jumper</div>
       </div>
       …fields…
     </div>                                                           */
/* The colours come from custom properties so a tint can re-point them in one
   place, and the title and text inside follow the tint. */
.bc-panel {
  padding: 20px;
  background: var(--ba-panel-bg, var(--bg-light));
  border: 1.5px solid var(--ba-panel-border, var(--border-color));
  border-radius: 12px;
}
.bc-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
/* Nothing under it (a header-only panel, or content rendered conditionally):
   the gap would only pad the bottom of the box. */
.bc-panel-header:last-child {
  margin-bottom: 0;
}
/* Title block on the left, an action pushed to the right. */
.bc-panel-header--split {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.bc-panel-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ba-panel-title, var(--text));
}
.bc-panel-subtitle {
  font-size: 12px;
  color: var(--ba-panel-text, var(--sl-500));
  margin-top: 2px;
}
/* Running text in a panel. */
/* break-word: a long unbroken value (a URL, an id) wraps instead of running
   out of the panel; ordinary words are untouched. */
.bc-panel-text {
  margin: 0;
  font-size: 13px;
  color: var(--ba-panel-text, var(--text-strong));
  overflow-wrap: break-word;
}
.bc-panel-text + .bc-panel-text {
  margin-top: 8px;
}
.bc-panel-text--danger {
  color: var(--danger);
}
/* One line of text with an inline control (a "get cost" button) beside it. */
.bc-panel-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--ba-panel-text, var(--text-strong));
}
/* Declared after the base rule, which sets its own colour. */
.bc-panel-line--success {
  color: var(--success);
}
.bc-panel-line + .bc-panel-line,
.bc-panel-line + .bc-help,
.bc-panel-text + .bc-help {
  margin-top: 8px;
}
/* A second part of the panel, spaced off the first. */
.bc-panel-section {
  margin-top: 14px;
  padding-top: 14px;
}
/* The panel's button, under the text. */
.bc-panel-actions {
  margin-top: 16px;
}
/* A one-line panel: header on the left, its action on the right, wrapping
   under it when there is no room. The header then carries no gap below. */
.bc-panel--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
}
.bc-panel--row > .bc-panel-header {
  margin-bottom: 0;
}
.bc-panel--row > .bc-panel-text {
  flex: 1;
  min-width: 240px;
}
/* A smaller box for a note: costs, fine print. */
.bc-panel--compact {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
}
/* Tints. Title in the family's colour, text a shade darker for reading. */
.bc-panel--info {
  --ba-panel-bg: var(--blue-bg);
  --ba-panel-border: var(--blue-light);
  --ba-panel-title: var(--blue-strong);
  --ba-panel-text: var(--blue-strong);
}
.bc-panel--success {
  --ba-panel-bg: var(--success-bg);
  --ba-panel-border: var(--success-border);
  --ba-panel-title: var(--success);
  --ba-panel-text: var(--success-strong);
}
/* Accents: a status stripe down the left edge (pending, approved, rejected).
   It leaves the tint alone, so it combines with a plain or tinted panel. */
.bc-panel--accent-info {
  border-left: 4px solid var(--info);
}
.bc-panel--accent-success {
  border-left: 4px solid var(--success);
}
.bc-panel--accent-danger {
  border-left: 4px solid var(--danger);
}
/* The fields inside sit on the panel's tint, so they go white to stand off it;
   disabled and read-only ones keep core's grey. */
.bc-panel .bc-input:not(:disabled, [readonly]),
.bc-panel .bc-select:not(:disabled),
.bc-panel .bc-textarea:not(:disabled, [readonly]) {
  background-color: var(--white);
}

.bc-tab-pane {
  display: none;
}

/* Fill mode `backwards`, not `both`: `both` kept the last keyframe's
   transform: translateY(0) after the animation ended, and any transform makes
   the pane the containing block for position: fixed descendants — a dragged
   row's copy (Advertising → Calendars), a dropdown — so they scrolled with the
   page instead of staying put. Same fix as Release History's cards. */
.bc-tab-pane.active {
  display: block;
  animation: ba-tab-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
/* A tab's count is a .bc-count (core-tables.css). */

/* min-width lets the description ellipsis actually clip inside the flex row. */
.bc-text-wrapper {
  min-width: 0;
  flex: 1;
}

@keyframes ba-tab-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Menu card ────────────────────────────────────────────────
   A link to somewhere else in the app, as one row: a small .bc-feature-icon,
   the name over a line of copy, and a chevron that says where it goes. The
   dashboard's module cards and the Settings page's tiles. It fills whatever
   cell it is given; the dashboard pins it to 320px in its own row.

     <a class="menu-card" href="…">
       <div class="bc-feature-icon bc-feature-icon--sm bc-feature-icon--teal"><i …></i></div>
       <div class="bc-text-wrapper">
         <div class="menu-card-title">Bookings</div>
         <div class="menu-card-desc">Manage reservations and configure calendars</div>
       </div>
       <i class="fas fa-chevron-right menu-card-chevron" aria-hidden="true"></i>
     </a>

   Moved here from the dashboard's menu_redesign.css (where it was .mod-card)
   so Settings could use it. As a <button>, add .menu-card-button.

   Colours: teal by default; a modifier sets the accent (top rule) and its
   strong shade (hover rule, title, hovered chevron). Pair it with the
   matching .bc-feature-icon tint:
     --blue  --purple  --plum  --success  --amber  --rose
   The dashboard gives each group of cards its own. */
.menu-card {
  --menu-card-accent: var(--teal);
  --menu-card-accent-strong: var(--teal-strong);
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100px;
  padding: 0 14px;
  position: relative;
  overflow: hidden;
  background-color: var(--white);
  border-radius: var(--radius);
  border: 2px solid var(--menu-card-accent);
  border-width: 2px 0 0 0;
  box-shadow: var(--shadow-rest);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.2s;
}
/* Undoes the UA button styling only; the surface is .menu-card's. */
.menu-card-button {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
}
.menu-card:hover {
  border-color: var(--menu-card-accent-strong);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}
.menu-card .bc-feature-icon {
  transition: background 0.18s;
}
.menu-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--menu-card-accent-strong);
  line-height: 1.25;
  margin-bottom: 0.25rem;
}
.menu-card-desc {
  margin-top: 1px;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.4;
}
.menu-card-chevron {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-label);
  transition:
    transform 0.18s,
    color 0.18s;
}
.menu-card:hover .menu-card-chevron {
  color: var(--menu-card-accent-strong);
  transform: translateX(2px);
}
/* A card for something the plan does not include. "Locked" is a state and has
   to look like one, so its icon is not the accent. */
.menu-card.muted {
  border-top-color: var(--text-label);
}
.menu-card.muted .bc-feature-icon {
  background: var(--surface-sunken);
}
.menu-card.muted .bc-feature-icon i,
.menu-card.muted .bc-feature-icon svg {
  color: var(--text-label);
}
/* Colour variations (see the head of this section). */
.menu-card--blue {
  --menu-card-accent: var(--blue);
  --menu-card-accent-strong: var(--blue-strong);
}
.menu-card--rose {
  --menu-card-accent: var(--rose);
  --menu-card-accent-strong: var(--rose-strong);
}

/* ── Menu card grid ──────────────────────────────────────────
   Groups of menu cards, each a label over a wrapping row of fixed-width cards;
   the groups wrap too. The dashboard and Settings.

     <div class="cards-grid">
       <div>
         <div class="section-label">Bookings</div>
         <div class="menu-card-container">
           <a class="menu-card" …>…</a> …
         </div>
       </div> …
     </div>

   Its width is as many whole card columns as the page fits — n cards plus
   (n − 1) gaps, i.e. the page width plus one gap rounded down to a multiple of
   card + gap, less that gap — so a wider screen gets more cards per row, and
   the auto margins centre the columns; never under one card. The card width
   and gap are set once here (--mc-width, --mc-gap) and used by the cards and
   their rows too, so changing either keeps the sum right. Three cards is the
   fallback where round() is not supported.

   .section-label is scoped to the grid: the customer portal has a
   .section-label of its own (me_redesign.css). */
.cards-grid {
  --mc-width: 320px;
  --mc-gap: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mc-gap);
  max-width: calc(3 * var(--mc-width) + 2 * var(--mc-gap));
  max-width: max(
    calc(
      round(down, 100% + var(--mc-gap), var(--mc-width) + var(--mc-gap)) -
        var(--mc-gap)
    ),
    var(--mc-width)
  );
  margin-inline: auto;
}
.cards-grid .section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-label);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cards-grid .section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d6d7d9;
}
.menu-card-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mc-gap);
  margin-top: 10px;
  margin-bottom: 20px;
}
.menu-card-container > .menu-card {
  width: var(--mc-width);
}
.menu-card--purple {
  --menu-card-accent: var(--purple);
  --menu-card-accent-strong: var(--purple-strong);
}
.menu-card--plum {
  --menu-card-accent: var(--plum);
  --menu-card-accent-strong: var(--plum-strong);
}
.menu-card--success {
  --menu-card-accent: var(--success-light);
  --menu-card-accent-strong: var(--success);
}
.menu-card--amber {
  --menu-card-accent: var(--warn);
  --menu-card-accent-strong: var(--warn-strong);
}