/**
 * CPH LEA Shared Design Tokens
 * Colors, type, chip/progress-bar/card primitives shared by Group
 * Management, Reports, Courses, and My Profile. Page-specific plugins
 * enqueue this alongside their own stylesheet and build on these classes
 * rather than redefining chip/bar/card styles locally.
 */

:root {
    --cph-blue: #0B5CB6;
    --cph-navy: #0A2545;
    --cph-gold: #EFA00B;
    --cph-action-blue: #2F86D6;
    --cph-green: #3FA34D;
    --cph-purple: #7A4FB0;
    --cph-danger: #B23B3B;

    --cph-page-bg: #F7F9FC;
    --cph-panel-bg: #F3F7FC;
    --cph-card-white: #FFFFFF;
    --cph-card-border: #E7ECF3;
    --cph-row-divider: #F0F3F7;
    --cph-table-header-bg: #F6F8FC;

    --cph-muted: #6A7480;
    --cph-faint: #7A8592;
    --cph-faint-2: #9AA4B0;
    --cph-ink: #26303B;

    --cph-font-display: 'Nunito', sans-serif;
    --cph-font-body: 'Mulish', sans-serif;

    --cph-radius-card: 14px;
    --cph-radius-control: 10px;
}

/* ---------- Page shell ---------- */
.cph-lea-page {
    background: var(--cph-page-bg);
    padding: 40px clamp(28px, 4vw, 52px);
}

.cph-lea-page h1 {
    font-family: var(--cph-font-display);
    font-weight: 800;
    font-size: 32px;
    color: var(--cph-navy);
    margin: 0 0 8px;
}

.cph-lea-page h2 {
    font-family: var(--cph-font-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--cph-navy);
    margin: 0 0 16px;
}

/* ---------- Cards ---------- */
.cph-lea-card {
    background: var(--cph-card-white);
    border: 1px solid var(--cph-card-border);
    border-radius: var(--cph-radius-card);
    padding: 24px;
}

/* ---------- Stat tiles ---------- */
.cph-lea-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin: 24px 0;
}

.cph-lea-stat-tile {
    background: var(--cph-card-white);
    border: 1px solid var(--cph-card-border);
    border-radius: var(--cph-radius-card);
    padding: 20px 24px;
}

.cph-lea-stat-tile .cph-lea-stat-label {
    font-family: var(--cph-font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--cph-muted);
    margin-bottom: 6px;
}

.cph-lea-stat-tile .cph-lea-stat-value {
    font-family: var(--cph-font-display);
    font-weight: 800;
    font-size: 28px;
    color: var(--cph-navy);
}

.cph-lea-stat-tile .cph-lea-stat-value.is-green { color: var(--cph-green); }
.cph-lea-stat-tile .cph-lea-stat-value.is-gold { color: var(--cph-gold); }
.cph-lea-stat-tile .cph-lea-stat-value.is-amber { color: #9A6300; }

/* ---------- Status chips ---------- */
.cph-lea-chip {
    display: inline-block;
    border-radius: 20px;
    padding: 4px 11px;
    font-family: var(--cph-font-body);
    font-weight: 700;
    font-size: 11px;
    white-space: nowrap;
}

.cph-lea-chip.is-completed { color: #1B7A2E; background: #E4F5E8; }
.cph-lea-chip.is-in-progress { color: #9A6300; background: #FCF0D9; }
.cph-lea-chip.is-not-started { color: #5A6672; background: #EEF1F5; }
.cph-lea-chip.is-pending { color: #9A6300; background: #fff; border: 1px solid #F0CA80; padding: 3px 10px; }

/* ---------- Progress bar ---------- */
.cph-lea-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cph-lea-progress-track {
    flex: 1 1 auto;
    height: 7px;
    background: #EEF1F5;
    border-radius: 5px;
    overflow: hidden;
}

.cph-lea-progress-fill {
    height: 100%;
    border-radius: 5px;
    background: #DCE2EA; /* 0% */
}

.cph-lea-progress-fill.is-started { background: var(--cph-gold); }
.cph-lea-progress-fill.is-complete { background: var(--cph-green); }

.cph-lea-progress-label {
    font-family: var(--cph-font-body);
    font-weight: 700;
    font-size: 12px;
    color: #4A5763;
    white-space: nowrap;
}

/* ---------- Avatar ---------- */
.cph-lea-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-family: var(--cph-font-body);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

/* ---------- Buttons ---------- */
.cph-lea-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--cph-radius-control);
    font-family: var(--cph-font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
}

.cph-lea-btn-primary {
    background: var(--cph-action-blue);
    color: #fff;
}

.cph-lea-btn-primary:hover { background: #276fb0; }

.cph-lea-btn-secondary {
    background: #EAF2FC;
    color: var(--cph-blue);
    border-color: #CFE0F5;
}

.cph-lea-btn-secondary:hover { background: #dcebfa; }

.cph-lea-btn-ghost {
    background: #fff;
    color: var(--cph-blue);
    border-color: var(--cph-card-border);
}

.cph-lea-btn-danger {
    background: #fff;
    color: var(--cph-danger);
    border-color: var(--cph-danger);
}

.cph-lea-btn-danger:hover { background: var(--cph-danger); color: #fff; }

.cph-lea-btn-sm {
    height: 30px;
    padding: 0 12px;
    font-size: 12.5px;
    border-radius: 8px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .cph-lea-stat-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

@media (max-width: 640px) {
    .cph-lea-nav { flex-direction: column; align-items: flex-start; }
    .cph-lea-nav-links { width: 100%; justify-content: space-between; gap: 12px; }
}