/* ============================================================================
 * Rebels Design System — Light + Navy Chrome + Amber
 * ----------------------------------------------------------------------------
 * Single source of truth for /admin and /parents UI surfaces.
 * Reference mockup: ~/Desktop/rebels-player-detail-amber.html
 * Every page should import this file and use the system classes/tokens.
 *
 * Sections:
 *   1. Tokens (CSS variables)
 *   2. Base reset / typography
 *   3. Chrome (top header/nav strip)
 *   4. Page body / layout
 *   5. Sections / cards
 *   6. Metrics
 *   7. Pills / tags / status semantics
 *   8. Forms / inputs / buttons
 *   9. Notes / lists
 *  10. Tables
 *  11. Avatars
 *  12. Utilities
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Bebas+Neue&display=swap');

/* ============== 1. TOKENS ============== */
:root {
  /* Surfaces */
  --rs-page:          #f4f7fb;
  --rs-card:          #ffffff;
  --rs-border:        #e2e8f0;
  --rs-hairline:      #f1f5f9;
  --rs-hairline-2:    #e8eef5;

  /* Brand chrome */
  --rs-navy:          #0f1f3a;
  --rs-navy-mid:      #162a4a;
  --rs-navy-deep:     #0a1628;

  /* Ice (secondary cool accent) */
  --rs-ice:           #b8d4e8;
  --rs-ice-bright:    #d4e8f5;
  --rs-ice-soft:      #eef4fa;

  /* Brand amber (PRIMARY accent — championship gold) */
  --rs-amber:         #b45309;
  --rs-amber-mid:     #d97706;
  --rs-amber-soft:    #fef3c7;
  --rs-amber-glow:    rgba(180,83,9,0.18);
  --rs-amber-light:   #fcd34d;

  /* Text */
  --rs-text:          #0f1f3a;
  --rs-text-2:        #475569;
  --rs-text-3:        #64748b;
  --rs-text-muted:    #94a3b8;

  /* Status (used SPARINGLY, only for state semantics) */
  --rs-emerald:       #059669;
  --rs-emerald-bg:    #ecfdf5;
  --rs-emerald-bd:    #a7f3d0;
  --rs-emerald-tx:    #065f46;
  --rs-warn:          #f59e0b;
  --rs-warn-bg:       #fffbeb;
  --rs-warn-bd:       #fde68a;
  --rs-warn-tx:       #92400e;
  --rs-rose:          #dc2626;
  --rs-rose-bg:       #fef2f2;
  --rs-rose-bd:       #fecaca;
  --rs-rose-tx:       #991b1b;

  /* Gradients */
  --rs-gradient-chrome:  linear-gradient(135deg, var(--rs-navy-deep) 0%, var(--rs-navy) 50%, var(--rs-navy-mid) 100%);
  --rs-gradient-amber:   linear-gradient(135deg, var(--rs-amber) 0%, var(--rs-amber-mid) 100%);
  --rs-gradient-card:    linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);

  /* Radii / shadows */
  --rs-r-sm:          6px;
  --rs-r-md:          8px;
  --rs-r-lg:          10px;
  --rs-r-xl:          14px;
  --rs-shadow-card:   0 1px 2px rgba(15,31,58,0.04);
  --rs-shadow-hover:  0 8px 24px -8px rgba(15,31,58,0.18), 0 2px 6px -2px rgba(15,31,58,0.08);
}

/* ============== 2. BASE RESET ============== */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.rs {
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--rs-page);
  color: var(--rs-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.5;
}

.rs h1, .rs h2, .rs h3, .rs h4, .rs h5, .rs h6 {
  font-family: inherit;
  font-weight: 700;
  /* color intentionally NOT set here — heading should inherit from its
     container (so white text inside a navy card stays white). System
     defaults: body.rs has color:var(--rs-text) (navy on light page). */
  margin: 0;
  letter-spacing: -0.2px;
}

/* Anchor styles: only apply to anchors WITHOUT a Tailwind text-* class.
   We can't selector-match Tailwind classes cleanly, so use a tag-only rule
   and let any `text-[...]`, `text-white`, etc. override it via specificity.
   Tailwind utility (0,1,0) beats this tag selector (0,0,1). */
.rs a { text-decoration: none; }
.rs a:not([class*="text-"]) { color: var(--rs-navy); }
.rs a:not([class*="text-"]):hover { color: var(--rs-amber); }

