/* =====================================================================
   Components — built on Bootstrap 5.3.8 classes via CSS custom properties
   ===================================================================== */

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-padding-x: 1.125rem;
  --bs-btn-font-weight: var(--rp-fw-semibold);
  --bs-btn-font-size: var(--rp-fs-base);
  --bs-btn-border-radius: var(--rp-radius);
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rp-space-2);
  min-height: var(--rp-control-h);
  line-height: 1.25;
  transition: background-color var(--rp-dur-fast) var(--rp-ease-out),
    border-color var(--rp-dur-fast) var(--rp-ease-out),
    color var(--rp-dur-fast) var(--rp-ease-out),
    box-shadow var(--rp-dur-fast) var(--rp-ease-out),
    transform var(--rp-dur-fast) var(--rp-ease-out);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn .bi { font-size: 1.05em; line-height: 1; }

.btn-sm {
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-font-size: var(--rp-fs-sm);
  min-height: var(--rp-control-h-sm);
}
.btn-lg {
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-font-size: var(--rp-fs-md);
  min-height: var(--rp-control-h-lg);
}

.btn-primary {
  --bs-btn-color: var(--rp-on-primary);
  --bs-btn-bg: var(--rp-primary);
  --bs-btn-border-color: var(--rp-primary);
  --bs-btn-hover-color: var(--rp-on-primary);
  --bs-btn-hover-bg: var(--rp-primary-hover);
  --bs-btn-hover-border-color: var(--rp-primary-hover);
  --bs-btn-active-color: var(--rp-on-primary);
  --bs-btn-active-bg: var(--rp-primary-active);
  --bs-btn-active-border-color: var(--rp-primary-active);
  --bs-btn-disabled-color: var(--rp-disabled-text);
  --bs-btn-disabled-bg: var(--rp-disabled-bg);
  --bs-btn-disabled-border-color: var(--rp-border-strong);
  --bs-btn-disabled-opacity: 1;
  box-shadow: var(--rp-shadow-xs);
}

.btn-secondary,
.btn-outline-secondary {
  --bs-btn-color: var(--rp-slate-800);
  --bs-btn-bg: var(--rp-surface);
  --bs-btn-border-color: var(--rp-border-strong);
  --bs-btn-hover-color: var(--rp-slate-900);
  --bs-btn-hover-bg: var(--rp-surface-hover);
  --bs-btn-hover-border-color: var(--rp-control-border);
  --bs-btn-active-color: var(--rp-slate-900);
  --bs-btn-active-bg: var(--rp-slate-200);
  --bs-btn-active-border-color: var(--rp-control-border);
  --bs-btn-disabled-color: var(--rp-disabled-text);
  --bs-btn-disabled-bg: var(--rp-disabled-bg);
  --bs-btn-disabled-border-color: var(--rp-border);
  --bs-btn-disabled-opacity: 1;
  box-shadow: var(--rp-shadow-xs);
}

.btn-outline-primary {
  --bs-btn-color: var(--rp-primary);
  --bs-btn-bg: var(--rp-surface);
  --bs-btn-border-color: var(--rp-primary);
  --bs-btn-hover-color: var(--rp-primary-hover);
  --bs-btn-hover-bg: var(--rp-primary-subtle);
  --bs-btn-hover-border-color: var(--rp-primary-hover);
  --bs-btn-active-color: var(--rp-primary-active);
  --bs-btn-active-bg: var(--rp-brand-100);
  --bs-btn-active-border-color: var(--rp-primary-active);
  --bs-btn-disabled-opacity: 1;
  --bs-btn-disabled-color: var(--rp-disabled-text);
  --bs-btn-disabled-bg: var(--rp-disabled-bg);
  --bs-btn-disabled-border-color: var(--rp-border);
}

