/* =========================================================
   STATUS & STATE COMPONENTS
========================================================= */


/* =========================
   GENERAL STATUS PILL
========================= */

.status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}


/* =========================
   STANDARD STATUS COLOURS
========================= */

.status-yellow,
.status-grey,
.status-orange,
.status-green {
    text-align: center;
    line-height: 1.2rem;
    display: block;
    padding: 4px 8px;
    border-radius: 8px;
    font-weight: 600;
    font-size: .8rem;
}


.status-green {
    background: #e3f7e8;
    color: #1f7a3d;
}



.status-yellow {
    background: #fff3cd;
    color: #8a6d3b;
}

.status-orange {
    background: #fff4d6;
    color: #9c6500;
}

.status-grey {
    background: #eeeeee;
    color: #555555;
}


/* =========================
   SIMPLE STATUS
========================= */

.status {
    padding: 6px 10px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.status.completed {
    background: #e3f7e8;
}

.status.pending {
    background: #fff3cd;
}

.status.not_started {
    background: #eeeeee;
}


/* =========================
   STATUS BADGE
========================= */

.status-badge {
    padding: 8px 12px;
    border-radius: 999px;
    display: inline-block;
    font-weight: 600;
    margin-bottom: 12px;
}


/* =========================
   PROGRAMME PILL
========================= */

.pill {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}


/* Programme completion */

.pill.completed,
.pill.awarded {
    background: #cde7ee;
    color: #04546a;
}

.pill.started {
    background: #eedeb4;
    color: #8a6220;
}

.pill.not_started {
    background: #ececec;
    color: #555555;
}


/* =========================
   AWARD MESSAGE
========================= */

.award-given {
    margin: 0;
    color: #1e7e34;
    font-weight: 500;
}


/* =========================
   STOCK STATUS
========================= */

.stock-badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.stock-badge.good {
    background: #e6f6ea;
    color: #157347;
}

.stock-badge.low {
    background: #fff3cd;
    color: #997404;
}

.stock-badge.out {
    background: #f8d7da;
    color: #b02a37;
}


/* =========================
   SPACE STATUS
========================= */

.space-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.status-good {
    background: #d1fae5;
    color: #065f46;
}

.status-limited {
    background: #fef3c7;
    color: #92400e;
}

.status-full {
    background: #fee2e2;
    color: #991b1b;
}


/* =========================
   MEMBERSHIP / SPACE PILLS
========================= */

.spaces-pill {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.spaces-pill.good {
    background: #e8f7ea;
    color: #2e7d32;
}

.spaces-pill.warning {
    background: #fff4d8;
    color: #9b6b00;
}

.spaces-pill.full {
    background: #fde7e7;
    color: #b71c1c;
}


/* =========================
   ORDER / BADGE TYPE
========================= */

.type-pill {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.type-interest {
    background: #eef2ff;
    color: #1c2674;
}

.type-skills {
    background: #e6f6ea;
    color: #1f7a3d;
}

.type-theme {
    background: #fff3cd;
    color: #8a6d3b;
}

.type-special {
    background: #ffe5e5;
    color: #b00020;
}


/* =========================
   SUCCESS / ERROR STATES
========================= */

.success-message {
    background: #eaf8eb;
    border: 1px solid #b9e1bc;
    color: #246a2b;
    padding: 12px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.message-error {
    background: #ffe5e5;
    color: #b00020;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 15px;
}


/* =========================
   INFORMATION / NOTICE
========================= */

.info-box {
    font-size: 1rem;
}


/* =========================
   MUTED / EMPTY STATES
========================= */

.muted-text {
    color: #888888;
}

.muted-empty {
    color: #7a7a7a;
    margin: 10px 0 0;
}


/* =========================
   ATTENDANCE STATUS
========================= */

.status-icon {
    width: 18px;
    display: inline-block;
    font-weight: 700;
}

.status-icon.present {
    color: limegreen;
}

.status-icon.absent {
    color: red;
}


/* =========================
   MISSED ATTENDANCE
========================= */

.person.missed-3 {
    color: #c40000;
}

.person.missed-3 input {
    accent-color: #c40000;
}