/* Design tokens — colors, spacing, typography, radii, shadows.
   v1 palette; iterate as the UI lands. */


:root {

  /* Spacing */
  --sp-4xs: 2px;
  --sp-3xs: 4px;
  --sp-xxs: 6px;
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 20px;
  --sp-xl: 24px;
  --sp-xxl: 32px;
  --sp-3xl: 40px;
  --sp-4xl: 48px;

    /* Sizing */
  --size-4xs: 2px;
  --size-3xs: 4px;
  --size-xxs: 6px;
  --size-xs: 8px;
  --size-sm: 12px;
  --size-md: 16px;
  --size-lg: 20px;
  --size-xl: 24px;
  --size-xxl: 32px;
  --size-3xl: 40px;
  --size-4xl: 48px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: "New York", ui-serif, Georgia, serif;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 32px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

:root {
  /* Colors - Light */


/* Background Colors */

  --bg-body: #FFFFFF;
  --bg-body-inverse: #0D0D0D;
  --bg-primary: #F9F9F9;
  --bg-primary-inverse: #181818;
  --bg-secondary: rgba(0,0,0,0.06);
  --bg-secondary-inverse: rgba(255,255,255,0.06);
  --bg-tertiary: rgba(255,255,255,0.04);
  --bg-tertiary-inverse: rgba(0,0,0,0.06);
  --bg-quarternary: rgba(255,255,255,0.02);
  --bg-quarternary-inverse: rgba(0,0,0,0.02);
  --bg-disabled: var(--bg-quarternary);
  --bg-disabled-inverse: var(--bg-quarternary-inverse);

  /* Text Colors */
  --text-primary: #0D0D0D;
  --text-primary-inverse: #FFFFFF;
  --text-secondary: #5D5D5D;
  --text-secondary-inverse: rgba(255,255,255,.5);
  --text-tertiary: #676767;
  --text-tertiary-inverse: rgba(255,255,255,.4);
  --text-quarternary: #9B9B9B;
  --text-quarternary-inverse: rgba(255,255,255,.3);
  --text-disabled: rgba(0,0,0,.2);
  --text-disabled-inverse: rgba(255,255,255,.2);


/* Border Colors */
  --border: #e5e5e5;
  --border-strong: #d4d4d4;
  --border-primary: #f2f2f2;
  --border-secondary: rgba(13,13,13,.1);
  --border-tertiary: rgba(13,13,13,.05);

  /* Accent Colors */
  --accent-cobalt: #3b60e4;
  --accent-blue: #3b60e4;
  --accent-red: #E50900;
  --accent-green: #18A957;

   /* deprecate these soon */
  --bg: var(--bg-body);
  --bg-subtle: var(--bg-primary);           /* very light gray, sidebar bg */
  --bg-elevated: rgba(0,0,0,.6);         /* cards, buttons */
  --fg: var(--text-primary);
  --fg-muted: var(--text-secondary);
  --fg-subtle: var(--text-tertiary);
  --accent: var(--bg-primary-inverse);              /* primary actions = black-on-white */
  --accent-fg: var(--bg-primary);
  --danger: var(--accent-red);

  color-scheme: light;
}

/* OS dark preference — only applies when no explicit data-theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0a0a0a;
    --bg-subtle: #171717;
    --bg-elevated: #1c1c1c;
    --fg: #fafafa;
    --fg-muted: #a3a3a3;
    --fg-subtle: #737373;
    --accent: #fafafa;
    --accent-fg: #0a0a0a;
    --danger: #f87171;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

    --bg-body: #212121;
    --bg-body-inverse: #FFFFFF;
    --bg-primary: #181818;
    --bg-primary-inverse: #FFFFFF;
    --bg-secondary: rgba(255,255,255,0.06);
    --bg-secondary-inverse: rgba(0,0,0,0.06);
    --bg-tertiary: rgba(0,0,0,0.04);
    --bg-tertiary-inverse: rgba(255,255,255,0.06);
    --bg-quarternary: rgba(255,255,255,0.04);
    --bg-quarternary-inverse: rgba(0,0,0,0.02);
    --bg-disabled: var(--bg-quarternary);
    --bg-disabled-inverse: var(--bg-quarternary-inverse);

    --text-primary: #FFFFFF;
    --text-primary-inverse: #0D0D0D;
    --text-secondary: rgba(255,255,255,.5);
    --text-secondary-inverse: rgba(0,0,0,.5);
    --text-tertiary: #AFAFAF;
    --text-tertiary-inverse: rgba(0,0,0,.4);
    --text-quarternary: #9B9B9B;
    --text-quarternary-inverse: rgba(0,0,0,.3);
    --text-disabled: rgba(255,255,255,.2);
    --text-disabled-inverse: rgba(0,0,0,.2);

    --border: rgba(255,255,255,.3);
    --border-strong: rgba(255,255,255,.5);
    --border-primary: #0D0D0D;
    --border-secondary: rgba(13,13,13,.05);
    --border-tertiary: rgba(255,255,255,.05);

    /* Accent Colors */
    --accent-cobalt: #7992EC;
    --accent-blue: #7992EC;
    --accent-red: #FF4B44;
    --accent-green: #22C55E;

    color-scheme: dark;
  }
}

