/* ==========================================================================
   RIPPLE ADMIN — DESIGN SYSTEM
   ==========================================================================

   Layered on Bootstrap 5.3: Bootstrap supplies the grid, dropdowns, modals and
   utilities; this file supplies everything that makes the console look like one
   considered product rather than a template.

   ── The rule this file is built around ──────────────────────────────────────

   This is an operations console. People sit in it for hours deciding whether to
   move money, suspend an account, or approve a host. Colour is therefore
   *information*, never decoration, and it is rationed hard:

     1. A single neutral ramp carries ~95% of the interface — surfaces, text,
        borders, navigation, tables, most status chips.
     2. Ripple purple appears in four places only: the active navigation
        indicator, primary buttons, focus rings, and the logo.
     3. Semantic colour (green / amber / red / blue) is reserved for state that
        changes what somebody should do next. It arrives as a 5px dot or a 2px
        rail — not a filled block. The sole exception is suspension, which must
        be impossible to scan past.

   Before adding a colour, ask: what would a reader *do differently* because of
   it? No answer means it should be neutral.

   ── Typography ──────────────────────────────────────────────────────────────

   Hierarchy comes from size, weight and colour — not from uppercase. Uppercase
   micro-labels read as "dashboard template"; sentence case with a muted tone
   reads as considered software. The only concession is `.rp-overline`, which
   exists for the rare true section marker.

   ── Contents ────────────────────────────────────────────────────────────────
     1. Tokens (light)          8. Tables
     2. Tokens (dark)           9. Status system
     3. Reset & typography     10. Forms
     4. Utilities              11. Buttons
     5. App shell              12. Overlays: modals, dropdowns, toasts
     6. Surfaces & cards       13. Feedback: banners, empty, skeleton
     7. Metrics & charts       14. Responsive & print
   ========================================================================== */


/* ==========================================================================
   1. TOKENS — LIGHT
   ========================================================================== */

:root {
  /* ── Neutral ramp ───────────────────────────────────────────────────────
     One slightly-cool family. Everything structural is drawn from here, which
     is what stops the interface drifting into six competing greys. */
  --rp-n-0:   #ffffff;
  --rp-n-25:  #fcfcfd;
  --rp-n-50:  #f9f9fb;
  --rp-n-100: #f3f3f6;
  --rp-n-150: #ebebef;
  --rp-n-200: #e2e2e8;
  --rp-n-300: #cdcdd6;
  --rp-n-400: #8d8d99;
  --rp-n-500: #74747f;
  --rp-n-600: #57575f;
  --rp-n-700: #3f3f47;
  --rp-n-800: #27272e;
  --rp-n-900: #16161a;

  /* ── Brand ──────────────────────────────────────────────────────────────
     From the Ripple mark. Rationed — see the note above. */
  --rp-primary:        #4c25c7;
  --rp-primary-hover:  #401ead;
  --rp-primary-subtle: #f4f2fd;
  --rp-primary-border: #ddd5f8;
  --rp-focus:          rgba(76, 37, 199, .18);

  /* ── Semantic ───────────────────────────────────────────────────────────
     Deliberately desaturated. These sit beside neutral text all day; they need
     to pass contrast, not compete for attention. */
  --rp-success:        #146c46;
  --rp-success-solid:  #17915b;
  --rp-success-subtle: #edf6f1;
  --rp-warning:        #855408;
  --rp-warning-solid:  #b8820f;
  --rp-warning-subtle: #fbf4e8;
  --rp-danger:         #a3231d;
  --rp-danger-solid:   #c4322a;
  --rp-danger-subtle:  #fdefee;
  --rp-info:           #17508f;
  --rp-info-solid:     #2a6fc4;
  --rp-info-subtle:    #eef3fa;

  /* ── Surfaces ───────────────────────────────────────────────────────────
     Never pure white on white. The page sits a step below its cards so
     grouping reads without needing a shadow. */
  --rp-bg:             var(--rp-n-50);
  --rp-surface:        var(--rp-n-0);
  --rp-surface-2:      var(--rp-n-50);
  --rp-surface-3:      var(--rp-n-100);
  --rp-surface-hover:  var(--rp-n-50);
  --rp-surface-sunken: var(--rp-n-100);

  /* ── Borders ────────────────────────────────────────────────────────── */
  --rp-border:        var(--rp-n-150);
  --rp-border-subtle: var(--rp-n-100);
  --rp-border-strong: var(--rp-n-300);

  /* ── Text ───────────────────────────────────────────────────────────── */
  --rp-text:           var(--rp-n-900);
  --rp-text-secondary: var(--rp-n-600);
  --rp-text-muted:     var(--rp-n-500);
  --rp-text-faint:     var(--rp-n-400);
  --rp-text-inverse:   var(--rp-n-0);

  /* ── Navigation ─────────────────────────────────────────────────────────
     Not a dark slab. A near-black sidebar makes the chrome the loudest thing
     on screen and forces the data to compete with the menu; this sits in the
     same neutral family as the page, divided by a hairline. */
  --rp-nav-bg:          var(--rp-n-25);
  --rp-nav-text:        var(--rp-n-600);
  --rp-nav-text-active: var(--rp-n-900);
  --rp-nav-hover:       var(--rp-n-100);
  --rp-nav-active:      var(--rp-primary-subtle);

  /* ── Shadows ────────────────────────────────────────────────────────────
     Almost absent. Borders and spacing do the separating; only genuinely
     floating things cast a shadow. */
  --rp-shadow-xs: 0 1px 2px rgba(22, 22, 26, .04);
  --rp-shadow-sm: 0 1px 3px rgba(22, 22, 26, .06);
  --rp-shadow-md: 0 4px 12px rgba(22, 22, 26, .08), 0 1px 3px rgba(22, 22, 26, .04);
  --rp-shadow-lg: 0 12px 32px rgba(22, 22, 26, .12), 0 2px 8px rgba(22, 22, 26, .06);
  --rp-scrim:     rgba(16, 16, 20, .42);

  /* ── Geometry ───────────────────────────────────────────────────────── */
  --rp-radius-xs: 4px;
  --rp-radius-sm: 6px;
  --rp-radius:    8px;
  --rp-radius-lg: 10px;

  --rp-space-1: .25rem;
  --rp-space-2: .5rem;
  --rp-space-3: .75rem;
  --rp-space-4: 1rem;
  --rp-space-5: 1.5rem;
  --rp-space-6: 2rem;

  --rp-sidebar-w: 240px;
  --rp-topbar-h:  56px;

  /* ── Type scale ─────────────────────────────────────────────────────── */
  --rp-fs-2xs: .69rem;
  --rp-fs-xs:  .755rem;
  --rp-fs-sm:  .8125rem;
  --rp-fs-md:  .875rem;
  --rp-fs-lg:  1rem;
  --rp-fs-xl:  1.25rem;
  --rp-fs-2xl: 1.75rem;

  --rp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --rp-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --rp-ease: cubic-bezier(.4, 0, .2, 1);
}


