/* ============================================
   Component: Shipping profit
   View: dashboards/shipping_profit/show.html.erb, _section.html.erb, levers.html.erb, records.html.erb, record.html.erb
   Partials: parts/_figure.html.erb, parts/_table.html.erb, parts/_filter.html.erb
   Stimulus: none
   ============================================ */
/* Shipping profit's four sections (#141, #142), beneath the page's period, each under its heading; the levers
   page's, beneath its form; and the records behind each number, with one order's or label's page (#376). */

.shipping-section {
  display: grid;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.shipping-section > h3 { margin: 0; }

/* A section's figures, each on a card's surface, laid out as Operating profit's are, one to a row on a phone and
   two or three on a wide screen. Each figure lays itself out by its own width. */
.shipping-figures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: var(--spacing-sm);
}

.shipping-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. */
.shipping-table {
  display: grid;
  gap: var(--spacing-xs);
}

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

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

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

/* The tab's link to its levers (#142), alone in its paragraph, is at least the tap target's height, as every link
   outside running text is (PHONE-01). */
.shipping-levers-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
}

/* The levers page (#142): its two forms, one field to a row on a phone (PHONE-01), and in a row that wraps on a wide
   screen. Each field's label above its input. */
.shipping-levers-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.shipping-levers-field {
  display: grid;
  gap: var(--spacing-xs);
  margin: 0;
  padding: 0;
  border: 0;
}

.shipping-levers-field > label,
.shipping-levers-field > legend {
  padding: 0;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.shipping-levers-field > legend { margin-bottom: var(--spacing-xs); }

.shipping-levers-field > input {
  min-height: var(--tap-target);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-md);
}

/* The welcome offer's two options, each its radio then its label, as large as a tap. */
.shipping-levers-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.shipping-levers-option {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: var(--tap-target);
}

.shipping-levers-form [type="submit"] {
  align-self: flex-start;
  min-height: var(--tap-target);
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 0;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--font-size-md);
  cursor: pointer;
}

@media (min-width: 600px) {
  .shipping-levers-form {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .shipping-levers-form [type="submit"] { align-self: auto; }
}

/* The page's line under its figures, and a refused save's words. */
.shipping-levers-line {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

.shipping-levers-refused {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius);
  background: var(--color-alert-bg);
  color: var(--color-text);
}

.shipping-levers-refused > p,
.shipping-levers-refused > ul { margin: 0; }

/* The saved scenarios, one to a row: its name, a link, then who saved it last and when. */
.shipping-scenarios {
  display: grid;
  gap: var(--spacing-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shipping-scenario {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--spacing-sm);
}

.shipping-scenario-saved {
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}

/* The records behind a number (#376): the number, then its page of records with its line, or its rule and its terms,
   one beneath another, each starting at the page's left. The table's box fits its table, and a wider one scrolls
   sideways in its own box, never the page. */
.shipping-records,
.shipping-record {
  display: grid;
  gap: var(--spacing-md);
}

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

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

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

/* A computed number's rule, in words, above its terms. */
.shipping-records-rule {
  margin: 0;
  color: var(--color-text);
}

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