/* ============================================
   Component: SKU performance
   View: dashboards/sku_performance/show.html.erb, records.html.erb, record.html.erb, _words.html.erb
   Partials: parts/_figure.html.erb, parts/_table.html.erb, parts/_filter.html.erb
   Stimulus: none
   ============================================ */
/* SKU performance (#495) reads question first (D-139): the decision it serves, then each section under its question,
   its figure, then its words' tap, then its tables, each with its line, and the ranking's counts' tap; and the records
   behind each number, with a SKU's page, laid out as Receiving and fulfilment's are. */

/* The decision the tab serves, above its first section. */
.sku-performance-decision {
  margin: var(--spacing-lg) 0 0;
  color: var(--color-muted);
}

/* Each section: its question, then its figure, its words' tap, the days of sales in the ranking's, its tables and the
   ranking's counts' tap, one beneath another, each starting at the section's left. */
.sku-performance-section {
  display: grid;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.sku-performance-section > h3 { margin: 0; }

/* The section's answer, on a card's surface, the width of a row on a phone and of a column on a wide screen; it lays
   itself out by its own width. */
.sku-performance-section > .figure-container {
  justify-self: start;
  width: 100%;
  max-width: 40rem;
  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. */
.sku-performance-table {
  display: grid;
  gap: var(--spacing-xs);
}

.sku-performance-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. */
.sku-performance-table-frame {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--spacing-sm);
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.sku-performance-table-frame > * + *::before {
  content: "· ";
}

.sku-performance-table-frame time { color: var(--color-text); }

/* What sits behind a tap: what the ranking counts and leaves out, and the words a section or a page uses. A <details>
   opens with no JavaScript and no hover, its summary at least the tap target's height, as the figure part's other
   ways are. */
.sku-performance-tap {
  color: var(--color-muted);
  font-size: var(--font-size-xs);
}

.sku-performance-tap > summary {
  display: flex;
  align-items: center;
  gap: 0 var(--spacing-sm);
  min-height: var(--tap-target);
  color: var(--color-link);
  cursor: pointer;
  list-style: none;
}

/* A flex summary loses its marker, so it draws its own: closed, then open */
.sku-performance-tap > summary::-webkit-details-marker { display: none; }

.sku-performance-tap > summary::before { content: "▸"; }

.sku-performance-tap[open] > summary::before { content: "▾"; }

.sku-performance-coverage { margin: 0; }

/* Each word, then its definition beneath it. */
.sku-performance-word-list {
  display: grid;
  gap: var(--spacing-xs);
  margin: 0;
}

.sku-performance-word-list > dt {
  color: var(--color-text);
  font-weight: 600;
}

.sku-performance-word-list > dd {
  margin: 0 0 var(--spacing-xs);
}

/* The records behind a number: the number, then its page of records with its line, then its words, one beneath
   another, each starting at the page's left; and a SKU's page, its product and its stock, then their words. A wider
   table scrolls sideways in its own box, never the page. */
.sku-performance-records,
.sku-performance-record {
  display: grid;
  gap: var(--spacing-md);
}

.sku-performance-records > .table-scroll,
.sku-performance-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. */
.sku-performance-records-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--spacing-md);
  font-size: var(--font-size-sm);
}

.sku-performance-records-line { color: var(--color-muted); }

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

.sku-performance-back { margin-top: var(--spacing-lg); }