@layer components {
  .dashboard {
    max-width: var(--main-width);
    margin: 0 auto;
    padding: calc(var(--block-space) * 2);
  }

  .dashboard-header {
    align-items: center;
    display: flex;
    gap: calc(var(--inline-space) * 2);
    justify-content: space-between;
    margin-bottom: calc(var(--block-space) * 2);
  }

  .dashboard-header h1 {
    margin-bottom: 0;
  }

  .dashboard-filters {
    align-items: center;
    display: flex;
    gap: calc(var(--inline-space) * 1.5);
    margin-bottom: calc(var(--block-space) * 2);
  }

  .dashboard-filters label {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    font-weight: 500;
  }

  .dashboard-filters .input--select {
    width: auto;
  }

  .no-data-message {
    background: oklch(var(--lch-ink-lightest) / 85%);
    border-radius: 0.25rem;
    box-shadow: var(--shadow);
    color: var(--color-ink-dark);
    padding: calc(var(--block-space) * 2);
    text-align: center;
  }

  .error-message {
    background: oklch(var(--lch-red-dark) / 15%);
    border-radius: 0.25rem;
    color: var(--color-negative);
    padding: var(--block-space);
    text-align: center;
  }

  /* Probe Status Matrix */
  .probe-status__header,
  .probe-status__row {
    display: grid;
    gap: 0;
    grid-template-columns: minmax(200px, 1fr) repeat(var(--cols), 1fr);
  }

  .probe-status__header > *,
  .probe-status__row > * {
    min-width: 8em;
    padding: calc(var(--block-space) * 0.75) var(--block-space);
    white-space: nowrap;
  }

  .probe-status-cell-link {
    color: inherit;
    display: block;
    text-decoration: none;
  }

  .probe-status-cell-link:hover {
    opacity: 0.8;
  }

  .probe-status-row--down {
    background: oklch(var(--lch-red-dark) / 8%);
  }

  .probe-status-cell--up {
    background: oklch(var(--lch-green-dark) / 10%);
  }

  .probe-status-cell--down {
    background: oklch(var(--lch-red-dark) / 15%);
  }

  .probe-status-cell--stale {
    background: oklch(75% 0.1 85 / 15%);
  }

  .probe-status-indicator {
    font-weight: 600;
    display: block;
  }

  .probe-status-indicator--up {
    color: var(--color-positive);
  }

  .probe-status-indicator--down {
    color: var(--color-negative);
  }

  .probe-status-indicator--stale {
    color: oklch(75% 0.15 85);
  }

  .probe-status-indicator--unknown {
    color: var(--color-ink-medium);
  }

  @media (max-width: 85ch) {
    .dashboard {
      padding: var(--block-space);
    }

    .dashboard-header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--block-space);
    }

    .dashboard-filters {
      flex-wrap: wrap;
    }
  }

  @media (max-width: 55ch) {
    .probe-status__header {
      display: none;
    }

    .probe-status__row {
      grid-template-columns: 1fr;
    }

    .probe-status__row > .sticky-left {
      position: static;
    }

    .probe-status__row > [data-label] {
      display: flex;
      align-items: center;
      gap: var(--inline-space);
      text-align: left;

      &::before {
        content: attr(data-label);
        font-size: var(--text-x-small);
        font-weight: 500;
        min-width: 10em;
      }
    }
  }
}