/* Card and panel system for gradual replacement of legacy visual blocks. */
.cgl-card {
  border: 1px solid var(--cgl-border-subtle);
  border-radius: var(--cgl-radius-lg);
  background: var(--cgl-surface-card);
  color: var(--cgl-text-primary);
  box-shadow: var(--cgl-shadow-xs);
}

.cgl-card-padded {
  padding: var(--cgl-space-6);
}

.cgl-card-muted {
  background: var(--cgl-surface-muted);
}

.cgl-card-dark {
  background: var(--cgl-surface-dark);
  color: var(--cgl-text-inverse);
}

.cgl-panel {
  border: 1px solid var(--cgl-border-subtle);
  border-radius: var(--cgl-radius-xl);
  background: var(--cgl-surface-card);
  box-shadow: var(--cgl-shadow-sm);
}

.cgl-empty-state {
  display: grid;
  gap: var(--cgl-space-2);
  place-items: center;
  min-height: 180px;
  padding: var(--cgl-space-8);
  border: 1px dashed var(--cgl-border-subtle);
  border-radius: var(--cgl-radius-lg);
  background: var(--cgl-surface-card);
  color: var(--cgl-text-secondary);
  text-align: center;
}

.cgl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cgl-space-1);
  border-radius: var(--cgl-radius-pill);
  padding: 6px 10px;
  background: var(--cgl-neutral-100);
  color: var(--cgl-text-secondary);
  font-size: var(--cgl-font-size-xs);
  font-weight: 800;
}

.cgl-badge-success {
  background: rgba(22, 163, 74, 0.12);
  color: #166534;
}

.cgl-badge-danger {
  background: rgba(220, 38, 38, 0.12);
  color: #991b1b;
}

.cgl-badge-warning {
  background: rgba(249, 115, 22, 0.14);
  color: #9a3412;
}