# MentorKit LMS Pro — Admin UI design system

The canonical look-and-feel for **wp-admin** UI in this plugin (settings pages, meta
boxes, dashboards). Use these tokens and components so every screen — Reports, URL
Settings, Group Settings, Learning Path — feels like one product.

> Reference screens this is derived from: **Reports** card, **URL Settings** card,
> **Group Settings → Courses** field.

---

## Design tokens

| Token | Value | Use |
|---|---|---|
| `--ink` | `#1a2330` | Headings, primary text |
| `--muted` | `#5b6b7b` | Subtitles, secondary text |
| `--grey` | `#6b7787` | Help text, captions |
| `--hair` | `#eef0f3` | Hairline dividers |
| `--card-border` | `#e6e8ee` | Card / section borders |
| `--field-border` | `#c9ccd2` | Inputs, pickers |
| `--blue` | `#2f6fb3` | Primary accent (icons, badges, active toggle) |
| `--blue-d` | `#255c97` | Accent text / hover |
| `--icon-bg` | `#e8effb` | Pale-blue circular icon badge fill |
| `--chip` | `#35689e` | Selected chips (steel blue) |
| `--tint` | `#f4f8fd` | Section headers, soft panels, add-buttons |
| `--ok` | `#0a8a4f` | Done / success |
| `--danger` | `#b3261e` | Destructive (remove) |

**Radii:** card `16px`, section/panel `12px`, inputs/chips/buttons `7–10px`, icon badge `50%`.
**Shadow (cards):** `0 1px 2px rgba(16,24,40,.05), 0 6px 18px rgba(16,24,40,.04)`.
**Type:** system UI stack. Card title `21px/800`, section title `~15px/700`, body `15px`, help `13px`.

---

## Components

### 1. Settings card
White rounded card with a pale-blue circular **icon badge** + bold title + grey
subtitle, a **hairline divider**, then body. Used for standalone settings panels
(Reports, URL Settings).

```
.lms-card            { background:#fff; border:1px solid var(--card-border); border-radius:16px;
                       box-shadow:0 1px 2px rgba(16,24,40,.05),0 6px 18px rgba(16,24,40,.04); }
.lms-card__head      { display:flex; align-items:center; gap:18px; padding:22px 28px; }
.lms-card__icon      { width:52px; height:52px; border-radius:50%; background:var(--icon-bg);
                       display:flex; align-items:center; justify-content:center; }
.lms-card__icon svg  { width:24px; height:24px; color:var(--blue); }
.lms-card__head h2   { font-size:21px; font-weight:800; letter-spacing:-.02em; margin:0; }
.lms-card__head p    { color:var(--muted); margin:3px 0 0; }
.lms-card__divider   { height:1px; background:var(--hair); }
.lms-card__body      { padding:24px 28px 28px; }
```

### 2. Field row (label left / control right)
Used inside meta boxes / settings (Group Settings → Courses pattern).

```
.lms-field           { display:grid; grid-template-columns:170px 1fr; gap:26px; align-items:start; }
.lms-field__label    { font-weight:700; font-size:15px; padding-top:9px; }
.lms-field__help     { color:var(--grey); font-size:13px; margin-top:10px; }
```
On `≤680px`, collapse to a single column.

### 3. Chip multiselect (course/leader picker)
The existing `.scorm-multi-select-container` component (search input + steel-blue
tag chips + dropdown + hidden `<select multiple>`). It is **multi-instance** — its
JS scopes to each container, so you can render several on one screen. Chips use
`--chip`. **Reuse this; do not invent a new picker.**

### 4. Segmented toggle (pill)
For binary/few-option mode switches (Flat / Sections).

```
.lms-seg             { display:inline-flex; background:#eef1f5; border-radius:10px; padding:4px; gap:4px; }
.lms-seg button      { border:0; background:transparent; padding:9px 18px; border-radius:7px;
                       font-weight:600; font-size:13.5px; color:var(--muted); cursor:pointer; }
.lms-seg button.on   { background:#fff; color:var(--blue-d); box-shadow:0 1px 2px rgba(16,24,40,.12); }
```

### 5. Section card (ordered/nested content)
A blue **number badge** + title input + reorder/remove **icon buttons**, then a body.
Used by the Learning Path sections.