/* Explicit dark mode */
[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-subtle: #171717;
  --bg-elevated: #1c1c1c;
  --fg: #fafafa;
  --fg-muted: #a3a3a3;
  --fg-subtle: #737373;
  --accent: #fafafa;
  --accent-fg: #0a0a0a;
  --danger: #f87171;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

  --bg-body: #212121;
  --bg-body-inverse: #FFFFFF;
  --bg-primary: #181818;
  --bg-primary-inverse: #FFFFFF;
  --bg-secondary: rgba(255,255,255,0.06);
  --bg-secondary-inverse: rgba(0,0,0,0.06);
  --bg-tertiary: rgba(0,0,0,0.04);
  --bg-tertiary-inverse: rgba(255,255,255,0.06);
  --bg-quarternary: rgba(255,255,255,0.04);
  --bg-quarternary-inverse: rgba(0,0,0,0.02);
  --bg-disabled: var(--bg-quarternary);
  --bg-disabled-inverse: var(--bg-quarternary-inverse);

  --text-primary: #FFFFFF;
  --text-primary-inverse: #0D0D0D;
  --text-secondary: rgba(255,255,255,.5);
  --text-secondary-inverse: rgba(0,0,0,.5);
  --text-tertiary: #AFAFAF;
  --text-tertiary-inverse: rgba(0,0,0,.4);
  --text-quarternary: #9B9B9B;
  --text-quarternary-inverse: rgba(0,0,0,.3);
  --text-disabled: rgba(255,255,255,.2);
  --text-disabled-inverse: rgba(0,0,0,.2);
  --border: rgba(255,255,255,.3);
  --border-strong: rgba(255,255,255,.5);
  --border-primary: #0D0D0D;
  --border-secondary: rgba(13,13,13,.05);
  --border-tertiary: rgba(255,255,255,.05);

  /* Accent Colors */
  --accent-cobalt: #7992EC;
  --accent-blue: #7992EC;
  --accent-red: #FF4B44;
  --accent-green: #22C55E;

  color-scheme: dark;
}

/* Explicit light mode */
[data-theme="light"] {
  --bg: #ffffff;
  --bg-subtle: #f5f5f4;
  --bg-elevated: #ffffff;
  --fg: #0a0a0a;
  --fg-muted: #737373;
  --fg-subtle: #a3a3a3;
  --border: #e5e5e5;
  --border-strong: #d4d4d4;
  --accent: #0a0a0a;
  --accent-fg: #ffffff;
  --danger: #dc2626;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  --bg-body: #FFFFFF;
  --bg-body-inverse: #0D0D0D;
  --bg-primary: #F9F9F9;
  --bg-primary-inverse: #181818;
  --bg-secondary: rgba(0,0,0,0.06);
  --bg-secondary-inverse: rgba(255,255,255,0.06);
  --bg-tertiary: rgba(255,255,255,0.04);
  --bg-tertiary-inverse: rgba(0,0,0,0.06);
  --bg-quarternary: rgba(255,255,255,0.02);
  --bg-quarternary-inverse: rgba(0,0,0,0.02);
  --bg-disabled: var(--bg-quarternary);
  --bg-disabled-inverse: var(--bg-quarternary-inverse);

  --text-primary: #0D0D0D;
  --text-primary-inverse: #FFFFFF;
  --text-secondary: #5D5D5D;
  --text-secondary-inverse: rgba(255,255,255,.5);
  --text-tertiary: #676767;
  --text-tertiary-inverse: rgba(255,255,255,.4);
  --text-quarternary: #9B9B9B;
  --text-quarternary-inverse: rgba(255,255,255,.3);
  --text-disabled: rgba(0,0,0,.2);
  --text-disabled-inverse: rgba(255,255,255,.2);

  /* Accent Colors */
  --accent-cobalt: #3b60e4;
  --accent-blue: #3b60e4;
  --accent-red: #E50900;
  --accent-green: #18A957;

  color-scheme: light;
}

