/* ------------------------------------------------------------------------- */
/* Shared dashboard surface — startup-grade SaaS operations view              */
/* Used by SuperAdmin and WebApp creator dashboards                            */
/* Light, warm surface · large radius · pastel chart series · dark hero card  */
/* ------------------------------------------------------------------------- */

.dash-shell {
  --dash-surface: #ffffff;
  --dash-surface-tint: rgba(10, 10, 12, 0.025);
  --dash-line: rgba(10, 10, 12, 0.08);
  --dash-line-2: rgba(10, 10, 12, 0.05);
  --dash-line-strong: rgba(10, 10, 12, 0.16);
  --dash-ink: #0a0a0c;
  --dash-ink-2: rgba(10, 10, 12, 0.66);
  --dash-ink-3: rgba(10, 10, 12, 0.46);
  --dash-ink-4: rgba(10, 10, 12, 0.28);
  --dash-leaf: #4fa867;
  --dash-leaf-deep: #2c4d33;
  --dash-leaf-deeper: #1e3a23;
  --dash-leaf-soft: rgba(91, 201, 122, 0.18);
  --dash-honey: #c89726;
  --dash-honey-soft: rgba(232, 180, 69, 0.22);
  --dash-sky: #4a9bc4;
  --dash-sky-soft: rgba(95, 182, 220, 0.22);
  --dash-lavender: #8e72ce;
  --dash-lavender-soft: rgba(163, 138, 224, 0.22);
  --dash-coral: #d6614a;
  --dash-coral-soft: rgba(232, 124, 102, 0.22);
  --dash-radius-card: 18px;
  --dash-radius-tile: 14px;
  --dash-radius-pill: 9999px;
  --dash-shadow-card: 0 1px 2px rgba(10, 10, 12, 0.04);
  --dash-shadow-hover: 0 4px 16px -8px rgba(10, 10, 12, 0.10);

  display: grid;
  gap: 22px;
  margin-top: 22px;
}

/* === Window selector (segmented pill) === */
.dash-window {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  background: rgba(10, 10, 12, 0.06);
  border-radius: var(--dash-radius-pill);
}

.dash-window__btn {
  border: 0;
  background: transparent;
  color: var(--dash-ink-2);
  font: inherit;
  font-weight: 500;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: var(--dash-radius-pill);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.dash-window__btn[data-active="true"] {
  background: #ffffff;
  color: var(--dash-ink);
  box-shadow: 0 1px 2px rgba(10, 10, 12, 0.10);
  font-weight: 600;
}

.dash-window__btn:hover:not([data-active="true"]) {
  color: var(--dash-ink);
}

/* === Auto-refresh toggle === */
.dash-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--dash-ink-2);
  cursor: pointer;
  user-select: none;
}

.dash-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dash-toggle__pill {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 18px;
  border-radius: var(--dash-radius-pill);
  background: rgba(10, 10, 12, 0.20);
  transition: background 150ms ease;
  flex: 0 0 30px;
}

.dash-toggle__pill::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(10, 10, 12, 0.18);
  transition: left 150ms ease;
}

.dash-toggle__pill[data-active="true"] {
  background: var(--dash-leaf);
}

.dash-toggle__pill[data-active="true"]::after {
  left: 14px;
}

.dash-toggle__label {
  font-weight: 500;
  color: var(--dash-ink-2);
}

.dash-status {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--dash-ink-3);
  white-space: nowrap;
}

/* === Row layouts === */
.dash-row {
  display: grid;
  gap: 18px;
}

.dash-row--main {
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}

@media (max-width: 1100px) {
  .dash-row--main {
    grid-template-columns: 1fr;
  }
}

.dash-row--split {
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
}

/* === KPI row (hero + 3 tiles) === */
.dash-kpi {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) repeat(3, minmax(180px, 1fr));
  gap: 16px;
}

