/* Dashboard summary and settings tabs. */
@layer components {
  .dash-section + .dash-section,
  .dash-section + .dash-columns { margin-block-start: var(--space-5); }

  .dash-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-3);

    & h2 { margin: 0; }
    & a { font-size: .875rem; }
  }

  .dash-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;

    @media (width < 30rem) {
      gap: var(--space-2);
      & .dash-stat { padding: var(--space-2); font-size: .8125rem; overflow-wrap: normal; hyphens: auto; }
      & .dash-stat strong { font-size: 1.5rem; }
    }
    padding: 0;
    list-style: none;
  }

  .dash-stat {
    --col-tint: var(--color-line);

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    block-size: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-inline-start: 4px solid var(--col-tint);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    color: var(--color-text-muted);
    font-size: .875rem;
    text-decoration: none;
    transition: border-color var(--duration), box-shadow var(--duration);

    & strong { color: var(--color-text); font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
    &:hover { color: var(--color-text-muted); box-shadow: var(--shadow-raised); }

    &[data-status="in_progress"] { --col-tint: light-dark(oklch(62% .15 262), oklch(66% .14 262)); }

    &.is-danger { --col-tint: var(--color-danger); background: var(--color-danger-soft); & strong { color: var(--color-danger); } }
    &.is-warn { --col-tint: #f79009; }
  }

  .dash-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: var(--space-4);
    align-items: start;

    & > .card { margin: 0; }
    & h2 { margin-block-end: var(--space-3); }
  }

  .dash-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;

    & li {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 0 var(--space-3);
      margin-inline: calc(var(--space-2) * -1);
      padding: var(--space-2);
      border-radius: var(--radius-m);
      transition: background-color var(--duration);
    }
    & li:hover { background: var(--color-surface-subtle); }
    & li:has(a:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
    & a {
      color: var(--color-text);
      font-weight: 500;
      text-decoration: none;
      overflow-wrap: anywhere;

      &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
      &:focus-visible { outline: none; }
    }
    & .muted { grid-column: 1; overflow: hidden; font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
    & :is(.chip, .dash-count) { grid-column: 2; grid-row: 1 / span 2; }
  }

  .dash-count {
    min-inline-size: 1.5rem;
    color: var(--color-text-muted);
    font-size: .875rem;
    font-weight: 600;
    text-align: end;
    font-variant-numeric: tabular-nums;
  }

  .dash-money {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
  }

  .dash-finance .hint { margin-block-start: var(--space-1); font-size: .8125rem; }

  .dash-delta {
    margin: var(--space-1) 0 0;
    font-size: .875rem;

    &.is-up { color: var(--color-ok); }
    &.is-down { color: var(--color-danger); }
  }

  .dash-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-line);

    & dt { color: var(--color-text-muted); font-size: .8125rem; }
    & dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
  }
}