/* brevily console — the app's OWN additions on top of the design's
   files. Everything in assets/{brevily,site,console}.css is copied
   verbatim from design/demo and must never be hand-edited here: a rule
   that belongs to the design goes into the design and comes back on the
   next export. This file is for what only the app knows. Keep it small. */

/* An action that is a one-button form sits inline like the design's buttons. */
.brv-c-inline-form {
  display: inline;
}
.brv-c-inline-form + .brv-c-inline-form {
  margin-left: var(--space-2);
}

/* The two-factor QR: a fixed box the SVG scales into. */
.brv-c-qr {
  width: 200px;
  height: 200px;
  margin-bottom: var(--space-4);
}
.brv-c-qr svg {
  width: 100%;
  height: 100%;
}

/* A table footer: the count on the left, the page links on the right. */
.data-table__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Toolbar filters (the design sizes its comboboxes this way; the kit's
   selects need the same so they sit on one line with the search). */
.brv-c-toolbar__filter {
  flex: 0 1 12rem;
  min-width: 10rem;
}
.brv-c-toolbar__filter .select {
  width: 100%;
  margin-inline: 0;
}
.brv-c-toolbar .brv-c-toolbar__search {
  flex: 1 1 12rem;
}

/* The two-factor confirm step, centred as the design's verify page is. */
.brv-c-otp-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}
.brv-c-otp-centre .otp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.brv-c-otp-centre .form-actions {
  justify-content: center;
}

/* A table marked `data-density="compact"` (e.g. Integrations' deliveries): tighter cells. */
[data-density='compact'] .data-table__table th,
[data-density='compact'] .data-table__table td {
  padding-block: var(--space-1);
}

/* The permission editor: a card per module, a switch per permission. */
.brv-c-permissions {
  display: grid;
  gap: var(--space-3);
}
.brv-c-permissions__rows {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-2);
}
.brv-c-permissions .switch {
  display: flex;
  align-items: flex-start;
}

/* A filter bar inside the table region: the region's own padding applies. */
.data-table__toolbar .brv-c-toolbar {
  flex: 1 1 auto;
  padding: 0;
  border: 0;
}

/* ── Review 2026-09-26 ─────────────────────────────────────────────── */
/* A remote-searching Combobox reads as a dropdown, not a command palette. */
.combobox__hints { display: none; }
/* The list toolbar: the organisation switch gets room, the search less. */
.data-table__toolbar .brv-c-toolbar__org { flex: 0 0 300px; min-width: 240px; }
.data-table__toolbar .brv-c-toolbar__org .combobox { width: 100%; }
.data-table__toolbar .brv-c-toolbar__search { flex: 0 1 300px; min-width: 200px; }
/* The permission grid: module | its switches side by side | the mask. */
.brv-c-perm { display: grid; gap: var(--space-2); }
.brv-c-perm__row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 3fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.brv-c-perm__module { display: grid; gap: 2px; min-width: 0; }
.brv-c-perm__label { font-weight: 600; }
.brv-c-perm__desc { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.brv-c-perm__bits { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); min-width: 0; }
.brv-c-perm__bits .switch { margin: 0; }
.brv-c-perm__mask { justify-self: end; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
  .brv-c-perm__row { grid-template-columns: 1fr auto; }
  .brv-c-perm__bits { grid-column: 1 / -1; }
}
.brv-c-confirm__text { margin: 0; }
/* A segmented filter sizes to its options; the select filters keep their width. */
.data-table__toolbar .brv-c-toolbar__filter:has(.segmented) { flex: 0 0 auto; width: auto; min-width: 0; }
/* A message template's preview: the HTML part framed from its own route. */
.brv-c-preview { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.brv-c-preview__subject { margin: 0; }
.brv-c-mail-preview { width: 100%; height: 640px; border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-md); background: #fff; }
.brv-c-preview__text { white-space: pre-wrap; font-size: var(--font-size-sm); padding: var(--space-3); border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-md); max-height: 320px; overflow: auto; }
/* The toolbar's dropdowns (organisation switch, filters) open above the table header. */
.data-table__toolbar { position: relative; z-index: 5; }
/* The permission editor's "What each switch does" disclosure. */
.brv-c-perm__more { margin-top: var(--space-1); font-size: var(--font-size-sm); }
.brv-c-perm__more > summary { cursor: pointer; color: var(--color-text-muted); }
.brv-c-perm__more > dl { margin: var(--space-2) 0 0; }

/* A page header's filter form (Analytics: range, domain) lays its
   controls out in a row, like the actions around it. */
.brv-c-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* A key/value row holding a long URL wraps instead of widening the page
   (the design's .brv-c-kv dd has no wrap rule; fix it in the design too). */
.brv-c-kv dd {
  min-width: 0;
  overflow-wrap: anywhere;
}
.brv-c-kv dd.brv-c-cell-meta,
.brv-c-kv dd .brv-link,
.brv-c-kv dd .brv-c-cell-meta {
  white-space: normal;
}

/* Buttons under an alert's text (a flagged link's review actions). */
.brv-c-alert-actions {
  margin-top: var(--space-3);
}