/* ==========================================================================
   2. TOKENS — DARK
   --------------------------------------------------------------------------
   The ramp inverts; the component layer never changes. Charcoal rather than
   black, because pure black against light text produces halation and is
   genuinely harder to read for long stretches. Purple is lifted several steps
   — the light-mode brand fails contrast on a dark surface.
   ========================================================================== */

[data-bs-theme="dark"] {
  --rp-n-0:   #131317;
  --rp-n-25:  #17171c;
  --rp-n-50:  #0e0e11;
  --rp-n-100: #1e1e24;
  --rp-n-150: #27272f;
  --rp-n-200: #30303a;
  --rp-n-300: #3f3f4b;
  --rp-n-400: #6a6a78;
  --rp-n-500: #8a8a96;
  --rp-n-600: #a8a8b4;
  --rp-n-700: #c8c8d0;
  --rp-n-800: #e4e4e8;
  --rp-n-900: #f5f5f7;

  --rp-primary:        #a189ff;
  --rp-primary-hover:  #b7a5ff;
  --rp-primary-subtle: #1d1830;
  --rp-primary-border: #322a52;
  --rp-focus:          rgba(161, 137, 255, .24);

  --rp-success:        #5cc08d;
  --rp-success-solid:  #3da473;
  --rp-success-subtle: #10231a;
  --rp-warning:        #dfb264;
  --rp-warning-solid:  #c99733;
  --rp-warning-subtle: #261e11;
  --rp-danger:         #f0918a;
  --rp-danger-solid:   #d4544a;
  --rp-danger-subtle:  #281413;
  --rp-info:           #82b3ec;
  --rp-info-solid:     #4d8dd8;
  --rp-info-subtle:    #101d33;

  --rp-bg:             var(--rp-n-50);
  --rp-surface:        var(--rp-n-0);
  --rp-surface-2:      var(--rp-n-25);
  --rp-surface-3:      var(--rp-n-100);
  --rp-surface-hover:  var(--rp-n-100);
  --rp-surface-sunken: var(--rp-n-50);

  --rp-border:        var(--rp-n-150);
  --rp-border-subtle: var(--rp-n-100);
  --rp-border-strong: var(--rp-n-300);

  --rp-text-inverse:  var(--rp-n-50);

  --rp-nav-bg:     var(--rp-n-25);
  --rp-nav-active: var(--rp-primary-subtle);

  --rp-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --rp-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --rp-shadow-md: 0 4px 12px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
  --rp-shadow-lg: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
  --rp-scrim:     rgba(0, 0, 0, .6);
}


/* ==========================================================================
   3. RESET & TYPOGRAPHY
   ========================================================================== */

body.rp {
  font-family: var(--rp-font);
  background: var(--rp-bg);
  color: var(--rp-text);
  font-size: var(--rp-fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "tnum" 0;
}

body.rp a { color: var(--rp-text); text-decoration: none; }
body.rp a:hover { color: var(--rp-primary); }

/* Prose links keep their underline; links inside data rows do not — there the
   whole row is the affordance and underlines turn a table into a soup. */
body.rp p a,
body.rp .rp-banner a,
body.rp .form-text a { text-decoration: underline; text-underline-offset: 2px; }

/* One focus treatment, everywhere, keyboard-only. */
body.rp :focus { outline: none; }
body.rp :focus-visible {
  outline: 2px solid var(--rp-primary);
  outline-offset: 2px;
  border-radius: var(--rp-radius-xs);
}

/* The one sanctioned uppercase: a true section marker, used sparingly. */
.rp-overline {
  font-size: var(--rp-fs-2xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rp-text-faint);
}

.rp-mono { font-family: var(--rp-mono); font-size: .82em; letter-spacing: -.01em; }
.rp-num  { font-variant-numeric: tabular-nums; }

.rp-id {
  font-family: var(--rp-mono);
  font-size: var(--rp-fs-2xs);
  color: var(--rp-text-muted);
  background: var(--rp-surface-3);
  border: 1px solid var(--rp-border-subtle);
  border-radius: var(--rp-radius-xs);
  padding: .05rem .3rem;
  cursor: pointer;
  display: inline-block;
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  transition: color .12s var(--rp-ease), border-color .12s var(--rp-ease);
}
.rp-id:hover { color: var(--rp-text); border-color: var(--rp-border-strong); }


/* ==========================================================================
   4. UTILITIES
   --------------------------------------------------------------------------
   These exist to absorb the ~100 inline `style=` attributes the templates had
   grown. A width repeated in nine files is a component decision, not a
   per-page one, and inline styles cannot respond to a theme.
   ========================================================================== */

.rp-t-xs   { font-size: var(--rp-fs-xs); }
.rp-t-sm   { font-size: var(--rp-fs-sm); }
.rp-t-md   { font-size: var(--rp-fs-md); }
.rp-muted  { color: var(--rp-text-secondary); }
.rp-faint  { color: var(--rp-text-muted); }
.rp-ok     { color: var(--rp-success); }
.rp-warn   { color: var(--rp-warning); }
.rp-bad    { color: var(--rp-danger); }
.rp-strong { font-weight: 600; color: var(--rp-text); }

.rp-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-min-0    { min-width: 0; }
.rp-nowrap   { white-space: nowrap; }
.rp-prewrap  { white-space: pre-wrap; }

/* Fixed control widths, named by intent so a table's inline editors line up
   across pages instead of each picking their own pixel value. */
.rp-w-xs  { width: 72px; }
.rp-w-sm  { width: 92px; }
.rp-w-md  { width: 120px; }
.rp-w-lg  { width: 160px; }
.rp-w-auto { width: auto; }

.rp-col-search { min-width: 220px; flex: 1 1 220px; }
.rp-col-meter  { min-width: 132px; }
.rp-col-wide   { min-width: 260px; }

.rp-stack { display: flex; flex-direction: column; gap: var(--rp-space-2); }
.rp-row   { display: flex; align-items: center; gap: var(--rp-space-2); }
.rp-row--end { justify-content: flex-end; }


/* ==========================================================================
   5. APP SHELL
   ========================================================================== */

.rp-shell { min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────────────────────── */

.rp-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rp-sidebar-w);
  background: var(--rp-nav-bg);
  border-right: 1px solid var(--rp-border);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: transform .22s var(--rp-ease);
}

