/* ============================================================
   SocialPay Desktop Design System ("SP Desktop")

   Tokens + sp-* component classes for the Rails/Hotwire desktop
   surface. Loaded ONLY by app/views/layouts/application.html.erb
   (desktop). The mobile layout uses mobile_design_system.css —
   keep these two files namespace-aware: any sp-* class defined
   here may also exist on mobile with different semantics.

   Brand colors mirror --social-* in sidebar_optimized.css — keep
   them in sync. The sidebar's CSS is untouched; we re-export its
   palette under sp-* names so the rest of the app can reference
   one vocabulary.

   See: tmp/desktop_design_preview.html (interactive styleguide)
   See: ~/Documents/Obsidian/GroupPay/Plans/desktop-design-language.md
   ============================================================ */

:root {
  /* ── Brand ── */
  --sp-brand-green:        #009245;
  --sp-brand-green-dark:   #00793A;
  --sp-brand-green-tint:   #E8F5E8;
  --sp-brand-yellow:       #FBB040;
  --sp-brand-yellow-dark:  #F59E0B;

  /* ── Surface ── */
  --sp-canvas:    #F8FAFC;
  --sp-surface:   #FFFFFF;
  --sp-surface-2: #F1F5F9;
  --sp-hairline:  #E5E7EB;
  --sp-hairline-strong: #CBD5E1;

  /* ── Ink ── */
  --sp-text:        #0F172A;
  --sp-text-muted:  #475569;
  --sp-text-faint:  #94A3B8;
  --sp-text-onDark: #FFFFFF;

  /* ── Status ── */
  --sp-status-success: #16A34A;  --sp-status-success-bg: #DCFCE7;
  --sp-status-warning: #D97706;  --sp-status-warning-bg: #FEF3C7;
  --sp-status-danger:  #DC2626;  --sp-status-danger-bg:  #FEE2E2;
  --sp-status-info:    #2563EB;  --sp-status-info-bg:    #DBEAFE;

  /* ── Spacing (4pt grid) ── */
  --sp-space-xs:  4px;
  --sp-space-sm:  8px;
  --sp-space-md:  12px;
  --sp-space-lg:  16px;
  --sp-space-xl:  24px;
  --sp-space-2xl: 32px;

  /* ── Radii ── */
  --sp-radius-sm: 6px;
  --sp-radius-md: 8px;
  --sp-radius-lg: 12px;
  --sp-radius-pill: 999px;

  /* ── Elevation ── */
  --sp-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --sp-shadow-2: 0 2px 8px rgba(15, 23, 42, 0.08);
  --sp-shadow-3: 0 8px 24px rgba(15, 23, 42, 0.12);
  --sp-ring-focus: 0 0 0 3px rgba(251, 176, 64, 0.35);

  /* ── Motion ── */
  --sp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sp-dur-fast: 150ms;
  --sp-dur-base: 200ms;

  /* ── Type ── */
  --sp-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sp-text-xs:   12px;
  --sp-text-sm:   13px;
  --sp-text-base: 14px;
  --sp-text-md:   16px;
  --sp-text-lg:   18px;
  --sp-text-xl:   22px;
  --sp-text-2xl:  28px;
  --sp-eyebrow-letter: 0.08em;
}

/* ── Canvas ── */
body.sp-desktop {
  background: var(--sp-canvas);
  color: var(--sp-text);
  font-family: var(--sp-font-sans);
  font-size: var(--sp-text-base);
  line-height: 1.5;
}

/* ============================================================
   PAGE CHROME
   ============================================================ */

.sp-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-space-lg);
  padding-bottom: var(--sp-space-lg);
  margin-bottom: var(--sp-space-xl);
  border-bottom: 1px solid var(--sp-hairline);
  flex-wrap: wrap;
}
.sp-page-header__eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--sp-eyebrow-letter);
  font-size: var(--sp-text-xs);
  font-weight: 700;
  color: var(--sp-brand-green);
  margin-bottom: var(--sp-space-xs);
}
.sp-page-header__title,
.sp-page-header h1 {
  margin: 0;
  font-size: var(--sp-text-2xl);
  font-weight: 700;
  color: var(--sp-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.sp-page-header__subtitle {
  color: var(--sp-text-muted);
  font-size: var(--sp-text-md);
  margin-top: 4px;
}
.sp-page-header__actions {
  display: flex;
  gap: var(--sp-space-sm);
  flex-wrap: wrap;
}

/* Breadcrumbs — wraps existing render_breadcrumbs markup */
.sp-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sp-text-sm);
  color: var(--sp-text-muted);
}
.sp-breadcrumbs a {
  color: var(--sp-text-muted);
  text-decoration: none;
  transition: color var(--sp-dur-fast) var(--sp-ease);
}
.sp-breadcrumbs a:hover { color: var(--sp-brand-green); }
.sp-breadcrumbs__sep,
.sp-breadcrumbs span[class*="text-gray-400"] {
  color: var(--sp-text-faint);
}

/* Toolbar */
.sp-toolbar {
  display: flex;
  gap: var(--sp-space-md);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--sp-space-md) var(--sp-space-xl);
  border-bottom: 1px solid var(--sp-hairline);
  background: var(--sp-surface);
}
.sp-toolbar__search {
  flex: 1;
  max-width: 320px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--sp-surface-2);
  border: 1px solid transparent;
  border-radius: var(--sp-radius-md);
  transition: border-color var(--sp-dur-fast) var(--sp-ease);
}
.sp-toolbar__search:focus-within {
  background: var(--sp-surface);
  border-color: var(--sp-brand-green);
  box-shadow: var(--sp-ring-focus);
}
.sp-toolbar__search input {
  border: none; background: transparent; outline: none;
  font: inherit; flex: 1; color: var(--sp-text);
}
.sp-toolbar__filters,
.sp-toolbar__actions { display: flex; gap: var(--sp-space-sm); flex-wrap: wrap; }
.sp-toolbar__actions { margin-left: auto; }

/* ============================================================
   SURFACE — Cards
   ============================================================ */