/* Minimal reset + base styles */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-body);
  color: var(--text-primary);
  margin: 0;
  min-height: 100dvh;
}

a {
  color: var(--accent-cobalt);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.uplot, .uplot *, .uplot *::before, .uplot *::after {box-sizing: border-box;}.uplot {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";line-height: 1.5;width: min-content;}.u-title {text-align: center;font-size: 18px;font-weight: bold;}.u-wrap {position: relative;user-select: none;}.u-over, .u-under {position: absolute;}.u-under {overflow: hidden;}.uplot canvas {display: block;position: relative;width: 100%;height: 100%;}.u-axis {position: absolute;}.u-legend {font-size: 14px;margin: auto;text-align: center;}.u-inline {display: block;}.u-inline * {display: inline-block;}.u-inline tr {margin-right: 16px;}.u-legend th {font-weight: 600;}.u-legend th > * {vertical-align: middle;display: inline-block;}.u-legend .u-marker {width: 1em;height: 1em;margin-right: 4px;background-clip: padding-box !important;}.u-inline.u-live th::after {content: ":";vertical-align: middle;}.u-inline:not(.u-live) .u-value {display: none;}.u-series > * {padding: 4px;}.u-series th {cursor: pointer;}.u-legend .u-off > * {opacity: 0.3;}.u-select {background: rgba(0,0,0,0.07);position: absolute;pointer-events: none;}.u-cursor-x, .u-cursor-y {position: absolute;left: 0;top: 0;pointer-events: none;will-change: transform;}.u-hz .u-cursor-x, .u-vt .u-cursor-y {height: 100%;border-right: 1px dashed #607D8B;}.u-hz .u-cursor-y, .u-vt .u-cursor-x {width: 100%;border-bottom: 1px dashed #607D8B;}.u-cursor-pt {position: absolute;top: 0;left: 0;border-radius: 50%;border: 0 solid;pointer-events: none;will-change: transform;/*this has to be !important since we set inline "background" shorthand */background-clip: padding-box !important;}.u-axis.u-off, .u-select.u-off, .u-cursor-x.u-off, .u-cursor-y.u-off, .u-cursor-pt.u-off {display: none;}
/* Admin dashboard app-shell and component styles */

/* App shell: sidebar + main content area */
.app-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 100dvh;
  height: 100dvh;
  overflow: hidden;
}

/* Sidebar nav */
.sidebar {
  background: var(--bg-primary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--sp-lg);
  overflow-y: auto;
}

.sidebar-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--sp-xl) 0;
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: block;
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: 500;
  transition: background 0.1s, color 0.1s;
}

.nav-link:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  text-decoration: none;
}

.nav-link.active {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Main content */
.main-content {
  overflow-y: auto;
  padding: var(--sp-xxl);
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin: 0 0 var(--sp-xl) 0;
}

/* Stat cards */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-lg);
  margin-bottom: var(--sp-xxl);
}

.stat-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-sm);
}

.stat-card-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--sp-xs) 0;
}

.stat-card-value {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

/* Chart container */
.chart-container {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-xl);
}

.chart-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--sp-md) 0;
}

/* Cohort / retention grid */
.cohort-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.cohort-grid th {
  text-align: left;
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-weight: 600;
}