.rp-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--rp-space-2);
  height: var(--rp-topbar-h);
  padding: 0 var(--rp-space-4);
  border-bottom: 1px solid var(--rp-border);
  color: var(--rp-text);
  font-weight: 600;
  font-size: var(--rp-fs-md);
  letter-spacing: -.01em;
  flex: 0 0 auto;
}
.rp-sidebar__brand:hover { color: var(--rp-text); }
.rp-sidebar__brand img { width: 22px; height: 22px; border-radius: 5px; flex: 0 0 auto; }
.rp-sidebar__brand small {
  display: block;
  font-size: var(--rp-fs-2xs);
  font-weight: 400;
  color: var(--rp-text-muted);
  line-height: 1.25;
}

.rp-sidebar__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--rp-space-2) var(--rp-space-2) var(--rp-space-6);
  scrollbar-width: thin;
  scrollbar-color: var(--rp-n-300) transparent;
}
.rp-sidebar__nav::-webkit-scrollbar { width: 6px; }
.rp-sidebar__nav::-webkit-scrollbar-thumb { background: var(--rp-n-200); border-radius: 3px; }
.rp-sidebar__nav::-webkit-scrollbar-track { background: transparent; }

/* Group labels: sentence case, muted, small. They separate; they do not shout. */
.rp-nav-group {
  font-size: var(--rp-fs-xs);
  font-weight: 550;
  color: var(--rp-text-faint);
  padding: var(--rp-space-4) var(--rp-space-2) var(--rp-space-1);
}
.rp-nav-group:first-child { padding-top: var(--rp-space-1); }

.rp-nav-link {
  display: flex;
  align-items: center;
  gap: var(--rp-space-2);
  padding: .4rem var(--rp-space-2);
  border-radius: var(--rp-radius-sm);
  color: var(--rp-nav-text);
  font-size: var(--rp-fs-sm);
  font-weight: 480;
  margin-bottom: 1px;
  position: relative;
  transition: background-color .12s var(--rp-ease), color .12s var(--rp-ease);
}
.rp-nav-link:hover { background: var(--rp-nav-hover); color: var(--rp-text); }
.rp-nav-link i { font-size: .95rem; width: 1.05rem; text-align: center; opacity: .65; }

/* Where you are: a tint plus a 2px rail. Enough to find instantly, not a
   saturated block dominating the viewport. */
.rp-nav-link.is-active {
  background: var(--rp-nav-active);
  color: var(--rp-nav-text-active);
  font-weight: 560;
}
.rp-nav-link.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 15px;
  border-radius: 0 2px 2px 0;
  background: var(--rp-primary);
}
.rp-nav-link.is-active i { opacity: 1; color: var(--rp-primary); }

.rp-nav-count {
  margin-left: auto;
  font-size: var(--rp-fs-2xs);
  font-weight: 600;
  min-width: 1.2rem;
  text-align: center;
  padding: 0 .3rem;
  border-radius: var(--rp-radius-xs);
  background: var(--rp-surface-3);
  color: var(--rp-text-muted);
  font-variant-numeric: tabular-nums;
}
/* Only a queue with work waiting earns colour — and only as a tint. */
.rp-nav-count.is-alert { background: var(--rp-danger-subtle); color: var(--rp-danger); }

/* ── Main & topbar ───────────────────────────────────────────────────── */

.rp-main {
  margin-left: var(--rp-sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.rp-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--rp-topbar-h);
  display: flex;
  align-items: center;
  gap: var(--rp-space-2);
  padding: 0 var(--rp-space-5);
  background: var(--rp-surface);
  border-bottom: 1px solid var(--rp-border);
}

.rp-search { position: relative; flex: 1 1 auto; max-width: 380px; }
.rp-search i {
  position: absolute;
  left: .6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rp-text-faint);
  font-size: .85rem;
  pointer-events: none;
}
.rp-search input {
  width: 100%;
  height: 32px;
  padding: 0 var(--rp-space-3) 0 1.9rem;
  font-size: var(--rp-fs-sm);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-sm);
  background: var(--rp-surface-2);
  color: var(--rp-text);
  transition: border-color .12s var(--rp-ease), box-shadow .12s var(--rp-ease);
}
.rp-search input::placeholder { color: var(--rp-text-faint); }
.rp-search input:focus,
.rp-search input:focus-visible {
  outline: none;
  border-color: var(--rp-primary);
  box-shadow: 0 0 0 3px var(--rp-focus);
  background: var(--rp-surface);
}
.rp-search kbd {
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--rp-font);
  font-size: var(--rp-fs-2xs);
  color: var(--rp-text-faint);
  background: var(--rp-surface-3);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-xs);
  padding: .02rem .28rem;
  pointer-events: none;
}
.rp-search input:focus + kbd, .rp-search input:not(:placeholder-shown) + kbd { display: none; }

.rp-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--rp-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--rp-text-secondary);
  font-size: .95rem;
  transition: background-color .12s var(--rp-ease), color .12s var(--rp-ease);
}
.rp-iconbtn:hover { color: var(--rp-text); background: var(--rp-surface-3); }

/* Compact account trigger — an avatar reads faster than a generic person icon. */
.rp-usermenu {
  display: inline-flex;
  align-items: center;
  gap: var(--rp-space-2);
  height: 32px;
  padding: 0 .3rem 0 .3rem;
  border-radius: var(--rp-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--rp-text);
  font-size: var(--rp-fs-sm);
  font-weight: 520;
}
.rp-usermenu:hover { background: var(--rp-surface-3); }
.rp-usermenu i { color: var(--rp-text-faint); font-size: .75rem; }

.rp-content { flex: 1 1 auto; padding: var(--rp-space-5) var(--rp-space-5) var(--rp-space-6); }

/* ── Page header ─────────────────────────────────────────────────────── */

.rp-page-head { margin-bottom: var(--rp-space-4); }
.rp-page-head h1 {
  font-size: var(--rp-fs-xl);
  font-weight: 620;
  letter-spacing: -.021em;
  margin: 0;
  color: var(--rp-text);
}
.rp-page-head .rp-sub {
  color: var(--rp-text-secondary);
  font-size: var(--rp-fs-md);
  margin: .2rem 0 0;
  max-width: 78ch;
}
.rp-breadcrumb {
  font-size: var(--rp-fs-xs);
  color: var(--rp-text-muted);
  margin-bottom: var(--rp-space-2);
  display: flex;
  align-items: center;
  gap: var(--rp-space-1);
  flex-wrap: wrap;
}
.rp-breadcrumb a { color: var(--rp-text-muted); }
.rp-breadcrumb a:hover { color: var(--rp-text); }
.rp-breadcrumb i { font-size: .6rem; opacity: .55; }


/* ==========================================================================
   6. SURFACES & CARDS
   ========================================================================== */