/* Ghost: text-only action with a visible hover surface (maps to .btn + .btn-ghost). */
.btn-ghost {
  --bs-btn-color: var(--rp-slate-700);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--rp-slate-900);
  --bs-btn-hover-bg: var(--rp-surface-hover);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--rp-slate-900);
  --bs-btn-active-bg: var(--rp-slate-200);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--rp-disabled-text);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-opacity: 1;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--rp-danger);
  --bs-btn-border-color: var(--rp-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--rp-danger-emphasis);
  --bs-btn-hover-border-color: var(--rp-danger-emphasis);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--rp-danger-emphasis);
  --bs-btn-active-border-color: var(--rp-danger-emphasis);
  --bs-btn-disabled-opacity: 1;
  --bs-btn-disabled-color: var(--rp-disabled-text);
  --bs-btn-disabled-bg: var(--rp-disabled-bg);
  --bs-btn-disabled-border-color: var(--rp-border);
}

.btn-outline-danger {
  --bs-btn-color: var(--rp-danger);
  --bs-btn-bg: var(--rp-surface);
  --bs-btn-border-color: var(--rp-danger-border);
  --bs-btn-hover-color: var(--rp-danger-emphasis);
  --bs-btn-hover-bg: var(--rp-danger-subtle);
  --bs-btn-hover-border-color: var(--rp-danger);
  --bs-btn-active-color: var(--rp-danger-emphasis);
  --bs-btn-active-bg: var(--rp-danger-subtle);
  --bs-btn-active-border-color: var(--rp-danger);
}

.btn-link {
  --bs-btn-color: var(--rp-primary);
  --bs-btn-hover-color: var(--rp-primary-hover);
  --bs-btn-active-color: var(--rp-primary-active);
  --bs-btn-padding-x: 0.25rem;
  min-height: var(--rp-target-min);
  font-weight: var(--rp-fw-semibold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.btn-icon {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  width: var(--rp-control-h);
  min-width: var(--rp-control-h);
}
.btn-icon.btn-sm { width: var(--rp-control-h-sm); min-width: var(--rp-control-h-sm); }

/* Loading state: keeps width, shows spinner, announces via aria-busy + text change */
.btn[aria-busy="true"] { pointer-events: none; }
.btn .rp-btn-spinner {
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}

/* ---------- Forms ---------- */
.form-label {
  font-weight: var(--rp-fw-medium);
  color: var(--rp-slate-800);
  margin-bottom: var(--rp-space-2);
}
.form-label .rp-optional { font-weight: var(--rp-fw-regular); color: var(--rp-text-muted); }

.form-control,
.form-select {
  min-height: var(--rp-control-h);
  border-color: var(--rp-control-border);
  border-radius: var(--rp-radius);
  color: var(--rp-text);
  padding: 0.625rem 0.875rem;
  transition: border-color var(--rp-dur-fast) var(--rp-ease-out), background-color var(--rp-dur-fast);
}
.form-select { padding-right: 2.5rem; }
.form-control:hover:not(:disabled):not([readonly]):not(.is-invalid),
.form-select:hover:not(:disabled):not(.is-invalid) { border-color: var(--rp-slate-500); }
.form-control:focus,
.form-select:focus { border-color: var(--rp-primary); }
.form-control::placeholder { color: var(--rp-text-subtle); opacity: 1; }
.form-control:disabled,
.form-select:disabled {
  background-color: var(--rp-disabled-bg);
  color: var(--rp-disabled-text);
  border-color: var(--rp-border-strong);
}
.form-control[readonly] { background-color: var(--rp-surface-muted); }
textarea.form-control { min-height: 7rem; }
.form-control-sm, .form-select-sm { min-height: var(--rp-control-h-sm); padding-block: 0.3rem; font-size: var(--rp-fs-sm); }

.form-text { color: var(--rp-text-muted); font-size: var(--rp-fs-sm); margin-top: var(--rp-space-2); }

.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--rp-danger); border-width: 2px; background-image: none; padding-right: 0.875rem; }
.form-control.is-valid,
.form-select.is-valid { border-color: var(--rp-success); background-image: none; padding-right: 0.875rem; }

