/* ============================================
   Component: Receiving and fulfilment
   View: dashboards/receiving_fulfilment/show.html.erb, records.html.erb, record.html.erb
   Partials: parts/_figure.html.erb, parts/_table.html.erb
   Stimulus: none
   ============================================ */
/* Receiving and fulfilment (#494): its figures, then its three tables, each with its line; and the records behind each
   number, with a purchase's page, laid out as Stock health's are. */

/* The figures, each on a card's surface, one to a row on a phone and two or more on a wide screen. Each figure lays
   itself out by its own width. */
.receiving-fulfilment-figures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.receiving-fulfilment-figures > .figure-container {
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

/* A table, then its line directly under it. The table's box fits its table, and is never wider than the page: a
   wider table scrolls sideways in its own box, never the page. */
.receiving-fulfilment-table {
  display: grid;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-lg);
}

.receiving-fulfilment-table > .table-scroll {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

/* The table's line: its source, its date and its sentence, its parts apart, as the figure part's frame is. */
.receiving-fulfilment-table-frame {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--spacing-sm);
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.receiving-fulfilment-table-frame > * + *::before {
  content: "· ";
}

.receiving-fulfilment-table-frame time { color: var(--color-text); }

/* The records behind a number: the number, then its page of records with its line, one beneath another, each
   starting at the page's left; and a purchase's page, its purchase, what it ordered and received, and its receipts. A
   wider table scrolls sideways in its own box, never the page. */
.receiving-fulfilment-records,
.receiving-fulfilment-record {
  display: grid;
  gap: var(--spacing-md);
}

.receiving-fulfilment-records > .table-scroll,
.receiving-fulfilment-record > .table-scroll {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

/* The page's line, "Records 1 to 100 of 250", then its links to the pages before and after it, each as large as a
   tap; they wrap under the line on a phone. */
.receiving-fulfilment-records-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--spacing-md);
  font-size: var(--font-size-sm);
}

.receiving-fulfilment-records-line { color: var(--color-muted); }

.receiving-fulfilment-records-previous,
.receiving-fulfilment-records-next {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
}

.receiving-fulfilment-back { margin-top: var(--spacing-lg); }