.rp-card {
  background: var(--rp-surface);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
}
.rp-card + .rp-card { margin-top: var(--rp-space-3); }

.rp-card__head {
  display: flex;
  align-items: center;
  gap: var(--rp-space-2);
  padding: var(--rp-space-3) var(--rp-space-4);
  border-bottom: 1px solid var(--rp-border);
  min-height: 46px;
}
.rp-card__head h2,
.rp-card__head h3 {
  font-size: var(--rp-fs-md);
  font-weight: 600;
  margin: 0;
  letter-spacing: -.008em;
  color: var(--rp-text);
}
.rp-card__head .rp-sub { font-size: var(--rp-fs-xs); color: var(--rp-text-muted); margin: 0; }
.rp-card__actions { margin-left: auto; display: flex; gap: var(--rp-space-2); align-items: center; }
.rp-card__body { padding: var(--rp-space-4); }
.rp-card__body--flush { padding: 0; }
.rp-card__foot {
  padding: var(--rp-space-3) var(--rp-space-4);
  border-top: 1px solid var(--rp-border);
  background: var(--rp-surface-2);
  border-radius: 0 0 var(--rp-radius) var(--rp-radius);
  font-size: var(--rp-fs-sm);
}

/* ── Detail layout ───────────────────────────────────────────────────── */

.rp-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--rp-space-3);
  align-items: start;
}
@media (max-width: 1200px) { .rp-detail { grid-template-columns: minmax(0, 1fr); } }

.rp-detail__aside { position: sticky; top: calc(var(--rp-topbar-h) + var(--rp-space-5)); }
@media (max-width: 1200px) { .rp-detail__aside { position: static; } }

/* ── Definition grid ─────────────────────────────────────────────────── */

.rp-defs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 var(--rp-space-5);
}
.rp-def { padding: .55rem 0; border-bottom: 1px solid var(--rp-border-subtle); min-width: 0; }
.rp-def:last-child { border-bottom: 0; }
.rp-def__label {
  font-size: var(--rp-fs-xs);
  font-weight: 480;
  color: var(--rp-text-muted);
  margin-bottom: .1rem;
}
.rp-def__value { font-size: var(--rp-fs-md); color: var(--rp-text); word-break: break-word; }
.rp-def__value.is-empty,
.rp-def__value .is-empty { color: var(--rp-text-faint); }
.rp-def--wide { grid-column: 1 / -1; }

/* ── Form sections ───────────────────────────────────────────────────── */

.rp-form-section + .rp-form-section {
  margin-top: var(--rp-space-5);
  padding-top: var(--rp-space-5);
  border-top: 1px solid var(--rp-border);
}
.rp-form-section__title {
  font-size: var(--rp-fs-sm);
  font-weight: 600;
  color: var(--rp-text);
  margin-bottom: var(--rp-space-3);
}


/* ==========================================================================
   7. METRICS & CHARTS
   --------------------------------------------------------------------------
   A metric answers three questions in a fixed order: what is this, what is the
   value, and why does it matter. The value gets the weight; the label and the
   context line stay muted. No decorative icon — a coloured glyph on every tile
   is noise that makes the numbers harder, not easier, to compare.
   ========================================================================== */

.rp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: var(--rp-space-3);
  margin-bottom: var(--rp-space-4);
}

.rp-stat {
  background: var(--rp-surface);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  padding: var(--rp-space-3) var(--rp-space-4);
  display: block;
  position: relative;
  color: var(--rp-text);
  transition: border-color .12s var(--rp-ease), background-color .12s var(--rp-ease);
}
a.rp-stat:hover {
  border-color: var(--rp-border-strong);
  background: var(--rp-surface-hover);
  color: var(--rp-text);
}

.rp-stat__label {
  font-size: var(--rp-fs-xs);
  font-weight: 480;
  color: var(--rp-text-muted);
  display: flex;
  align-items: center;
  gap: var(--rp-space-1);
}
.rp-stat__value {
  font-size: var(--rp-fs-2xl);
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--rp-text);
  margin-top: .15rem;
  line-height: 1.12;
  font-variant-numeric: tabular-nums;
}
.rp-stat__value small {
  font-size: var(--rp-fs-md);
  font-weight: 450;
  color: var(--rp-text-faint);
  letter-spacing: -.01em;
}
.rp-stat__meta { font-size: var(--rp-fs-xs); color: var(--rp-text-muted); margin-top: .2rem; }

/* Only an actual alert is marked. Everything else stays neutral so the one
   tile that matters is the one that stands out. */
.rp-stat--alert { border-color: color-mix(in srgb, var(--rp-danger) 34%, var(--rp-border)); }
.rp-stat--alert .rp-stat__value { color: var(--rp-danger); }

/* Direction is carried by an arrow as well as a colour — colour alone fails
   for the ~8% of men with a colour vision deficiency. */
.rp-delta { display: inline-flex; align-items: center; gap: .15rem; font-weight: 550; }
.rp-delta--up   { color: var(--rp-success); }
.rp-delta--down { color: var(--rp-danger); }
.rp-delta--flat { color: var(--rp-text-muted); }

/* ── Meter ───────────────────────────────────────────────────────────── */

.rp-meter {
  height: 4px;
  border-radius: 999px;
  background: var(--rp-surface-3);
  overflow: hidden;
}
.rp-meter span { display: block; height: 100%; border-radius: 999px; background: var(--rp-n-400); }
.rp-meter span.is-ok     { background: var(--rp-success-solid); }
.rp-meter span.is-warn   { background: var(--rp-warning-solid); }
.rp-meter span.is-danger { background: var(--rp-danger-solid); }

/* ── Bar chart ───────────────────────────────────────────────────────────
   CSS-driven, so it inherits the theme like everything else and needs no
   charting library or canvas repaint on a theme switch. */

.rp-chart {
  display: flex;
  align-items: stretch;   /* not flex-end: the track is full height, the fill is not */
  gap: 3px;
  height: 88px;
  padding-top: var(--rp-space-2);
}
/* No track behind the bar: a full-height track reads as a second, larger value
   and turns a simple series into what looks like a stacked chart. */
.rp-chart__bar {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  background: transparent;
  position: relative;
}
.rp-chart__bar > span {
  position: absolute;
  inset: auto 0 0 0;
  background: var(--rp-n-400);
  border-radius: 2px 2px 0 0;
  transition: background-color .12s var(--rp-ease);
}
.rp-chart__bar:hover > span { background: var(--rp-primary); }
.rp-chart__bar.is-current > span { background: var(--rp-primary); }
.rp-chart__axis {
  display: flex;
  gap: 3px;
  margin-top: var(--rp-space-1);
  font-size: var(--rp-fs-2xs);
  color: var(--rp-text-faint);
}
.rp-chart__axis span { flex: 1 1 0; text-align: center; min-width: 0; overflow: hidden; }