.invalid-feedback {
  display: none;
  align-items: flex-start;
  gap: var(--rp-space-2);
  color: var(--rp-danger-emphasis);
  font-size: var(--rp-fs-sm);
  font-weight: var(--rp-fw-medium);
  margin-top: var(--rp-space-2);
}
.is-invalid ~ .invalid-feedback,
.invalid-feedback.is-visible { display: flex; }
.invalid-feedback::before {
  content: "\f332"; /* bi-exclamation-circle-fill */
  font-family: "bootstrap-icons";
  line-height: 1.4;
}

.form-check { min-height: var(--rp-target-min); display: flex; align-items: flex-start; gap: var(--rp-space-2); padding-left: 0; }
.form-check .form-check-input { float: none; margin: 0.15rem 0 0; flex-shrink: 0; }
.form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid var(--rp-control-border);
}
.form-check-input:checked { background-color: var(--rp-primary); border-color: var(--rp-primary); }
.form-switch { padding-left: 0; }
.form-switch .form-check-input { width: 2.5rem; margin-left: 0; }

.input-group-text {
  background: var(--rp-surface-muted);
  border-color: var(--rp-control-border);
  color: var(--rp-text-muted);
  font-weight: var(--rp-fw-medium);
}

.rp-field { margin-bottom: var(--rp-space-5); }
.rp-field:last-child { margin-bottom: 0; }

.rp-char-count { font-size: var(--rp-fs-sm); color: var(--rp-text-muted); }

fieldset.rp-fieldset { border: 0; padding: 0; margin: 0 0 var(--rp-space-5); min-width: 0; }
fieldset.rp-fieldset > legend {
  font-size: var(--rp-fs-base);
  font-weight: var(--rp-fw-semibold);
  margin-bottom: var(--rp-space-3);
  float: none;
  width: auto;
}

/* Error summary (WCAG 3.3.1) */
.rp-error-summary {
  border: 1px solid var(--rp-danger-border);
  border-left: 4px solid var(--rp-danger);
  background: var(--rp-danger-subtle);
  border-radius: var(--rp-radius);
  padding: var(--rp-space-4) var(--rp-space-5);
  margin-bottom: var(--rp-space-5);
}
.rp-error-summary h2 { font-size: var(--rp-fs-base); color: var(--rp-danger-emphasis); margin-bottom: var(--rp-space-2); }
.rp-error-summary ul { margin: 0; padding-left: 1.1rem; }
.rp-error-summary a { color: var(--rp-danger-emphasis); font-weight: var(--rp-fw-medium); }

/* Password visibility toggle */
.rp-password { position: relative; }
.rp-password .form-control { padding-right: 3.25rem; }
.rp-password .rp-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  min-height: 2.25rem;
  width: 2.75rem;
}

/* Party size stepper */
.rp-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--rp-control-border); border-radius: var(--rp-radius); background: var(--rp-surface); overflow: hidden; }
.rp-stepper .btn { border-radius: 0; min-width: var(--rp-control-h-lg); min-height: var(--rp-control-h-lg); border: 0; }
.rp-stepper .form-control {
  border: 0;
  border-inline: 1px solid var(--rp-border);
  border-radius: 0;
  width: 5rem;
  text-align: center;
  font-size: var(--rp-fs-lg);
  font-weight: var(--rp-fw-semibold);
  min-height: var(--rp-control-h-lg);
  -moz-appearance: textfield;
  appearance: textfield;
}
.rp-stepper .form-control::-webkit-outer-spin-button,
.rp-stepper .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Copy field */
.rp-copy-field .form-control { font-family: var(--rp-font-mono); font-size: var(--rp-fs-sm); }

