/* A clinic's page (vets/show), "Mis facturas" and "Gastos": interventions, what they cost and their invoices */

/* "Download all" under the invoices count, and each row's invoice, with a paperclip like a cat's history */
.vet-invoices__download,
.vet-invoices__file {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;

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

.vet-invoices__download {
  align-self: flex-start;
  margin-top: var(--space-2);
}

/* Phones: each row becomes a small block (date and cost, then the cat and its invoice, then what was done,
   then whose it is in "Gastos"), so nothing needs scrolling sideways. The header row goes: each value is clear from where it sits */
@media (max-width: 40rem) {
  .vet-interventions {
    thead {
      display: none;
    }

    tr {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "date cost"
        "cat invoice"
        "kind kind"
        "vet vet";
      gap: var(--space-1) var(--space-3);
      padding: var(--space-3) var(--space-4);
      border-bottom: var(--border);
    }

    td {
      padding: 0;
      border: 0;
    }
  }

  .vet-interventions__date { grid-area: date; color: var(--color-text-muted); font-size: var(--text-sm); }
  .vet-interventions__cost { grid-area: cost; font-weight: var(--weight-medium); }
  .vet-interventions__cat { grid-area: cat; }
  .vet-interventions__invoice { grid-area: invoice; text-align: right; }
  .vet-interventions__kind { grid-area: kind; }
  .vet-interventions__vet { grid-area: vet; color: var(--color-text-muted); font-size: var(--text-sm); }
}