@media (max-width: 1200px) {
  .dash-kpi {
    grid-template-columns: 1fr 1fr;
  }
  .dash-hero {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .dash-kpi {
    grid-template-columns: 1fr;
  }
  .dash-hero {
    grid-column: auto;
  }
}

/* hero tile (the dark green gradient one, used sparingly) */
.dash-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 26px 0;
  border-radius: var(--dash-radius-card);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(135deg, var(--dash-leaf-deep), var(--dash-leaf-deeper));
  color: #ffffff;
  overflow: hidden;
  min-height: 220px;
  isolation: isolate;
  box-shadow: 0 1px 3px rgba(10, 10, 12, 0.08);
}

.dash-hero__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dash-hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.dash-hero__chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--dash-radius-pill);
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.dash-hero__value {
  font-family: var(--font-display, var(--font-ui));
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.dash-hero__hint {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
}

.dash-hero__spark {
  margin: auto -26px 0;
  width: calc(100% + 52px);
  height: 70px;
  display: block;
}

/* secondary tiles (white) */
.dash-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 24px;
  border-radius: var(--dash-radius-card);
  background: var(--dash-surface);
  border: 1px solid var(--dash-line);
  box-shadow: var(--dash-shadow-card);
  min-height: 120px;
}

.dash-tile__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--dash-ink-3);
}

.dash-tile__value {
  font-family: var(--font-display, var(--font-ui));
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dash-ink);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}

.dash-tile--money .dash-tile__value {
  color: var(--dash-leaf-deep);
}

.dash-tile__hint {
  font-size: 12.5px;
  color: var(--dash-ink-3);
}

/* === Activity area chart === */
.dash-area {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 14px;
  border-radius: var(--dash-radius-card);
  background: var(--dash-surface);
  border: 1px solid var(--dash-line);
  box-shadow: var(--dash-shadow-card);
  min-height: 320px;
}

.dash-area__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.dash-area__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-area__title {
  margin: 0;
  font-family: var(--font-display, var(--font-ui));
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dash-ink);
}

.dash-area__subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--dash-ink-3);
}

.dash-area__legend {
  font-size: 11.5px;
  color: var(--dash-ink-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dash-area__plot {
  flex: 1;
  min-height: 220px;
  display: flex;
}

.dash-area__svg {
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: block;
}

.dash-area__grid line {
  stroke: rgba(10, 10, 12, 0.07);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.dash-area__y-label,
.dash-area__x-label {
  fill: var(--dash-ink-4);
  font-size: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}

.dash-area__line {
  fill: none;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.dash-area__marker {
  stroke: #ffffff;
  stroke-width: 1.4;
  opacity: 0.78;
  transition: opacity 150ms ease, r 150ms ease;
  cursor: pointer;
}

.dash-area__marker:hover {
  opacity: 1;
}

.dash-area__empty {
  margin: 0;
  padding: 80px 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--dash-ink-3);
}

/* === Stripe live (vertical rows) === */
.dash-stripe {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border-radius: var(--dash-radius-card);
  background: var(--dash-surface);
  border: 1px solid var(--dash-line);
  box-shadow: var(--dash-shadow-card);
  min-height: 320px;
}

.dash-stripe__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-stripe__title {
  margin: 0;
  font-family: var(--font-display, var(--font-ui));
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dash-ink);
}

.dash-stripe__subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--dash-ink-3);
}

.dash-stripe__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.dash-stripe__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--dash-line-2);
}

.dash-stripe__row:last-child {
  border-bottom: 0;
}

.dash-stripe__label {
  font-size: 13px;
  color: var(--dash-ink-2);
}

.dash-stripe__value {
  font-family: var(--font-display, var(--font-ui));
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dash-ink);
  font-variant-numeric: tabular-nums;
}

.dash-stripe__value--money {
  color: var(--dash-leaf-deep);
}

.dash-stripe__value--warn {
  color: var(--dash-coral);
}

.dash-stripe__unavailable {
  margin: 0;
  font-size: 13px;
  color: var(--dash-ink-3);
  font-style: italic;
}

