/* Top bar */
.bx .topbar {
  display: flex; align-items: center; gap: 14px;
  /* Wrap instead of overflowing: a portal topbar's action buttons ran past
     the viewport edge when the title + toolbar didn't fit on one line. */
  flex-wrap: wrap;
  padding: 12px 22px;
  border-bottom: 1px solid var(--bx-line);
  background: var(--bx-paper);
}

.bido-builder-titlebar,
.bido-checkout-titlebar {
  min-height: 52px;
  padding: 10px 32px;
  border-bottom: 1px solid var(--bx-line);
  background: var(--bx-paper);
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
}

.bido-builder-title-form {
  flex: 1 1 auto;
}

.bido-fit {
  min-height: 100svh;
  overflow-x: hidden;
}

.bido-fill {
  min-height: 100svh;
}

.bido-page-scroll {
  min-height: 100svh;
  overflow-x: hidden;
}

.bido-content-grid {
  display: grid;
  /* Side panel flexes between 20–24rem with the viewport instead of stepping
     through fixed 380px / 340px tiers (Rule 7). */
  grid-template-columns: minmax(0, 1fr) clamp(20rem, 26vw, 24rem);
  min-height: calc(100svh - 53px);
}

.bido-builder-titlebar + .bido-content-grid,
.bido-checkout-titlebar + .bido-content-grid {
  min-height: calc(100svh - 106px);
}

.bido-main-pad {
  padding: 24px 32px;
}

.bido-side-panel {
  border-left: 1px solid var(--bx-line);
  background: var(--bx-paper-2);
  padding: 24px;
}

.bido-table-card {
  overflow-x: auto !important;
  /* Query container so the dense tables below can reflow against the card's
     own width, not the viewport — a wide table in the dashboard's narrow aside
     clips at full desktop width, where no viewport breakpoint would fire. */
  container-type: inline-size;
}

/* Cap the table's floor at the card width with min(): it stays at the
   comfortable single-line width when the card is wide enough, and collapses to
   the card width when it isn't (e.g. a wide table dropped into the dashboard's
   narrow aside column). Paired with wrapping cells below, the table fits its
   card at any width instead of clipping columns past the right edge. */
.bido-table-card .tbl {
  min-width: min(640px, 100%);
}

/* Text cells wrap to give back the slack, so columns stay on screen rather
   than overflowing the card. Short tokens (ids, money, splits, action keys,
   emails) carry no spaces, so they never wrap regardless — no nowrap guard is
   needed, and adding one would only keep genuinely multi-word values (e.g. an
   audit diff) on one line and inflate the table's intrinsic width. */
.bido-table-card .tbl th,
.bido-table-card .tbl td {
  white-space: normal;
}

.bido-page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  /* Heading + actions wrap when the row runs out of room — no breakpoint. */
  flex-wrap: wrap;
  gap: 18px;
  padding: 6px 0 2px;
}

.bido-page-heading h1 {
  font-size: var(--bx-text-4xl);
  margin-top: 4px;
}

.bido-page-heading p {
  margin-top: 4px;
  font-size: var(--bx-text-md);
}

.bido-page-heading-compact {
  margin-bottom: 18px;
}

.bido-portal-shell {
  display: grid;
  grid-template-columns: var(--bido-portal-sidebar, 220px) 1fr;
}

.bido-portal-shell > aside {
  min-height: 0;
  overflow: auto;
}

/* Portal mobile bar — holds the hamburger that discloses the sidebar nav on
   narrow viewports. Hidden on desktop, where the sidebar is a permanent grid
   column; the trigger mirrors .bido-traveler-menu-trigger so the shared
   nav-menu controller can read its computed display on resize. */
.bido-portal-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bido-charcoal);
  border-bottom: 1px solid var(--bx-line);
}

.bido-portal-menu-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--bx-r-sm);
  color: inherit;
  cursor: pointer;
}

.bido-portal-menu-trigger:hover,
.bido-portal-menu-trigger[aria-expanded="true"] {
  border-color: var(--bx-line-2);
  background: rgba(var(--bx-white-rgb), 0.08);
}

.bido-tabs {
  display: flex;
  gap: 4px;
  margin: 18px 0 12px;
  border-bottom: 1px solid var(--bx-line);
  overflow-x: auto;
}