/* ---------- Cards ---------- */
.card,
.rp-card {
  --bs-card-border-color: var(--rp-border);
  --bs-card-border-radius: var(--rp-radius-lg);
  --bs-card-inner-border-radius: calc(var(--rp-radius-lg) - 1px);
  --bs-card-spacer-y: var(--rp-space-5);
  --bs-card-spacer-x: var(--rp-space-5);
  --bs-card-cap-bg: var(--rp-surface);
  --bs-card-cap-padding-y: var(--rp-space-4);
  --bs-card-cap-padding-x: var(--rp-space-5);
  background: var(--rp-surface);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-lg);
  box-shadow: var(--rp-shadow-xs);
}
.rp-card { padding: var(--rp-space-5); }
.rp-card--flush { padding: 0; }
.rp-card--muted { background: var(--rp-surface-muted); box-shadow: none; }
.rp-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rp-space-3);
  padding: var(--rp-space-4) var(--rp-space-5);
  border-bottom: 1px solid var(--rp-border);
}
.rp-card__header h2,
.rp-card__header h3 { font-size: var(--rp-fs-md); margin: 0; }
.rp-card__body { padding: var(--rp-space-5); }
.rp-card__footer { padding: var(--rp-space-4) var(--rp-space-5); border-top: 1px solid var(--rp-border); background: var(--rp-surface-muted); border-radius: 0 0 var(--rp-radius-lg) var(--rp-radius-lg); }
.rp-card--interactive { transition: border-color var(--rp-dur) var(--rp-ease-out), box-shadow var(--rp-dur) var(--rp-ease-out), transform var(--rp-dur) var(--rp-ease-out); }
.rp-card--interactive:hover { border-color: var(--rp-border-strong); box-shadow: var(--rp-shadow-md); transform: translateY(-1px); }

/* KPI / stat card */
.rp-stat { display: flex; flex-direction: column; gap: var(--rp-space-2); container-type: inline-size; }
.rp-stat__label { display: flex; align-items: center; gap: var(--rp-space-2); font-size: var(--rp-fs-sm); font-weight: var(--rp-fw-medium); color: var(--rp-text-muted); margin: 0; }
.rp-stat__icon {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--rp-radius);
  background: var(--rp-primary-subtle);
  color: var(--rp-primary);
}
.rp-stat__value { font-size: var(--rp-fs-2xl); font-weight: var(--rp-fw-bold); letter-spacing: var(--rp-tracking-tight); color: var(--rp-text); line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Long values (money with currency code) step down in narrow cards instead of overflowing. */
@container (max-width: 13rem) { .rp-stat__value { font-size: var(--rp-fs-xl); } }
@container (max-width: 9.5rem) { .rp-stat__value { font-size: var(--rp-fs-lg); } }
.rp-stat__meta { font-size: var(--rp-fs-sm); color: var(--rp-text-muted); margin: 0; }
.rp-stat__link { font-size: var(--rp-fs-sm); font-weight: var(--rp-fw-semibold); margin-top: auto; }

/* Description list (detail views) */
.rp-dl { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: var(--rp-space-3) var(--rp-space-5); margin: 0; }
.rp-dl dt { font-weight: var(--rp-fw-medium); color: var(--rp-text-muted); font-size: var(--rp-fs-sm); padding-top: 0.1rem; }
.rp-dl dd { margin: 0; color: var(--rp-text); overflow-wrap: anywhere; }
.rp-dl--stacked { grid-template-columns: 1fr; gap: var(--rp-space-1); }
.rp-dl--stacked dd { margin-bottom: var(--rp-space-3); }

/* ---------- Status badges (never colour-only: icon + text) ---------- */
.rp-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--rp-radius-pill);
  border: 1px solid transparent;
  font-size: var(--rp-fs-sm);
  font-weight: var(--rp-fw-semibold);
  line-height: 1.3;
  white-space: nowrap;
}
.rp-status .bi { font-size: 0.95em; }
.rp-status--success { background: var(--rp-success-subtle); color: var(--rp-success-emphasis); border-color: var(--rp-success-border); }
.rp-status--warning { background: var(--rp-warning-subtle); color: var(--rp-warning-emphasis); border-color: var(--rp-warning-border); }
.rp-status--danger  { background: var(--rp-danger-subtle);  color: var(--rp-danger-emphasis);  border-color: var(--rp-danger-border); }
.rp-status--info    { background: var(--rp-info-subtle);    color: var(--rp-info-emphasis);    border-color: var(--rp-info-border); }
.rp-status--primary { background: var(--rp-primary-subtle); color: var(--rp-brand-900);       border-color: var(--rp-primary-subtle-border); }
.rp-status--neutral { background: var(--rp-neutral-subtle); color: var(--rp-neutral-emphasis); border-color: var(--rp-neutral-border); }