.sp-card {
  background: var(--sp-surface);
  border: 1px solid var(--sp-hairline);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-1);
  overflow: hidden;
}
.sp-card--flat { box-shadow: none; }
.sp-card--accent { border-left: 3px solid var(--sp-brand-green); }
.sp-card--accent.sp-card--success { border-left-color: var(--sp-status-success); }
.sp-card--accent.sp-card--warning { border-left-color: var(--sp-status-warning); }
.sp-card--accent.sp-card--danger  { border-left-color: var(--sp-status-danger);  }
.sp-card--accent.sp-card--info    { border-left-color: var(--sp-status-info);    }

.sp-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-space-md);
  padding: var(--sp-space-lg) var(--sp-space-xl);
  border-bottom: 1px solid var(--sp-hairline);
}
.sp-card__title {
  margin: 0;
  font-size: var(--sp-text-md);
  font-weight: 600;
  color: var(--sp-text);
}
.sp-card__sub {
  color: var(--sp-text-muted);
  font-size: var(--sp-text-sm);
  margin-top: 2px;
}
.sp-card__body { padding: var(--sp-space-xl); }
.sp-card__footer {
  padding: var(--sp-space-md) var(--sp-space-xl);
  border-top: 1px solid var(--sp-hairline);
  background: var(--sp-surface-2);
  color: var(--sp-text-muted);
  font-size: var(--sp-text-sm);
}

/* ============================================================
   DATA — KPI tiles
   ============================================================ */

.sp-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-space-lg);
}
.sp-kpi {
  background: var(--sp-surface);
  border: 1px solid var(--sp-hairline);
  border-radius: var(--sp-radius-lg);
  padding: var(--sp-space-lg) var(--sp-space-xl);
  position: relative;
  overflow: hidden;
  transition: transform var(--sp-dur-fast) var(--sp-ease),
              box-shadow var(--sp-dur-fast) var(--sp-ease);
}
.sp-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--sp-shadow-2);
}

.sp-kpi__label {
  text-transform: uppercase;
  letter-spacing: var(--sp-eyebrow-letter);
  font-size: var(--sp-text-xs);
  font-weight: 700;
  color: var(--sp-text-muted);
}
.sp-kpi__value {
  margin: 4px 0 6px;
  font-size: var(--sp-text-2xl);
  font-weight: 700;
  color: var(--sp-text);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.sp-kpi__delta {
  font-size: var(--sp-text-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sp-text-muted);
}
.sp-kpi__delta--up   { color: var(--sp-status-success); }
.sp-kpi__delta--down { color: var(--sp-status-danger); }
.sp-kpi__footer {
  margin-top: var(--sp-space-sm);
  padding-top: var(--sp-space-sm);
  border-top: 1px dashed var(--sp-hairline);
  font-size: var(--sp-text-sm);
  color: var(--sp-text-muted);
}
.sp-kpi__footer strong { color: var(--sp-text); font-weight: 600; }

/* KPI variants — tint only the label. No border accents.
   Variants exist so progress bars and footer indicators can pick up a theme colour. */
.sp-kpi--success .sp-kpi__label { color: var(--sp-status-success); }
.sp-kpi--warning .sp-kpi__label { color: var(--sp-status-warning); }
.sp-kpi--danger  .sp-kpi__label { color: var(--sp-status-danger);  }
.sp-kpi--info    .sp-kpi__label { color: var(--sp-status-info);    }
.sp-kpi--yellow  .sp-kpi__label { color: var(--sp-brand-yellow-dark); }

/* Generic KPI progress bar — used for adoption / participation / share visualisations. */
.sp-kpi__bar {
  margin-top: var(--sp-space-sm);
  height: 6px;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-surface-2);
  overflow: hidden;
}
.sp-kpi__bar > span {
  display: block;
  height: 100%;
  background: var(--sp-brand-green);
  transition: width var(--sp-dur-base) var(--sp-ease);
}
.sp-kpi--warning .sp-kpi__bar > span { background: var(--sp-status-warning); }
.sp-kpi--danger  .sp-kpi__bar > span { background: var(--sp-status-danger);  }
.sp-kpi--info    .sp-kpi__bar > span { background: var(--sp-status-info);    }
.sp-kpi--yellow  .sp-kpi__bar > span { background: var(--sp-brand-yellow);   }

/* ============================================================
   DATA — Tables
   ============================================================ */

.sp-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sp-text-sm);
}
.sp-data-table thead th {
  text-align: left;
  padding: 10px var(--sp-space-lg);
  background: var(--sp-surface-2);
  color: var(--sp-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--sp-text-xs);
  border-bottom: 1px solid var(--sp-hairline);
  white-space: nowrap;
}
.sp-data-table tbody td {
  padding: 12px var(--sp-space-lg);
  border-bottom: 1px solid var(--sp-hairline);
  color: var(--sp-text);
  vertical-align: middle;
}
.sp-data-table tbody tr {
  transition: background var(--sp-dur-fast) var(--sp-ease);
}
.sp-data-table tbody tr:hover { background: var(--sp-surface-2); }
.sp-data-table tbody tr:last-child td { border-bottom: none; }
.sp-data-table tfoot td {
  padding: 12px var(--sp-space-lg);
  border-top: 1px solid var(--sp-hairline);
  color: var(--sp-text);
  font-size: var(--sp-text-sm);
  vertical-align: middle;
}
.sp-data-table th.sp-data-table__num,
.sp-data-table td.sp-data-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Roomy variant — more breathing room per row */
.sp-data-table--roomy thead th { padding: 14px var(--sp-space-xl); }
.sp-data-table--roomy tbody td { padding: 18px var(--sp-space-xl); }

/* Segmented tab pills (Group/Member, Performance/Retention, etc.).
   Designed to sit inside a tinted background pill: surface-2 container, surface white when active. */
