/* ============================================================================
   21. Operate density — dashboard overrides
   ----------------------------------------------------------------------------
   Several blocks (Hero, Chart's section-heading) are shared verbatim between
   marketing pages and in-app dashboards, because the data they carry is
   identical — a title + lead, or an eyebrow + heading. The *treatment* isn't:
   a marketing page is read once and needs to persuade, so it earns full-bleed
   backgrounds and display type; a dashboard is scanned dozens of times a day
   and needs to get out of the way. Everything below re-scopes those shared
   blocks to operate density inside `.app-shell` — same markup, quieter type,
   no full-bleed slabs — instead of forking the components.
   ========================================================================== */

/* The Hero block doubling as a plain page header ("Overview", "App Builder").
   Drop the marketing slab: no breakout, no gradient panel, no display type. */
.app-shell .hero {
  margin-inline: 0;
  margin-bottom: 1.75rem;
  padding: 0;
  background: none;
  border-bottom: none;
}

.app-shell .hero:not(.centered) {
  text-align: left;
}

.app-shell .hero:not(.centered) h1,
.app-shell .hero:not(.centered) p {
  margin-inline: 0;
}

.app-shell .hero h1 {
  max-width: none;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  letter-spacing: -0.02em;
}

.app-shell .hero p {
  max-width: 60ch;
  font-size: 0.92rem;
}

/* Chart blocks borrow the landing section-heading scaffold (eyebrow + h2 +
   description) for their title. At operate density that becomes a plain
   label, matching kpi-row-heading's weight instead of a marketing pill. */
.app-shell .section-heading {
  margin-bottom: 1rem;
}

.app-shell .section-heading .eyebrow {
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--ta-faint);
  font-size: 0.7rem;
}

.app-shell .section-heading h2 {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.app-shell .section-heading .section-desc {
  font-size: 0.88rem;
}

/* Row-level actions (table Edit/Delete) — compact ghost icon buttons pinned
   to the row's right edge. The actions column is right-aligned so the pair
   sits flush with the table's far right; each button is a small square ghost
   with an icon, revealing its Edit/Delete intent on hover. */
.table-actions-cell {
  white-space: nowrap;
  text-align: right;
}

.table-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

.table-actions-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--ta-r);
  background: transparent;
  color: var(--ta-faint);
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out,
    border-color 120ms ease-out;
}

.table-actions-btn svg {
  width: 1rem;
  height: 1rem;
}

.table-actions-btn:hover,
.table-actions-btn:focus-visible {
  background: var(--ta-surface-2);
  color: var(--ta-text);
}

.table-actions .table-edit {
  color: var(--ta-muted);
  text-decoration: none;
}

.table-actions .table-edit:hover,
.table-actions .table-edit:focus-visible {
  color: var(--ta-accent);
}

.table-actions .table-delete:hover,
.table-actions .table-delete:focus-visible {
  color: var(--ta-err);
  background: color-mix(in oklab, var(--ta-err) 10%, transparent);
  border-color: color-mix(in oklab, var(--ta-err) 30%, transparent);
}

/* Empty table state — centred and quiet instead of a stray line of text
   sitting flush against the header row. */
.app-shell table td[colspan],
table td[colspan] {
  padding: 2.25rem 1rem;
  color: var(--ta-faint);
  font-size: 0.9rem;
  text-align: center;
}

/* Dead-end pages (404 / "App not found" / "Record not found" …) — no app
   context to brand with, so this is the one place styled off the base
   theme alone. */
body:has(.not-found) {
  align-items: center;
  justify-content: center;
}

.not-found {
  max-width: 26rem;
  padding: 2rem;
  text-align: center;
}

.not-found h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
}

.not-found p {
  color: var(--ta-muted);
  margin: 0 0 1.5rem;
}