/* === Categories panel (tabs + grid) === */
.dash-cat {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border-radius: var(--dash-radius-card);
  background: var(--dash-surface);
  border: 1px solid var(--dash-line);
  box-shadow: var(--dash-shadow-card);
}

.dash-cat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.dash-cat__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-cat__title {
  margin: 0;
  font-family: var(--font-display, var(--font-ui));
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dash-ink);
}

.dash-cat__subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--dash-ink-3);
}

.dash-cat__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dash-cat__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--dash-line);
  background: var(--dash-surface);
  border-radius: var(--dash-radius-pill);
  color: var(--dash-ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.dash-cat__tab:hover {
  background: rgba(10, 10, 12, 0.04);
  color: var(--dash-ink);
}

.dash-cat__tab[data-active="true"] {
  background: var(--dash-ink);
  color: #ffffff;
  border-color: var(--dash-ink);
}

.dash-cat__tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dash-leaf);
  flex: 0 0 8px;
}

.dash-cat__tab-dot[data-cat="account"] { background: var(--dash-sky); }
.dash-cat__tab-dot[data-cat="applifecycle"] { background: var(--dash-lavender); }
.dash-cat__tab-dot[data-cat="appruntime"] { background: var(--dash-leaf); }
.dash-cat__tab-dot[data-cat="stripe"] { background: var(--dash-honey); }
.dash-cat__tab-dot[data-cat="support"] { background: var(--dash-coral); }

.dash-cat__tab-count {
  font-size: 11.5px;
  color: var(--dash-ink-4);
  font-variant-numeric: tabular-nums;
}

.dash-cat__tab[data-active="true"] .dash-cat__tab-count {
  color: rgba(255, 255, 255, 0.66);
}

.dash-cat__panels {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.dash-cat__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-cat__panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--dash-line-2);
}

.dash-cat__panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}

.dash-cat__panel-dot[data-cat="account"] { background: var(--dash-sky); }
.dash-cat__panel-dot[data-cat="applifecycle"] { background: var(--dash-lavender); }
.dash-cat__panel-dot[data-cat="appruntime"] { background: var(--dash-leaf); }
.dash-cat__panel-dot[data-cat="stripe"] { background: var(--dash-honey); }
.dash-cat__panel-dot[data-cat="support"] { background: var(--dash-coral); }

.dash-cat__panel-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dash-ink-2);
}

.dash-cat__panel-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--dash-ink-4);
  font-variant-numeric: tabular-nums;
}

.dash-cat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

/* metric detail card inside category */
.dash-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--dash-radius-tile);
  background: var(--dash-surface);
  border: 1px solid var(--dash-line);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.dash-card:hover {
  border-color: var(--dash-line-strong);
  box-shadow: var(--dash-shadow-hover);
}

.dash-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.dash-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--dash-ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.dash-card__total {
  font-family: var(--font-display, var(--font-ui));
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dash-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dash-card__spark {
  width: 100%;
  height: 40px;
  display: block;
}

.dash-card__spark-fill {
  fill: var(--dash-leaf-soft);
  stroke: none;
}

.dash-card__spark-fill[data-cat="account"] { fill: var(--dash-sky-soft); }
.dash-card__spark-fill[data-cat="applifecycle"] { fill: var(--dash-lavender-soft); }
.dash-card__spark-fill[data-cat="appruntime"] { fill: var(--dash-leaf-soft); }
.dash-card__spark-fill[data-cat="stripe"] { fill: var(--dash-honey-soft); }
.dash-card__spark-fill[data-cat="support"] { fill: var(--dash-coral-soft); }

.dash-card__spark-line {
  fill: none;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke: var(--dash-leaf);
}

.dash-card__spark-line[data-cat="account"] { stroke: var(--dash-sky); }
.dash-card__spark-line[data-cat="applifecycle"] { stroke: var(--dash-lavender); }
.dash-card__spark-line[data-cat="appruntime"] { stroke: var(--dash-leaf); }
.dash-card__spark-line[data-cat="stripe"] { stroke: var(--dash-honey); }
.dash-card__spark-line[data-cat="support"] { stroke: var(--dash-coral); }

.dash-card__empty {
  margin: 0;
  font-size: 12px;
  color: var(--dash-ink-4);
  font-style: italic;
  height: 40px;
  display: flex;
  align-items: center;
}

/* === All-kinds table === */
.dash-table {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: var(--dash-radius-card);
  background: var(--dash-surface);
  border: 1px solid var(--dash-line);
  box-shadow: var(--dash-shadow-card);
}

.dash-table__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-table__title {
  margin: 0;
  font-family: var(--font-display, var(--font-ui));
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dash-ink);
}