/* ── Ranked distribution ─────────────────────────────────────────────────
   Horizontal bars against a shared left baseline. People compare lengths
   accurately and angles badly, which is why this exists instead of a pie —
   and the label sits with its bar rather than in a legend. */

.rp-ranked { display: flex; flex-direction: column; gap: .45rem; }
.rp-ranked__row {
  display: grid;
  grid-template-columns: minmax(80px, 30%) 1fr auto;
  align-items: center;
  gap: var(--rp-space-2);
  font-size: var(--rp-fs-sm);
}
.rp-ranked__label {
  color: var(--rp-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-ranked__track {
  height: 8px;
  background: var(--rp-surface-3);
  border-radius: 2px;
  overflow: hidden;
}
.rp-ranked__track span {
  display: block;
  height: 100%;
  background: var(--rp-n-400);
  border-radius: 2px;
}
.rp-ranked__row:first-child .rp-ranked__track span { background: var(--rp-primary); }
.rp-ranked__value {
  font-variant-numeric: tabular-nums;
  color: var(--rp-text);
  font-weight: 550;
  min-width: 3ch;
  text-align: right;
}

/* Two charts side by side, collapsing to one column on narrow screens. */
.rp-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--rp-space-3);
}


/* ==========================================================================
   8. TABLES
   --------------------------------------------------------------------------
   The most important surface in the product. Optimised for scanning down a
   column: consistent row height, tabular figures, primary information at full
   contrast and metadata muted beneath it.
   ========================================================================== */

.rp-table-wrap { overflow-x: auto; }

.rp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--rp-fs-sm);
}
.rp-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--rp-surface);
  border-bottom: 1px solid var(--rp-border);
  padding: var(--rp-space-2) var(--rp-space-3);
  font-size: var(--rp-fs-xs);
  font-weight: 550;
  color: var(--rp-text-muted);
  white-space: nowrap;
  text-align: left;
}
.rp-table thead th a { color: inherit; display: inline-flex; align-items: center; gap: .15rem; }
.rp-table thead th a:hover { color: var(--rp-text); }
.rp-table thead th i { font-size: .7rem; }

.rp-table tbody td {
  padding: .55rem var(--rp-space-3);
  border-bottom: 1px solid var(--rp-border-subtle);
  vertical-align: middle;
  color: var(--rp-text);
  height: 48px;
}
.rp-table tbody tr:last-child td { border-bottom: 0; }
.rp-table tbody tr { transition: background-color .1s var(--rp-ease); }
.rp-table tbody tr:hover { background: var(--rp-surface-hover); }

/* A rail, not a tinted row: washing a whole row in red makes every cell in it
   harder to read, which is the opposite of what a warning should do. */
.rp-table tbody tr.is-suspended td:first-child {
  box-shadow: inset 2px 0 0 var(--rp-danger-solid);
}

.rp-table .rp-num     { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-table .rp-actions { text-align: right; white-space: nowrap; }

.rp-cell-primary { display: flex; align-items: center; gap: var(--rp-space-2); min-width: 0; }
.rp-cell-primary__body { min-width: 0; }
.rp-cell-primary__title {
  font-weight: 550;
  color: var(--rp-text);
  display: block;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.rp-cell-primary__title:hover { color: var(--rp-primary); }
.rp-cell-primary__sub {
  font-size: var(--rp-fs-xs);
  color: var(--rp-text-muted);
  display: block;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-thumb {
  width: 32px; height: 32px;
  border-radius: var(--rp-radius-sm);
  object-fit: cover;
  background: var(--rp-surface-3);
  flex: 0 0 auto;
  border: 1px solid var(--rp-border);
}
.rp-thumb--round { border-radius: 50%; }

.rp-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rp-surface-3);
  color: var(--rp-text-secondary);
  font-weight: 600;
  font-size: var(--rp-fs-2xs);
  flex: 0 0 auto;
  text-transform: uppercase;
  border: 1px solid var(--rp-border);
}
.rp-avatar--lg { width: 56px; height: 56px; font-size: var(--rp-fs-lg); }

/* ── Filter bar ──────────────────────────────────────────────────────── */

.rp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rp-space-2);
  align-items: flex-end;
  padding: var(--rp-space-3) var(--rp-space-4);
  border-bottom: 1px solid var(--rp-border);
  background: var(--rp-surface-2);
  border-radius: var(--rp-radius) var(--rp-radius) 0 0;
}
/* `.rp-field` is styled on its own rather than only inside `.rp-filters`, so a
   lone control in a page header picks up the same label treatment. */
.rp-field { display: flex; flex-direction: column; gap: .2rem; }
.rp-field > label {
  font-size: var(--rp-fs-xs);
  font-weight: 480;
  color: var(--rp-text-muted);
  margin-bottom: 0;
}
.rp-filters .form-control,
.rp-filters .form-select {
  height: 32px;
  font-size: var(--rp-fs-sm);
  padding: .25rem .5rem;
  background: var(--rp-surface);
}
.rp-filters__spacer { margin-left: auto; }

/* ── Pagination ──────────────────────────────────────────────────────── */

.rp-pager {
  display: flex;
  align-items: center;
  gap: var(--rp-space-3);
  flex-wrap: wrap;
  padding: var(--rp-space-2) var(--rp-space-4);
  border-top: 1px solid var(--rp-border);
  background: var(--rp-surface-2);
  border-radius: 0 0 var(--rp-radius) var(--rp-radius);
  font-size: var(--rp-fs-sm);
  color: var(--rp-text-muted);
}
.rp-pager strong { color: var(--rp-text); font-weight: 580; }
.rp-pager__pages { margin-left: auto; display: flex; gap: .15rem; }
.rp-pager__pages a,
.rp-pager__pages span {
  min-width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .4rem;
  border-radius: var(--rp-radius-sm);
  border: 1px solid transparent;
  color: var(--rp-text-muted);
  font-size: var(--rp-fs-sm);
  font-variant-numeric: tabular-nums;
}
.rp-pager__pages a:hover { background: var(--rp-surface-3); color: var(--rp-text); }
.rp-pager__pages .is-current {
  background: var(--rp-surface-3);
  border-color: var(--rp-border);
  color: var(--rp-text);
  font-weight: 600;
}
.rp-pager__pages .is-disabled { opacity: .35; pointer-events: none; }


/* ==========================================================================
   9. STATUS SYSTEM
   --------------------------------------------------------------------------
   One vocabulary across events, users, payouts, refunds, applications and
   reports. A neutral pill with a coloured dot: the dot carries the meaning,
   the text stays legible, and twelve rows of statuses do not turn a table into
   a colour chart. Meaning is fixed — green succeeded, amber waiting, red
   failed or blocked, blue informational, grey inert.
   ========================================================================== */

