/* The admin dashboard: today's work, most urgent first. Colour only where
   something needs doing; everything settled is grey or plain text.
   It keeps one width, centred in the space beside the sidebar. */
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 72rem;
  margin-inline: auto;
  padding: 2rem 1rem;
  color: var(--color-ink);

  @media (min-width: 768px) { padding: 2rem 1rem; }
}

/* The greeting and the links under it read as one block. */
.dashboard-top { display: flex; flex-direction: column; gap: 0.75rem; }

.dashboard-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
.dashboard-header__title { font-size: 2rem; font-weight: 700; }
.dashboard-header__date { margin-top: 0.25rem; font-size: 0.9375rem; color: var(--color-muted); }
.dashboard-header__date--short { display: none; }
.dashboard-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* Counts on the left, shortcuts on the right, all links. */
.dashboard-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem 1rem;
  font-size: 0.9375rem;
}
.dashboard-strip__counts,
.dashboard-strip__shortcuts { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.dashboard-strip__divider { display: none; }
.dashboard-count {
  color: var(--color-primary);
  font-weight: 500;

  & b { margin-right: 0.125rem; font-weight: 600; }
  &:is(a):hover { text-decoration: underline; }
}
.dashboard-count--plain { color: var(--color-text); }
.dashboard-link {
  color: var(--color-primary);
  font-weight: 600;
  white-space: nowrap;

  &:hover { text-decoration: underline; }
}

/* One white card per section; the header holds its one verb. */
.dashboard-card {
  padding: 1.75rem 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.dashboard-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}
.dashboard-card__title { font-size: 1.375rem; font-weight: 600; }
/* A header's link stays smaller and softer than the title beside it. */
.dashboard-card__head > .dashboard-link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: color-mix(in oklab, var(--color-primary) 75%, var(--color-muted));
}
.dashboard-card__note { margin-left: 0.5rem; font-size: 0.9375rem; font-weight: 400; color: var(--color-muted); }
.dashboard-card__empty { padding: 0.5rem 0; font-size: 1rem; color: var(--color-muted); }

/* A row is the link to whatever it names. */
.dashboard-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.5rem;
  margin-inline: -0.5rem;
  border-radius: 0.5rem;

  & + & { border-top: 1px solid var(--color-hairline); border-radius: 0; }
  &:hover { background: color-mix(in oklab, var(--color-grey-wash) 60%, #fff); }
}

/* Needs your attention: a dot for how urgent, the count as the link, and
   one grey sentence beside it on the same line. */
.attention-list { padding-top: 0.25rem; }
.attention-row {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  padding: 0.5rem 0;
  font-size: 1.0625rem;
}
.attention-row__dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  transform: translateY(-0.0625rem);
}
.attention-row__dot--red { background: var(--color-red-dot); }
.attention-row__dot--amber { background: var(--color-amber-dot); }
.attention-row__title {
  flex-shrink: 0;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-primary);

  &:hover { text-decoration: underline; }
}
.attention-row__detail {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text);
}

/* Stat columns: each count is one link, with its number and what the
   number counts below it. */
.people-updates .dashboard-card__head,
.assistant-updates .dashboard-card__head { margin-bottom: 2rem; }
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.assistant-updates .dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; min-width: 0; }
.dashboard-stat__link { font-size: 1.0625rem; }
.dashboard-stat__figure { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.dashboard-stat__number { font-size: 2.25rem; font-weight: 700; line-height: 1; }
.dashboard-stat__badge {
  padding: 0.1875rem 0.625rem;
  border-radius: 9999px;
  background: var(--color-grey-wash);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.dashboard-stat--red .dashboard-stat__number { color: var(--color-red); }
.dashboard-stat--red .dashboard-stat__badge { background: var(--color-red-wash); color: var(--color-red); }
.dashboard-stat--amber .dashboard-stat__number { color: var(--color-amber); }
.dashboard-stat--amber .dashboard-stat__badge { background: var(--color-amber-wash); color: var(--color-amber); }

/* Quiet people: the grey box under the people counts. */
.quiet-people {
  margin-top: 2rem;
  padding: 0.875rem 1rem;
  border-radius: 0.625rem;
  background: var(--color-raised);
  font-size: 1.0625rem;
}
.quiet-people__head { display: flex; align-items: baseline; gap: 0.625rem; }
.quiet-people__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.quiet-people__count { flex: 1; color: var(--color-text); }
.quiet-row { display: flex; align-items: baseline; gap: 0.625rem; padding-top: 0.625rem; }
.quiet-row__name {
  font-weight: 700;

  &:hover { text-decoration: underline; }
}
.quiet-row__fact { color: var(--color-text); }

/* Newest people: initials, name and role, and when they were last here. */
.person-row__who { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.person-row__name { font-weight: 700; }
.person-row__role { font-size: 0.9375rem; color: var(--color-muted); }
.person-row__last { font-size: 0.9375rem; color: var(--color-muted); white-space: nowrap; }

/* A phone stacks the same sections in the same order. */
@media (max-width: 767px) {
  .dashboard { gap: 1rem; padding: 1.25rem 1rem; }
  .dashboard-header__title { font-size: 1.375rem; }
  .dashboard-header__date--long { display: none; }
  .dashboard-header__date--short { display: inline; }
  .dashboard-strip {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;

    &::-webkit-scrollbar { display: none; }
  }
  .dashboard-strip__counts,
  .dashboard-strip__shortcuts { flex-wrap: nowrap; gap: 1rem; }
  .dashboard-strip__divider { display: block; flex-shrink: 0; width: 1px; height: 1rem; background: var(--color-border); }
  .dashboard-card { padding: 1.25rem; }
  .dashboard-card__head .dashboard-card__note { display: block; margin: 0.125rem 0 0; }
  .attention-row { gap: 0.5rem; font-size: 1rem; }
  .people-updates .dashboard-card__head,
  .assistant-updates .dashboard-card__head { margin-bottom: 1.5rem; }
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .dashboard-stat__link { font-size: 0.9375rem; }
  .assistant-updates .dashboard-stats { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
  .assistant-updates .dashboard-stat { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.75rem; }
  .assistant-updates .dashboard-stat__number { font-size: 1.75rem; }
  .quiet-people { margin-top: 1.75rem; }
  .quiet-people__head { flex-wrap: wrap; }
  .quiet-row { justify-content: space-between; }
  .quiet-row__fact { min-width: 0; text-align: right; }
  .person-row__last { display: none; }
}