.rp-dev-note {
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border: 1px dashed var(--rp-warning);
  border-radius: var(--rp-radius-sm);
  background: var(--rp-warning-subtle);
  color: var(--rp-warning-emphasis);
  font-size: var(--rp-fs-xs);
  font-weight: var(--rp-fw-semibold);
  vertical-align: middle;
  flex-wrap: wrap;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.rp-dev-note a { display: inline-flex; align-items: center; min-height: 1.5rem; }

/* ---------- Alerts ---------- */
.alert {
  --bs-alert-padding-x: var(--rp-space-4);
  --bs-alert-padding-y: var(--rp-space-3);
  --bs-alert-border-radius: var(--rp-radius);
  display: flex;
  gap: var(--rp-space-3);
  align-items: flex-start;
  border-left-width: 4px;
}
.alert > .bi { font-size: 1.15rem; line-height: 1.35; flex-shrink: 0; }
.alert .alert-heading { font-size: var(--rp-fs-base); font-weight: var(--rp-fw-semibold); margin-bottom: var(--rp-space-1); color: inherit; }
.alert p:last-child { margin-bottom: 0; }
.alert-info    { --bs-alert-color: var(--rp-info-emphasis);    --bs-alert-bg: var(--rp-info-subtle);    --bs-alert-border-color: var(--rp-info-border);    border-left-color: var(--rp-info); }
.alert-success { --bs-alert-color: var(--rp-success-emphasis); --bs-alert-bg: var(--rp-success-subtle); --bs-alert-border-color: var(--rp-success-border); border-left-color: var(--rp-success); }
.alert-warning { --bs-alert-color: var(--rp-warning-emphasis); --bs-alert-bg: var(--rp-warning-subtle); --bs-alert-border-color: var(--rp-warning-border); border-left-color: var(--rp-warning); }
.alert-danger  { --bs-alert-color: var(--rp-danger-emphasis);  --bs-alert-bg: var(--rp-danger-subtle);  --bs-alert-border-color: var(--rp-danger-border);  border-left-color: var(--rp-danger); }

/* ---------- Toasts ---------- */
.rp-toast-region {
  position: fixed;
  z-index: 1090;
  right: var(--rp-space-5);
  bottom: var(--rp-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--rp-space-2);
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
.rp-toast-region .toast {
  --bs-toast-border-radius: var(--rp-radius-lg);
  --bs-toast-box-shadow: var(--rp-shadow-lg);
  --bs-toast-bg: var(--rp-surface);
  --bs-toast-border-color: var(--rp-border);
  width: 100%;
  pointer-events: auto;
}
.rp-toast { display: flex; gap: var(--rp-space-3); align-items: flex-start; padding: var(--rp-space-3) var(--rp-space-4); }
.rp-toast__icon { font-size: 1.2rem; line-height: 1.3; }
.rp-toast--success .rp-toast__icon { color: var(--rp-success); }
.rp-toast--danger .rp-toast__icon { color: var(--rp-danger); }
.rp-toast--info .rp-toast__icon { color: var(--rp-info); }
.rp-toast__body { flex: 1; font-size: var(--rp-fs-sm); font-weight: var(--rp-fw-medium); padding-top: 0.1rem; }

/* ---------- Modal ---------- */
.modal {
  --bs-modal-border-radius: var(--rp-radius-xl);
  --bs-modal-border-color: var(--rp-border);
  --bs-modal-box-shadow: var(--rp-shadow-lg);
  --bs-modal-header-padding: var(--rp-space-5) var(--rp-space-5) var(--rp-space-3);
  --bs-modal-padding: var(--rp-space-3) var(--rp-space-5) var(--rp-space-5);
  --bs-modal-footer-gap: var(--rp-space-2);
  --bs-modal-header-border-width: 0;
  --bs-modal-footer-border-width: 0;
}
.modal-title { font-size: var(--rp-fs-lg); font-weight: var(--rp-fw-semibold); }
.modal-footer { padding: 0 var(--rp-space-5) var(--rp-space-5); }
.modal-backdrop { --bs-backdrop-bg: #0f172a; --bs-backdrop-opacity: 0.45; }
.rp-modal-icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rp-radius-pill);
  font-size: 1.3rem;
  margin-bottom: var(--rp-space-3);
}
.rp-modal-icon--warning { background: var(--rp-warning-subtle); color: var(--rp-warning-emphasis); }
.rp-modal-icon--danger { background: var(--rp-danger-subtle); color: var(--rp-danger-emphasis); }
.rp-modal-icon--info { background: var(--rp-primary-subtle); color: var(--rp-primary); }

/* ---------- Dropdown ---------- */
.dropdown-menu {
  --bs-dropdown-border-color: var(--rp-border);
  --bs-dropdown-border-radius: var(--rp-radius-lg);
  --bs-dropdown-box-shadow: var(--rp-shadow-lg);
  --bs-dropdown-padding-y: var(--rp-space-2);
  --bs-dropdown-item-padding-y: 0.5rem;
  --bs-dropdown-item-padding-x: 0.875rem;
  --bs-dropdown-link-hover-bg: var(--rp-surface-hover);
  --bs-dropdown-link-active-bg: var(--rp-primary-subtle);
  --bs-dropdown-link-active-color: var(--rp-brand-900);
  box-shadow: var(--rp-shadow-lg);
  min-width: 12rem;
  padding-inline: var(--rp-space-2);
}
.dropdown-item { border-radius: var(--rp-radius-sm); display: flex; align-items: center; gap: var(--rp-space-2); min-height: var(--rp-target-touch); font-size: var(--rp-fs-sm); font-weight: var(--rp-fw-medium); }
.dropdown-item.text-danger { color: var(--rp-danger-emphasis) !important; }

/* ---------- Tables ---------- */
.rp-table-wrap { overflow-x: auto; border-radius: var(--rp-radius-lg); }
.rp-table-wrap:focus-visible { outline: var(--rp-focus-width) solid var(--rp-focus); outline-offset: var(--rp-focus-offset); }
.table {
  --bs-table-color: var(--rp-text);
  --bs-table-border-color: var(--rp-border);
  --bs-table-hover-bg: var(--rp-surface-muted);
  margin: 0;
  font-size: var(--rp-fs-sm);
}
.table > :not(caption) > * > * { padding: 0.875rem var(--rp-space-4); vertical-align: middle; }
.table thead th {
  background: var(--rp-surface-muted);
  color: var(--rp-text-muted);
  font-weight: var(--rp-fw-semibold);
  font-size: var(--rp-fs-sm);
  white-space: nowrap;
  border-bottom-color: var(--rp-border);
}
.table tbody tr:last-child > * { border-bottom: 0; }
.table .rp-cell-primary { font-weight: var(--rp-fw-semibold); color: var(--rp-text); }
.table .rp-cell-meta { display: block; color: var(--rp-text-muted); font-weight: var(--rp-fw-regular); }
.table .rp-cell-actions { text-align: right; width: 1%; white-space: nowrap; }
.rp-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  min-height: var(--rp-target-min);
}

