@withpotter/pages-admin 0.13.0-next.101

package/dist/admin/_ui/admin.css

@@ -0,0 +1,801 @@
+/* ============================================================
+   Admin design-system polish layer.
+   Scoped under .adm-shell so it never leaks into other surfaces.
+   ============================================================ */
+
+.adm-shell {
+  /* Canvas is the page wash BEHIND the cards. It must track the active
+     theme: a hair darker than the card surface so cards lift off it.
+     Derived from the design-system palette scales (never a raw literal). */
+  /* One wash for page and sidebar; white cards are the only lift. */
+  /* Like the merchant dashboard: a grey navigation beside a white work
+     area, so the two read as different places. */
+  --adm-canvas: var(--bg-base);
+  --adm-sidebar: var(--shell-bg);
+  --adm-topbar-h: 56px;
+
+  /* The grid, defined once (layout rule: single source of truth). Every
+     page composes .adm-grid + .adm-span-N; gaps sit on the 4px rhythm. */
+  --adm-gap: 16px;
+  --adm-section: 28px;
+  --adm-panel-h: 400px;
+
+  /* Figures read in the UI face with tabular digits, not a code font. */
+  --font-numeric: var(--font-display);
+  /* Merchant design system: radius is 10px flat across the scale. */
+  --adm-card-radius: 10px;
+
+  /* Depth from rings, not borders (Fluid Functionalism surfaces): a 1px
+     hairline plus soft drops that double with each elevation. */
+  --adm-line: rgb(0 0 0 / 0.05);
+  --adm-drop: rgb(0 0 0 / 0.04);
+  /* No drop shadows anywhere in the console. Surfaces separate by a 1px
+     hairline; floating layers (menus, sheets) get a slightly firmer line.
+     The token names stay so every component picks this up. */
+  --adm-shadow-1: 0 0 0 1px var(--adm-line);
+  --adm-shadow-pop: 0 0 0 1px var(--adm-line-strong);
+  --adm-shadow-sheet: 0 0 0 1px var(--adm-line-strong);
+  --adm-line-strong: rgb(0 0 0 / 0.1);
+
+  /* Shared primitives (buttons, inputs, dialogs) inside the admin: flat. */
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
+  --shadow-xl: none;
+  --shadow-button: none;
+  --shadow-button-filled: none;
+  --shadow-card: none;
+  --shadow-card-hover: none;
+  --shadow-card-soft: none;
+  --shadow-raised: none;
+  --shadow-raised-hover: none;
+  --shadow-lift: none;
+  --shadow-panel: none;
+  --shadow-glow: none;
+  --shadow-glass: none;
+  --shadow-bevel: none;
+  --shadow-paper: none;
+  --shadow-paper-hover: none;
+  --shadow-paper-elevated: none;
+  --adm-card-shadow: var(--adm-shadow-1);
+  --adm-card-shadow-hover: var(--adm-shadow-pop);
+  --adm-hover: rgb(0 0 0 / 0.045);
+
+  /* Motion tiers — every transition picks one; none hand-typed. Springs are
+     approximated with linear() so they retarget smoothly mid-flight. Exits
+     run a tier faster than entrances. */
+  --adm-ease: cubic-bezier(0.2, 0, 0, 1);
+  --adm-spring: linear(
+    0,
+    0.18 6%,
+    0.53 16%,
+    0.83 28%,
+    0.98 40%,
+    1.03 52%,
+    1.01 68%,
+    1
+  );
+  --adm-fast: 120ms var(--adm-ease);
+  --adm-moderate: 200ms var(--adm-ease);
+  --adm-fast-spring: 220ms var(--adm-spring);
+  --adm-moderate-spring: 280ms var(--adm-spring);
+  --adm-slow-spring: 380ms var(--adm-spring);
+  --adm-exit: 180ms var(--adm-ease);
+
+  /* Foreground for text/icons that sit on the always-blue accent fill.
+     The accent stays in the blue family in both themes, so this is a
+     constant light value (not the theme-flipping --text-inverse). */
+  --adm-on-accent: #ffffff;
+
+  /* Categorical data-viz palette (charts, donuts, breakdown bars). These
+     are *data encodings*, not surface colors, so they are defined once here
+     as design tokens and consumed via var() — never inlined in component
+     code. Light-theme hues. */
+  /* Box brand only: the blue scale and inks, alternating dark and light
+     so neighbouring slices still separate. No rainbow. */
+  --adm-cat-1: var(--brand-500);
+  --adm-cat-2: var(--brand-300);
+  --adm-cat-3: var(--brand-800);
+  --adm-cat-4: var(--gray-500);
+  --adm-cat-5: var(--brand-200);
+  --adm-cat-6: var(--brand-700);
+  --adm-cat-7: var(--gray-300);
+  --adm-cat-8: var(--gray-700);
+
+  /* Success stays meaningful but quiet: a desaturated green that reads as
+     "good" without a bright pop (admin only; the merchant app keeps its
+     own). The dot/text carries it, never a loud fill. */
+  --success: color-mix(in srgb, #3f8a6e 85%, var(--text-secondary));
+  --success-bg: color-mix(in srgb, #3f8a6e 8%, transparent);
+
+  /* Semantic status (pills, dots): recognisable, softly tinted. */
+  --adm-ok: #1f9d6b;
+  --adm-ok-bg: color-mix(in srgb, #1f9d6b 10%, transparent);
+  --adm-ok-ink: #17714e;
+  --adm-wait: #d08a12;
+  --adm-wait-bg: color-mix(in srgb, #d08a12 11%, transparent);
+  --adm-wait-ink: #8a5a06;
+}
+
+.dark .adm-shell {
+  /* Deep wash, darker than the dark card surface (--bg-base #161616). */
+  --adm-canvas: var(--bg-base);
+  --adm-sidebar: var(--matte-700);
+  --adm-line: rgb(255 255 255 / 0.08);
+  --adm-line-strong: rgb(255 255 255 / 0.14);
+  --adm-drop: rgb(0 0 0 / 0.45);
+  --adm-hover: rgb(255 255 255 / 0.06);
+
+  /* Brighter, less-saturated categorical hues so they stay legible on the
+     dark canvas. */
+  --adm-cat-1: var(--brand-400);
+  --adm-cat-2: var(--brand-200);
+  --adm-cat-3: var(--brand-600);
+  --adm-cat-4: var(--gray-400);
+  --adm-cat-5: var(--brand-300);
+  --adm-cat-6: var(--brand-100);
+  --adm-cat-7: var(--gray-500);
+  --adm-cat-8: var(--gray-300);
+
+  --success: color-mix(in srgb, #6fb89a 80%, var(--text-secondary));
+  --success-bg: color-mix(in srgb, #6fb89a 10%, transparent);
+
+  --adm-ok: #45c08e;
+  --adm-ok-bg: color-mix(in srgb, #45c08e 14%, transparent);
+  --adm-ok-ink: #7fd8b2;
+  --adm-wait: #e7a83a;
+  --adm-wait-bg: color-mix(in srgb, #e7a83a 14%, transparent);
+  --adm-wait-ink: #f1c47a;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Settings → Motion: Full keeps motion even when the OS asks to reduce. */
+  .adm-shell:not([data-motion='full']) {
+    --adm-fast-spring: 1ms linear;
+    --adm-moderate-spring: 1ms linear;
+    --adm-slow-spring: 1ms linear;
+  }
+}
+
+/* ---- Canvas + main column ---- */
+.adm-main {
+  background: var(--adm-canvas);
+}
+
+/* ---- Segmented section tabs (e.g. Support) ---- */
+.adm-section-nav {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 3px;
+  border-radius: 10px;
+  background: var(--adm-hover);
+}
+
+.adm-section-nav-link {
+  padding: 7px 13px;
+  border-radius: 7px;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    background var(--adm-fast),
+    color var(--adm-fast),
+    box-shadow var(--adm-fast);
+}
+
+.adm-section-nav-link:hover {
+  color: var(--text-primary);
+  background: var(--interactive-hover);
+}
+
+.adm-section-nav-link[data-active='true'] {
+  color: var(--text-primary);
+  background: var(--bg-base);
+  box-shadow: var(--adm-card-shadow);
+}
+
+/* ---- Stat card ---- */
+.adm-stat {
+  background: var(--bg-base);
+  border-radius: var(--adm-card-radius);
+  padding: 16px 20px;
+  box-shadow: var(--adm-card-shadow);
+  /* Establish a query container so the value can scale to THIS card's width. */
+  container-type: inline-size;
+  min-width: 0;
+}
+
+.adm-stat-head {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+  margin-bottom: 8px;
+}
+
+/* Quiet secondary line under the label. */
+.adm-stat-note {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--text-tertiary);
+}
+
+.adm-stat-value[data-alert='true'] {
+  color: var(--error);
+}
+
+.adm-stat-label {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-secondary);
+}
+
+.adm-stat-sub {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-tertiary);
+}
+
+/* A word, not a figure ("Admin · Login · Success"): body size, two lines. */
+.adm-stat-value--text {
+  display: -webkit-box;
+  white-space: normal;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: -0.005em;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.adm-stat-value {
+  font-family: var(--font-numeric), system-ui, sans-serif;
+  /* Scale with the card: ~8.5% of card width, floored so it stays legible and
+     capped at the design size. Keeps long numbers (e.g. NGN 804,200) inside
+     the card instead of clipping into the neighbour. */
+  font-size: clamp(16px, 8cqi, 28px);
+  line-height: 1.15;
+  font-weight: 500;
+  letter-spacing: -0.015em;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+  min-width: 0;
+  /* A figure never breaks across lines ("NGN 15,000.0 / 0"); it shrinks
+     with the card and, at the floor, truncates with the full value on hover. */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.adm-trend {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  margin-top: 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent-secondary-ink);
+  background: var(--accent-secondary);
+  padding: 3px 9px;
+  border-radius: 999px;
+}
+
+/* Compact KPI card — for dense headline rows that pack more cards per row. */
+.adm-stat--compact {
+  padding: 12px 14px 12px;
+}
+.adm-stat--compact .adm-stat-head {
+  margin-bottom: 8px;
+}
+.adm-stat--compact .adm-stat-value {
+  font-size: clamp(15px, 7cqi, 24px);
+}
+.adm-stat--compact .adm-stat-foot {
+  margin-top: 8px;
+}
+
+/* ---- KPI card footer: delta pill + sparkline ---- */
+.adm-stat-foot {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 12px;
+  min-height: 24px;
+}
+
+/* ---- Overview layout: context strip + hero grid ---- */
+.adm-context-strip {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  border-radius: var(--adm-card-radius);
+  background: var(--bg-base);
+  box-shadow: var(--adm-card-shadow);
+  overflow: hidden;
+}
+
+.adm-totals-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  gap: 18px 24px;
+  margin-top: 14px;
+}
+
+.adm-composition-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px 28px;
+  align-items: start;
+}
+
+@media (max-width: 720px) {
+  .adm-composition-grid {
+    grid-template-columns: 1fr;
+    gap: 24px;
+  }
+}
+
+.adm-subhead {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+  margin-bottom: 10px;
+}
+
+.adm-hero-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
+  gap: 16px;
+  align-items: stretch;
+}
+
+@media (max-width: 920px) {
+  .adm-hero-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.adm-decision-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  gap: 14px;
+}
+
+.adm-research-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+@media (max-width: 920px) {
+  .adm-research-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.adm-stat-trio {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr);
+  gap: 16px;
+  align-items: stretch;
+}
+
+.adm-stat-trio > .adm-panel {
+  height: 100%;
+}
+
+@media (max-width: 920px) {
+  .adm-stat-trio {
+    grid-template-columns: 1fr;
+  }
+}
+
+.adm-account-row {
+  transition: opacity var(--adm-fast);
+}
+
+.adm-account-row:hover {
+  opacity: 0.65;
+}
+
+.adm-revenue-split {
+  display: grid;
+  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
+  gap: 16px;
+  align-items: stretch;
+}
+
+@media (max-width: 640px) {
+  .adm-revenue-split {
+    grid-template-columns: 1fr;
+  }
+}
+
+.adm-stat-foot-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+
+.adm-stat-caption {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+
+.adm-delta {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 12px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Plain text, not a pill: the arrow carries the direction (never colour
+   alone) and only a real decline turns red. */
+.adm-delta--good {
+  color: var(--accent-secondary-ink);
+}
+
+.adm-delta--bad {
+  color: var(--error);
+}
+
+.adm-delta--flat {
+  color: var(--text-tertiary);
+}
+
+/* ---- Clickable stat card ---- */
+.adm-stat-link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+
+.adm-stat-link {
+  transition: box-shadow var(--adm-fast);
+}
+
+.adm-stat-link:hover {
+  box-shadow: var(--adm-shadow-pop);
+}
+
+.adm-stat-link:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+}
+
+/* ---- Needs-attention triage rail ---- */
+.adm-att-group + .adm-att-group {
+  margin-top: 18px;
+}
+
+.adm-att-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.adm-att-head-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.adm-att-count {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.adm-att-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 9px 10px;
+  border-radius: 10px;
+  text-decoration: none;
+  color: inherit;
+  transition: background var(--adm-fast);
+}
+
+.adm-att-item:hover {
+  background: var(--interactive-hover);
+}
+
+.adm-att-item + .adm-att-item {
+  border-top: 1px solid var(--border-subtle);
+}
+
+.adm-att-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.adm-att-sub {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin-top: 1px;
+}
+
+.adm-att-meta {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.adm-att-empty {
+  font-size: 13px;
+  color: var(--text-tertiary);
+  padding: 6px 2px;
+}
+
+.adm-att-allclear {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--success);
+}
+
+/* ---- Panel (chart + generic elevated surface) ---- */
+.adm-panel {
+  background: var(--bg-base);
+  border-radius: var(--adm-card-radius);
+  box-shadow: var(--adm-card-shadow);
+  padding: 20px;
+}
+
+.adm-panel-title {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  color: var(--text-primary);
+  margin-bottom: 16px;
+}
+
+/* ---- Inline info hint / tooltip ---- */
+.adm-hint {
+  position: relative;
+  cursor: help;
+}
+
+.adm-hint:focus-visible {
+  outline: none;
+}
+
+.adm-hint-bubble {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  width: max-content;
+  max-width: min(260px, 70vw);
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: var(--text-primary);
+  color: var(--bg-base);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.45;
+  letter-spacing: normal;
+  text-transform: none;
+  text-align: left;
+  white-space: normal;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--adm-fast);
+  z-index: 60;
+}
+
+.adm-hint-bubble::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 14px;
+  border: 5px solid transparent;
+  border-top-color: var(--text-primary);
+}
+
+.adm-hint:hover .adm-hint-bubble,
+.adm-hint:focus-visible .adm-hint-bubble {
+  opacity: 1;
+}
+
+/* ---- Data table card ---- */
+.adm-table-card {
+  background: var(--bg-base);
+  border-radius: var(--adm-card-radius);
+  box-shadow: var(--adm-card-shadow);
+  /* Wide tables (e.g. the 12-column cohort grid) scroll horizontally inside
+     the card instead of clipping or forcing page-level overflow. */
+  overflow-x: auto;
+}
+
+.adm-table-card thead tr {
+  background: transparent;
+  box-shadow: inset 0 -1px 0 var(--border-subtle);
+}
+
+.adm-table-card tbody tr {
+  transition: background var(--adm-fast);
+}
+
+.adm-table-card tbody tr:hover {
+  background: var(--adm-hover);
+}
+
+/* ---- Page header ---- */
+.adm-page-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.adm-page-title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: var(--text-title, 18px);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.3;
+}
+
+.adm-page-desc {
+  margin: 4px 0 0;
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.adm-page-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+@media (max-width: 640px) {
+  .adm-page-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
+/* ---- The 12-column grid (desktop → tablet → phone) ---- */
+.adm-grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: var(--adm-gap);
+  align-items: stretch;
+}
+
+.adm-grid + .adm-grid,
+.adm-grid + .adm-section,
+.adm-section + .adm-grid,
+.adm-section + .adm-section {
+  margin-top: var(--adm-gap);
+}
+
+.adm-span-3 {
+  grid-column: span 3;
+}
+.adm-span-4 {
+  grid-column: span 4;
+}
+.adm-span-5 {
+  grid-column: span 5;
+}
+.adm-span-6 {
+  grid-column: span 6;
+}
+.adm-span-7 {
+  grid-column: span 7;
+}
+.adm-span-8 {
+  grid-column: span 8;
+}
+.adm-span-12 {
+  grid-column: span 12;
+}
+
+@media (max-width: 1199px) {
+  .adm-span-3,
+  .adm-span-6 {
+    grid-column: span 6;
+  }
+  .adm-span-4,
+  .adm-span-5,
+  .adm-span-7,
+  .adm-span-8 {
+    grid-column: span 12;
+  }
+}
+
+@media (max-width: 719px) {
+  .adm-grid > * {
+    grid-column: span 12;
+  }
+}
+
+/* A row of page controls (currency, period) that never wraps the page. */
+.adm-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* Section caption stating the window once: "Last 30 days · USD". */
+.adm-caption {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+
+/* ---- Donut legend ---- */
+.adm-donut-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.adm-donut-pct {
+  width: 40px;
+  font-size: 12px;
+  text-align: right;
+  color: var(--text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- Page tabs: sections as tabs under the header (no long scroll) ---- */
+.adm-page-tabs {
+  margin: -8px 0 24px;
+}
+
+.adm-page-lead {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+/* A page's lead row inside a workspace tab: its context left, its actions right. */
+.adm-tab-lead {
+  align-items: center;
+}
+
+.adm-tab-lead .adm-page-desc {
+  margin: 0;
+}