/* ==========================================================================
   Record page shell — breadcrumb and header pinned, only the body scrolls
   The same bargain the index tables strike (see .index-page in table.css): the
   page itself never scrolls, so the scroller has to be handed a bounded height.
   Each ancestor from the main-content frame down is a flex column that passes
   its height on, and min-height: 0 lets the body shrink below the intrinsic
   height of a long record instead of overflowing.
   ========================================================================== */
turbo-frame#main_content:has(> .record-page) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.record-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.record-page__header {
  flex: 0 0 auto;
}

/* The scroller. The small right-hand padding keeps a card's shadow off the
   scrollbar; the bottom padding stops the last card sitting flush on the edge. */
.record-page__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: var(--space-2);
  padding-bottom: var(--space-5);
}

/* --- Page heading -------------------------------------------------------- */
/* The record says what it is (its client, its firm), so the title is the
   record's own label with the rest of what identifies it underneath. */
.record-page__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.record-page__subtitle {
  margin: 0;
  font-size: var(--font-size-medium);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Record card
   The box a record's page is built from — details, quick actions, whatever a
   record keeps beside them. Shared by the case and review records so the two
   read the same way; .review-record__card is the review record's original name
   for it and is kept so its markup does not have to change.
   ========================================================================== */
.record-card,
.review-record__card {
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.record-card__title,
.review-record__card-title {
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* Title plus whatever acts on the card — the edit affordance that opens its
   form, most often. */
.record-card__header,
.review-record__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* The header row owns the rule and the spacing under it, so the title inside
   one drops both. */
.record-card__title--flush,
.review-record__card-title--flush {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* The row of buttons a Quick Actions card holds. */
.record-card__actions,
.case-record__actions,
.review-record__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ==========================================================================
   Warning banner
   Standing warnings about a record, at the top of its page — the firm record's
   original treatment, now shared by every record that keeps them (see
   shared/_warning_banner).
   ========================================================================== */
.record-warning-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  background: var(--tint-danger-10);
}

.record-warning-banner__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  /* Nudged onto the first line's baseline rather than its box top. */
  margin-top: 7px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
}

.record-warning-banner__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-medium);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-danger);
}

.record-warning-banner__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-danger);
  cursor: pointer;
}