/* Sales: period tabs and date nav, totals, tickets, a sale's items. */

@layer components {
  /* Phones: all five tabs on one row. */
  .period-tabs {
    display: inline-flex;
    gap: 0;
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-bottom: 1rem;

    @media (max-width: 640px) { display: flex; flex-wrap: nowrap; }

    a {
      padding: 0.45rem 1.1rem;
      text-decoration: none;
      font-weight: 600;

      @media (max-width: 640px) {
        flex: 1 1 auto;
        text-align: center;
        padding: 0.45rem 0.4rem;
        font-size: 0.82rem;
      }

      & + a { border-left: 2px solid var(--ink); }
      &.current { background: var(--ink); color: var(--paper); }
    }
  }

  .date-nav {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;

    > a {
      font-size: 1.3rem;
      text-decoration: none;
      padding: 0.1rem 0.6rem;
      border-radius: var(--radius-pill);
      border: 2px solid var(--ink);
    }
    form {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      flex-wrap: wrap;
    }
    input[type="date"] { width: auto; }
  }
  .period-label {
    font: 400 1.5rem/1.2 var(--font-display);
    margin: 0.5rem 0 1.5rem;
  }

  /* Gross sales per business: one colored tile each, the books side by
     side. */
  .totals { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
  .total-tile {
    background: var(--biz);
    color: var(--biz-text);
    border: 2px solid var(--ink);
    border-radius: var(--radius-box);
    padding: 0.9rem 1.2rem;
    min-width: 13rem;

    @media (max-width: 640px) { min-width: 0; flex: 1 1 9rem; }

    .label { font-weight: 700; }
    .amount {
      font: 400 2rem/1.1 var(--font-display);
      display: block;
      margin-top: 0.25rem;
      font-variant-numeric: tabular-nums;
    }
    /* The all-businesses tile stays plain, so it never looks like one
       business's tile. */
    &.all {
      background: var(--paper);
      color: var(--ink);
      border-style: double;
      border-width: 6px;
    }
  }

  .breakdown {
    th.biz-col {
      background: var(--biz);
      color: var(--biz-text);
      text-align: right;
      border: 1.5px solid var(--ink);
      border-bottom-width: 2px;
    }
    tr.empty td { color: #b0b0b0; }
  }

  /* Phones: times stay on one line. */
  table.sales td:first-child {
    @media (max-width: 640px) { white-space: nowrap; }
  }

  .sale-total { font-size: 1.15rem; }

  /* Phones: a sale's items as name and subtotal, then business, quantity ×
     price. */
  table.sale-items {
    @media (max-width: 640px) {
      &, tbody { display: block; }
      thead { display: none; }
      tr {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
          "name name name subtotal"
          "business quantity price .";
        align-items: center;
        gap: 0.3rem 0.4rem;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--line);
      }
      td { padding: 0; border: 0; }
      .item-name { grid-area: name; font-weight: 700; }
      .item-subtotal { grid-area: subtotal; font-weight: 700; }
      .item-business { grid-area: business; }
      .item-quantity { grid-area: quantity; color: var(--muted); }
      .item-price {
        grid-area: price;
        text-align: left;
        color: var(--muted);

        &::before { content: "× "; }
      }
    }
  }
}