.dash-table__subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--dash-ink-3);
}

.dash-table__scroll {
  overflow-x: auto;
}

.dash-table__table {
  width: 100%;
  border-collapse: collapse;
}

.dash-table__th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--dash-ink-3);
  padding: 10px 12px;
  border-bottom: 1px solid var(--dash-line);
}

.dash-table__th--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dash-table__th--spark {
  width: 200px;
}

.dash-table__td {
  padding: 12px;
  font-size: 13.5px;
  color: var(--dash-ink);
  border-bottom: 1px solid var(--dash-line-2);
  vertical-align: middle;
}

.dash-table__table tbody tr:last-child .dash-table__td {
  border-bottom: 0;
}

.dash-table__table tbody tr:hover .dash-table__td {
  background: rgba(10, 10, 12, 0.025);
}

.dash-table__td--kind {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-table__td--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--dash-ink);
}

.dash-table__td--spark {
  width: 200px;
  padding: 8px 12px;
}

.dash-table__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dash-leaf);
  flex: 0 0 8px;
}

.dash-table__dot[data-cat="account"] { background: var(--dash-sky); }
.dash-table__dot[data-cat="applifecycle"] { background: var(--dash-lavender); }
.dash-table__dot[data-cat="appruntime"] { background: var(--dash-leaf); }
.dash-table__dot[data-cat="stripe"] { background: var(--dash-honey); }
.dash-table__dot[data-cat="support"] { background: var(--dash-coral); }

.dash-table__label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--dash-ink);
}

.dash-table__spark {
  width: 100%;
  height: 28px;
  display: block;
}

.dash-table__spark-line {
  fill: none;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke: var(--dash-leaf);
}

.dash-table__spark-line[data-cat="account"] { stroke: var(--dash-sky); }
.dash-table__spark-line[data-cat="applifecycle"] { stroke: var(--dash-lavender); }
.dash-table__spark-line[data-cat="appruntime"] { stroke: var(--dash-leaf); }
.dash-table__spark-line[data-cat="stripe"] { stroke: var(--dash-honey); }
.dash-table__spark-line[data-cat="support"] { stroke: var(--dash-coral); }

.dash-table__spark-empty {
  font-size: 12px;
  color: var(--dash-ink-4);
}

/* === Operator overview strip (bottom) === */
.dash-overview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 22px;
  border-radius: var(--dash-radius-card);
  background: var(--dash-surface-tint);
  border: 1px solid var(--dash-line-2);
}

.dash-overview__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-overview__title {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--dash-ink-3);
}

.dash-overview__subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--dash-ink-3);
}

.dash-overview__strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.dash-overview__pill {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 14px;
  border-left: 1px solid var(--dash-line-2);
}

.dash-overview__pill:first-child {
  border-left: 0;
  padding-left: 0;
}

@media (max-width: 720px) {
  .dash-overview__pill {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--dash-line-2);
    padding-top: 8px;
  }
  .dash-overview__pill:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

.dash-overview__label {
  font-size: 11px;
  color: var(--dash-ink-3);
}

.dash-overview__value {
  font-family: var(--font-display, var(--font-ui));
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dash-ink);
  font-variant-numeric: tabular-nums;
}