.transaction-type-tab {
  padding: 6px 14px;
  border: 0;
  background: transparent;
  color: var(--sp-text-muted);
  font: inherit;
  font-size: var(--sp-text-sm);
  font-weight: 600;
  border-radius: var(--sp-radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background var(--sp-dur-fast) var(--sp-ease),
              color var(--sp-dur-fast) var(--sp-ease);
}
.transaction-type-tab:hover:not(.active) {
  color: var(--sp-text);
  background: rgba(255, 255, 255, 0.6);
}
.transaction-type-tab.active {
  background: var(--sp-surface);
  color: var(--sp-text);
  box-shadow: var(--sp-shadow-1);
}

/* Quick-filter date pills (used on transactions + analytics filter rows). */
.quick-filter-btn {
  padding: 5px 12px;
  border: 1px solid var(--sp-hairline);
  background: var(--sp-surface-2);
  color: var(--sp-text-muted);
  border-radius: var(--sp-radius-md);
  font: inherit;
  font-size: var(--sp-text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--sp-dur-fast) var(--sp-ease);
}
.quick-filter-btn:hover {
  border-color: var(--sp-brand-green);
  color: var(--sp-brand-green);
  filter: brightness(0.95);
}
.quick-filter-btn.active { background: var(--sp-brand-green); border-color: var(--sp-brand-green); color: #fff; }
.sp-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--sp-radius-md);
  color: var(--sp-text-muted);
  text-decoration: none;
  transition: background var(--sp-dur-fast) var(--sp-ease),
              color var(--sp-dur-fast) var(--sp-ease);
}
.sp-row-action:hover,
.sp-row-action:focus-visible {
  background: var(--sp-surface-2);
  color: var(--sp-brand-green);
  outline: none;
}

/* sp-menu — <details>-based dropdown for action overflow */
.sp-menu { position: relative; display: inline-block; }
.sp-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.sp-menu > summary::-webkit-details-marker { display: none; }
.sp-menu__panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: var(--sp-surface);
  border: 1px solid var(--sp-hairline);
  border-radius: var(--sp-radius-md);
  box-shadow: var(--sp-shadow-lg, 0 8px 24px rgba(0,0,0,0.12));
  padding: 6px;
  z-index: 30;
}
.sp-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--sp-radius-sm, 6px);
  color: var(--sp-text);
  font: inherit;
  font-size: var(--sp-text-sm);
  cursor: pointer;
  text-decoration: none;
}
.sp-menu__item:hover,
.sp-menu__item:focus-visible {
  background: var(--sp-surface-2);
  color: var(--sp-brand-green);
  outline: none;
}
.sp-menu__divider {
  height: 1px;
  background: var(--sp-hairline);
  margin: 6px 0;
}
.sp-data-table__sticky thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Empty state */
.sp-empty-state {
  text-align: center;
  padding: var(--sp-space-2xl);
  color: var(--sp-text-muted);
}
.sp-empty-state__icon {
  width: 48px; height: 48px;
  margin: 0 auto var(--sp-space-md);
  color: var(--sp-text-faint);
}
.sp-empty-state__title {
  margin: 0 0 var(--sp-space-xs);
  font-size: var(--sp-text-md);
  font-weight: 600;
  color: var(--sp-text);
}
.sp-empty-state__hint { font-size: var(--sp-text-sm); }
.sp-empty-state__cta { margin-top: var(--sp-space-lg); }

/* Pagination */
.sp-pagination {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  padding: var(--sp-space-md);
  font-size: var(--sp-text-sm);
}
.sp-pagination a,
.sp-pagination span {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sp-radius-md);
  color: var(--sp-text-muted);
  text-decoration: none;
  transition: all var(--sp-dur-fast) var(--sp-ease);
}
.sp-pagination a:hover {
  background: var(--sp-surface-2);
  color: var(--sp-text);
}
.sp-pagination .current,
.sp-pagination span.current {
  background: var(--sp-brand-green);
  color: var(--sp-text-onDark);
  font-weight: 600;
}
.sp-pagination .disabled,
.sp-pagination span.disabled { color: var(--sp-text-faint); cursor: default; }

/* ============================================================
   FORM
   ============================================================ */

.sp-field { display: grid; gap: 6px; }
.sp-field label,
.sp-field__label {
  font-size: var(--sp-text-sm);
  font-weight: 600;
  color: var(--sp-text-muted);
}
.sp-field__hint  { font-size: var(--sp-text-xs); color: var(--sp-text-faint); }
.sp-field__error { font-size: var(--sp-text-xs); color: var(--sp-status-danger); }

.sp-input,
.sp-select,
.sp-textarea {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: var(--sp-text-sm);
  background: var(--sp-surface);
  color: var(--sp-text);
  border: 1px solid var(--sp-hairline-strong);
  border-radius: var(--sp-radius-md);
  transition: border-color var(--sp-dur-fast) var(--sp-ease),
              box-shadow var(--sp-dur-fast) var(--sp-ease);
}
.sp-input:focus,
.sp-select:focus,
.sp-textarea:focus {
  outline: none;
  border-color: var(--sp-brand-green);
  box-shadow: var(--sp-ring-focus);
}
.sp-input::placeholder,
.sp-textarea::placeholder { color: var(--sp-text-faint); }
.sp-input--error,
.sp-select--error,
.sp-textarea--error {
  border-color: var(--sp-status-danger);
}
.sp-textarea { min-height: 96px; resize: vertical; }

.sp-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--sp-hairline-strong);
  border-radius: var(--sp-radius-md);
  overflow: hidden;
  background: var(--sp-surface);
}
.sp-input-group:focus-within {
  border-color: var(--sp-brand-green);
  box-shadow: var(--sp-ring-focus);
}
.sp-input-group__addon {
  padding: 9px 12px;
  background: var(--sp-surface-2);
  color: var(--sp-text-muted);
  font-size: var(--sp-text-sm);
  font-weight: 600;
  border-right: 1px solid var(--sp-hairline);
  display: inline-flex; align-items: center;
}
.sp-input-group .sp-input {
  border: none;
  border-radius: 0;
}
.sp-input-group .sp-input:focus { box-shadow: none; }

/* Checkbox / radio — keep native look but tame the color */
.sp-checkbox,
.sp-radio {
  accent-color: var(--sp-brand-green);
  width: 16px; height: 16px;
  margin-right: 8px;
  cursor: pointer;
  vertical-align: middle;
}

/* ============================================================
   ACTION — Buttons
   ============================================================ */

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-weight: 600;
  font-size: var(--sp-text-sm);
  padding: 8px 14px;
  border-radius: var(--sp-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--sp-dur-fast) var(--sp-ease);
  user-select: none;
}
.sp-btn:focus-visible { outline: none; box-shadow: var(--sp-ring-focus); }
.sp-btn:disabled,
.sp-btn[aria-disabled="true"] {
  opacity: 0.55; cursor: not-allowed;
  transform: none !important; box-shadow: none !important;
}

