/*
 * card.css — Card base genérico + content-grid + chart-area
 *
 * Proveniência: apps/analytics-rh/pages/_internal/styles/_card.py (R-2 CSS pipeline)
 * Fonte original: prototipos/2026-05-06-shell-rebrand/a-topbar-pills.html linhas 328-370
 *
 * Tokens consumidos: --surface-raised, --surface-sunken, --border-subtle,
 *                    --radius-md, --radius-base, --shadow-card, --text-primary,
 *                    --text-muted
 *
 * Zero hex values — tokens only.
 */

/* ── Content Grid (chart + side panel) ──────────────────────────────── */
.arh-content-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) {
  .arh-content-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Card base ───────────────────────────────────────────────────────── */
.arh-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.arh-card-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.arh-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.arh-card-title-icon {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1;
}
.arh-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.arh-card-body {
  padding: 20px;
}
.arh-card-body--tight {
  padding: 12px 16px;
}

/* ── Mini chart SVG inline ───────────────────────────────────────────── */
.arh-chart-area {
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sunken);
  border-radius: var(--radius-base, 4px);
  overflow: hidden;
}
.arh-chart-area svg {
  width: 100%;
  height: 100%;
}