/* ==========================================================================
   Dashboard
   ========================================================================== */

/* What needs attention: one row per kind of problem, most urgent first. */
.pl-dashboard__issues {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  list-style: none;
}

.pl-dashboard__issue {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--row-h);
  padding: var(--space-2) var(--space-5);
}

.pl-dashboard__issue + .pl-dashboard__issue {
  border-top: 1px solid var(--line);
}

/* The first few by name, on one line: each shortens itself to fit. */
.pl-dashboard__names {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-dim);
  font-size: var(--text-13);
}

.pl-dashboard__name {
  display: flex;
  min-width: 0;
}

.pl-dashboard__name > :first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-dashboard__more {
  flex: none;
  white-space: nowrap;
}

/* The area boxes, then usage: three across on a wide desktop and two on a
   narrow one. Usage fills whatever the boxes before it leave of the last
   row. A box the user may not read is not drawn, so usage's position counts
   the boxes shown. */
.pl-dashboard__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

@container main (min-width: 40rem) {
  .pl-dashboard__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* After an even number of boxes: a row of its own. */
  .pl-dashboard__box--usage:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@container main (min-width: 60rem) {
  .pl-dashboard__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* After 3k boxes a row of its own, after 3k + 1 the two columns left,
     after 3k + 2 the last one. */
  .pl-dashboard__box--usage:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }

  .pl-dashboard__box--usage:nth-child(3n + 2) {
    grid-column: span 2;
  }

  .pl-dashboard__box--usage:nth-child(3n) {
    grid-column: auto;
  }
}

.pl-dashboard__box {
  gap: var(--space-3);
}

/* A box that links as a whole, like a cluster card. */
.pl-dashboard__box--link {
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.pl-dashboard__box--link:hover {
  border-color: var(--line-strong);
  background: var(--bg-hover);
}

.pl-dashboard__title {
  min-width: 0;
  margin: 0;
  font-size: var(--text-16);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

/* The link truncates itself, so its box never runs into the next one. */
.pl-dashboard__title .ui-stretched-link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Usage: the week's total over a bar per day, or beside it when the box
   spans columns. The chart sits above the box's link, so it still answers
   the pointer. */
.pl-dashboard__box--usage {
  container: usage / inline-size;
}

.pl-dashboard__usage {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.pl-dashboard__usage .ui-chart__plot {
  z-index: 1;
}

@container usage (min-width: 32rem) {
  .pl-dashboard__usage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
  }
}

.pl-dashboard__total {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

@container main (max-width: 40rem) {
  .pl-dashboard__issue {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-1);
    padding-block: var(--space-3);
  }

  .pl-dashboard__names {
    grid-row: 2;
    grid-column: 1 / -1;
  }
}