.sp-btn--primary {
  background: var(--sp-brand-green);
  color: var(--sp-text-onDark);
  box-shadow: var(--sp-shadow-1);
}
.sp-btn--primary:hover {
  background: var(--sp-brand-green-dark);
  transform: translateY(-1px);
  box-shadow: var(--sp-shadow-2);
}

.sp-btn--accent {
  background: var(--sp-brand-yellow);
  color: #444;
  box-shadow: var(--sp-shadow-1);
}
.sp-btn--accent:hover {
  background: var(--sp-brand-yellow-dark);
  transform: translateY(-1px);
  box-shadow: var(--sp-shadow-2);
}

.sp-btn--secondary {
  background: var(--sp-surface);
  color: var(--sp-text);
  border-color: var(--sp-hairline-strong);
}
.sp-btn--secondary:hover {
  border-color: var(--sp-brand-green);
  color: var(--sp-brand-green);
}

.sp-btn--ghost {
  background: transparent;
  color: var(--sp-text-muted);
}
.sp-btn--ghost:hover {
  background: var(--sp-surface-2);
  color: var(--sp-text);
}

.sp-btn--danger {
  background: var(--sp-status-danger);
  color: var(--sp-text-onDark);
}
.sp-btn--danger:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

.sp-btn--warning {
  background: var(--sp-status-warning);
  color: #fff;
}
.sp-btn--warning:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

.sp-btn--sm { padding: 5px 10px; font-size: var(--sp-text-xs); }
.sp-btn--lg { padding: 11px 18px; font-size: var(--sp-text-base); }

.sp-btn-group {
  display: inline-flex;
  border-radius: var(--sp-radius-md);
  overflow: hidden;
  border: 1px solid var(--sp-hairline-strong);
}
.sp-btn-group .sp-btn {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--sp-hairline-strong);
  background: var(--sp-surface);
  color: var(--sp-text);
  box-shadow: none;
}
.sp-btn-group .sp-btn:last-child { border-right: none; }
.sp-btn-group .sp-btn:hover {
  background: var(--sp-surface-2);
  transform: none;
}
.sp-btn-group .sp-btn[aria-pressed="true"] {
  background: var(--sp-brand-green);
  color: var(--sp-text-onDark);
}

/* ============================================================
   NAV — Tabs (in-page panel switcher)
   ============================================================ */

.sp-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--sp-hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
.sp-tabs::-webkit-scrollbar { display: none; }

.sp-tab {
  padding: 12px 20px;
  margin-bottom: -1px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: var(--sp-text-sm);
  font-weight: 600;
  color: var(--sp-text-muted);
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--sp-dur-fast) var(--sp-ease),
              border-color var(--sp-dur-fast) var(--sp-ease);
  position: relative;
}
.sp-tab:hover {
  color: var(--sp-text);
  border-bottom-color: var(--sp-hairline-strong);
}
.sp-tab--active {
  color: var(--sp-text);
  border-bottom-color: var(--sp-brand-yellow);
}
.sp-tab__count {
  font-size: var(--sp-text-xs);
  color: var(--sp-text-faint);
  font-weight: 500;
}
.sp-tab--active .sp-tab__count { color: var(--sp-text-muted); }

.sp-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-status-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.sp-tab-panels { padding: var(--sp-space-xl) 0; }

/* ============================================================
   STATUS — Pills / dots / banners / tags
   ============================================================ */

/* Pill — DESKTOP version. The mobile sp-pill is different; only
   loaded on mobile layout, so no collision. */
.sp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--sp-radius-pill);
  font-size: var(--sp-text-xs);
  font-weight: 600;
  line-height: 1.5;
}
.sp-pill--success { background: var(--sp-status-success-bg); color: var(--sp-status-success); }
.sp-pill--warning { background: var(--sp-status-warning-bg); color: var(--sp-status-warning); }
.sp-pill--danger  { background: var(--sp-status-danger-bg);  color: var(--sp-status-danger); }
.sp-pill--info    { background: var(--sp-status-info-bg);    color: var(--sp-status-info); }
.sp-pill--neutral { background: var(--sp-surface-2);         color: var(--sp-text-muted); }

.sp-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  vertical-align: middle;
}
.sp-dot--success { background: var(--sp-status-success); }
.sp-dot--warning { background: var(--sp-status-warning); }
.sp-dot--danger  { background: var(--sp-status-danger); }
.sp-dot--info    { background: var(--sp-status-info); }
.sp-dot--neutral { background: var(--sp-text-faint); }

.sp-banner {
  display: flex;
  gap: var(--sp-space-md);
  align-items: flex-start;
  padding: var(--sp-space-md) var(--sp-space-lg);
  border-radius: var(--sp-radius-md);
  border: 1px solid;
  font-size: var(--sp-text-sm);
  margin-bottom: var(--sp-space-md);
}
.sp-banner strong { font-weight: 700; }
.sp-banner--success { background: var(--sp-status-success-bg); border-color: rgba(22, 163, 74, 0.25);  color: var(--sp-status-success); }
.sp-banner--warning { background: var(--sp-status-warning-bg); border-color: rgba(217, 119, 6, 0.25);  color: var(--sp-status-warning); }
.sp-banner--danger  { background: var(--sp-status-danger-bg);  border-color: rgba(220, 38, 38, 0.25);  color: var(--sp-status-danger); }
.sp-banner--info    { background: var(--sp-status-info-bg);    border-color: rgba(37, 99, 235, 0.25);  color: var(--sp-status-info); }