/* === Hero stacked status bar (used when no timeseries data) === */
.dash-hero__bars {
  display: flex;
  width: calc(100% + 52px);
  margin: auto -26px 16px;
  height: 6px;
  border-radius: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.10);
}

.dash-hero__bar {
  display: block;
  height: 100%;
  flex: 0 0 auto;
  min-width: 0;
  transition: flex-basis 200ms ease;
}

.dash-hero__bar--live { background: rgba(255, 255, 255, 0.92); }
.dash-hero__bar--draft { background: rgba(255, 255, 255, 0.42); }
.dash-hero__bar--paused { background: rgba(255, 255, 255, 0.20); }

.dash-hero__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 18px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
}

.dash-hero__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash-hero__legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.dash-hero__legend-dot--live { background: rgba(255, 255, 255, 0.92); }
.dash-hero__legend-dot--draft { background: rgba(255, 255, 255, 0.42); }
.dash-hero__legend-dot--paused { background: rgba(255, 255, 255, 0.20); }

/* === Generic content panel (apps list, recent items, etc.) === */
.dash-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border-radius: var(--dash-radius-card);
  background: var(--dash-surface);
  border: 1px solid var(--dash-line);
  box-shadow: var(--dash-shadow-card);
  min-height: 320px;
}

.dash-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.dash-panel__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-panel__title {
  margin: 0;
  font-family: var(--font-display, var(--font-ui));
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dash-ink);
}

.dash-panel__subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--dash-ink-3);
}

.dash-panel__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--dash-ink-2);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--dash-radius-pill);
  transition: background 150ms ease, color 150ms ease;
}

.dash-panel__action:hover {
  background: rgba(10, 10, 12, 0.04);
  color: var(--dash-ink);
}

.dash-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 48px 24px;
  flex: 1;
  text-align: center;
}

.dash-panel__empty-text {
  margin: 0;
  font-size: 13.5px;
  color: var(--dash-ink-3);
}

/* === App list (creator dashboard) === */
.dash-applist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.dash-applist__row {
  border-bottom: 1px solid var(--dash-line-2);
}

.dash-applist__row:last-child {
  border-bottom: 0;
}

/* Inline action cluster shown after the main link target — used on Apps list,
 * customer purchases, etc. Keeps the row clickable while letting nested
 * buttons stop propagation for their own intent. */
.dash-applist__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 12px 12px;
  margin-top: -2px;
}

.dash-applist__actions .wf-btn {
  white-space: nowrap;
}

.dash-applist__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  margin: 0 -8px;
  padding-left: 12px;
  padding-right: 12px;
  transition: background 150ms ease;
}

button.dash-applist__link {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

/* Non-interactive list row (display only — billing rows, plan summaries, payouts) */
.dash-applist__link--static {
  cursor: default;
}

.dash-applist__link--static:hover {
  background: transparent;
}

/* App-hub prompt summary body — bottom margin removed because the panel pads */
.apphub-prompt-body {
  margin: 0;
}

/* Activity row body — flex-grow + min-width:0 so the title can ellipsize */
.activity-row__body {
  flex: 1;
  min-width: 0;
}

/* Filter-row field that should keep its intrinsic width (don't grow) */
.dash-field--fixed {
  flex: 0 0 auto;
}

/* Plain anchor that should look like normal text inside a data table cell */
.dash-data__name-link {
  text-decoration: none;
  color: inherit;
}

/* Variant of dash-row-actions that aligns its content to the start with tighter gaps */
.dash-row-actions--start {
  justify-content: flex-start;
  gap: 10px;
}

.dash-row-actions--start-tight {
  justify-content: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--dash-ink-2);
}

/* Vertical stack used inside detail panels (forms + messages + audit log) */
.dash-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-stack--tight {
  gap: 8px;
}

.dash-stack--inset {
  margin-top: 8px;
}

/* Form layout: grid with gap, optional inset margin */
.dash-form-grid {
  display: grid;
  gap: 10px;
}

