/* =============================================================================
   BUAMS AI new-ui — CARDS
   Spec: /frontend_design.md §F.4

   No nested card inside a card — if content needs a second frame, it wants a
   section divider, not another surface.
   ============================================================================= */

.bui-card {
  background: var(--bui-surface);
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-lg);
  box-shadow: var(--bui-shadow-sm);
}

.bui-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bui-space-3);
  flex-wrap: wrap;
  padding: var(--bui-space-5) var(--bui-space-6);
  border-bottom: 1px solid var(--bui-line);
}

.bui-card-title {
  display: flex;
  align-items: center;
  gap: var(--bui-space-2);
  margin: 0;
  font-size: var(--bui-text-h2);
  font-weight: var(--bui-fw-bold);
  color: var(--bui-ink-900);
}

.bui-card-title .bi {
  color: var(--bui-primary-700);
}

.bui-card-body {
  padding: var(--bui-space-6);
}

.bui-card-footer {
  display: flex;
  align-items: center;
  gap: var(--bui-space-3);
  padding: var(--bui-space-4) var(--bui-space-6);
  background: var(--bui-surface-2);
  border-top: 1px solid var(--bui-line);
  border-radius: 0 0 var(--bui-radius-lg) var(--bui-radius-lg);
}

.bui-card-flush {
  padding: 0;
}

/* Emphasis rail — a card that carries brand or status weight */
.bui-card-accent {
  border-left: 3px solid var(--bui-primary-700);
}

@media (max-width: 575.98px) {
  .bui-card-header,
  .bui-card-body {
    padding: var(--bui-space-4);
  }

  .bui-card-footer {
    padding: var(--bui-space-4);
    flex-direction: column;
    align-items: stretch;
  }
}