/* Stripe design-language binding for the dashboard (see DESIGN.md).
   Scoped to #page-dashboard only — other pages keep the base theme.
   Tokens come from DESIGN.md; Inter 300 substitutes proprietary Sohne. */

#page-dashboard {
  --st-primary: #533afd;
  --st-primary-deep: #4434d4;
  --st-primary-press: #2e2b8c;
  --st-primary-soft: #665efd;
  --st-tag-bg: #b9b9f9;
  --st-ink: #0d253d;
  --st-ink-secondary: #273951;
  /* ink-mute-2 token: ink-mute (#64748d) is 4.49:1 on canvas-soft, below AA */
  --st-ink-mute: #61718a;
  --st-canvas: #ffffff;
  --st-canvas-soft: #f6f9fc;
  --st-hairline: #e3e8ee;
  --st-shadow-1: rgba(0, 55, 112, 0.08) 0 1px 3px;

  color: var(--st-ink);
  font-feature-settings: "ss01";
}

/* ---- Hero: gradient-mesh band (CSS approximation of the brand mesh) ---- */

#page-dashboard .dashboard-hero {
  position: relative;
  margin-bottom: 24px;
  padding: 26px 28px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 160% at 8% 0%, rgba(245, 233, 212, 0.9) 0%, rgba(245, 233, 212, 0) 55%),
    radial-gradient(90% 140% at 42% -20%, rgba(249, 107, 238, 0.16) 0%, rgba(249, 107, 238, 0) 60%),
    radial-gradient(110% 170% at 78% -10%, rgba(102, 94, 253, 0.18) 0%, rgba(102, 94, 253, 0) 62%),
    radial-gradient(80% 130% at 100% 30%, rgba(234, 34, 97, 0.10) 0%, rgba(234, 34, 97, 0) 55%),
    var(--st-canvas);
}

#page-dashboard .dashboard-kicker {
  color: var(--st-primary-deep);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

#page-dashboard .dashboard-hero h1 {
  color: var(--st-ink);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.64px;
  line-height: 1.1;
}

#page-dashboard .dashboard-hero .page-sub {
  color: var(--st-ink-mute);
  font-weight: 300;
}

#page-dashboard .dashboard-company-badge {
  background: var(--st-tag-bg);
  /* primary-press: primary-deep is 4.23:1 on tag-bg, below AA at 11px */
  color: var(--st-primary-press);
  font-weight: 400;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  font-size: 11px;
}

/* ---- Cards & panels: 12px radius, hairline border, shadow-blue lift ---- */

#page-dashboard .dashboard-metric-card,
#page-dashboard .dashboard-panel {
  border: 1px solid var(--st-hairline);
  border-radius: 12px;
  background: var(--st-canvas);
  box-shadow: var(--st-shadow-1);
}

#page-dashboard .metric-top {
  color: var(--st-ink-mute);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
}

#page-dashboard .metric-top i {
  color: var(--st-ink-mute);
}

#page-dashboard .metric-value {
  color: var(--st-ink);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.42px;
  font-feature-settings: "ss01", "tnum";
  font-variant-numeric: tabular-nums;
}

#page-dashboard .metric-sub {
  color: var(--st-ink-mute);
  font-weight: 300;
}

/* ---- Progress: indigo on hairline track ---- */

#page-dashboard .dash-progress {
  background: var(--st-hairline);
}

#page-dashboard .dash-progress span {
  background: linear-gradient(90deg, var(--st-primary), var(--st-primary-soft));
}

/* ---- Panel heads: thin headings, indigo links ---- */

#page-dashboard .dashboard-panel-head h2 {
  color: var(--st-ink);
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.2px;
}

#page-dashboard .dashboard-panel-head p,
#page-dashboard .dashboard-panel-head span {
  color: var(--st-ink-mute);
  font-weight: 400;
  font-feature-settings: "ss01", "tnum";
}

#page-dashboard .dashboard-panel-head a {
  color: var(--st-primary);
  font-weight: 400;
}

/* ---- List insets: canvas-soft with hairline ---- */

#page-dashboard .dashboard-alert-list li,
#page-dashboard .dashboard-pending-item button,
#page-dashboard .dashboard-pending-empty,
#page-dashboard .activity-row,
#page-dashboard .activity-empty,
#page-dashboard .dashboard-billing-footer {
  background: var(--st-canvas-soft);
  border-radius: 8px;
}

#page-dashboard .activity-row,
#page-dashboard .dashboard-pending-item button {
  border: 1px solid var(--st-hairline);
}

#page-dashboard .dashboard-pending-item button:hover {
  border-color: var(--st-primary);
  background: #f4f3ff;
}

#page-dashboard .dashboard-alert-list a {
  color: var(--st-primary);
  font-weight: 400;
}

#page-dashboard .dashboard-pending-main strong,
#page-dashboard .activity-user {
  color: var(--st-ink);
  font-weight: 400;
}

#page-dashboard .dashboard-pending-empty {
  font-weight: 400;
}

#page-dashboard .activity-empty {
  font-weight: 400;
  border-color: var(--st-hairline);
}

#page-dashboard .activity-icon {
  background: var(--st-tag-bg);
  color: var(--st-primary-press);
}