.rp-chip {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .08rem .42rem;
  border-radius: var(--rp-radius-xs);
  font-size: var(--rp-fs-xs);
  font-weight: 520;
  line-height: 1.6;
  white-space: nowrap;
  background: var(--rp-surface-3);
  border: 1px solid transparent;
  color: var(--rp-text-secondary);
}
.rp-chip::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rp-n-400);
  flex: 0 0 auto;
}
.rp-chip--plain::before { display: none; }

.rp-chip--ok      { color: var(--rp-success); }
.rp-chip--ok::before      { background: var(--rp-success-solid); }
.rp-chip--warn    { color: var(--rp-warning); }
.rp-chip--warn::before    { background: var(--rp-warning-solid); }
.rp-chip--danger  { color: var(--rp-danger); }
.rp-chip--danger::before  { background: var(--rp-danger-solid); }
.rp-chip--info    { color: var(--rp-info); }
.rp-chip--info::before    { background: var(--rp-info-solid); }
.rp-chip--brand   { color: var(--rp-primary); }
.rp-chip--brand::before   { background: var(--rp-primary); }
.rp-chip--neutral { color: var(--rp-text-secondary); }

/* The single exception to the whole rule. A suspended account or event has to
   be impossible to miss while scanning, so it gets a filled block. */
.rp-chip--suspended {
  background: var(--rp-danger-solid);
  color: #fff;
  border-color: var(--rp-danger-solid);
  font-weight: 560;
}
.rp-chip--suspended::before { background: currentColor; }


/* ==========================================================================
   10. FORMS
   ========================================================================== */

/* Marks a block as a form region: it sets the vertical rhythm between fields so
   individual pages stop reaching for one-off margin utilities. */
.rp-form .row + .row { margin-top: var(--rp-space-3); }
.rp-form > .mb-3:last-child,
.rp-form > .row:last-child { margin-bottom: 0 !important; }
.rp-form p:last-child { margin-bottom: 0; }

label.form-label {
  font-size: var(--rp-fs-sm);
  font-weight: 520;
  color: var(--rp-text);
  margin-bottom: .3rem;
}

.form-control, .form-select {
  font-size: var(--rp-fs-md);
  padding: .38rem .6rem;
  border: 1px solid var(--rp-border-strong);
  border-radius: var(--rp-radius-sm);
  background: var(--rp-surface);
  color: var(--rp-text);
  transition: border-color .12s var(--rp-ease), box-shadow .12s var(--rp-ease);
}
.form-control::placeholder { color: var(--rp-text-faint); }
.form-control:hover, .form-select:hover { border-color: var(--rp-n-400); }
.form-control:focus, .form-select:focus {
  border-color: var(--rp-primary);
  box-shadow: 0 0 0 3px var(--rp-focus);
  background: var(--rp-surface);
  color: var(--rp-text);
  outline: none;
}
.form-control:disabled, .form-select:disabled {
  background: var(--rp-surface-3);
  color: var(--rp-text-muted);
  cursor: not-allowed;
}
.form-control-sm, .form-select-sm { font-size: var(--rp-fs-sm); padding: .22rem .45rem; }
textarea.form-control { line-height: 1.5; }

/* Date and time inputs render their own picker glyph, which is black by
   default and invisible on a dark surface. */
[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(.75);
}

.form-text { font-size: var(--rp-fs-xs); color: var(--rp-text-muted); margin-top: .25rem; }

.form-check-input {
  border-color: var(--rp-border-strong);
  background-color: var(--rp-surface);
}
.form-check-input:checked { background-color: var(--rp-primary); border-color: var(--rp-primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--rp-focus); border-color: var(--rp-primary); }
.form-check-label { font-size: var(--rp-fs-md); color: var(--rp-text); }

.input-group-text {
  background: var(--rp-surface-2);
  border-color: var(--rp-border-strong);
  color: var(--rp-text-muted);
  font-size: var(--rp-fs-md);
}

.is-invalid, .form-control.is-invalid, .form-select.is-invalid { border-color: var(--rp-danger); }
.invalid-feedback { color: var(--rp-danger); font-size: var(--rp-fs-xs); }

/* Sticky action bar — a long form must never hide its save button. */
.rp-formbar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--rp-space-2);
  padding: var(--rp-space-3) var(--rp-space-4);
  background: var(--rp-surface);
  border-top: 1px solid var(--rp-border);
  border-radius: 0 0 var(--rp-radius) var(--rp-radius);
}
.rp-formbar__note { font-size: var(--rp-fs-xs); color: var(--rp-text-muted); margin-right: auto; }


/* ==========================================================================
   11. BUTTONS
   --------------------------------------------------------------------------
   Four ranks: primary (purple, one per view), secondary (outlined neutral),
   tertiary (text), destructive (red). Compact, square-ish, never pills.
   ========================================================================== */

.btn {
  font-size: var(--rp-fs-sm);
  font-weight: 520;
  border-radius: var(--rp-radius-sm);
  padding: .36rem .7rem;
  transition: background-color .12s var(--rp-ease), border-color .12s var(--rp-ease),
              color .12s var(--rp-ease);
}
.btn-sm { font-size: var(--rp-fs-xs); padding: .24rem .55rem; }

/* A real disabled treatment rather than opacity. Fading a purple button on a
   dark surface makes it disappear entirely, so a disabled control reads as a
   missing one — the user cannot tell there is an action there at all. */
.btn:disabled, .btn.disabled {
  cursor: not-allowed;
  background: var(--rp-surface-3);
  border-color: var(--rp-border);
  color: var(--rp-text-faint);
  box-shadow: none;
}

.btn-rp, .btn-primary {
  background: var(--rp-primary);
  border: 1px solid var(--rp-primary);
  color: #fff;
}
.btn-rp:hover, .btn-rp:focus, .btn-primary:hover, .btn-primary:focus {
  background: var(--rp-primary-hover);
  border-color: var(--rp-primary-hover);
  color: #fff;
}
[data-bs-theme="dark"] .btn-rp,
[data-bs-theme="dark"] .btn-primary { color: var(--rp-n-50); font-weight: 580; }
[data-bs-theme="dark"] .btn-rp:hover,
[data-bs-theme="dark"] .btn-primary:hover { color: var(--rp-n-50); }

.btn-rp-outline, .btn-outline-secondary {
  background: var(--rp-surface);
  border: 1px solid var(--rp-border-strong);
  color: var(--rp-text);
}
.btn-rp-outline:hover, .btn-outline-secondary:hover {
  background: var(--rp-surface-3);
  border-color: var(--rp-border-strong);
  color: var(--rp-text);
}

