/* ---------- customers#index ---------- */

/* Avatar column (customers#index), same idea as .products-table__photo */
.table .customers-table__photo {
  width: 1%;
  padding-right: 0;

  /* Explicit size: with width: 1% on the cell, a block link could collapse to 0
     after the search re-renders the frame, hiding the avatar inside it */
  a {
    display: block;
    width: var(--avatar-md);
    height: var(--avatar-md);
    line-height: 0;
  }

  /* The initials placeholder needs its normal line height to stay centred */
  .avatar {
    line-height: var(--leading-tight);
  }
}

.customer-cell__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.customer-cell__name {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.customer-cell__meta {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- pets#index (reuses the customers table styles above) ---------- */

/* Pets without a photo: a paw in the avatar circle instead of initials */
.pets-table__avatar svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.pet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* ---------- customers#show ---------- */

/* Same shape as .chat: profile on the left, pets fill the rest */
.customer-profile {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.customer-profile__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border-bottom: var(--border);
  text-align: center;
}

.customer-profile__name {
  font-size: var(--text-lg);
}

.customer-profile__section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap; /* the actions drop below the title on narrow screens */
  gap: var(--space-3);
  margin-bottom: var(--space-4);

  .section__title {
    margin-bottom: var(--space-0-5);
  }
}

/* The page actions (Edit customer / WhatsApp / New appointment), top right */
.customer-profile__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* On its own row (pets#show has no section header to share), pushed to the right */
.customer-profile__actions--end {
  justify-content: flex-end;
}

/* customers#show: the page actions sit on their own row above the pets section
   (pets#show doesn't need it, its .stack already spaces the rows) */
.customer-profile__actions--page {
  margin-bottom: var(--space-6);
}

/* "Debe 60,00 €" above the pets, with "Registrar pago" on the right (below on phones) */
.customer-debt {
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.customer-debt__text {
  flex: 1 1 14rem;
}

.customer-debt__action {
  flex-shrink: 0;
}

/* Compact pet cards: several per row, each one only as tall as its photo */
.pets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-3);
}

/* The <a> wrapping each pet card: grid makes the card fill the cell height */
.pet-link {
  display: grid;
  color: inherit;

  &:hover {
    color: inherit;
    text-decoration: none;
  }
}

/* Photo on the left, text on the right */
.pet-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
}

.pet-card__media {
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-primary-subtle);
}

.pet-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pet-card__placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--color-primary-border);

  svg {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* min-width: 0 lets long names/breeds shrink and get their ellipsis */
.pet-card__body {
  flex: 1;
  min-width: 0;
}

.pet-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-0-5);
}

.pet-card__name {
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-md);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* One line each; anything longer ends in "…" */
.pet-card__meta {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pet-card__meta--subtle {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.pet-card__notes {
  display: -webkit-box;
  margin-top: var(--space-1-5);
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-style: italic;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

@media (max-width: 1024px) {
  /* minmax(0, 1fr), not 1fr: a plain 1fr column never gets narrower than its widest content
     (a long email, a row of buttons), so it can push the page wider than a phone screen */
  .customer-profile {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- customers#edit ---------- */

/* Round photo uploader: the avatar is a <label> for a hidden file input */
.avatar-upload__trigger {
  position: relative;
  display: block;
  border-radius: var(--radius-full);
  cursor: pointer;
}

/* Dark circle with a camera icon, shown on hover or keyboard focus */
.avatar-upload__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-overlay);
  color: var(--white);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);

  svg {
    width: var(--icon-md);
    height: var(--icon-md);
  }
}

.avatar-upload__trigger:hover .avatar-upload__overlay,
.avatar-upload:has(input:focus-visible) .avatar-upload__overlay {
  opacity: 1;
}

.avatar-upload:has(input:focus-visible) .avatar-upload__trigger {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* New customer page: back link on the left, save button on the right */
.customer-form__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);

  .back-link {
    margin-bottom: 0;
  }
}

/* .avatar sets display: inline-grid, which would override the hidden attribute */
.avatar-upload [hidden] {
  display: none;
}

/* ---------- customers#index search ---------- */

.customers-search {
  max-width: 28rem;
  margin-bottom: var(--space-3);
}

.customers-search__count {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Turbo sets aria-busy while the frame loads: dim the old results meanwhile */
turbo-frame#customers,
turbo-frame#pets,
turbo-frame#history {
  display: block;
  transition: opacity var(--duration-fast) var(--ease-out);

  &[aria-busy="true"] {
    opacity: 0.6;
  }
}

/* ---------- customers#show: History (appointments / invoices) ---------- */

/* Type select, search box (grows) and from/to dates; wraps below on small screens */
.history-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.history-filters__type {
  width: auto;
}

.history-filters__search {
  flex: 1 1 14rem;
}

.history-filters__dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);

  .input {
    width: 10rem;
  }
}

.history-filters__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Result count on the left, "New appointment/invoice" on the right */
.history-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.history-toolbar__count {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}