.sp-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--sp-radius-sm);
  background: var(--sp-surface-2);
  color: var(--sp-text-muted);
  font-size: var(--sp-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   PAGE LAYOUT HELPERS
   These are the few utility-style helpers the kit owns. Anything
   beyond layout (grid, gap) can stay in Tailwind.
   ============================================================ */
.sp-page { display: grid; gap: var(--sp-space-2xl); }
.sp-page > .sp-page-header { margin-bottom: 0; } /* grid gap handles spacing — avoid double gap */
.sp-stack-xs { display: grid; gap: var(--sp-space-xs); }
.sp-stack-sm { display: grid; gap: var(--sp-space-sm); }
.sp-stack-md { display: grid; gap: var(--sp-space-md); }
.sp-stack-lg { display: grid; gap: var(--sp-space-lg); }
.sp-stack-xl { display: grid; gap: var(--sp-space-xl); }

/* ── Processor list row — rich list-card row pattern
   Used by /payment_processors. Generalize to sp-listcard-row
   the next time another view needs this layout.
   ── */
.sp-processor-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp-processor-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(160px, auto) minmax(180px, auto);
  align-items: center;
  gap: var(--sp-space-lg);
  padding: var(--sp-space-lg) var(--sp-space-xl);
  border-bottom: 1px solid var(--sp-hairline);
}
.sp-processor-row:last-child { border-bottom: none; }
.sp-processor-row:hover { background: var(--sp-surface-2); }
.sp-processor-row--inactive { opacity: 0.6; }

.sp-processor-row__avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--sp-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--sp-text-md);
  color: var(--sp-text);
}
.sp-processor-row__avatar-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  border: 2px solid var(--sp-surface);
}

.sp-processor-row__identity { min-width: 0; }
.sp-processor-row__name {
  display: flex;
  align-items: center;
  gap: var(--sp-space-sm);
  font-weight: 600;
  font-size: var(--sp-text-md);
  margin-bottom: 2px;
}
.sp-processor-row__name a {
  color: var(--sp-text);
  text-decoration: none;
}
.sp-processor-row__name a:hover { color: var(--sp-brand-green); }
.sp-processor-row__meta {
  font-size: var(--sp-text-sm);
  color: var(--sp-text-muted);
}
.sp-processor-row__alert {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--sp-text-sm);
  color: var(--sp-status-info);
  text-decoration: none;
}
.sp-processor-row__alert:hover { text-decoration: underline; }

.sp-processor-row__amount { text-align: right; }
.sp-processor-row__amount-value {
  font-weight: 700;
  font-size: var(--sp-text-lg, 16px);
  font-variant-numeric: tabular-nums;
}
.sp-processor-row__amount-value--danger  { color: var(--sp-status-danger); }
.sp-processor-row__amount-value--success { color: var(--sp-status-success); }
.sp-processor-row__amount-sub {
  margin-top: 2px;
  font-size: var(--sp-text-sm);
  color: var(--sp-text-muted);
}

.sp-processor-row__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-space-xs);
}
.sp-processor-row__links {
  display: flex;
  gap: var(--sp-space-sm);
  font-size: var(--sp-text-sm);
}
.sp-processor-row__links a {
  color: var(--sp-text-muted);
  text-decoration: none;
}
.sp-processor-row__links a:hover { color: var(--sp-brand-green); }

/* ============================================================
   COMPAT LAYER — auto-applies the design language to legacy views

   The desktop app has ~330 ERB files using mixed Tailwind utility
   chains. Rather than hand-refactor every one, this section
   restyles the structural patterns that are already in use so the
   visual language unifies without ERB changes.

   Scoped via body.sp-desktop so this layer never leaks into the
   mobile layout (mobile.html.erb has no .sp-desktop on body).

   What this restyles:
   - bare <table>s and Tailwind table-utility chains → sp-data-table look
   - bare <input>/<select>/<textarea> → sp-input look
   - .btn-primary / .btn-secondary / .btn-danger named classes → sp-btn look
   - the .bg-white.rounded-lg.shadow card pattern → sp-card look
   - indigo-600 / emerald-600 button color (used as de-facto "primary") → brand green
   - selection + scrollbar + focus polish
   ============================================================ */

/* ── Global polish ── */
body.sp-desktop ::selection { background: var(--sp-brand-green-tint); color: var(--sp-brand-green-dark); }
body.sp-desktop *:focus-visible:not(.sp-btn):not(.sp-input):not(.sp-select):not(.sp-textarea) {
  outline: 2px solid var(--sp-brand-yellow);
  outline-offset: 2px;
  border-radius: var(--sp-radius-sm);
}

body.sp-desktop ::-webkit-scrollbar { width: 10px; height: 10px; }
body.sp-desktop ::-webkit-scrollbar-thumb { background: var(--sp-hairline-strong); border-radius: var(--sp-radius-pill); }
body.sp-desktop ::-webkit-scrollbar-thumb:hover { background: var(--sp-text-faint); }
body.sp-desktop ::-webkit-scrollbar-track { background: transparent; }

/* ── Tables ──
   Any <table> inside main desktop content gets sp-data-table treatment
   unless it opts out with .sp-table-skip. */
body.sp-desktop main table:not(.sp-table-skip):not(.sp-data-table) {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sp-text-sm);
  background: var(--sp-surface);
}
body.sp-desktop main table:not(.sp-table-skip):not(.sp-data-table) thead th,
body.sp-desktop main table:not(.sp-table-skip):not(.sp-data-table) thead td {
  text-align: left;
  padding: 10px var(--sp-space-lg);
  background: var(--sp-surface-2);
  color: var(--sp-text-muted) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--sp-text-xs);
  border-bottom: 1px solid var(--sp-hairline);
  white-space: nowrap;
}
body.sp-desktop main table:not(.sp-table-skip):not(.sp-data-table) tbody td {
  padding: 12px var(--sp-space-lg);
  border-bottom: 1px solid var(--sp-hairline);
  color: var(--sp-text);
  vertical-align: middle;
}
body.sp-desktop main table:not(.sp-table-skip):not(.sp-data-table) tbody tr {
  transition: background var(--sp-dur-fast) var(--sp-ease);
}
body.sp-desktop main table:not(.sp-table-skip):not(.sp-data-table) tbody tr:hover {
  background: var(--sp-surface-2);
}
body.sp-desktop main table:not(.sp-table-skip):not(.sp-data-table) tbody tr:last-child td {
  border-bottom: none;
}
body.sp-desktop main table:not(.sp-table-skip):not(.sp-data-table) tfoot td {
  padding: 12px var(--sp-space-lg);
  border-top: 1px solid var(--sp-hairline);
  color: var(--sp-text);
  font-size: var(--sp-text-sm);
  vertical-align: middle;
}