.btn-rp-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--rp-text-secondary);
}
.btn-rp-ghost:hover { background: var(--rp-surface-3); color: var(--rp-text); }

.btn-danger  { background: var(--rp-danger-solid);  border: 1px solid var(--rp-danger-solid);  color: #fff; }
.btn-success { background: var(--rp-success-solid); border: 1px solid var(--rp-success-solid); color: #fff; }
.btn-warning { background: var(--rp-warning-solid); border: 1px solid var(--rp-warning-solid); color: #fff; }
.btn-danger:hover  { background: color-mix(in srgb, var(--rp-danger-solid) 86%, #000);  border-color: transparent; color: #fff; }
.btn-success:hover { background: color-mix(in srgb, var(--rp-success-solid) 86%, #000); border-color: transparent; color: #fff; }
.btn-warning:hover { background: color-mix(in srgb, var(--rp-warning-solid) 86%, #000); border-color: transparent; color: #fff; }

.btn-outline-danger {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--rp-danger) 40%, transparent);
  color: var(--rp-danger);
}
.btn-outline-danger:hover { background: var(--rp-danger-subtle); border-color: var(--rp-danger); color: var(--rp-danger); }
.btn-outline-warning {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--rp-warning) 40%, transparent);
  color: var(--rp-warning);
}
.btn-outline-warning:hover { background: var(--rp-warning-subtle); border-color: var(--rp-warning); color: var(--rp-warning); }

.btn-link { color: var(--rp-primary); text-decoration: underline; text-underline-offset: 2px; }
.btn-link:hover { color: var(--rp-primary-hover); }


/* ==========================================================================
   12. OVERLAYS — MODALS, DROPDOWNS, TOASTS
   ========================================================================== */

.modal-content {
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-lg);
  background: var(--rp-surface);
  box-shadow: var(--rp-shadow-lg);
}
.modal-header {
  border-bottom: 1px solid var(--rp-border);
  padding: var(--rp-space-4);
}
.modal-body { color: var(--rp-text); font-size: var(--rp-fs-md); padding: var(--rp-space-4); }
.modal-footer {
  border-top: 1px solid var(--rp-border);
  padding: var(--rp-space-3) var(--rp-space-4);
  background: var(--rp-surface-2);
  border-radius: 0 0 var(--rp-radius-lg) var(--rp-radius-lg);
}
.modal-title { font-size: var(--rp-fs-lg); font-weight: 620; color: var(--rp-text); letter-spacing: -.015em; }
.modal-backdrop.show { background: var(--rp-scrim); opacity: 1; }
.modal-body code {
  background: var(--rp-surface-3);
  color: var(--rp-text);
  padding: .05rem .3rem;
  border-radius: var(--rp-radius-xs);
  font-size: .85em;
  font-family: var(--rp-mono);
}
.btn-close { opacity: .45; }
.btn-close:hover { opacity: .8; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }

/* A destructive dialog is marked at the top edge rather than by tinting the
   whole panel — the body still has to be comfortable to read. */
.modal-content.is-destructive { border-top: 2px solid var(--rp-danger-solid); }

.dropdown-menu {
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  box-shadow: var(--rp-shadow-lg);
  font-size: var(--rp-fs-sm);
  padding: var(--rp-space-1);
  background: var(--rp-surface);
  color: var(--rp-text);
}
.dropdown-item {
  border-radius: var(--rp-radius-sm);
  padding: .38rem .5rem;
  color: var(--rp-text);
  display: flex;
  align-items: center;
  gap: var(--rp-space-2);
}
.dropdown-item i { color: var(--rp-text-muted); font-size: .9rem; width: 1rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--rp-surface-3); color: var(--rp-text); }
.dropdown-item.text-danger { color: var(--rp-danger) !important; }
.dropdown-item.text-danger i { color: var(--rp-danger); }
.dropdown-item.text-danger:hover { background: var(--rp-danger-subtle); }
.dropdown-header {
  font-size: var(--rp-fs-xs);
  font-weight: 550;
  color: var(--rp-text-muted);
  padding: .3rem .5rem;
}
.dropdown-divider { border-color: var(--rp-border); margin: var(--rp-space-1) 0; }

.rp-toasts {
  position: fixed;
  top: calc(var(--rp-topbar-h) + var(--rp-space-3));
  right: var(--rp-space-4);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: var(--rp-space-2);
  max-width: 380px;
}
.rp-toast {
  display: flex;
  gap: var(--rp-space-2);
  align-items: flex-start;
  padding: var(--rp-space-3);
  border-radius: var(--rp-radius);
  background: var(--rp-surface);
  border: 1px solid var(--rp-border);
  border-left: 2px solid var(--rp-n-400);
  box-shadow: var(--rp-shadow-lg);
  font-size: var(--rp-fs-sm);
  color: var(--rp-text);
  animation: rp-toast-in .16s var(--rp-ease);
}
.rp-toast--success { border-left-color: var(--rp-success-solid); }
.rp-toast--error   { border-left-color: var(--rp-danger-solid); }
.rp-toast--warning { border-left-color: var(--rp-warning-solid); }
.rp-toast--info    { border-left-color: var(--rp-info-solid); }
.rp-toast i { font-size: .95rem; flex: 0 0 auto; margin-top: .1rem; }
.rp-toast--success i { color: var(--rp-success); }
.rp-toast--error i   { color: var(--rp-danger); }
.rp-toast--warning i { color: var(--rp-warning); }
.rp-toast--info i    { color: var(--rp-info); }
.rp-toast__close {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--rp-text-faint);
  font-size: 1rem;
  line-height: 1;
  padding: 0 .1rem;
}
.rp-toast__close:hover { color: var(--rp-text); }

@keyframes rp-toast-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ── Bootstrap tabs ──────────────────────────────────────────────────── */

.nav-tabs { border-bottom: 1px solid var(--rp-border); gap: .1rem; }
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--rp-text-muted);
  font-size: var(--rp-fs-sm);
  font-weight: 520;
  padding: .55rem .7rem;
  border-radius: 0;
  background: none;
  transition: color .12s var(--rp-ease), border-color .12s var(--rp-ease);
}
.nav-tabs .nav-link:hover { color: var(--rp-text); border-bottom-color: var(--rp-border-strong); }
.nav-tabs .nav-link.active {
  color: var(--rp-text);
  background: none;
  border-bottom-color: var(--rp-primary);
  font-weight: 580;
}
.nav-tabs .nav-link .rp-chip { margin-left: .25rem; }


/* ==========================================================================
   13. FEEDBACK — BANNERS, EMPTY, SKELETON
   ========================================================================== */

