/* ---------- invoices#index filters ---------- */

/* Search box grows; the from/to dates sit next to it and wrap below on small screens */
.invoices-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  max-width: 64rem;
  margin-bottom: var(--space-3);
}

/* Customer picker between the search and the dates; full width on phones (wraps) */
.invoices-filters__customer {
  flex: 1 1 14rem;
  max-width: 18rem;
}

@media (max-width: 40rem) {
  .invoices-filters__customer {
    max-width: none;
  }
}

.invoices-filters__search {
  flex: 1 1 16rem;
}

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

  .input {
    width: 10rem;
  }
}

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

.invoices-filters__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#invoices {
  display: block;
  transition: opacity var(--duration-fast) var(--ease-out);

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

/* ---------- invoice tables (invoices#index, invoices#show, customers#show) ---------- */

.invoice-cell__number {
  font-weight: var(--weight-medium);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Amounts right-aligned so the digits line up */
.table .invoices-table__total {
  text-align: right;
  color: var(--color-text);
  text-wrap: nowrap;
}

/* The VAT % only needs a few characters: width 1% makes the column as narrow as its content
   and leaves the spare width to the others */
.table .invoices-table__vat {
  width: 1%;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.invoices-table__footer {
  th,
  td {
    border-top: var(--border);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
  }

  th {
    text-align: right;
  }
}

/* Base imponible and VAT per rate, above the total: plain text (not the grey uppercase
   of a table header) and no lines between them */
.table .invoices-table__summary {
  th,
  td {
    background: none;
    border-top: none;
    border-bottom: none;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    text-transform: none;
    color: var(--color-text-muted);
  }

  th {
    text-align: right;
  }

  &:first-child th,
  &:first-child td {
    border-top: var(--border);
    padding-top: var(--space-3);
  }
}

/* ---------- invoices#show ---------- */

/* Facts across the full width (customer · appointment · staff · store …),
   wrapping to fewer columns as the page narrows */
.invoice-page .details--grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.invoice-page .table-wrapper {
  border: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

/* Big total in the page header, pushed right next to the Edit button */
.invoice-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
}

.invoice-total__label {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.invoice-total__amount {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* ---------- invoices new & rectifications#new: number in the title ---------- */

.invoice-number-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* "New invoice  2026-PK/9": the number in a subtle pill next to the title */
.invoice-number-preview__number {
  margin-left: var(--space-2);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-primary-subtle);
  color: var(--color-primary-text);
  font-family: var(--font-mono);
  font-size: 0.8em;
  vertical-align: middle;
}

.invoice-number-preview .alert {
  margin-top: var(--space-2);
}

/* ---------- invoices new/edit & rectifications#new: layout ---------- */

/* The first two cards side by side, same height; each column is at least 26rem,
   so on narrower screens they stack. min(100%, …) stops it overflowing on phones. */
.invoice-form__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: var(--space-4);
}

/* Read-only values (no input): line them up with the label like the inputs' text */
.field-row__value--text {
  padding-top: var(--space-1-5);
}

/* ---------- invoices new/edit: lines ---------- */

/* Columns, the same for the headings and every line:
   product select | description | final price | VAT | quantity | ✕
   Each piece names its column, so a catalog line (stock, price, VAT as text) and a custom line
   (three inputs) line up under the same headings, whatever is hidden */
.invoice-lines__head,
.invoice-line {
  display: grid;
  grid-template-columns:
    minmax(10rem, 1fr) minmax(0, 1.3fr) 7rem 5.5rem 5rem
    var(--control-height-sm);
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-4);
}

.invoice-line__product { grid-column: 1; }
.invoice-line__description { grid-column: 2; }
.invoice-line__price { grid-column: 3; }
.invoice-line__vat { grid-column: 4; }
.invoice-line__quantity { grid-column: 5; }
.invoice-line__remove { grid-column: 6; }

.invoice-line > *,
.invoice-line__catalog > *,
.invoice-line__manual > * {
  grid-row: 1;
}

.invoice-lines__head {
  padding-top: var(--space-3);
  padding-bottom: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* The two alternatives (catalog item / custom item) are only wrappers: their children are
   the grid's cells */
.invoice-line__catalog,
.invoice-line__manual {
  display: contents;
}

/* display: grid/contents would override the hidden attribute the JS toggles */
.invoice-line[hidden],
.invoice-line [hidden] {
  display: none;
}

/* Numbers sit on the right, where the inputs' numbers are: the text cells and headings get the
   inputs' inner padding so "12,10 €" and "21 %" line up whether typed or shown */
.invoice-line__value {
  padding-right: var(--space-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invoice-line .invoice-line__price {
  text-align: right;
}

/* "/ud" after a catalog item's price */
.invoice-line__per-unit {
  font-size: var(--text-xs);
}

/* "5 available" under Description; red when the product has run out */
.invoice-line__stock {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.invoice-line__stock--out {
  color: var(--color-danger);
  font-weight: var(--weight-medium);
}

/* Explains the "Update stock" switch, right under the card header */
.invoice-lines__stock-hint {
  padding: var(--space-3) var(--space-4) 0;
}

.invoice-line__quantity .input {
  text-align: right;
}

.invoice-lines__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Phones: product, quantity and ✕ on one row; description (or stock), price and VAT below */
@media (max-width: 40rem) {
  .invoice-lines__head {
    display: none;
  }

  .invoice-line {
    grid-template-columns: minmax(0, 1fr) 5.5rem 4.5rem var(--control-height-sm);
    border-top: var(--border);
  }

  .invoice-line__product { grid-column: 1 / 3; }
  .invoice-line__quantity { grid-column: 3; }
  .invoice-line__remove { grid-column: 4; }
  .invoice-line__description { grid-column: 1; }
  .invoice-line__price { grid-column: 2; }
  .invoice-line__vat { grid-column: 3 / 5; }

  .invoice-line__catalog > *,
  .invoice-line__manual > * {
    grid-row: 2;
  }
}

/* ---------- invoices#show: rectificativas list ---------- */

.invoice-page__section-hint {
  margin: var(--space-1) 0 var(--space-2);
}

/* ---------- invoices/rectifications#new ---------- */

.rectification-lines__hint {
  padding: 0 var(--space-4) var(--space-3);
}

/* The table sits inside the card, which already has the border */
.card .rectification-lines {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* .input is width: 100% by default; a few digits is all this needs */
.table .rectification-lines__quantity {
  width: 5.5rem;
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- customers#show: invoices below the pets ---------- */

.customer-profile__section-header--spaced {
  margin-top: var(--space-8);
}

@media (max-width: 40rem) {
  .invoices-filters__dates {
    flex-wrap: wrap;
  }
}

/* ---------- invoices#show: "Send by email" popup ---------- */

/* The calendar's .modal only overlays inside .calendar; --overlay does the same anywhere */
.modal--overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-4);

  /* Here the backdrop is a link back to the invoice: clicking outside closes the popup */
  .modal__backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--color-overlay);
  }

  .modal__panel {
    width: min(32rem, 100%);
    max-height: calc(100dvh - var(--space-8));
    overflow-y: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }
}

.invoice-email__attachment {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);

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

/* ---------- invoices#show: payments ---------- */

/* Amount, method and the button in one row under the payments, wrapping on narrow screens */
.invoice-payment-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);

  .form-field:first-child {
    flex: 0 1 12rem;
  }

  .form-field {
    margin: 0;
  }
}

.invoice-payment-form__hint {
  flex-basis: 100%;
  margin-top: calc(var(--space-2) * -1);
}

/* The delete button: as narrow as the icon */
.table .invoice-payments__delete {
  width: 1%;
  padding-top: 0;
  padding-bottom: 0;
}

/* New invoice: the method pills sit where an input would */
.invoice-form__payment-method .form-field {
  margin: 0;
}