.rs p { margin: 0; }

/* ============== 3. CHROME (top header on every page) ============== */
.rs-chrome {
  background: var(--rs-gradient-chrome);
  padding: 22px 0 26px;
  position: relative;
}
.rs-chrome::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--rs-amber) 35%, var(--rs-amber-mid) 50%, var(--rs-amber) 65%, transparent 100%);
  opacity: 0.85;
}
.rs-chrome-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.rs-chrome-brand { display: flex; align-items: center; gap: 14px; }

.rs-chrome-mark {
  width: 36px; height: 36px;
  background: rgba(180,83,9,0.15);
  border: 1px solid rgba(217,119,6,0.55);
  border-radius: var(--rs-r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--rs-amber-light);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px; letter-spacing: 0.5px;
  box-shadow: 0 0 12px var(--rs-amber-glow);
  flex-shrink: 0;
}
.rs-chrome-mark.lg {
  width: 44px; height: 44px;
  font-size: 22px;
  border-radius: var(--rs-r-lg);
}

.rs-chrome-title-block { display: flex; flex-direction: column; }
.rs-chrome-eyebrow {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2.5px;
  color: var(--rs-ice);
  opacity: 0.7;
}
.rs-chrome-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px; letter-spacing: 1.5px; line-height: 1;
  color: white; margin-top: 2px;
}

.rs-crumbs { display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(212,232,245,0.7); }
.rs-crumbs a { color: var(--rs-ice-bright); text-decoration: none; opacity: 0.85; }
.rs-crumbs a:hover { opacity: 1; }
.rs-crumbs .sep { opacity: 0.4; }
.rs-crumbs .here { color: white; font-weight: 500; }

.rs-chrome-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rs-chrome-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 12px; font-weight: 500;
  padding: 7px 14px; border-radius: var(--rs-r-md);
  background: rgba(184,212,232,0.1);
  border: 1px solid rgba(184,212,232,0.25);
  color: var(--rs-ice-bright);
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
  line-height: 1.2;
}
.rs-chrome-btn:hover {
  background: rgba(184,212,232,0.2);
  border-color: rgba(184,212,232,0.4);
  color: white;
}
.rs-chrome-btn.alt {
  background: transparent;
  border-color: rgba(184,212,232,0.18);
  color: rgba(212, 232, 245, 0.7);
}
.rs-chrome-btn.primary {
  background: var(--rs-gradient-amber);
  color: white;
  border-color: rgba(252,211,77,0.4);
}
.rs-chrome-btn.primary:hover { filter: brightness(1.1); color: white; }

/* ============== 4. PAGE BODY / LAYOUT ============== */
.rs-page-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 20px 80px;
}
.rs-page-body.narrow { max-width: 780px; }
.rs-page-body.wide   { max-width: 1280px; }

.rs-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.rs-page-title {
  font-size: 22px; font-weight: 700;
  color: var(--rs-text);
  letter-spacing: -0.3px;
}
.rs-page-subtitle {
  font-size: 13px; color: var(--rs-text-2);
  margin-top: 4px;
}

/* Player/profile-style header inside page body */
.rs-profile-head {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.rs-profile-name {
  font-size: 26px; font-weight: 700;
  color: var(--rs-text);
  letter-spacing: -0.4px;
}
.rs-profile-meta {
  font-size: 13px; color: var(--rs-text-3);
  margin-top: 4px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.rs-profile-meta .rs-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rs-text-muted); }
.rs-profile-jersey { color: var(--rs-amber); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============== 5. SECTIONS / CARDS ============== */
.rs-section {
  background: var(--rs-card);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-r-xl);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--rs-shadow-card);
}
.rs-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rs-hairline);
  background: var(--rs-gradient-card);
  gap: 12px;
  flex-wrap: wrap;
}
.rs-section-title-block { display: flex; align-items: center; gap: 12px; }
.rs-section-icon {
  width: 32px; height: 32px;
  background: var(--rs-ice-soft);
  border: 1px solid var(--rs-ice);
  border-radius: var(--rs-r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--rs-navy);
  flex-shrink: 0;
}
.rs-section-eyebrow {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.8px;
  color: var(--rs-amber);
}
.rs-section-title {
  font-size: 15px; font-weight: 700;
  color: var(--rs-text);
  margin: 1px 0 0;
  letter-spacing: -0.1px;
}
.rs-section-meta {
  font-size: 12px; color: var(--rs-text-3);
  font-variant-numeric: tabular-nums;
}
.rs-section-body { padding: 18px 20px 20px; }

