/* ==========================================================================
   MI — the dashboard and its reports

   Sits on the EOS record's shell (see components/eos.css) rather than a second
   copy of it: the tabs are pages of one thing with a nav down the left, which
   is exactly what the EOS record is. Only what MI adds is here.
   ========================================================================== */

/* --- The headline figures ------------------------------------------------ */

.mi-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.mi-stat {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

/* Reserved for the figure that means somebody has to do something. Never used
   for emphasis — a dashboard where three of four tiles are red is a dashboard
   nobody reads. */
.mi-stat--danger {
  border-left-color: var(--color-danger);
}

.mi-stat__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mi-stat__value {
  margin-top: var(--space-1);
  font-family: var(--font-family-bold);
  font-size: var(--font-size-xxlarge);
  font-weight: bold;
  color: var(--color-primary-dark);
  font-variant-numeric: tabular-nums;
}

.mi-stat--danger .mi-stat__value {
  color: var(--color-danger);
}

.mi-stat__note {
  color: var(--color-text-muted);
  font-size: var(--font-size-medium);
}

/* --- The charts ---------------------------------------------------------- */

/* Two across where there is room. The charts are drawn at a fixed viewBox and
   scale to their column, so the breakpoint is about reading width rather than
   about the drawings. */
.mi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: var(--space-4);
}

.mi-chart__plot {
  padding: var(--space-2) 0;
}

/* The SVG has a viewBox and no width, so the column decides how big it is and
   the geometry never has to know. */
.mi-chart__plot svg {
  width: 100%;
  height: auto;
  display: block;
}

/* What the chart actually measures, under it. Not decoration: every one of
   these has something a reader would otherwise get wrong. */
.mi-chart__note {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* Always present where two or more things have to be told apart, so identity
   never rests on colour alone. */
.mi-legend {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mi-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* The swatch carries the colour; the label beside it carries the identity. Text
   never wears the series colour. */
.mi-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
}

/* --- The by-code table --------------------------------------------------- */

.mi-code-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-medium);
}

.mi-code-table th,
.mi-code-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.mi-code-table thead th {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mi-code-table__value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- The reports tab ----------------------------------------------------- */

.mi-run__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.mi-reports__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-medium);
}

.mi-reports__table th,
.mi-reports__table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.mi-reports__table thead th {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.mi-reports__files {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.mi-reports__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* A report the firm can see. Marked rather than coloured: it is a state of the
   record, not a warning. */
.mi-reports__row--shared {
  background-color: var(--tint-green-10);
}

/* --- The figure tabs ----------------------------------------------------- */

/* What the tab is about, in a line, under the header. */
.mi-blurb {
  color: var(--color-text-muted);
  font-size: var(--font-size-medium);
  margin: 0;
}

/* A heading between groups of charts on a tab that has several. */
.mi-heading {
  margin: var(--space-2) 0 0;
  font-family: var(--font-family-bold);
  font-size: var(--font-size-large);
  color: var(--color-primary-dark);
}

/* How far back the tab looks: four links, the current one filled. */
.mi-period {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.mi-period__option {
  padding: var(--space-1) var(--space-3);
  border-radius: calc(var(--radius-md) - 2px);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  text-decoration: none;
  white-space: nowrap;
}

.mi-period__option:hover {
  color: var(--color-primary-dark);
  background-color: var(--color-background);
}

.mi-period__option--current,
.mi-period__option--current:hover {
  color: #fff;
  background-color: var(--color-primary-dark);
}

/* The legend and the "open tab" link share the header's right-hand side. */
.mi-chart__aside {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.mi-chart__link {
  color: var(--color-primary);
  font-size: var(--font-size-small);
  white-space: nowrap;
}

/* --- The tables ---------------------------------------------------------- */

.mi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-medium);
}

.mi-table th,
.mi-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.mi-table thead th {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.mi-table tbody th {
  font-weight: normal;
}

.mi-table tbody th .mi-stat__note {
  display: block;
}

.mi-table__number {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Reserved for a figure that means somebody has to do something. */
.mi-table__number--danger {
  color: var(--color-danger);
  font-weight: bold;
}

/* The team table has a dozen columns; it scrolls inside its card rather than
   squeezing them. */
.mi-table--wide {
  min-width: 960px;
}

/* --- Recent reports ------------------------------------------------------ */

.mi-recent__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mi-recent__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.mi-recent__row:last-child {
  border-bottom: 0;
}

.mi-recent__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mi-recent__title {
  font-size: var(--font-size-medium);
  color: var(--color-primary-dark);
}

.mi-recent__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.mi-recent__heading {
  margin: var(--space-4) 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* A group heading inside the subnav, under the section's own. */
.eos-subnav__heading--group {
  margin-top: var(--space-3);
  font-size: var(--font-size-xsmall, 0.7rem);
  opacity: 0.8;
}

/* --- Custom reports ------------------------------------------------------ */

/* The builder: the definition down the left, the fields it can draw on down
   the right, so the reference is beside the form that needs it. */
.mi-builder {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr);
  gap: var(--space-4);
  align-items: start;
}

@media (max-width: 1100px) {
  .mi-builder {
    grid-template-columns: 1fr;
  }
}

.mi-builder__filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mi-builder__filter {
  display: grid;
  grid-template-columns: 2fr 1.4fr 2fr auto;
  gap: var(--space-2);
  align-items: center;
}

.mi-builder__filter select,
.mi-builder__filter input {
  min-width: 0;
}

.mi-builder__filter-remove {
  white-space: nowrap;
}

.mi-builder__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* The fields reference: one row per field, what it is and what it takes. */
.mi-fields {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-small);
}

.mi-fields__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.mi-fields__row:last-child {
  border-bottom: 0;
}

.mi-fields__name {
  color: var(--color-primary-dark);
}

.mi-fields__type {
  margin-left: var(--space-2);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--font-size-xsmall, 0.7rem);
}

.mi-fields__options {
  color: var(--color-text-muted);
}

/* The run: the period control and the exports share the header. */
.mi-run__controls {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.mi-run__controls .form__field {
  margin: 0;
}

/* A group heading between blocks of rows on the run. */
.mi-run__group {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-family-bold);
  font-size: var(--font-size-medium);
  color: var(--color-primary-dark);
}

.mi-run__group:first-child {
  margin-top: 0;
}

.mi-run__subtotal td,
.mi-run__subtotal th {
  font-weight: bold;
  background-color: var(--color-background);
}

/* The saved definitions, as a list of cards. */
.mi-definitions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-3);
}

.mi-definition__summary {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}