/* ---------- products#index & services#index filters ---------- */

/* Search box grows, category select keeps its natural width */
.products-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 40rem;
  margin-bottom: var(--space-3);
}

.products-filters__search {
  flex: 1 1 18rem;
}

.products-filters__category {
  flex: 0 1 14rem;
}

/* Rows with switches after the selects (products: low stock + show archived;
   services: show archived): widen the row so they fit next to the inputs,
   and centre them vertically against the inputs */
.products-filters--with-toggle {
  max-width: 64rem;
  align-items: center;
}

/* Sits at the end of the row, never shrinks so its label stays on one line */
.products-filters__toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}

.products-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#products,
turbo-frame#services {
  display: block;
  transition: opacity var(--duration-fast) var(--ease-out);

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

/* ---------- product & service tables (products#index, services#index, *_categories#show) ---------- */

.product-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

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

/* "Archived" pill under the name: .product-cell is a column, so stop it stretching full width */
.product-cell__archived {
  align-self: flex-start;
  margin-block: 2px;
}

.product-cell__meta {
  max-width: 32rem;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- product photos (products#index thumbnail, products/_form) ---------- */

/* Rounded square rather than the round .avatar: products aren't people */
.product-thumb {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--color-surface-sunken);
  box-shadow: 0 0 0 1px var(--color-border);
  color: var(--color-text-subtle);

  /* The placeholder icon (shared/icons/shopping_bag) */
  svg {
    width: 50%;
    height: 50%;
  }

  /* display: inline-grid would otherwise beat the hidden attribute */
  &[hidden] {
    display: none;
  }
}

.product-thumb--lg {
  width: 5rem;
  height: 5rem;
}

/* Logos (stores/_form): show the whole image instead of cropping it to the square */
.product-thumb--contain {
  object-fit: contain;
  padding: var(--space-1);
}

/* Just wide enough for the 40px thumbnail */
.table .products-table__photo {
  width: 1%;
  padding-right: 0;

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

.product-photo-field {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.product-photo-field__input {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

/* "Remove" toggle for a saved image (stores/_remove_image): a checkbox styled as a button.
   Ticked = deleted on save, so the button, thumbnail and hint all switch to a "pending removal" look */
.image-remove {
  align-self: flex-start;
  margin-top: var(--space-1);

  /* The checkbox itself is .sr-only: show keyboard focus on the button instead */
  &:has(:focus-visible) {
    box-shadow: var(--focus-ring);
  }

  .image-remove__on {
    display: none;
  }

  &:has(:checked) {
    background: var(--color-danger-subtle);

    .image-remove__off { display: none; }
    .image-remove__on { display: inline; }
  }
}

.image-remove__notice {
  display: none;
  color: var(--color-danger-text);
}

.product-photo-field:has(.image-remove :checked) {
  /* The saved image (not a newly picked one, which would replace it instead) */
  [data-image-preview-target="placeholder"] {
    opacity: 0.35;
    box-shadow: 0 0 0 2px var(--color-danger);
  }

  .form-hint:not(.image-remove__notice) { display: none; }
  .image-remove__notice { display: block; }
}

/* Native file input, with its button styled like .btn--secondary */
.file-input {
  max-width: 100%;
  color: var(--color-text-muted);
  font-size: var(--text-sm);

  &::file-selector-button {
    height: var(--control-height-sm);
    margin-right: var(--space-3);
    padding: 0 var(--space-3);
    background: var(--color-surface);
    border: var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    color: var(--color-text);
    font: inherit;
    font-weight: var(--weight-medium);
    cursor: pointer;
  }

  &::file-selector-button:hover {
    background: var(--color-surface-hover);
  }

  &:focus-visible {
    outline: none;
  }

  &:focus-visible::file-selector-button {
    border-color: var(--color-focus);
    box-shadow: var(--focus-ring);
  }
}

/* Prices line up on the decimal point when right-aligned */
.table .products-table__price {
  text-align: right;
  color: var(--color-text);
}

/* Stock counts right-aligned like prices, so the digits line up */
.table .products-table__stock {
  text-align: right;
  color: var(--color-text);
}

/* ---------- products#show & services#show ---------- */

.product-card {
  max-width: 48rem;
}

/* Photo on the left, details on the right; without a photo the details take the full width */
.product-card__layout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);

  .details {
    flex: 1;
    min-width: 0;
  }
}

.product-card__photo {
  flex-shrink: 0;
  line-height: 0;
  border-radius: var(--radius-md);

  &:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }
}

.product-thumb--xl {
  width: 10rem;
  height: 10rem;
}

/* Phones: photo on top, details underneath */
@media (max-width: 40rem) {
  .product-card__layout {
    flex-direction: column;
  }
}

/* 2-column version of .details; .details__wide spans both columns */
.details--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));

  .details__wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 40rem) {
  .details--grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- products, services & categories new/edit ---------- */

/* Back link on the left, save button on the right (like customers#new) */
.resource-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;
  }
}

.resource-form {
  max-width: 48rem;
}

/* Full content width, for forms with tables or side-by-side cards (invoices) */
.resource-form--wide {
  max-width: none;
}

/* products#show & services#show: the "archived since…" warning between the header and the card */
.archived-notice {
  margin-bottom: var(--space-4);
}

/* VAT column (products, services and their category pages): narrow, right-aligned like the price */
.table .products-table__vat {
  width: 1%;
  text-align: right;
  white-space: nowrap;
  color: var(--color-text-muted);
}

/* Reference column: a short code, kept on one line */
.table .products-table__reference {
  white-space: nowrap;
}

.products-table__code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}