@layer components {
  .stat-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);

    .stat-card__header {
      padding: var(--space-2) var(--space-5) 0;
      .stat-card__label {
        font-weight: var(--font-medium);
        color: var(--color-gray-600);
        text-align: left;
      }
    }

    .stat-card__body {
      padding: var(--space-2) var(--space-5) var(--space-5);
      margin-top: auto;
      .stat-card__value {
        font-size: var(--text-3xl);
        font-weight: var(--font-bold);
        text-align: left;
      }
    }

    .stat-card__link {
      display: inline-block;
      margin-top: var(--space-2);
      font-size: var(--text-sm);
      color: var(--color-link);
      text-decoration: none;
    }

    .stat-card__link:hover {
      text-decoration: underline;
    }

    &.stat-card--info {
      border-color: var(--color-info);
    }
    &.stat-card--warning {
      border-color: var(--color-warning);
    }
    &.stat-card--error {
      border-color: var(--color-error);
    }
  }

  /* Dark Mode */
  [data-theme="dark"] {
    .stat-card {
      background: var(--color-surface);
    }
  }
}