.dash-form-grid--inset {
  margin-top: 8px;
}

/* Support ticket message header row + body */
.support-message__header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.support-message__author {
  font-size: 12.5px;
}

.support-message__text {
  white-space: pre-wrap;
  margin: 0;
  font-size: 13px;
  color: var(--dash-ink-2);
}

.support-audit__title {
  font-size: 12.5px;
}

/* Old → new arrow between status pills in audit log table */
.creator-audit__arrow {
  display: inline-block;
  margin: 0 4px;
}

/* Inline expanded row inside a data table (refund form, audit detail) */
.dash-data__td--inset {
  background: rgba(10, 10, 12, 0.025);
}

[data-theme="dark"] .dash-data__td--inset {
  background: rgba(255, 255, 255, 0.04);
}

.dash-applist__link:hover {
  background: rgba(10, 10, 12, 0.03);
}

.dash-applist__logo {
  flex: 0 0 auto;
}

.dash-applist__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.dash-applist__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--dash-ink);
  letter-spacing: -0.005em;
}

.dash-applist__endpoint {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--dash-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-applist__version {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  color: var(--dash-ink-3);
  background: rgba(10, 10, 12, 0.05);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* === Stripe panel CTA footer link (used by WebApp plan card) === */
.dash-stripe__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dash-ink);
  text-decoration: none;
  padding: 8px 0;
  border-top: 1px solid var(--dash-line-2);
  width: 100%;
  transition: color 150ms ease;
}

.dash-stripe__cta:hover {
  color: var(--dash-leaf-deep);
}

/* === Operator summary strip (compact KPI tiles for non-Home pages) === */
.dash-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  padding: 16px 22px;
  border-radius: var(--dash-radius-card);
  background: var(--dash-surface);
  border: 1px solid var(--dash-line);
  box-shadow: var(--dash-shadow-card);
}

.dash-summary__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 16px;
  border-left: 1px solid var(--dash-line-2);
}

.dash-summary__cell:first-child {
  border-left: 0;
  padding-left: 0;
}

@media (max-width: 720px) {
  .dash-summary__cell {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--dash-line-2);
    padding-top: 10px;
  }
  .dash-summary__cell:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

.dash-summary__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--dash-ink-3);
}

.dash-summary__value {
  font-family: var(--font-display, var(--font-ui));
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dash-ink);
  font-variant-numeric: tabular-nums;
}

/* === Filter bar (search + pill filters above tables) === */
.dash-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 14px 18px;
  border-radius: var(--dash-radius-card);
  background: var(--dash-surface);
  border: 1px solid var(--dash-line);
  box-shadow: var(--dash-shadow-card);
}

.dash-filter__input {
  flex: 1 1 280px;
  min-width: 200px;
  border: 1px solid var(--dash-line);
  border-radius: var(--dash-radius-pill);
  padding: 8px 16px;
  background: rgba(10, 10, 12, 0.025);
  color: var(--dash-ink);
  font: inherit;
  font-size: 13px;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.dash-filter__input:focus {
  outline: none;
  border-color: var(--dash-line-strong);
  background: var(--dash-surface);
  box-shadow: 0 0 0 3px rgba(10, 10, 12, 0.04);
}

.dash-filter__input::placeholder {
  color: var(--dash-ink-4);
}

/* === Polished operator data table (replaces wf-table admin-table) === */
.dash-data {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: var(--dash-radius-card);
  background: var(--dash-surface);
  border: 1px solid var(--dash-line);
  box-shadow: var(--dash-shadow-card);
}

.dash-data__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.dash-data__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-data__title {
  margin: 0;
  font-family: var(--font-display, var(--font-ui));
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dash-ink);
}

.dash-data__subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--dash-ink-3);
}

.dash-data__meta {
  font-size: 12px;
  color: var(--dash-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dash-data__scroll {
  overflow-x: auto;
  margin: 0 -22px -22px;
  padding: 0 22px 22px;
}

.dash-data__table {
  width: 100%;
  border-collapse: collapse;
}

.dash-data__th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--dash-ink-3);
  padding: 10px 12px;
  border-bottom: 1px solid var(--dash-line);
  white-space: nowrap;
}

