.clinical-reminders {
  &.form-builder {
    .notification-meta-row,
    .notification-rule-row {
      gap: 12px;
    }

    .notification-item {
      padding: 16px;
      border-color: var(--color-border-primary);
    }

    /* Card header row: title on the left, remove action on the right */
    .builder-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--color-border-secondary);
    }

    .builder-card-heading {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: var(--font-size-sm);
      font-weight: var(--weight-semi-bold);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--color-text-tertiary);

      i {
        color: var(--color-fg-warning-primary);
      }
    }

    .builder-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;

      &.section-primary {
        margin-bottom: 16px;
        align-items: flex-start;
      }
    }

    .builder-section-hint {
      margin-top: 4px;
      font-size: var(--font-size-xs);
      color: var(--color-text-tertiary);
    }

    .builder-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .builder-item {
      border: 1px solid var(--color-border-secondary);
      border-radius: var(--border-radius-md);
      padding: 12px;
      background-color: var(--color-bg-primary);
    }

    .builder-empty-state {
      color: var(--color-text-tertiary);
      font-size: var(--font-size-sm);
    }
  }

  &.overview {
    .title {
      margin-top: 50px;
      font-size: 27px;
      margin-bottom: 24px;
      font-weight: var(--weight-bold);
    }

    .overview-card {
      border: 1px solid var(--color-border-secondary);
      border-radius: var(--border-radius-lg);
      background-color: var(--color-bg-primary);
      padding: var(--spacing-3xl);
    }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--spacing-3xl);
      margin: 0;

      dt {
        font-size: var(--font-size-xs);
        font-weight: var(--weight-semi-bold);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-text-tertiary);
        margin-bottom: var(--spacing-xs);
      }

      dd {
        margin: 0;
        font-size: var(--font-size-md);
        color: var(--color-text-primary);
      }
    }

    .summary-meta {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
      margin-top: var(--spacing-2xl);
      padding-top: var(--spacing-xl);
      border-top: 1px solid var(--color-border-secondary);
      font-size: var(--font-size-sm);
      color: var(--color-text-secondary);

      strong {
        color: var(--color-text-primary);
        font-weight: var(--weight-semi-bold);
      }
    }

    /* Status pill - mirrors the index list status colors */
    .status-pill {
      display: inline-flex;
      align-items: center;
      padding: var(--spacing-xxs) var(--spacing-md);
      border-radius: var(--border-radius-2xl);
      font-size: var(--font-size-xs);
      font-weight: var(--weight-bold);
      background-color: var(--color-bg-secondary);
      color: var(--color-text-secondary);

      &.draft {
        background-color: var(--color-bg-progress-primary);
        color: var(--color-text-progress-primary);
      }

      &.published {
        background-color: var(--color-bg-success-primary);
        color: var(--color-text-success-primary);
      }

      &.obsolete {
        background-color: var(--color-bg-error-primary);
        color: var(--color-text-error-primary);
      }
    }

    .section-heading {
      margin-top: var(--spacing-5xl);
      margin-bottom: var(--spacing-xl);
      font-size: var(--font-size-lg);
      font-weight: var(--weight-bold);
      color: var(--color-text-primary);
    }

    .empty-note {
      color: var(--color-text-tertiary);
      font-size: var(--font-size-sm);
    }

    .key-chip,
    .prefix-list {
      display: inline-block;
      padding: 1px var(--spacing-sm);
      border-radius: var(--border-radius-xs);
      background-color: var(--color-bg-tertiary);
      color: var(--color-text-secondary);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: var(--font-size-xs);
    }
  }
}