```
.lms-sec             { border:1px solid var(--card-border); border-radius:12px; background:#fff; }
.lms-sec__head       { display:flex; align-items:center; gap:11px; padding:12px 14px;
                       background:var(--tint); border-bottom:1px solid #e3ebf5; }
.lms-sec__num        { width:28px; height:28px; border-radius:8px; background:var(--blue); color:#fff;
                       font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.lms-icon-btn        { width:30px; height:30px; border:1px solid #d4dae3; background:#fff; border-radius:8px;
                       color:var(--blue); cursor:pointer; }
.lms-icon-btn.is-del { color:var(--danger); border-color:#eccaca; }
.lms-add             { width:100%; background:var(--tint); border:1.5px dashed #b9cfe9; color:var(--blue-d);
                       font-weight:700; padding:13px; border-radius:11px; cursor:pointer; }
```

### 6. Note callout
```
.lms-note            { display:flex; gap:11px; padding:13px 16px; background:var(--tint);
                       border:1px solid #dce8f5; border-radius:11px; color:var(--muted); }
.lms-note__badge     { background:#dcebfb; color:var(--blue-d); padding:4px 9px; border-radius:999px;
                       font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
```

### 7. Ordered list (sortable course rows)
For any list where **order is meaningful** (sequential-progression course order),
use numbered rows — not wrapping chips. Each row: a grip handle (`⠿`, drag), a
blue **step-number badge**, the title, an optional state pill, and reorder/remove
icon buttons (`.lms-icon-btn`). A dashed **Add** affordance opens a search dropdown
of the not-yet-added items. Drag **and** ▲▼ both reorder (▲▼ disable at the ends);
the hidden `<select multiple>` option order is synced to the row order on every
change. When the order drives gating, show a per-row preview pill: the first row
`is-open` (green dot + "Open"), the rest `is-lock` (🔒 + "unlocks after step N").
Reused for the flat bundle **and** each section's lessons, so reordering feels
identical everywhere. (Implemented as `scorm_group_render_orderlist()`; see
`includes/admin/meta-fields-group-path.php`.)

```
.scorm-orow          { display:flex; align-items:center; gap:11px; border:1px solid var(--field-border);
                       border-radius:10px; padding:9px 11px; background:#fff; }
.scorm-orow.is-locked{ background:#f3f4f6; border-color:#e4e6ea; }
.scorm-onum          { width:28px; height:28px; border-radius:8px; background:var(--blue); color:#fff;
                       font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.scorm-orow.is-locked .scorm-onum { background:#fff; color:#8a93a0; border:1.5px solid #d6dae0; }
.scorm-ostate.is-open{ background:#e7f5ee; color:var(--ok); }   /* ::before "●" */
.scorm-ostate.is-lock{ background:#eceef1; color:#8a93a0; }     /* ::before "🔒" */
```

> **Picker vs. ordered list:** use the **chip multiselect** (component 3) only when
> order is irrelevant (group leaders, user pickers); use this **ordered list** when
> order matters. Don't make chips draggable — the row list is the sortable pattern.

---

## Rules

- **Blue, not purple.** The product accent is `--blue` (`#2f6fb3`). Never introduce a
  second accent hue for admin chrome.
- **Reuse the chip multiselect** (`.scorm-multi-select-container`) for any course/user
  picker — it is already multi-instance.
- **New/beta features still get the `.scorm-beta-badge`** (see CLAUDE.md).
- Card styles can live in `assets/css/admin-styles.css`, **but that file is only
  enqueued on list screens** (`edit-scorm_*`). On the post-**edit** screen (`post.php`)
  meta-box styles must be printed inline in the meta-box callback (as the chip picker
  already does). Keep this in mind when adding admin component CSS.
- Mockups for this system live in `personal-os/projects/sequential-path-tsk-18688/`
  (`design-b-lmspro.html`).

## Two systems: admin vs frontend

This blue token set is the **wp-admin** system. The **frontend learner templates**
(`templates/single-scorm_*`, `assets/css/single-group.css`) have their own
theme-aware token set — `--scorm-group-color-primary` (navy, brand-overridable),
`--scorm-group-color-accent` (gold), `--scorm-group-color-bg` (cream), and
ink-derived neutral tints for done/locked. Frontend components (e.g. the
sequential-path section cards) must use those `--scorm-group-color-*` tokens, not
the admin blue, so they match the learner theme and respect per-site branding.
Rule of thumb: **admin chrome → this doc's blue; learner-facing → `--scorm-group-color-*`.**