.bido-tabs .tab-link {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--bx-ink-3);
  font-size: var(--bx-text-md);
  font-weight: 600;
  white-space: nowrap;
}

.bido-tabs .tab-link.active {
  border-bottom-color: var(--bx-ink);
  color: var(--bx-ink);
}

.bido-tabs .tabs-summary {
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-size: var(--bx-text-sm);
  white-space: nowrap;
  padding-left: 12px;
}

.bido-topline,
.bido-topbar-actions,
.bido-title-row,
.bido-card-header,
.bido-affiliate-ref-box,
.bido-affiliate-link-row,
.bido-progress-header,
.bido-progress-scale,
.bido-person-row,
.bido-table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bido-topline {
  margin-left: 18px;
  gap: 10px;
  font-size: var(--bx-text-md);
  min-width: 0;
}

.bido-topline .title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.bido-title-form {
  flex: 1 1 360px;
  max-width: 680px;
}

.bido-title-input {
  appearance: none;
  min-width: 12rem;
  flex: 1 1 16rem;
  border: 1px solid transparent;
  border-radius: var(--bx-r);
  background: transparent;
  color: var(--bx-ink);
  font: inherit;
  font-weight: 700;
  padding: 5px 8px;
  outline: none;
}

.bido-title-input:hover,
.bido-title-input:focus {
  border-color: var(--bx-line-2);
  background: var(--bx-paper-2);
}

.bido-title-save {
  flex: 0 0 auto;
}

.bido-topbar-actions,
.bido-card-header .push,
.bido-progress-header .push {
  margin-left: auto;
}

.bido-topbar-title {
  font-size: var(--bx-text-xl);
  font-weight: 700;
}

.bido-topbar-meta {
  margin-left: 6px;
  font-size: var(--bx-text-sm);
}

.bido-topbar-transparent {
  background: transparent;
}

.bido-portal-shell.bido-admin-shell {
  --bido-portal-sidebar: 230px;
}

.bido-portal-shell > aside {
  display: flex;
  flex-direction: column;
  padding: 18px;
  background: var(--bido-charcoal);
  border-right: 1px solid var(--bx-line);
}

.bido-portal-shell > main {
  min-width: 0;
  overflow: auto;
}

.bido-portal-main-padded {
  padding: 20px 22px;
}
.bido-page-pad {
  padding: 0 22px 22px;
}

.bido-card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bx-line);
}

.bido-card-header .label {
  margin-left: 8px;
}

.bido-card-mini-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.bido-table-actions {
  justify-content: flex-end;
  gap: 4px;
  /* Let the action cluster wrap to a second line when the column runs out of
     room instead of forcing the row (and its card) to overflow sideways. */
  flex-wrap: wrap;
}

/* === Responsive — app shell ===
   Breakpoints are expressed in rem so they track the user's font size, and
   each one is keyed to where this layout actually fails, not a device class. */

/* Fixed-height app shell: only viable once the viewport is wide (and so
   typically tall) enough to hold pinned scroll containers. Below this the
   shell falls back to normal page scroll. */
@media (min-width: 64rem) {
  .bido-fit {
    height: 100svh;
    overflow: hidden;
  }
  .bido-content-grid {
    height: calc(100svh - 53px);
    min-height: 0;
  }
  .bido-builder-titlebar + .bido-content-grid,
  .bido-checkout-titlebar + .bido-content-grid {
    height: calc(100svh - 106px);
  }
  .bido-main-pad,
  .bido-side-panel {
    min-height: 0;
    overflow: auto;
  }
}

/* The content grid stacks once the main column + side rail can no longer
   sit side by side. */
@media (max-width: 64rem) {
  .bido-content-grid {
    grid-template-columns: 1fr;
  }
  .bido-side-panel {
    border-left: 0;
    border-top: 1px solid var(--bx-line);
  }
}

