/* A vet's animals (module pets): the avatar in its kind's colour, the owner's cards of his animals with their vaccines,
   the visit's picker and window, the animal's window (its passport, its visits), «Прививки». */

/* an animal's avatar: a paw on its kind's colour */
.pet-avatar { --pc: var(--accent); flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--pc) 16%, var(--bg)); color: color-mix(in srgb, var(--pc) 80%, var(--ink)); }
.pet-avatar--sm { width: 30px; height: 30px; }
.pet-avatar--lg { width: 52px; height: 52px; }
.pet-avatar--lg .ic { width: 26px; height: 26px; }
.pet-avatar[data-species="dog"] { --pc: #c2410c; }
.pet-avatar[data-species="cat"] { --pc: #7c3aed; }
.pet-avatar[data-species="bird"] { --pc: #0284c7; }
.pet-avatar[data-species="rodent"] { --pc: #a16207; }
.pet-avatar[data-species="rabbit"] { --pc: #db2777; }
.pet-avatar[data-species="reptile"] { --pc: #15803d; }
.pet-avatar[data-species="other"] { --pc: #64748b; }

.pet-allergy { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--bad-soft);
  color: var(--bad); font-size: 13px; font-weight: 600; }

/* ---- the owner's card: a card per animal ---- */
.pet-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.pet-card { display: grid; gap: 8px; align-content: start; padding: 12px 14px; }
.pet-card.is-gone { opacity: .6; }
.pet-card__head { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pet-card__name { flex: 1; display: grid; min-width: 0; }
.pet-card__name b { font: 600 16px/1.2 var(--font-display); }
.pet-card__name small { overflow: hidden; color: var(--ink-3); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.pet-card__facts { margin: 0; color: var(--ink-2); font-size: 13px; }
.pet-card__facts:empty { display: none; }
.pet-card__none { margin: 0; font-size: 13px; }
.pet-card__acts { display: flex; flex-wrap: wrap; gap: 6px; }
/* its vaccines: each with when the next is due, coloured by how soon */
.pet-vacs { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pet-vacs:empty { display: none; }
.pet-vac { display: flex; justify-content: space-between; gap: 10px; padding: 5px 9px; border-radius: var(--radius-xs, 6px); background: var(--surface); font-size: 13px; }
.pet-vac__when { flex: none; color: var(--ink-3); font-weight: 600; }
.pet-vac.is-ok .pet-vac__when { color: var(--ok); }
.pet-vac.is-soon { background: var(--warn-soft); }
.pet-vac.is-soon .pet-vac__when { color: var(--warn); }
.pet-vac.is-overdue { background: var(--bad-soft); }
.pet-vac.is-overdue .pet-vac__when { color: var(--bad); }

/* ---- the visit's form: the animals to pick ---- */
.appt-pet-opt { align-items: center; }
.appt-pet-opt .pet-avatar { margin-right: 2px; }

/* ---- the visit's window ---- */
.appt-pet-block { display: grid; gap: 6px; margin-top: 10px; }
.appt-pet-block > .btn { justify-self: start; }
.appt-pet-link { width: 100%; border: 1px solid var(--line); font: inherit; color: inherit; text-align: left; cursor: pointer; }

/* ---- the animal's window ---- */
.pet-sheet__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pet-passport, .pet-visits { display: grid; margin: 0; padding: 0; list-style: none; }
.pet-pass, .pet-visit { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.pet-pass:last-child, .pet-visit:last-child { border-bottom: 0; }
.pet-pass__main, .pet-visit__main { flex: 1; display: grid; min-width: 0; }
.pet-pass__main small, .pet-visit__main small { color: var(--ink-3); font-size: 12px; }
.pet-pass__next { flex: none; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.pet-pass.is-ok .pet-pass__next { color: var(--ok); }
.pet-pass.is-soon .pet-pass__next { color: var(--warn); }
.pet-pass.is-overdue .pet-pass__next { color: var(--bad); }
.pet-visit__date { flex: none; width: 74px; color: var(--ink-3); font-size: 13px; }
.pet-neutered { align-self: end; padding-bottom: 10px; }

/* ---- «Прививки» ---- */
.vac-row.is-booked .rc-last { color: var(--ok); font-weight: 600; }
.vac-row .to-row__car { gap: 10px; }
/* «просрочена на 12 дн.» on one line: the due column a little wider than the garage's */
.rc-row.to-row.vac-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) 140px minmax(0, 1fr) auto; }
@media (max-width: 1100px) { .rc-row.to-row.vac-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140px; } }
@media (max-width: 599px) { .rc-row.to-row.vac-row { grid-template-columns: minmax(0, 1fr) auto; } }