.dash-data__th--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dash-data__th--actions {
  text-align: right;
  width: 160px;
}

.dash-data__td {
  padding: 12px;
  font-size: 13px;
  color: var(--dash-ink);
  border-bottom: 1px solid var(--dash-line-2);
  vertical-align: middle;
}

.dash-data__table tbody tr:last-child .dash-data__td {
  border-bottom: 0;
}

.dash-data__table tbody tr:hover .dash-data__td {
  background: rgba(10, 10, 12, 0.025);
}

.dash-data__td--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dash-data__td--money {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--dash-leaf-deep);
  white-space: nowrap;
}

.dash-data__td--actions {
  text-align: right;
  white-space: nowrap;
}

.dash-data__td--mono {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--dash-ink-2);
  white-space: nowrap;
}

.dash-data__name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-data__name-text {
  font-weight: 600;
  color: var(--dash-ink);
}

.dash-data__name-sub {
  display: block;
  font-size: 11.5px;
  color: var(--dash-ink-3);
  margin-top: 2px;
}

.dash-data__empty {
  text-align: center;
  padding: 48px 22px;
  font-size: 13px;
  color: var(--dash-ink-3);
}

/* === Tag/chip used inside table rows for status, kind, etc. === */
.dash-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--dash-radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(10, 10, 12, 0.05);
  color: var(--dash-ink-2);
  white-space: nowrap;
}

/* === Operator action buttons (small, used in row actions or panel footers) === */
.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--dash-radius-pill);
  border: 1px solid var(--dash-line);
  background: var(--dash-surface);
  color: var(--dash-ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.dash-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* === Operator tabs (above content panels) === */
.dash-tabs {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  background: rgba(10, 10, 12, 0.06);
  border-radius: var(--dash-radius-pill);
}

.dash-tabs__tab {
  border: 0;
  background: transparent;
  color: var(--dash-ink-2);
  font: inherit;
  font-weight: 500;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: var(--dash-radius-pill);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash-tabs__tab[data-active="true"] {
  background: #ffffff;
  color: var(--dash-ink);
  box-shadow: 0 1px 2px rgba(10, 10, 12, 0.10);
  font-weight: 600;
}

.dash-tabs__tab:hover:not([data-active="true"]) {
  color: var(--dash-ink);
}

.dash-tabs__count {
  font-size: 11px;
  color: var(--dash-ink-4);
  font-variant-numeric: tabular-nums;
}

.dash-tabs__tab[data-active="true"] .dash-tabs__count {
  color: var(--dash-ink-3);
}

/* === Form fields used inline in operator panels === */
.dash-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-form-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: end;
}

.dash-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--dash-line-2);
  margin-top: 4px;
  flex-wrap: wrap;
}

/* === Conversation messages (support, comments, etc.) === */
.dash-msg {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(10, 10, 12, 0.025);
  border: 1px solid var(--dash-line-2);
}

.dash-msg--internal {
  background: rgba(232, 180, 69, 0.10);
  border-color: rgba(232, 180, 69, 0.30);
}

.dash-msg--audit {
  background: var(--dash-surface);
  border-style: dashed;
}

/* === Inline search field with leading icon (Apps list, etc.) === */
.dash-search {
  position: relative;
  display: inline-block;
  width: 240px;
  max-width: 100%;
}

.dash-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dash-ink-3);
  display: inline-flex;
  pointer-events: none;
}

.dash-search__icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.dash-search__input {
  padding-left: 32px !important;
  width: 100%;
}

/* === Settings/Profile/long form layout === */
.dash-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dash-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-form__row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.dash-form__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--dash-line-2);
}

