/* restogogo shared metric cards. Period selector visuals live in controls.css. */
.rs-metric-card {
  --metric-card-border: var(--rst-ui-surface-panel-border);
  --metric-state-rgb: var(--rst-state-neutral-rgb);
  --metric-accent: var(--rst-state-neutral-text);
  --metric-icon-bg: var(--rst-state-neutral-bg);
  --metric-icon-border: var(--rst-state-neutral-border);
  --metric-strong: var(--rst-ui-text);
  --rs-icon-badge-bg: var(--metric-icon-bg);
  --rs-icon-badge-border: var(--metric-icon-border);
  --rs-icon-badge-color: var(--metric-accent);
  position: relative;
  min-height: 56px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  overflow: hidden;
  border: 1px solid var(--metric-card-border);
  border-radius: var(--rst-ui-radius-md);
  background:
    linear-gradient(135deg,rgba(var(--metric-state-rgb),.085),rgba(var(--metric-state-rgb),.038) 48%,rgba(var(--metric-state-rgb),0)),
    var(--rst-ui-metric-card,var(--rst-ui-surface-board));
  color: var(--rst-ui-text);
  transition: transform var(--rst-motion-ui) var(--rst-motion-smooth),border-color var(--rst-motion-ui) var(--rst-motion-smooth),box-shadow var(--rst-motion-ui) var(--rst-motion-smooth);
}

.rs-metric-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 46%;
  pointer-events: none;
  background: linear-gradient(90deg,rgba(var(--metric-state-rgb),.055),rgba(var(--metric-state-rgb),0));
}

.rs-metric-card > * { position: relative; z-index: 1; }

.rs-metric-card:hover,
.rs-metric-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--rst-ui-line-strong);
  box-shadow: var(--rst-ui-shadow-soft);
}

.rs-metric-card.rs-metric--hero {
  min-height: 62px;
  grid-template-columns: 40px minmax(0,1fr);
  padding: 9px 13px;
  --metric-card-border: rgba(var(--module-accent-rgb),.44);
  border-color: var(--metric-card-border);
  background:
    linear-gradient(135deg,rgba(var(--metric-state-rgb),.095),rgba(var(--metric-state-rgb),.040) 48%,rgba(var(--metric-state-rgb),.004)),
    var(--rst-ui-metric-card,var(--rst-ui-surface-board));
  box-shadow: inset 3px 0 0 var(--module-accent,var(--rst-ui-line-strong));
}

.rs-metric-card.rs-metric--hero::before {
  background: linear-gradient(90deg,rgba(var(--metric-state-rgb),.085),rgba(var(--metric-state-rgb),0));
}

.rs-metric-card.rs-metric--hero:is(:hover,:focus-visible) {
  border-color: rgba(var(--module-accent-rgb),.58);
}

.rs-metric-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.rs-metric-copy span {
  color: var(--rst-ui-muted);
  font-size: 9px;
  font-weight: var(--rst-fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rs-metric-copy strong {
  color: var(--metric-strong);
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: var(--rst-fw-display);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rs-metric-copy small {
  color: var(--rst-ui-text-heading);
  font-size: 10.5px;
  line-height: 1.1;
  font-weight: var(--rst-fw-medium);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rs-metric-card:is(.is-week,.is-hours,.is-info),
.rs-metric-card.is-status {
  --metric-state-rgb: var(--rst-state-info-rgb);
  --metric-accent: var(--rst-state-info-text);
  --metric-icon-bg: var(--rst-state-info-bg);
  --metric-icon-border: var(--rst-state-info-border);
}

.rs-metric-card.is-cost,
.rs-metric-card.is-danger {
  --metric-state-rgb: var(--rst-state-danger-rgb);
  --metric-accent: var(--rst-state-danger-text);
  --metric-icon-bg: var(--rst-state-danger-bg);
  --metric-icon-border: var(--rst-state-danger-border);
  --metric-strong: var(--rst-state-danger-text);
}

.rs-metric-card.is-status.is-draft,
.rs-metric-card.is-warning {
  --metric-state-rgb: var(--rst-state-warning-rgb);
  --metric-accent: var(--rst-state-warning-text);
  --metric-icon-bg: var(--rst-state-warning-bg);
  --metric-icon-border: var(--rst-state-warning-border);
  --metric-strong: var(--rst-state-warning-text);
}

.rs-metric-card.is-status.is-published,
.rs-metric-card.is-success {
  --metric-state-rgb: var(--rst-state-success-rgb);
  --metric-accent: var(--rst-state-success-text);
  --metric-icon-bg: var(--rst-state-success-bg);
  --metric-icon-border: var(--rst-state-success-border);
  --metric-strong: var(--rst-state-success-text);
}

.rs-metric-card.is-neutral {
  --metric-state-rgb: var(--rst-state-neutral-rgb);
  --metric-accent: var(--rst-state-neutral-text);
  --metric-icon-bg: var(--rst-state-neutral-bg);
  --metric-icon-border: var(--rst-state-neutral-border);
}

/* Page-level metrics row container — shared across every authenticated module page. */
.rs-page-metrics {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

.rs-metrics-row {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  margin: 0;
}

.rs-metrics-row.rs-metrics--hero-first { grid-template-columns: minmax(0,1.35fr) repeat(3,minmax(0,1fr)); }
.rs-metrics-row .rs-metric-card { width: 100%; min-width: 0; min-height: 56px; }
.rs-metrics-row .rs-metric-card:active { transform: translateY(1px) scale(.995); }


@media (max-width: 1180px) {
  .rs-metrics-row,
  .rs-metrics-row.rs-metrics--hero-first {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 760px) {
  /* metric detail rows — from metric-detail.css (Pass 2 ownership) */
  .rs-detail-row { grid-template-columns: 34px minmax(0,1fr); }
  .rs-detail-row b,
  .rs-detail-row__actions { grid-column: 2; justify-self: start; }
}

@media (max-width: 520px) {
  .rs-metrics-row,
  .rs-metrics-row.rs-metrics--hero-first {
    grid-template-columns: minmax(0,1fr);
  }
  /* metric card compaction — from responsive-flow.css (Pass 2 ownership) */
  .rs-metric-card,
  .rs-metric-card.rs-metric--hero {
    min-height: 58px;
    grid-template-columns: 34px minmax(0,1fr);
    gap: 8px;
    padding: 8px 10px;
  }
  .rs-metric-copy strong { font-size: 19px; }
}