#page-dashboard .dashboard-pending-main small,
#page-dashboard .dashboard-pending-meta,
#page-dashboard .activity-meta {
  color: var(--st-ink-mute);
  font-weight: 300;
  font-feature-settings: "ss01", "tnum";
}

#page-dashboard .dashboard-pending-badge {
  background: var(--st-tag-bg);
  color: var(--st-primary-press);
  font-weight: 400;
}

#page-dashboard .dashboard-owner-pill {
  background: var(--st-tag-bg);
  color: var(--st-primary-press);
  font-weight: 400;
}

/* ---- Quick actions: tiles stay cards; icons muted, indigo on hover ---- */

#page-dashboard .dashboard-action-grid button {
  border: 1px solid var(--st-hairline);
  border-radius: 8px;
  color: var(--st-ink-secondary);
  font-weight: 400;
}

#page-dashboard .dashboard-action-grid i {
  color: var(--st-ink-mute);
}

#page-dashboard .dashboard-action-grid button:hover {
  border-color: var(--st-primary);
  color: var(--st-primary-deep);
  background: #f4f3ff;
}

#page-dashboard .dashboard-action-grid button:hover i {
  color: var(--st-primary);
}

/* ---- Glance list ---- */

#page-dashboard .dashboard-glance-list div {
  border-bottom: 1px solid var(--st-hairline);
}

#page-dashboard .dashboard-glance-list span {
  color: var(--st-ink-mute);
  font-weight: 300;
}

#page-dashboard .dashboard-glance-list strong {
  color: var(--st-ink);
  font-weight: 400;
  font-feature-settings: "ss01", "tnum";
  font-variant-numeric: tabular-nums;
}

/* ---- Billing: money cells in tabular figures; primary CTA as indigo pill ---- */

#page-dashboard .dashboard-billing-grid div {
  border: 1px solid var(--st-hairline);
  border-radius: 8px;
  background: var(--st-canvas-soft);
}

#page-dashboard .dashboard-billing-grid strong,
#page-dashboard .dashboard-billing-footer strong {
  color: var(--st-ink);
  font-weight: 300;
  letter-spacing: -0.42px;
  font-feature-settings: "ss01", "tnum";
  font-variant-numeric: tabular-nums;
}

#page-dashboard .dashboard-billing-grid span,
#page-dashboard .dashboard-billing-grid small,
#page-dashboard .dashboard-billing-footer {
  color: var(--st-ink-mute);
  font-weight: 300;
}

#page-dashboard .dashboard-billing-footer button {
  border: 1px solid var(--st-primary);
  border-radius: 9999px;
  padding: 8px 16px;
  min-height: 0;
  background: var(--st-canvas);
  color: var(--st-primary);
  font-size: 14px;
  font-weight: 400;
}

#page-dashboard .dashboard-billing-footer button:hover {
  background: #f4f3ff;
  color: var(--st-primary-deep);
  border-color: var(--st-primary-deep);
}

#page-dashboard .dashboard-billing-footer button.primary {
  background: var(--st-primary);
  color: #ffffff;
}

#page-dashboard .dashboard-billing-footer button.primary:hover {
  background: var(--st-primary-press);
  border-color: var(--st-primary-press);
  color: #ffffff;
}

/* ---- Onboarding stepper (injected by app.js into
   #onboarding-reminder-container; shown to every new tenant) ---- */

#page-dashboard .onboarding-stepper {
  border: 1px solid var(--st-hairline);
  border-top: 1px solid var(--st-hairline);
  border-radius: 12px;
  background: var(--st-canvas);
  box-shadow: var(--st-shadow-1);
}

#page-dashboard .onboarding-header h3 {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.2px;
  color: var(--st-ink);
}

#page-dashboard .onboarding-header p {
  color: var(--st-ink-mute);
  font-weight: 300;
}

#page-dashboard .btn-primary {
  border-radius: 9999px;
  background: var(--st-primary);
  border-color: var(--st-primary);
  color: #ffffff;
  font-weight: 400;
}

#page-dashboard .btn-primary:hover {
  background: var(--st-primary-press);
  border-color: var(--st-primary-press);
}

#page-dashboard .btn-secondary {
  border: 1px solid var(--st-primary);
  border-radius: 9999px;
  background: var(--st-canvas);
  color: var(--st-primary);
  font-weight: 400;
}

#page-dashboard .step-node.active .step-circle {
  background: var(--st-primary);
  border-color: var(--st-primary);
}

#page-dashboard .onboarding-collapsed-bar span {
  background: var(--st-primary);
}

#page-dashboard .wizard-guidance summary {
  color: var(--st-primary);
}

/* ---- Semantic states (extension: DESIGN.md defines no semantic palette;
   base red/amber/green hues are kept for meaning — including
   .metric-value.is-good/.is-warn/.is-danger and .badge-* — re-weighted
   to the thin type system) ---- */

#page-dashboard .activity-status,
#page-dashboard .badge {
  font-weight: 400;
  letter-spacing: 0.04em;
}

@media (max-width: 768px) {
  #page-dashboard .dashboard-hero h1 {
    font-size: 26px;
    letter-spacing: -0.26px;
  }
}