@layer components {
  /* ========================================================================
     INSIGHTS PAGE
     ======================================================================== */

  .insights-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-block-end: var(--space-xl);
  }

  .insights-stat-card {
    padding: var(--space-md);
    border: var(--border);
    border-radius: var(--radius-md);
    background-color: var(--color-canvas);
    text-align: center;
  }

  .insights-stat-card--resolved {
    border-color: oklch(var(--lch-success-medium));
    background-color: oklch(var(--lch-success-lightest));
  }

  .insights-stat-card--total {
    border-color: oklch(var(--lch-primary-medium));
    background-color: oklch(var(--lch-primary-lightest));
  }

  .insights-stat-card--avg {
    border-color: oklch(var(--lch-warning-medium));
    background-color: oklch(var(--lch-warning-lightest));
  }

  .insights-stat-card__value {
    font-size: var(--text-xx-large);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin-block-end: var(--space-xs);
    color: var(--color-text);
  }

  .insights-stat-card__label {
    font-size: var(--text-small);
    color: var(--color-text-muted);
  }

  .insights-section {
    margin-block-end: var(--space-2xl);
  }

  .insights-section__title {
    font-size: var(--text-large);
    font-weight: var(--font-weight-bold);
    margin-block-end: var(--space-sm);
    border-block-end: var(--border);
    padding-block-end: var(--space-xs);
  }

  .insights-table {
    width: 100%;
  }

  .insights-table__th-doctor {
    width: 30%;
  }

  .insights-table__th-num {
    width: 12%;
  }

  .insights-table__th-date {
    width: 18%;
  }

  .insights-table__th-actions {
    width: 10%;
  }

  .insights-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-small);
    font-weight: var(--font-weight-bold);
  }

  .insights-badge--current {
    background-color: oklch(var(--lch-warning-lighter));
    color: oklch(var(--lch-warning-darkest));
    border: 1px solid oklch(var(--lch-warning-light));
  }

  .insights-badge--resolved {
    background-color: oklch(var(--lch-success-lighter));
    color: oklch(var(--lch-success-darkest));
    border: 1px solid oklch(var(--lch-success-light));
  }

  @media (max-width: 768px) {
    .insights-summary {
      grid-template-columns: 1fr;
    }

    .insights-table__th-num,
    .insights-table__th-date {
      display: none;
    }
  }
}