/* Shared controls and surfaces. Specific chart/report components retain their own geometry. */
.button,
.primary-button,
.actions button,
.metrics-controls button,
.nav button,
.admin-logout-button {
  min-height: var(--qice-control-height);
  border-radius: var(--qice-radius-sm);
  font-family: var(--qice-font-sans);
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

.button:hover:not(:disabled),
.primary-button:hover:not(:disabled),
.actions button:hover:not(:disabled),
.metrics-controls button:hover:not(:disabled) { transform: translateY(-1px); }

.button:focus-visible,
.primary-button:focus-visible,
.actions button:focus-visible,
.metrics-controls button:focus-visible,
.nav button:focus-visible,
.admin-logout-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 3px solid var(--qice-focus); outline-offset: 2px; }

.button.primary,
.button.primary-button,
.primary-button,
.actions button:not(.secondary) {
  border: 1px solid var(--qice-brand);
  background: var(--qice-brand);
  color: #fff;
  box-shadow: 0 8px 18px rgba(11, 107, 92, .16);
}

.button.secondary,
.button.subtle,
.actions button.secondary,
.metrics-controls button {
  border: 1px solid var(--qice-line);
  background: var(--qice-surface);
  color: var(--qice-brand);
}

.button:disabled,
.primary-button:disabled,
.actions button:disabled,
.metrics-controls button:disabled { cursor: not-allowed; opacity: .55; transform: none; }

.surface,
.panel,
.card { border: 1px solid var(--qice-line); background: color-mix(in srgb, var(--qice-surface) 96%, transparent); box-shadow: var(--qice-shadow-sm); }

/* The Qimen paywall owns its dark contrast; keep the shared surface layer from whitening it. */
body.qimen-page .paywall-card {
  border-color: #214f43;
  background: #173f35;
  color: #fff;
}

input, select, textarea {
  min-height: var(--qice-control-height);
  border: 1px solid var(--qice-line-strong);
  border-radius: var(--qice-radius-sm);
  color: var(--qice-ink);
  background: var(--qice-surface);
}

input:focus, select:focus, textarea:focus { border-color: var(--qice-brand); box-shadow: 0 0 0 3px var(--qice-focus); outline: 0; }

.status,
.metric-status,
[role="status"] { min-height: 1.5em; color: var(--qice-muted); }

.notice,
.status-card { border-radius: var(--qice-radius-sm); }