/* Record cards: mobile representation of table rows */
.rp-record-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rp-record { padding: var(--rp-space-4); border-bottom: 1px solid var(--rp-border); }
.rp-record:last-child { border-bottom: 0; }
.rp-record__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--rp-space-3); margin-bottom: var(--rp-space-2); }
.rp-record__title { font-weight: var(--rp-fw-semibold); margin: 0; font-size: var(--rp-fs-base); }
.rp-record__meta { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem var(--rp-space-3); font-size: var(--rp-fs-sm); margin: 0 0 var(--rp-space-3); }
.rp-record__meta dt { color: var(--rp-text-muted); font-weight: var(--rp-fw-medium); }
.rp-record__meta dd { margin: 0; }

/* ---------- Toolbar / filters ---------- */
.rp-toolbar { display: flex; flex-wrap: wrap; gap: var(--rp-space-3); align-items: flex-end; padding: var(--rp-space-4) var(--rp-space-5); border-bottom: 1px solid var(--rp-border); }
.rp-toolbar .rp-field { margin: 0; min-width: 10rem; flex: 1 1 10rem; }
.rp-toolbar .rp-toolbar__search { flex: 2 1 16rem; }
.rp-toolbar .form-label { font-size: var(--rp-fs-sm); }
.rp-chips { display: flex; flex-wrap: wrap; gap: var(--rp-space-2); padding: var(--rp-space-3) var(--rp-space-5) 0; }
.rp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2rem;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  border-radius: var(--rp-radius-pill);
  border: 1px solid var(--rp-primary-subtle-border);
  background: var(--rp-primary-subtle);
  color: var(--rp-brand-900);
  font-size: var(--rp-fs-sm);
  font-weight: var(--rp-fw-medium);
}
.rp-chip button { border: 0; background: none; color: inherit; min-width: var(--rp-target-min); min-height: var(--rp-target-min); border-radius: var(--rp-radius-pill); }
.rp-chip button:hover { background: var(--rp-brand-100); }

