/* ---------- pets#show + pets#edit + pets#new ----------
 * Layout reuses .customer-profile (and .customer-form__toolbar on new)
 * from customers.css.
 */

/*
 * Pet photo. On show it's a plain .pet-photo__frame; on edit it's a
 * .pet-photo__trigger — a <label> for a hidden file input, so clicking
 * the image opens the file picker.
 */
.pet-photo {
  border-bottom: var(--border);
}

.pet-photo__frame,
.pet-photo__trigger {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-primary-subtle);
}

.pet-photo__trigger {
  cursor: pointer;
}

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

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

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

/* "Change photo" bar, slides in on hover or keyboard focus */
.pet-photo__overlay {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-overlay);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  opacity: 0;
  transform: translateY(100%);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);

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

/* No photo yet: keep the hint visible so it's obvious you can upload one.
 * :not([hidden]) — on new, image-preview hides the placeholder once a photo is picked. */
.pet-photo__placeholder:not([hidden]) + .pet-photo__overlay,
.pet-photo__trigger:hover .pet-photo__overlay,
.pet-photo:has(input:focus-visible) .pet-photo__overlay {
  opacity: 1;
  transform: none;
}

.pet-photo:has(input:focus-visible) .pet-photo__trigger {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

/* .pet-photo__placeholder sets display: grid, which would override the hidden attribute */
.pet-photo [hidden] {
  display: none;
}

/* Below 1024px .customer-profile becomes one column (customers.css), so the sidebar card
 * is as wide as the screen and a square photo filling it would be screen-wide AND as tall.
 * Instead it shrinks to a centred, fully rounded square; the card's background shows around it. */
@media (max-width: 1024px) {
  .pet-photo {
    padding: var(--space-5) var(--space-5) 0;
    border-bottom: 0;
  }

  .pet-photo__frame,
  .pet-photo__trigger {
    width: min(100%, 12rem);
    margin-inline: auto;
    border-radius: var(--radius-lg);
  }
}

.pet-owner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
}

/* ---------- Weight card (chart + history) ---------- */
.pet-weights__chart {
  margin-bottom: var(--space-5);
}

.pet-weights__actions {
  width: 1%; /* shrink to the delete button */
  text-align: right;
}

/* the table already sits inside a card */
.pet-weights__list {
  box-shadow: none;
}