/* Grid card variant (one card per item, no inner section-head) */
.rs-card {
  background: var(--rs-card);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-r-xl);
  padding: 16px;
  transition: all .18s ease;
  text-decoration: none;
  display: block;
  color: var(--rs-text);
  box-shadow: var(--rs-shadow-card);
}
.rs-card:hover {
  border-color: var(--rs-ice);
  box-shadow: var(--rs-shadow-hover);
  transform: translateY(-1px);
}

.rs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.rs-grid.tight { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ============== 6. METRICS ============== */
.rs-metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.rs-metric {
  background: var(--rs-hairline);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-r-lg);
  padding: 12px 14px;
  transition: border-color .12s ease;
}
.rs-metric:hover { border-color: var(--rs-amber); }
.rs-metric-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--rs-text-3);
}
.rs-metric-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--rs-amber);
  margin-top: 4px;
  letter-spacing: -0.3px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.rs-metric-sub {
  font-size: 11px; color: var(--rs-text-muted);
  margin-top: 4px;
}

/* ============== 7. PILLS / TAGS / STATUS ============== */
.rs-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  border: 1px solid;
}
.rs-pill-dot { width: 6px; height: 6px; border-radius: 50%; }
.rs-pill.ok    { background: var(--rs-emerald-bg); border-color: var(--rs-emerald-bd); color: var(--rs-emerald-tx); }
.rs-pill.warn  { background: var(--rs-warn-bg);    border-color: var(--rs-warn-bd);    color: var(--rs-warn-tx); }
.rs-pill.alert { background: var(--rs-rose-bg);    border-color: var(--rs-rose-bd);    color: var(--rs-rose-tx); }
.rs-pill.ok    .rs-pill-dot { background: var(--rs-emerald); }
.rs-pill.warn  .rs-pill-dot { background: var(--rs-warn); }
.rs-pill.alert .rs-pill-dot { background: var(--rs-rose); }
.rs-pill.neutral { background: var(--rs-hairline); border-color: var(--rs-border); color: var(--rs-text-3); }
.rs-pill.ice   { background: var(--rs-ice-soft); border-color: var(--rs-ice); color: var(--rs-navy); }
.rs-pill.amber { background: var(--rs-amber-soft); border-color: var(--rs-warn-bd); color: var(--rs-amber); }

.rs-tag {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border: 1px solid;
}
.rs-tag.coach    { background: var(--rs-amber-soft); color: var(--rs-amber); border-color: var(--rs-warn-bd); }
.rs-tag.parent   { background: var(--rs-ice-soft);   color: var(--rs-navy);  border-color: var(--rs-ice); }
.rs-tag.category { background: white;                color: var(--rs-text-3); border-color: var(--rs-border); }
.rs-tag.shared   { background: var(--rs-emerald-bg); color: var(--rs-emerald-tx); border-color: var(--rs-emerald-bd); }

.rs-chip {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--rs-r-sm);
  background: var(--rs-hairline);
  color: var(--rs-text-2);
  border: 1px solid var(--rs-border);
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 500;
}
.rs-chip-num { color: var(--rs-navy); font-weight: 700; font-variant-numeric: tabular-nums; }
.rs-chip-date { color: var(--rs-text-muted); font-weight: 500; }

/* ============== 8. FORMS ============== */
.rs label.rs-field-label,
.rs .rs-field-label {
  font-size: 11px; font-weight: 600;
  color: var(--rs-text-3);
  text-transform: uppercase; letter-spacing: 0.8px;
  display: block;
  margin-bottom: 4px;
}

.rs input[type="text"],
.rs input[type="email"],
.rs input[type="password"],
.rs input[type="number"],
.rs input[type="tel"],
.rs input[type="date"],
.rs input[type="time"],
.rs input[type="search"],
.rs input[type="url"],
.rs select,
.rs textarea,
.rs-input,
.rs-select,
.rs-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  color: var(--rs-text);
  background: white;
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-r-md);
  padding: 9px 12px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.rs input:focus,