/* ── Inputs ──
   Any unstyled input/select/textarea gets sp-input look. Skip when
   already classed with sp-* or when explicitly opted out.

   The entire block is wrapped in @layer base so Tailwind utilities
   (which Tailwind v4 emits inside @layer utilities) cleanly override
   the defaults. Without the layer wrapper, these rules would be
   unlayered and win the cascade over ANY @layer utility regardless
   of specificity — which silently swallowed pl-10/pl-12 icon-slot
   padding, bg-white surfaces, rounded-* radii, focus rings, etc.
   across the entire desktop app. */
@layer base {
  body.sp-desktop main input[type="text"]:not(.sp-input):not(.sp-input-skip),
  body.sp-desktop main input[type="email"]:not(.sp-input):not(.sp-input-skip),
  body.sp-desktop main input[type="password"]:not(.sp-input):not(.sp-input-skip),
  body.sp-desktop main input[type="number"]:not(.sp-input):not(.sp-input-skip),
  body.sp-desktop main input[type="tel"]:not(.sp-input):not(.sp-input-skip),
  body.sp-desktop main input[type="search"]:not(.sp-input):not(.sp-input-skip),
  body.sp-desktop main input[type="url"]:not(.sp-input):not(.sp-input-skip),
  body.sp-desktop main input[type="date"]:not(.sp-input):not(.sp-input-skip),
  body.sp-desktop main input[type="time"]:not(.sp-input):not(.sp-input-skip),
  body.sp-desktop main input[type="datetime-local"]:not(.sp-input):not(.sp-input-skip),
  body.sp-desktop main select:not(.sp-select):not(.sp-input-skip),
  body.sp-desktop main textarea:not(.sp-textarea):not(.sp-input-skip) {
    font: inherit;
    font-size: var(--sp-text-sm);
    color: var(--sp-text);
    background: var(--sp-surface);
    border: 1px solid var(--sp-hairline-strong);
    border-radius: var(--sp-radius-md);
    padding: 9px 12px;
    transition: border-color var(--sp-dur-fast) var(--sp-ease),
                box-shadow var(--sp-dur-fast) var(--sp-ease);
  }

  body.sp-desktop main input:not(.sp-input):not(.sp-input-skip):focus,
  body.sp-desktop main select:not(.sp-select):not(.sp-input-skip):focus,
  body.sp-desktop main textarea:not(.sp-textarea):not(.sp-input-skip):focus {
    outline: none;
    border-color: var(--sp-brand-green);
    box-shadow: var(--sp-ring-focus);
  }
}
body.sp-desktop main input[type="checkbox"]:not(.sp-input-skip),
body.sp-desktop main input[type="radio"]:not(.sp-input-skip) {
  accent-color: var(--sp-brand-green);
}

/* Form labels — give them consistent rhythm */
body.sp-desktop main label:not([class*="sp-"]):not([class*="text-"]):not([class*="bg-"]) {
  font-size: var(--sp-text-sm);
  font-weight: 600;
  color: var(--sp-text-muted);
}

/* ── Cards — common Tailwind card patterns ── */
body.sp-desktop main .bg-white.rounded-lg.shadow,
body.sp-desktop main .bg-white.rounded-lg.shadow-sm,
body.sp-desktop main .bg-white.shadow.rounded-lg,
body.sp-desktop main .bg-white.shadow-sm.rounded-lg,
body.sp-desktop main .bg-white.shadow.rounded-md,
body.sp-desktop main .bg-white.shadow-sm.rounded-md {
  background: var(--sp-surface);
  border: 1px solid var(--sp-hairline);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-1);
}

/* ── Named button classes ── */
body.sp-desktop main .btn-primary:not(.sp-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 600; font-size: var(--sp-text-sm);
  padding: 8px 14px;
  border-radius: var(--sp-radius-md);
  border: 1px solid transparent;
  background: var(--sp-brand-green);
  color: var(--sp-text-onDark);
  cursor: pointer; text-decoration: none;
  transition: all var(--sp-dur-fast) var(--sp-ease);
  box-shadow: var(--sp-shadow-1);
}
body.sp-desktop main .btn-primary:not(.sp-btn):hover {
  background: var(--sp-brand-green-dark);
  transform: translateY(-1px); box-shadow: var(--sp-shadow-2);
}

body.sp-desktop main .btn-secondary:not(.sp-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 600; font-size: var(--sp-text-sm);
  padding: 8px 14px;
  border-radius: var(--sp-radius-md);
  border: 1px solid var(--sp-hairline-strong);
  background: var(--sp-surface);
  color: var(--sp-text);
  cursor: pointer; text-decoration: none;
  transition: all var(--sp-dur-fast) var(--sp-ease);
}
body.sp-desktop main .btn-secondary:not(.sp-btn):hover {
  border-color: var(--sp-brand-green);
  color: var(--sp-brand-green);
}

body.sp-desktop main .btn-danger:not(.sp-btn),
body.sp-desktop main .btn-destructive:not(.sp-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 600; font-size: var(--sp-text-sm);
  padding: 8px 14px;
  border-radius: var(--sp-radius-md);
  border: 1px solid transparent;
  background: var(--sp-status-danger);
  color: var(--sp-text-onDark);
  cursor: pointer; text-decoration: none;
  transition: all var(--sp-dur-fast) var(--sp-ease);
}
body.sp-desktop main .btn-danger:not(.sp-btn):hover,
body.sp-desktop main .btn-destructive:not(.sp-btn):hover {
  filter: brightness(0.95); transform: translateY(-1px);
}

body.sp-desktop main .btn-ghost:not(.sp-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 600; font-size: var(--sp-text-sm);
  padding: 8px 14px;
  border-radius: var(--sp-radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--sp-text-muted);
  cursor: pointer; text-decoration: none;
  transition: all var(--sp-dur-fast) var(--sp-ease);
}
body.sp-desktop main .btn-ghost:not(.sp-btn):hover {
  background: var(--sp-surface-2); color: var(--sp-text);
}

/* ── Headings inside main get a consistent type ramp ──
   Force the ramp, override Tailwind text-* size utilities. */