/* ---------- Pagination ---------- */
.pagination {
  --bs-pagination-color: var(--rp-slate-700);
  --bs-pagination-border-color: var(--rp-border-strong);
  --bs-pagination-hover-bg: var(--rp-surface-hover);
  --bs-pagination-hover-color: var(--rp-slate-900);
  --bs-pagination-active-bg: var(--rp-primary);
  --bs-pagination-active-border-color: var(--rp-primary);
  --bs-pagination-disabled-color: var(--rp-disabled-text);
  --bs-pagination-focus-box-shadow: none;
  margin: 0;
}
.page-link { min-width: 2.5rem; min-height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--rp-fw-medium); }
.rp-pagination-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rp-space-3); padding: var(--rp-space-4) var(--rp-space-5); border-top: 1px solid var(--rp-border); font-size: var(--rp-fs-sm); color: var(--rp-text-muted); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { --bs-breadcrumb-margin-bottom: var(--rp-space-2); --bs-breadcrumb-divider-color: var(--rp-text-subtle); --bs-breadcrumb-item-active-color: var(--rp-text-muted); font-size: var(--rp-fs-sm); }
.breadcrumb a { color: var(--rp-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--rp-primary); text-decoration: underline; }

/* ---------- Tabs ---------- */
.rp-tabs {
  --bs-nav-tabs-border-color: var(--rp-border);
  --bs-nav-link-color: var(--rp-text-muted);
  --bs-nav-link-hover-color: var(--rp-text);
  --bs-nav-tabs-link-active-color: var(--rp-primary);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent;
  --bs-nav-tabs-border-width: 0;
  gap: var(--rp-space-1);
  border-bottom: 1px solid var(--rp-border);
  flex-wrap: nowrap;
  overflow-x: auto;
}
.rp-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.75rem 0.875rem;
  font-weight: var(--rp-fw-semibold);
  font-size: var(--rp-fs-sm);
  white-space: nowrap;
  min-height: var(--rp-target-touch);
}
.rp-tabs .nav-link.active { border-bottom-color: var(--rp-primary); }

