/* =============================================================================
   FILE: resources/css/components/customer-card.css
   Compact saved-client card for Home and New Invoice → Client.
============================================================================= */

.customer-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  width: 140px;
  flex-shrink: 0;
  padding: var(--space-3);
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: left;
  scroll-snap-align: start;
}

.customer-card:active {
  background-color: var(--color-paper-dim);
}

.customer-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-brand-tint);
  color: var(--color-brand);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}

.customer-card__name {
  width: 100%;
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-card__meta {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-card-scroller {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--screen-padding-x));
  padding: 0 var(--screen-padding-x) var(--space-1);
}

.customer-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.customer-card-grid .customer-card {
  width: auto;
}