.cohort-grid td {
  padding: var(--sp-xs) var(--sp-sm);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.cohort-grid tr:hover td {
  background: var(--bg-secondary);
}

/* Loading and error states */
.loading-state,
.error-state {
  padding: var(--sp-xxl);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.error-state {
  color: var(--accent-red);
}

/* Initializing splash */
.initializing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

/* --- Sticky user dashboard --------------------------------------------- */

.sticky-search {
  display: flex;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-lg);
}

.sticky-search input {
  flex: 1;
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.sticky-table,
.exclusion-table {
  width: 100%;
  border-collapse: collapse;
}

.sticky-table th,
.exclusion-table th {
  text-align: left;
  padding: var(--sp-xs) var(--sp-sm);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-weight: 500;
}

.sticky-table td,
.exclusion-table td {
  padding: var(--sp-sm);
  border-bottom: 1px solid var(--border-primary);
  vertical-align: top;
}

th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover {
  color: var(--text-primary);
}

.sticky-name {
  font-weight: 500;
}

.sticky-identity {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.exclusion-name {
  font-weight: 500;
}

/* Contact detail and the Clerk id, stacked under the name. The id is here to be
   copied and matched against, not read, so it is deliberately quiet. */
.exclusion-identity {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.exclusion-identity:last-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  word-break: break-all;
}

.badge-excluded {
  display: inline-block;
  margin-top: var(--sp-3xs);
  padding: 1px var(--sp-xxs);
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* One cell per day over the last 30. Renders the pattern, never a total —
   under the sticky definition a user can qualify from one busy afternoon, and
   this is what makes that visible. */
.day-strip {
  display: flex;
  gap: 2px;
}

.day-cell {
  width: 6px;
  height: 18px;
  border-radius: 2px;
  background: var(--bg-secondary);
}

.day-cell-active {
  background: var(--text-primary);
}

.exclusion-form {
  display: flex;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-md);
}

.exclusion-form input {
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.hint {
  color: var(--text-secondary);
  margin-bottom: var(--sp-md);
}

.error {
  color: #b00020;
  margin-bottom: var(--sp-md);
}

/* --- Office display ------------------------------------------------------ */

/* Sized to be read across a room. No chrome, no names — the proxy allows this
   page's token exactly one aggregate operation. */
.display-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  background: var(--bg-primary);
}

.display-number {
  font-size: clamp(8rem, 34vw, 30rem);
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
}

.display-number-stale {
  color: var(--text-secondary);
}

.display-label {
  margin-top: var(--sp-lg);
  font-size: clamp(1rem, 3vw, 2.5rem);
  color: var(--text-secondary);
  text-transform: lowercase;
}

.display-trend {
  width: min(60vw, 900px);
  margin-top: var(--sp-xl);
  color: var(--text-secondary);
}

.sparkline {
  width: 100%;
  height: clamp(60px, 12vh, 160px);
  display: block;
}

/* --- Sign out / auth failure ------------------------------------------- */

.sidebar-footer {
  margin-top: auto;
  padding-top: var(--sp-md);
  border-top: 1px solid var(--border);
}

.sign-out,
.initializing button {
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
}

.sign-out:hover,
.initializing button:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* The auth-failure screen has to be readable, not just present — it is the
   only place a Clerk misconfiguration ever surfaces to a human. */
.initializing {
  flex-direction: column;
  gap: var(--sp-sm);
  text-align: center;
  padding: var(--sp-xl);
}

.initializing .hint {
  max-width: 46ch;
  margin: 0;
}

/* Phone + SMS code sign-in. Chrome-free, centred card. */

.signin-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg);
  background: var(--bg-subtle);
}

.signin-card {
  width: 100%;
  max-width: 380px;
  padding: var(--sp-xxl);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: var(--shadow);
}

.signin-title {
  margin: 0 0 var(--sp-xs);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--fg);
}

.signin-hint {
  margin: 0 0 var(--sp-lg);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.signin-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.signin-country,
.signin-input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--sp-sm) var(--sp-md);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}

.signin-country {
  font-size: var(--text-base);
}

.signin-input:focus,
.signin-country:focus {
  outline: none;
  border-color: var(--accent);
}

/* The code is read back digit by digit off a phone screen, so it gets the
   wide-tracked monospace treatment rather than the prose input styling. */
.signin-otp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.35em;
  text-align: center;
}

.signin-submit {
  margin-top: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--accent-fg);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.signin-submit:disabled {
  opacity: 0.4;
  cursor: default;
}

.signin-link {
  padding: var(--sp-xs);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.signin-error {
  margin: var(--sp-md) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--danger);
}