/* ---------- Page states: empty / error / loading ---------- */
.rp-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--rp-space-7) var(--rp-space-5); gap: var(--rp-space-2); }
.rp-state__icon {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--rp-radius-pill);
  background: var(--rp-surface-hover);
  color: var(--rp-slate-600);
  font-size: 1.5rem;
  margin-bottom: var(--rp-space-2);
}
.rp-state--error .rp-state__icon { background: var(--rp-danger-subtle); color: var(--rp-danger-emphasis); }
.rp-state--success .rp-state__icon { background: var(--rp-success-subtle); color: var(--rp-success-emphasis); }
.rp-state--warning .rp-state__icon { background: var(--rp-warning-subtle); color: var(--rp-warning-emphasis); }
.rp-state h2, .rp-state h3 { font-size: var(--rp-fs-lg); margin: 0; }
.rp-state p { color: var(--rp-text-muted); max-width: 32rem; margin: 0 0 var(--rp-space-3); }

/* Skeletons (opacity pulse; no gradients) */
.rp-skeleton { display: block; background: var(--rp-slate-200); border-radius: var(--rp-radius-sm); min-height: 0.875rem; }
.rp-skeleton--text { height: 0.875rem; width: 100%; }
.rp-skeleton--title { height: 1.5rem; width: 40%; }
.rp-skeleton--block { height: 6rem; width: 100%; border-radius: var(--rp-radius-lg); }
.rp-skeleton--pill { height: 1.5rem; width: 6rem; border-radius: var(--rp-radius-pill); }
.rp-skeleton-rows { display: flex; flex-direction: column; gap: var(--rp-space-4); padding: var(--rp-space-5); }
.rp-skeleton-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--rp-space-4); align-items: center; }

.rp-loading-inline { display: inline-flex; align-items: center; gap: var(--rp-space-2); color: var(--rp-text-muted); font-size: var(--rp-fs-sm); }

/* ---------- Timeline (status history) ---------- */
.rp-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.rp-timeline li { position: relative; padding: 0 0 var(--rp-space-5) var(--rp-space-6); }
.rp-timeline li::before { content: ""; position: absolute; left: 0.6875rem; top: 1.5rem; bottom: 0; width: 2px; background: var(--rp-border); }
.rp-timeline li:last-child { padding-bottom: 0; }
.rp-timeline li:last-child::before { display: none; }
.rp-timeline__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--rp-radius-pill);
  display: grid;
  place-items: center;
  background: var(--rp-surface);
  border: 2px solid var(--rp-border-strong);
  color: var(--rp-slate-600);
  font-size: 0.75rem;
}
.rp-timeline__title { font-weight: var(--rp-fw-semibold); font-size: var(--rp-fs-sm); margin: 0; }
.rp-timeline__meta { font-size: var(--rp-fs-sm); color: var(--rp-text-muted); margin: 0; }

/* ---------- Setup checklist ---------- */
.rp-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rp-space-3); }
.rp-checklist li { display: flex; gap: var(--rp-space-3); align-items: flex-start; }
.rp-checklist .bi { font-size: 1.25rem; color: var(--rp-text-subtle); }
.rp-checklist .is-done .bi { color: var(--rp-success); }

/* ---------- Capacity meter ---------- */
.rp-meter { display: flex; flex-direction: column; gap: 0.3rem; min-width: 8rem; }
.rp-meter__bar { height: 0.375rem; border-radius: var(--rp-radius-pill); background: var(--rp-slate-200); overflow: hidden; }
.rp-meter__fill { height: 100%; background: var(--rp-primary); border-radius: inherit; transition: width var(--rp-dur-slow) var(--rp-ease-out); }
.rp-meter__fill.is-full { background: var(--rp-slate-700); }
.rp-meter__label { font-size: var(--rp-fs-sm); color: var(--rp-text-muted); }

/* Horizontal bar chart used in reports (always paired with a data table) */
.rp-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--rp-space-3); }
.rp-bars li { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr auto; gap: var(--rp-space-3); align-items: center; font-size: var(--rp-fs-sm); }
.rp-bars .rp-meter__bar { height: 0.625rem; }

/* Code snippet */
.rp-code { font-family: var(--rp-font-mono); font-size: var(--rp-fs-sm); background: var(--rp-slate-900); color: #e2e8f0; border-radius: var(--rp-radius); padding: var(--rp-space-4); overflow-x: auto; white-space: pre; margin: 0; }