/* ==========================================================================
   gd-data.css — states the data layer (gd-data.js) applies to Ahsen's markup.
   Preserves Ahsen's palette (uses the same --gd-* vars); adds ONLY the honest
   loading / not-instrumented / unavailable affordances the mockup lacked.
   ========================================================================== */

/* A scalar/chart the backend has no real source for. Rendered as an em-dash by
   gd-data.js; this styles it as a muted, clearly-not-a-number state. */
.gd-not-instrumented {
  color: var(--gd-text-dim) !important;
  opacity: 0.85;
}

/* A widget that errored (auth/network). Distinct from not-instrumented. */
.gd-unavailable {
  color: var(--gd-warning) !important;
}

/* Honest "Not instrumented" panel state for a whole card/section. Hidden by
   default; gd-data.js flips .gd-state-stub / .gd-state-error to reveal the msg. */
[data-gd-state] .gd-state-msg {
  display: none;
}
[data-gd-state].gd-state-stub .gd-state-msg,
[data-gd-state].gd-state-error .gd-state-msg {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--gd-border-strong);
  border-radius: var(--gd-r-md);
  background: var(--gd-surface);
  color: var(--gd-text-muted);
  font-size: var(--gd-fs-sm);
  line-height: 1.5;
}
[data-gd-state].gd-state-stub .gd-state-real-only,
[data-gd-state].gd-state-error .gd-state-real-only {
  opacity: 0.35;
}

/* A "not instrumented" chip reusing Ahsen's pill idiom (amber). Authors can drop
   <span class="gd-pill gd-pill--amber gd-chip-nosrc">Not instrumented</span>. */
.gd-chip-nosrc::before {
  content: "○ ";
}

/* Empty / stub table body cell. */
.gd-table-empty {
  text-align: center;
  color: var(--gd-text-muted);
  font-family: var(--gd-font-body);
  font-style: italic;
  padding: 18px 12px !important;
}

/* A modeled/projected value (e.g. forecasting off real MRR) — clearly labeled,
   never presented as measured data. */
.gd-modeled::after {
  content: " (modeled)";
  font-size: 0.7em;
  color: var(--gd-text-dim);
  font-style: italic;
}

/* ==========================================================================
   COMING SOON treatment (data-gd-soon).
   Keeps Ahsen's full layout VISIBLE but makes it unmistakable that the
   feature is on the way — NOT live data. A scrim + ribbon sit over the
   container; gd-data.js ALSO neutralizes any mock numbers inside to "—"
   so a user can never read the mockup figures as real metrics.
   Applied to whole no-source pages and to individual no-source widgets.
   ========================================================================== */
.gd-soon {
  position: relative;
  overflow: hidden;
}
/* Dim + slightly blur the underlying mock design so it reads as a preview. */
.gd-soon > .gd-soon-content,
.gd-soon.gd-soon--self {
  filter: blur(1.5px) saturate(0.6);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}
/* Translucent scrim over the whole container. */
.gd-soon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(135deg, rgba(8, 10, 18, 0.55), rgba(8, 10, 18, 0.72));
  backdrop-filter: blur(1px);
  border-radius: inherit;
  pointer-events: none;
}
/* Centered "Coming Soon" badge/ribbon (injected by gd-data.js as .gd-soon-badge). */
.gd-soon-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border: 1px solid var(--gd-border-strong);
  border-radius: var(--gd-r-pill);
  background: var(--gd-surface-2, rgba(255, 255, 255, 0.06));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  text-align: center;
  max-width: 90%;
}
.gd-soon-badge__title {
  font-family: var(--gd-font-head);
  text-transform: uppercase;
  letter-spacing: var(--gd-tracking-head, 0.04em);
  font-weight: var(--gd-fw-bold, 700);
  font-size: 0.95rem;
  color: var(--gd-blue-light);
}
.gd-soon-badge__note {
  font-size: var(--gd-fs-xs, 0.6875rem);
  color: var(--gd-text-muted);
  font-family: var(--gd-font-body);
  line-height: 1.4;
  max-width: 260px;
}
/* Corner ribbon variant for compact widgets (KPI tiles). */
.gd-soon--tile .gd-soon-badge {
  padding: 6px 12px;
  border-radius: var(--gd-r-md, 10px);
}
.gd-soon--tile .gd-soon-badge__note {
  display: none;
}

/* Page-level treatment: pin the badge near the top so it stays on-screen on a
   long page (instead of the vertical center of a tall content region). */
.gd-soon--page .gd-soon-badge {
  top: 96px;
  transform: translate(-50%, 0);
  position: sticky;
}
.gd-soon--page::before {
  position: absolute;
}