.rs select:focus,
.rs textarea:focus,
.rs-input:focus, .rs-select:focus, .rs-textarea:focus {
  outline: none;
  border-color: var(--rs-amber);
  box-shadow: 0 0 0 3px var(--rs-amber-glow);
}
.rs textarea, .rs-textarea { resize: vertical; min-height: 64px; line-height: 1.5; }

.rs-checkbox-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--rs-text-2);
  padding: 9px 12px;
  background: var(--rs-hairline);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-r-md);
  cursor: pointer;
}
.rs-checkbox-row input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--rs-amber);
  flex-shrink: 0;
}

.rs-form-card {
  background: var(--rs-ice-soft);
  border: 1px dashed var(--rs-ice);
  border-radius: var(--rs-r-lg);
  padding: 14px;
  margin-bottom: 16px;
}
.rs-form-card-title {
  font-size: 11px; font-weight: 600;
  color: var(--rs-amber);
  text-transform: uppercase; letter-spacing: 1.2px;
  margin: 0 0 10px;
}

.rs-form-grid { display: grid; gap: 8px; }
.rs-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.rs-form-row.three { grid-template-columns: 1fr 1fr 1fr; }

/* Buttons */
.rs-btn {
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--rs-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .12s ease;
  letter-spacing: 0.1px;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.rs-btn-primary {
  background: var(--rs-gradient-amber);
  color: white;
  border-color: #92400e;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 2px 6px rgba(180,83,9,0.25);
}
.rs-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); color: white; }

.rs-btn-navy {
  background: linear-gradient(135deg, var(--rs-navy) 0%, var(--rs-navy-mid) 100%);
  color: white;
  border-color: var(--rs-navy-mid);
}
.rs-btn-navy:hover { filter: brightness(1.15); color: white; }

.rs-btn-ghost {
  background: white;
  color: var(--rs-navy);
  border-color: var(--rs-border);
}
.rs-btn-ghost:hover { background: var(--rs-hairline); border-color: var(--rs-amber); color: var(--rs-amber); }

.rs-btn-sm { padding: 6px 12px; font-size: 12px; }
.rs-btn-lg { padding: 12px 24px; font-size: 14px; }
.rs-btn-block { width: 100%; }

/* ============== 9. NOTES / ITEM LISTS ============== */
.rs-note {
  background: white;
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-r-lg);
  padding: 14px;
  margin-bottom: 8px;
  transition: border-color .12s ease;
  position: relative;
}
.rs-note:hover { border-color: var(--rs-amber); }
.rs-note.is-shared { box-shadow: inset 3px 0 0 var(--rs-amber); }
.rs-note-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
  flex-wrap: wrap;
}
.rs-note-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rs-note-meta { font-size: 11px; color: var(--rs-text-muted); font-variant-numeric: tabular-nums; }
.rs-note-body {
  font-size: 14px; color: var(--rs-text);
  line-height: 1.55;
  white-space: pre-wrap;
  margin: 0;
}
.rs-note-actions {
  display: flex; gap: 14px; margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rs-hairline);
}
.rs-note-action {
  font-size: 11px; font-weight: 500;
  color: var(--rs-text-3);
  background: none; border: none; cursor: pointer;
  padding: 0; transition: color .1s ease;
  font-family: inherit;
}
.rs-note-action:hover { color: var(--rs-amber); }
.rs-note-action.danger:hover { color: var(--rs-rose); }

/* ============== 10. TABLES ============== */
.rs-table-wrap {
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-r-lg);
  overflow: hidden;
  background: white;
}
.rs-table { width: 100%; border-collapse: collapse; }
.rs-table thead tr {
  background: var(--rs-hairline);
  border-bottom: 1px solid var(--rs-border);
}
.rs-table th {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--rs-text-3);
  text-align: left;
  padding: 10px 14px;
}
.rs-table th.right, .rs-table td.right { text-align: right; }
.rs-table td {
  font-size: 13px;
  color: var(--rs-text);
  padding: 11px 14px;
  border-bottom: 1px solid var(--rs-hairline-2);
  vertical-align: middle;
}
.rs-table td.right { font-variant-numeric: tabular-nums; }
.rs-table td.muted { color: var(--rs-text-3); }
.rs-table td.num { color: var(--rs-amber); font-weight: 700; font-size: 14px; }
.rs-table tbody tr:last-child td { border-bottom: none; }
.rs-table tbody tr:hover { background: var(--rs-amber-soft); }

