/* Products: the list, a product's page, and its form. */

@layer components {
  /* Phones: the list as cards: grip | photo | name, then price and status |
     how many can be made. */
  table.products-list {
    @media (max-width: 640px) {
      &, tbody { display: block; overflow: visible; }
      thead { display: none; }
      tr {
        display: grid;
        grid-template-columns: 1.5rem 3rem auto minmax(0, 1fr) auto;
        grid-template-areas:
          "grip thumb name name available"
          "grip thumb price status available";
        align-items: center;
        column-gap: 0.6rem;
        border-bottom: 1px solid var(--line);
      }
      td, .business & tbody tr td:first-child:not(.grip) {
        padding: 0;
        border: 0;
        width: auto;
        box-shadow: none;
      }
      td.grip { grid-area: grip; align-self: stretch; }
      .thumb-col { grid-area: thumb; padding: 0.55rem 0; }
      .thumb { width: 3rem; height: 3rem; }
      .name-col { grid-area: name; align-self: end; padding-top: 0.55rem; }
      .price-col {
        grid-area: price;
        align-self: start;
        text-align: left;
        padding-bottom: 0.55rem;
      }
      .status-col {
        grid-area: status;
        align-self: start;
        padding-bottom: 0.55rem;
      }
      .status { font-size: 0.75rem; padding: 0.05rem 0.5rem; }
      .available-col {
        grid-area: available;
        padding-right: 0.7rem;
        font-weight: 700;

        &::before {
          content: attr(data-label);
          display: block;
          font-size: 0.7rem;
          font-weight: 600;
          color: var(--muted);
        }
      }
      tr.drop-slot td { grid-column: 1 / -1; }
    }
  }

  dl.facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.5rem;

    dt { font-weight: 700; }
    dd { margin: 0; }
  }

  /* The form: details left; on sale and photos right. Narrower, one column;
     on phones, "save" goes last (after on sale and photos). */
  .product-form {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
    gap: 1rem 3rem;
    align-items: start;

    @media (max-width: 860px) { grid-template-columns: 1fr; }
    @media (max-width: 640px) {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;

      > * { min-width: 0; }
      input[type="submit"] {
        order: 2;
        align-self: flex-start;
        margin-top: 0.5rem;
      }
    }

    > .errors { grid-column: 1 / -1; }
  }
  .product-form-main {
    @media (max-width: 640px) {
      display: contents;

      > * { min-width: 0; }
    }
  }
  .product-form-side {
    position: sticky;
    top: 1rem;

    @media (max-width: 860px) { position: static; }
    @media (max-width: 640px) { order: 1; }
  }

  /* On sale or hidden, as one big switch. */
  .on-sale-toggle {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1.2rem;
    font-size: 1.15rem;
    border-style: dashed;
    color: var(--muted);
    border-color: var(--muted);

    &::before {
      content: "";
      width: 0.75rem;
      height: 0.75rem;
      border-radius: 50%;
      border: 2px solid currentColor;
    }
    &[aria-pressed="true"] {
      background: var(--ink);
      color: var(--paper);
      border: 2px solid var(--ink);

      &::before { background: var(--ok); border-color: var(--paper); }
      &:hover { background: #333; }
    }
  }
  .on-sale-field .field-hint { margin-top: 0.4rem; }

  /* The supplies it uses: one row each (supply, quantity, remove). */
  .supply-use-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;

    @media (max-width: 640px) {
      .qty { width: 3.5rem; }
      button { padding: 0.45rem 0.8rem; }
    }
  }
  /* Not nested: as a nested list, select would take input[type="text"]'s
     higher specificity. */
  .supply-use-row select, .supply-use-row input[type="text"] {
    flex: 1;
    width: auto;
    min-width: 0;
  }
  /* "Nuevo insumo", the last option of a row's select. */
  .new-supply-option { font-weight: 800; }
  /* A new supply's first count, on its own line under its name. */
  .new-supply-count {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.25rem;
    font-size: 0.92rem;
    color: var(--muted);
  }
  .supply-use-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
  .own-supply {
    background: var(--soft);
    border-radius: 10px;
    padding: 0.8rem 1rem;

    p { margin: 0.35rem 0 0.6rem; }
  }
}