/* Use when the action row is the only content of a panel and no separator is wanted */
.dash-form__actions--bare {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

/* Hidden file input nested inside an upload-styled label button */
.settings-import-label {
  position: relative;
  cursor: pointer;
}

.settings-import-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* checkbox + label row inside a dash-form */
.dash-form__check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-form__check .wf-label {
  margin: 0;
}

/* === Selectable item list (Tools editor sidebar, Connections sidebar) === */
.dash-toollist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-toollist > button {
  appearance: none;
  border: 1px solid var(--dash-line);
  background: var(--dash-surface);
  color: var(--dash-ink);
  border-radius: var(--dash-radius-tile);
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  font: inherit;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.dash-toollist > button:hover {
  background: rgba(10, 10, 12, 0.03);
  border-color: var(--dash-line-strong);
}

.dash-toollist > button.selected,
.dash-toollist > button[data-selected="true"] {
  background: var(--dash-surface);
  border-color: var(--dash-ink);
  box-shadow: 0 1px 3px rgba(10, 10, 12, 0.08);
}

.dash-toollist > button strong {
  font-size: 13.5px;
  font-weight: 600;
  display: block;
  letter-spacing: -0.005em;
}

/* === Setup checklist (e.g. AppHub overview) === */
.dash-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.dash-checklist__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--dash-line-2);
  font-size: 13.5px;
  color: var(--dash-ink-2);
}

.dash-checklist__row:last-child {
  border-bottom: 0;
}

/* === Tile grid + tile cards (AppHub navigation, dashboard tiles) === */
.dash-tilegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.dash-tilecard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  border-radius: var(--dash-radius-card);
  background: var(--dash-surface);
  border: 1px solid var(--dash-line);
  box-shadow: var(--dash-shadow-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.dash-tilecard:hover {
  border-color: var(--dash-line-strong);
  box-shadow: var(--dash-shadow-hover);
  transform: translateY(-1px);
}

.dash-tilecard__head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dash-ink);
}

.dash-tilecard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dash-ink-2);
}

.dash-tilecard__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--dash-ink);
}

.dash-tilecard__desc {
  font-size: 12.5px;
  color: var(--dash-ink-3);
  line-height: 1.4;
}

.dash-tilecard__summary {
  font-size: 12.5px;
  color: var(--dash-ink-2);
  background: rgba(10, 10, 12, 0.04);
  padding: 8px 10px;
  border-radius: 10px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

/* === Onboarding flow chrome (multi-step with progress + nav) === */
.onboarding-plan {
  margin: 0 0 12px;
}

.onboarding-message {
  margin: 12px 0 0;
}

.onboarding-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

/* === Active-login session row inside Settings → Security === */
.dash-session {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dash-session__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dash-session__title strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.dash-session__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--dash-ink-3);
  font-size: 11.5px;
  line-height: 1.45;
}

.dash-session__meta span {
  overflow-wrap: anywhere;
}

/* === Share page: endpoint readouts + code blocks === */
.share-endpoint {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 12px;
  word-break: break-all;
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
  min-height: 36px;
}

.share-active-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.share-active-row .share-endpoint {
  flex: 1 1 320px;
  min-width: 0;
}

.share-code {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  padding: 12px 14px;
  background: rgba(10, 10, 12, 0.04);
  border: 1px solid rgba(10, 10, 12, 0.06);
  border-radius: 12px;
  white-space: pre-wrap;
  overflow: auto;
  max-height: 260px;
  color: var(--ink);
}

[data-theme="dark"] .share-code {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* === Support ticket message body === */
.support-message__body {
  margin: 8px 0 0;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}

/* === Privacy portal: token-redeemed account download/delete view === */
.privacy-portal-form {
  max-width: 760px;
}

.privacy-portal__defs {
  display: grid;
  gap: 8px;
  margin: 0;
}

.privacy-portal__defs > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.privacy-portal__defs dt {
  margin: 0;
}

.privacy-portal__defs dd {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
  word-break: break-word;
}

.privacy-portal__item {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-soft, rgba(10, 10, 12, 0.04));
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}