.rs-row-tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  background: var(--rs-hairline);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-r-sm);
  color: var(--rs-text-2);
}
.rs-row-tag.coach  { background: var(--rs-amber-soft); color: var(--rs-amber); border-color: var(--rs-warn-bd); }
.rs-row-tag.parent { background: var(--rs-ice-soft);   color: var(--rs-navy);  border-color: var(--rs-ice); }

/* ============== 11. AVATARS ============== */
.rs-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rs-navy) 0%, var(--rs-navy-mid) 100%);
  color: var(--rs-ice-bright);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 16px; letter-spacing: 0.4px;
  border: 2px solid var(--rs-amber);
  flex-shrink: 0;
}
.rs-avatar.lg {
  width: 64px; height: 64px;
  font-size: 20px; letter-spacing: 0.5px;
  box-shadow: 0 0 0 4px rgba(180,83,9,0.08);
}
.rs-avatar.sm {
  width: 36px; height: 36px;
  font-size: 13px;
  border-width: 1.5px;
}

/* ============== 12. UTILITIES ============== */
.rs-text-amber  { color: var(--rs-amber); }
.rs-text-navy   { color: var(--rs-navy); }
.rs-text-2      { color: var(--rs-text-2); }
.rs-text-3      { color: var(--rs-text-3); }
.rs-text-muted  { color: var(--rs-text-muted); }
.rs-text-emerald { color: var(--rs-emerald-tx); }
.rs-text-rose   { color: var(--rs-rose-tx); }

.rs-bg-card     { background: var(--rs-card); }
.rs-bg-page     { background: var(--rs-page); }
.rs-bg-hairline { background: var(--rs-hairline); }
.rs-bg-ice-soft { background: var(--rs-ice-soft); }

.rs-border       { border: 1px solid var(--rs-border); }
.rs-border-t     { border-top: 1px solid var(--rs-hairline); }

.rs-rounded     { border-radius: var(--rs-r-lg); }
.rs-rounded-lg  { border-radius: var(--rs-r-xl); }

.rs-tabular     { font-variant-numeric: tabular-nums; }

.rs-mb-2        { margin-bottom: 8px; }
.rs-mb-3        { margin-bottom: 12px; }
.rs-mb-4        { margin-bottom: 16px; }
.rs-mb-6        { margin-bottom: 24px; }

.rs-flex        { display: flex; }
.rs-flex-col    { display: flex; flex-direction: column; }
.rs-items-center { align-items: center; }
.rs-justify-between { justify-content: space-between; }
.rs-gap-2 { gap: 8px; }
.rs-gap-3 { gap: 12px; }
.rs-gap-4 { gap: 16px; }

.rs-empty {
  background: var(--rs-hairline);
  border: 1px dashed var(--rs-border);
  border-radius: var(--rs-r-lg);
  padding: 28px;
  text-align: center;
  color: var(--rs-text-3);
  font-size: 13px;
}

/* Legend / footer */
.rs-legend {
  margin-top: 30px;
  font-size: 11px;
  color: var(--rs-text-muted);
  text-align: center;
  letter-spacing: 0.3px;
}

/* Banner / alerts */
.rs-banner {
  border-radius: var(--rs-r-lg);
  padding: 12px 16px;
  font-size: 13px;
  border: 1px solid;
}
.rs-banner.info  { background: var(--rs-ice-soft); border-color: var(--rs-ice); color: var(--rs-navy); }
.rs-banner.ok    { background: var(--rs-emerald-bg); border-color: var(--rs-emerald-bd); color: var(--rs-emerald-tx); }
.rs-banner.warn  { background: var(--rs-warn-bg); border-color: var(--rs-warn-bd); color: var(--rs-warn-tx); }
.rs-banner.alert { background: var(--rs-rose-bg); border-color: var(--rs-rose-bd); color: var(--rs-rose-tx); }

/* Mobile tweaks */
@media (max-width: 640px) {
  .rs-chrome-inner { padding: 0 16px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .rs-chrome-actions { width: 100%; }
  .rs-page-body { padding: 24px 16px 60px; }
  .rs-section-head { padding: 14px 16px; }
  .rs-section-body { padding: 16px; }
  .rs-form-row, .rs-form-row.three { grid-template-columns: 1fr; }
  .rs-chrome-title { font-size: 24px; }
}