/*
 * Record cards — replaces a single wide multi-column table with a responsive grid of small,
 * self-contained "record" cards (one per condition/medication/allergy/etc). Each card is
 * effectively its own tiny label/value table.
 *
 * Rationale: a table with 4-12 columns has no good tablet story — either it needs horizontal
 * scrolling, or (as the generic `ui/table` behavior does) it hides the column headers
 * below 1024px, leaving orphaned values with no label. Small cards keep every value paired
 * with its label at any width and reflow via `auto-fill`, so no manual breakpoints are needed.
 */

.record-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-lg);
}

.record-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  background-color: var(--color-bg-secondary);
  min-width: 0;

  .record-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-secondary);

    .record-card-title {
      font-size: var(--font-size-sm);
      line-height: var(--line-height-text-sm);
      font-weight: var(--weight-semi-bold);
      color: var(--color-text-primary);
      overflow-wrap: break-word;
      min-width: 0;
    }

    .record-card-action {
      flex-shrink: 0;

      i {
        color: var(--color-fg-quaternary);
        font-size: var(--font-size-sm);
      }

      &:hover i {
        color: var(--color-fg-secondary);
      }

      &.invisible {
        visibility: hidden;
      }
    }
  }

  .record-card-body {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--spacing-md);
    row-gap: var(--spacing-sm);
    align-items: baseline;

    .record-card-field-label {
      font-size: var(--font-size-xs);
      line-height: var(--line-height-text-xs);
      color: var(--color-text-quaternary);
      white-space: nowrap;
    }

    .record-card-field-value {
      font-size: var(--font-size-xs);
      line-height: var(--line-height-text-xs);
      color: var(--color-text-primary);
      overflow-wrap: break-word;
      min-width: 0;
    }
  }
}