body.sp-desktop main h1 {
  font-size: var(--sp-text-2xl);
  font-weight: 700;
  color: var(--sp-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
body.sp-desktop main h2 {
  font-size: var(--sp-text-xl);
  font-weight: 700;
  color: var(--sp-text);
  line-height: 1.25;
}
body.sp-desktop main h3 {
  font-size: var(--sp-text-lg);
  font-weight: 600;
  color: var(--sp-text);
  line-height: 1.3;
}

/* ── Pagination (kaminari default markup) ── */
body.sp-desktop main .pagination {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  padding: var(--sp-space-md) 0;
  font-size: var(--sp-text-sm);
  list-style: none;
}
body.sp-desktop main .pagination a,
body.sp-desktop main .pagination span {
  min-width: 32px; height: 32px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--sp-radius-md);
  color: var(--sp-text-muted);
  text-decoration: none;
  transition: all var(--sp-dur-fast) var(--sp-ease);
}
body.sp-desktop main .pagination a:hover {
  background: var(--sp-surface-2);
  color: var(--sp-text);
}
body.sp-desktop main .pagination .current,
body.sp-desktop main .pagination span.current,
body.sp-desktop main .pagination em.current {
  background: var(--sp-brand-green);
  color: var(--sp-text-onDark);
  font-weight: 600;
  font-style: normal;
}
body.sp-desktop main .pagination .disabled,
body.sp-desktop main .pagination span.disabled {
  color: var(--sp-text-faint); cursor: default;
}

/* ── Horizontal rules + dividers ── */
body.sp-desktop main hr:not([class]) {
  border: none;
  border-top: 1px solid var(--sp-hairline);
  margin: var(--sp-space-xl) 0;
}

/* ── Links inside content (excluding nav, buttons, table-action links) ──
   Subtle — gives prose links the brand color without nuking utility classes. */
body.sp-desktop main p > a:not([class]),
body.sp-desktop main li > a:not([class]) {
  color: var(--sp-brand-green);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
body.sp-desktop main p > a:not([class]):hover,
body.sp-desktop main li > a:not([class]):hover {
  color: var(--sp-brand-green-dark);
}

/* ============================================================
   COMPAT LAYER v2 — aggressive pass

   The conservative selectors above only restyle bare elements.
   Most legacy views use heavy Tailwind utility chains, so to
   actually apply the design language across all views without
   editing each ERB we need to override common utility patterns.

   Scope is still body.sp-desktop main so mobile is untouched.
   Each override has a clear visual intent stated.
   ============================================================ */

/* ── Page wrappers: re-paint legacy "min-h-screen bg-gray-50" / "bg-gray-100"
   wrappers as the new slate canvas. These are the page background, not
   intentional card surfaces — restyling them is safe. ── */
body.sp-desktop main .min-h-screen.bg-gray-50,
body.sp-desktop main .min-h-screen.bg-gray-100,
body.sp-desktop main > .bg-gray-50,
body.sp-desktop main > .bg-gray-100 {
  background: transparent !important;
  min-height: 0 !important;
}

/* ── Cards: catch the rest of the common card patterns ── */
body.sp-desktop main .bg-white.p-4.rounded-lg,
body.sp-desktop main .bg-white.p-6.rounded-lg,
body.sp-desktop main .bg-white.rounded-xl,
body.sp-desktop main .bg-white.rounded-lg.border,
body.sp-desktop main .bg-white.rounded-md.border,
body.sp-desktop main .bg-white.rounded.border,
body.sp-desktop main .bg-white.shadow,
body.sp-desktop main .bg-white.shadow-sm,
body.sp-desktop main .bg-white.shadow-md,
body.sp-desktop main .bg-white.shadow-lg {
  background: var(--sp-surface) !important;
  border-color: var(--sp-hairline) !important;
  border-radius: var(--sp-radius-lg) !important;
  box-shadow: var(--sp-shadow-1) !important;
}

/* ── Primary CTAs: <a>/<button> with the common "primary color" Tailwind
   chains used across the app. Restyle to brand green. We target the
   color bg classes only on link/button elements to avoid nuking icon
   pill backgrounds (which use bg-blue-100, bg-emerald-100, etc.). ── */
body.sp-desktop main a.bg-indigo-600,
body.sp-desktop main a.bg-indigo-500,
body.sp-desktop main a.bg-blue-600,
body.sp-desktop main a.bg-blue-500,
body.sp-desktop main a.bg-green-600,
body.sp-desktop main a.bg-emerald-600,
body.sp-desktop main a.bg-emerald-500,
body.sp-desktop main button.bg-indigo-600,
body.sp-desktop main button.bg-indigo-500,
body.sp-desktop main button.bg-blue-600,
body.sp-desktop main button.bg-blue-500,
body.sp-desktop main button.bg-green-600,
body.sp-desktop main button.bg-emerald-600,
body.sp-desktop main button.bg-emerald-500 {
  background-color: var(--sp-brand-green) !important;
  color: var(--sp-text-onDark) !important;
  border-radius: var(--sp-radius-md);
  font-weight: 600;
  transition: all var(--sp-dur-fast) var(--sp-ease);
  box-shadow: var(--sp-shadow-1);
}
body.sp-desktop main a.bg-indigo-600:hover,
body.sp-desktop main a.bg-indigo-500:hover,
body.sp-desktop main a.bg-blue-600:hover,
body.sp-desktop main a.bg-blue-500:hover,
body.sp-desktop main a.bg-green-600:hover,
body.sp-desktop main a.bg-emerald-600:hover,
body.sp-desktop main a.bg-emerald-500:hover,
body.sp-desktop main button.bg-indigo-600:hover,
body.sp-desktop main button.bg-indigo-500:hover,
body.sp-desktop main button.bg-blue-600:hover,
body.sp-desktop main button.bg-blue-500:hover,
body.sp-desktop main button.bg-green-600:hover,
body.sp-desktop main button.bg-emerald-600:hover,
body.sp-desktop main button.bg-emerald-500:hover {
  background-color: var(--sp-brand-green-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--sp-shadow-2);
}

/* ── Secondary / outline buttons: <a>/<button> with white bg + border or ring ── */
body.sp-desktop main a.bg-white.border.border-gray-300,
body.sp-desktop main a.bg-white.ring-1.ring-gray-300,
body.sp-desktop main a.bg-white.ring-inset.ring-gray-300,
body.sp-desktop main button.bg-white.border.border-gray-300,
body.sp-desktop main button.bg-white.ring-1.ring-gray-300 {
  background-color: var(--sp-surface) !important;
  border-color: var(--sp-hairline-strong) !important;
  color: var(--sp-text) !important;
  border-radius: var(--sp-radius-md);
  font-weight: 600;
  transition: all var(--sp-dur-fast) var(--sp-ease);
}
body.sp-desktop main a.bg-white.border.border-gray-300:hover,
body.sp-desktop main button.bg-white.border.border-gray-300:hover,
body.sp-desktop main a.bg-white.ring-1.ring-gray-300:hover,
body.sp-desktop main button.bg-white.ring-1.ring-gray-300:hover {
  border-color: var(--sp-brand-green) !important;
  color: var(--sp-brand-green) !important;
}

/* ── Destructive buttons ── */
body.sp-desktop main a.bg-red-600,
body.sp-desktop main a.bg-red-500,
body.sp-desktop main button.bg-red-600,
body.sp-desktop main button.bg-red-500 {
  background-color: var(--sp-status-danger) !important;
  color: var(--sp-text-onDark) !important;
  border-radius: var(--sp-radius-md);
  font-weight: 600;
}

/* ── Body text inside main: enforce ink color so legacy text-gray-900 etc.
   reads as our brand ink. Skip if a more specific Tailwind text color is
   intentionally set (text-emerald-600 etc. for KPI numbers). ── */
body.sp-desktop main .text-gray-900 { color: var(--sp-text) !important; }
body.sp-desktop main .text-gray-700 { color: var(--sp-text) !important; }
body.sp-desktop main .text-gray-600 { color: var(--sp-text-muted) !important; }
body.sp-desktop main .text-gray-500 { color: var(--sp-text-muted) !important; }
body.sp-desktop main .text-gray-400 { color: var(--sp-text-faint) !important; }

/* ── Gradient KPI cards → sp-kpi look ──
   Pattern across the app: <div class="bg-gradient-to-r from-X-500 to-X-600
   rounded-lg shadow p-6 text-white">. Flatten to surface, slate ink, add
   left accent bar in the original color family. ── */
body.sp-desktop main [class*="bg-gradient-to-"][class*="rounded-lg"][class*="text-white"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="rounded-xl"][class*="text-white"] {
  background: var(--sp-surface) !important;
  background-image: none !important;
  color: var(--sp-text) !important;
  border: 1px solid var(--sp-hairline);
  border-radius: var(--sp-radius-lg) !important;
  box-shadow: var(--sp-shadow-1) !important;
  position: relative;
}
/* Accent bar per color family */
body.sp-desktop main [class*="bg-gradient-to-"][class*="from-green-"][class*="text-white"]::before,
body.sp-desktop main [class*="bg-gradient-to-"][class*="from-emerald-"][class*="text-white"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--sp-status-success); border-radius: var(--sp-radius-lg) 0 0 var(--sp-radius-lg);
}
body.sp-desktop main [class*="bg-gradient-to-"][class*="from-blue-"][class*="text-white"]::before,
body.sp-desktop main [class*="bg-gradient-to-"][class*="from-indigo-"][class*="text-white"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--sp-status-info); border-radius: var(--sp-radius-lg) 0 0 var(--sp-radius-lg);
}
body.sp-desktop main [class*="bg-gradient-to-"][class*="from-purple-"][class*="text-white"]::before,
body.sp-desktop main [class*="bg-gradient-to-"][class*="from-violet-"][class*="text-white"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: #7C3AED; border-radius: var(--sp-radius-lg) 0 0 var(--sp-radius-lg);
}
body.sp-desktop main [class*="bg-gradient-to-"][class*="from-orange-"][class*="text-white"]::before,
body.sp-desktop main [class*="bg-gradient-to-"][class*="from-amber-"][class*="text-white"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--sp-brand-yellow); border-radius: var(--sp-radius-lg) 0 0 var(--sp-radius-lg);
}
body.sp-desktop main [class*="bg-gradient-to-"][class*="from-red-"][class*="text-white"]::before,
body.sp-desktop main [class*="bg-gradient-to-"][class*="from-pink-"][class*="text-white"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--sp-status-danger); border-radius: var(--sp-radius-lg) 0 0 var(--sp-radius-lg);
}