.rp-banner {
  display: flex;
  gap: var(--rp-space-2);
  align-items: flex-start;
  padding: var(--rp-space-3);
  border-radius: var(--rp-radius);
  border: 1px solid var(--rp-border);
  border-left-width: 2px;
  font-size: var(--rp-fs-md);
  margin-bottom: var(--rp-space-4);
  background: var(--rp-surface-2);
  color: var(--rp-text);
}
.rp-banner i { font-size: 1rem; line-height: 1.35; flex: 0 0 auto; color: var(--rp-text-muted); }
.rp-banner__title { font-weight: 600; margin-bottom: .1rem; }
.rp-banner__body { min-width: 0; }
.rp-banner--danger { background: var(--rp-danger-subtle);  border-left-color: var(--rp-danger-solid); }
.rp-banner--danger i { color: var(--rp-danger); }
.rp-banner--warn   { background: var(--rp-warning-subtle); border-left-color: var(--rp-warning-solid); }
.rp-banner--warn i { color: var(--rp-warning); }
.rp-banner--ok     { background: var(--rp-success-subtle); border-left-color: var(--rp-success-solid); }
.rp-banner--ok i { color: var(--rp-success); }
.rp-banner--info   { background: var(--rp-info-subtle);    border-left-color: var(--rp-info-solid); }
.rp-banner--info i { color: var(--rp-info); }

.rp-danger-zone { border-color: color-mix(in srgb, var(--rp-danger) 30%, var(--rp-border)); }
.rp-danger-zone .rp-card__head {
  border-bottom-color: color-mix(in srgb, var(--rp-danger) 22%, var(--rp-border));
  background: var(--rp-danger-subtle);
  border-radius: var(--rp-radius) var(--rp-radius) 0 0;
}
.rp-danger-zone .rp-card__head h3 { color: var(--rp-danger); }

/* Text, not illustration. An empty table means "nothing matched" — it is a
   result, not an occasion for a mascot. */
.rp-empty { text-align: center; padding: var(--rp-space-6) var(--rp-space-5); }
.rp-empty h3 { font-size: var(--rp-fs-md); font-weight: 600; color: var(--rp-text); margin-bottom: .25rem; }
.rp-empty p { font-size: var(--rp-fs-sm); margin: 0 auto; max-width: 46ch; color: var(--rp-text-muted); }
.rp-empty .btn { margin-top: var(--rp-space-3); }

/* Skeletons preserve layout while data loads, so nothing jumps on arrival. */
.rp-skeleton {
  background: linear-gradient(90deg,
    var(--rp-surface-3) 25%,
    var(--rp-surface-2) 37%,
    var(--rp-surface-3) 63%);
  background-size: 400% 100%;
  animation: rp-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--rp-radius-xs);
  height: 1em;
}
.rp-skeleton--title { height: 1.5em; width: 45%; }
.rp-skeleton--line  { width: 100%; margin-bottom: .4rem; }
.rp-skeleton--short { width: 60%; }

@keyframes rp-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.rp-timeline { position: relative; padding-left: var(--rp-space-4); }
.rp-timeline::before {
  content: "";
  position: absolute;
  left: 3px; top: .45rem; bottom: .45rem;
  width: 1px;
  background: var(--rp-border);
}
.rp-timeline__item { position: relative; padding: 0 0 var(--rp-space-3); }
.rp-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--rp-space-4)); top: .42rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rp-n-300);
  box-shadow: 0 0 0 2px var(--rp-surface);
}
.rp-timeline__item--danger::before { background: var(--rp-danger-solid); }
.rp-timeline__item--ok::before     { background: var(--rp-success-solid); }
.rp-timeline__item--brand::before  { background: var(--rp-n-400); }
.rp-timeline__title { font-size: var(--rp-fs-sm); font-weight: 550; color: var(--rp-text); }
.rp-timeline__meta  { font-size: var(--rp-fs-xs); color: var(--rp-text-muted); }

.rp-media {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: var(--rp-space-2);
}
.rp-media a {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--rp-radius-sm);
  overflow: hidden;
  border: 1px solid var(--rp-border);
  background: var(--rp-surface-2);
}
.rp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-media a:hover { border-color: var(--rp-border-strong); }

/* ── Bootstrap utility overrides ─────────────────────────────────────── */

.text-body-secondary { color: var(--rp-text-secondary) !important; }
.fw-semibold { font-weight: 600 !important; }
hr { border-color: var(--rp-border); opacity: 1; }
code { color: var(--rp-text); font-family: var(--rp-mono); }


/* ==========================================================================
   14. RESPONSIVE & PRINT
   --------------------------------------------------------------------------
   Desktop is the primary environment, but a suspension sometimes has to happen
   from a phone. The sidebar becomes a real drawer rather than a squeezed
   column, tables scroll within their card instead of breaking the page, and
   filters reflow to full width so they stay tappable.
   ========================================================================== */

@media (max-width: 1199.98px) {
  .rp-content { padding: var(--rp-space-4); }
}

@media (max-width: 991.98px) {
  .rp-sidebar {
    transform: translateX(-100%);
    box-shadow: var(--rp-shadow-lg);
    width: 268px;
  }
  body.rp-nav-open .rp-sidebar { transform: none; }
  .rp-main { margin-left: 0; }
  body.rp-nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--rp-scrim);
    z-index: 1035;
    animation: rp-fade-in .16s var(--rp-ease);
  }
  .rp-topbar { padding: 0 var(--rp-space-3); }
  .rp-content { padding: var(--rp-space-3) var(--rp-space-3) var(--rp-space-6); }
  .rp-nav-link { padding: .5rem var(--rp-space-2); }   /* larger touch target */
}

@keyframes rp-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 767.98px) {
  .rp-page-head h1 { font-size: var(--rp-fs-lg); }
  .rp-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--rp-space-2); }
  .rp-stat__value { font-size: var(--rp-fs-xl); }
  .rp-filters { padding: var(--rp-space-3); }
  .rp-filters .rp-field { flex: 1 1 100%; }
  .rp-filters .rp-col-search { flex: 1 1 100%; }
  .rp-filters__spacer { margin-left: 0; width: 100%; }
  .rp-defs { grid-template-columns: 1fr; }
  .rp-toasts { left: var(--rp-space-3); right: var(--rp-space-3); max-width: none; }
  .rp-pager { justify-content: center; }
  .rp-pager__pages { margin-left: 0; }
}

/* Honour a reduced-motion preference: nothing here is load-bearing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .rp-sidebar, .rp-topbar, .rp-filters, .rp-pager, .rp-formbar, .rp-toasts,
  .rp-actions, .dropdown { display: none !important; }
  .rp-main { margin-left: 0; }
  .rp-card { break-inside: avoid; border-color: #ddd; }
  .rp-detail { grid-template-columns: 1fr; }
}