/* Narrow viewports — collapse the portal shell, tighten edge padding. */
@media (max-width: 48rem) {
  .bido-portal-shell {
    grid-template-columns: 1fr;
    /* The shell is a full-height grid (.bido-fit min-height: 100svh). Without
       explicit rows, the default stretch align-content splits that height
       across the in-flow rows, ballooning the ~29px portal bar to a third of
       the viewport. Pin the bar to its content height and let main take the
       rest. */
    grid-template-rows: auto 1fr;
  }
  /* The sidebar collapses behind the .bido-portal-bar hamburger and is
     revealed as an in-flow disclosure only when nav-menu opens it. */
  .bido-portal-bar {
    display: flex;
  }
  .bido-portal-menu-trigger {
    display: inline-flex;
  }
  .bido-portal-shell > aside {
    display: none;
    border-right: 0;
    border-bottom: 1px solid var(--bx-line);
  }
  .bido-portal-shell[data-menu-open="true"] > aside {
    display: flex;
  }
  .bido-portal-aside-logo {
    display: none;
  }
  .bido-portal-shell > main {
    overflow: visible;
  }
  .bido-fit {
    overflow: visible;
  }
  .bido-main-pad,
  .bido-side-panel,
  .bido-portal-main-padded,
  .bido-page-pad {
    padding-left: 16px;
    padding-right: 16px;
  }
  .bido-builder-titlebar,
  .bido-checkout-titlebar {
    flex-wrap: wrap;
    padding-left: 16px;
    padding-right: 16px;
  }
  .bx .topbar {
    flex-wrap: wrap;
  }
  .bido-topline,
  .bido-topbar-actions,
  .bido-title-row,
  .bido-progress-header {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
  }
  .bido-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .bido-tabs > * {
    flex: 0 0 auto;
  }
  .bido-tabs .tabs-summary {
    margin-left: 0;
    padding: 8px 14px;
  }
}

/* Narrow cards — the dense wide/xwide tables (6–8 columns) can't fit by
   wrapping alone once their card drops below ~50rem, so reflow them into one
   stacked card per row. Every column then stays on screen and reachable
   instead of clipping past the card's edge. Keyed to the card (container
   query), not the viewport, so a wide table reflows wherever its card is
   narrow — including the dashboard's aside at full desktop width, where no
   viewport breakpoint would fire. 50rem clears the widest table's intrinsic
   width (~44rem for bookings, once the audit diff/text cells are allowed to
   wrap) with margin, so above the threshold every table fits and below it
   stacks — no clipping band in between. Mirrors the participant-table reflow
   in products/checkout.css; these admin/vendor rows carry no data-label, so
   cells stack as plain lines. The td rules carry a `.bx` anchor to outrank the
   shared `.bx .tbl tbody td` cell padding. */
@container (max-width: 50rem) {
  .bx .bido-table-wide .tbl,
  .bx .bido-table-xwide .tbl {
    display: block;
  }
  .bx .bido-table-wide .tbl thead,
  .bx .bido-table-xwide .tbl thead {
    display: none;
  }
  .bx .bido-table-wide .tbl tbody,
  .bx .bido-table-xwide .tbl tbody {
    display: grid;
    gap: 10px;
    padding: 12px;
  }
  .bx .bido-table-wide .tbl tr,
  .bx .bido-table-xwide .tbl tr {
    display: grid;
    gap: 4px 12px;
    padding: 12px 14px;
    border: 1px solid var(--bx-line);
    border-radius: var(--bx-r);
    background: var(--bx-paper-2);
  }
  .bx .bido-table-wide .tbl tbody td,
  .bx .bido-table-xwide .tbl tbody td {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
    border: 0;
    white-space: normal;
  }
  /* Cells that carry a data-label keep their column meaning when the row
     collapses to a stacked card — "GMV $9,000" instead of a bare number. */
  .bx .bido-table-wide .tbl tbody td[data-label]::before,
  .bx .bido-table-xwide .tbl tbody td[data-label]::before {
    content: attr(data-label);
    font-family: var(--bx-font-mono);
    font-size: var(--bx-text-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bx-ink-3);
  }
  /* Numeric/action cells read left-aligned once the row is a stacked card. */
  .bx .bido-table-wide .tbl tbody td.col-right,
  .bx .bido-table-xwide .tbl tbody td.col-right,
  .bx .bido-table-wide .tbl tbody td.bido-table-actions,
  .bx .bido-table-xwide .tbl tbody td.bido-table-actions {
    justify-content: flex-start;
  }
}

/* Touch — grow the builder tab hit area on a coarse pointer (Rule 7). */
@media (pointer: coarse) {
  .bido-tabs .tab-link {
    padding-block: 13px;
  }
}