/* Inside the flattened cards: light-tint label text (text-green-100, text-blue-100,
   text-purple-100, text-orange-100, etc.) becomes muted slate so it's legible on
   the new white surface. Numbers retain weight via .text-3xl etc. */
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-green-100"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-green-200"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-blue-100"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-blue-200"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-indigo-100"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-indigo-200"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-purple-100"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-purple-200"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-violet-100"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-violet-200"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-orange-100"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-orange-200"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-amber-100"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-amber-200"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-red-100"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-pink-100"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-emerald-100"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-emerald-200"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-teal-100"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-cyan-100"],
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] [class*="text-yellow-100"] {
  color: var(--sp-text-muted) !important;
}

/* Hide the translucent-white icon circle that was meant to sit on a colored
   gradient — looks like a blob on the new white surface. */
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] .bg-white.bg-opacity-20,
body.sp-desktop main [class*="bg-gradient-to-"][class*="text-white"] .bg-opacity-20 {
  display: none !important;
}


/* ── Layout chrome (sidebar, mobile header bar) ── */

/* Mobile header bar: hidden on desktop, shown on mobile with flex */
body.sp-desktop .mobile-header-bar {
  display: none;
}

@media (max-width: 1023px) {
  body.sp-desktop .mobile-header-bar {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--sp-surface, #fff);
    border-bottom: 1px solid var(--sp-hairline, #e5e7eb);
    z-index: 40;
    padding: 0 1rem;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
}

body.sp-desktop .mobile-menu-toggle,
body.sp-desktop .mobile-search-toggle {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--sp-text-muted, #374151);
  cursor: pointer;
  border-radius: 8px;
}

body.sp-desktop .mobile-header-logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.sp-desktop .sidebar-badge {
  margin-left: auto;
  background-color: var(--sp-brand-yellow, #f59e0b);
  color: white;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  min-width: 1.25rem;
  text-align: center;
}