                        <div class="page-header">
                            <div>
                                <h1>Badges</h1>
                                <p class="subtitle">Status pills, priority chips, role badges, category labels, and notification dots — all soft-tinted.</p>
                            </div>
                        </div>

                        <h5 class="section-eyebrow" style="margin-bottom: 8px;">STATUS PILLS</h5>
                        <section class="m-card">
                            <header class="m-card__header"><div><h2 class="m-card__title">Status indicators</h2><p class="m-card__subtitle">Soft-tinted pill badges for state. Use them anywhere status needs to be communicated.</p></div></header>
                            <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
                                <span class="status--process">Active</span>
                                <span class="status--process">Processed</span>
                                <span class="status--approved">Approved</span>
                                <span class="status--denied">Denied</span>
                                <span class="status--denied">Failed</span>
                            </div>
                        </section>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">PRIORITY CHIPS</h5>
                        <section class="m-card">
                            <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
                                <span class="priority-chip priority-chip--high">High</span>
                                <span class="priority-chip priority-chip--medium">Medium</span>
                                <span class="priority-chip priority-chip--low">Low</span>
                            </div>
                        </section>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">ROLE BADGES</h5>
                        <section class="m-card">
                            <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
                                <span class="role admin">Admin</span>
                                <span class="role user">User</span>
                                <span class="role member">Member</span>
                            </div>
                        </section>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">EMAIL CATEGORY LABELS</h5>
                        <section class="m-card">
                            <header class="m-card__header"><div><h2 class="m-card__title">Inline content tags</h2><p class="m-card__subtitle">Used in the inbox to categorize emails — work, personal, social, promotional, alerts.</p></div></header>
                            <div style="display: flex; gap: 6px; flex-wrap: wrap; align-items: center;">
                                <span class="email-item__label email-item__label--work">Work</span>
                                <span class="email-item__label email-item__label--personal">Personal</span>
                                <span class="email-item__label email-item__label--social">Social</span>
                                <span class="email-item__label email-item__label--promo">Promo</span>
                                <span class="email-item__label email-item__label--alert">Alert</span>
                            </div>
                        </section>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">BOOTSTRAP BADGES</h5>
                        <section class="m-card">
                            <header class="m-card__header"><div><h2 class="m-card__title">Bootstrap-class badges</h2><p class="m-card__subtitle">Bootstrap&rsquo;s <code style="background:var(--m-surface-2);padding:1px 6px;border-radius:4px;font-size:12px;">.badge.bg-*</code> classes restyled to use the brand palette.</p></div></header>
                            <div style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;">
                                <span class="badge bg-primary">Primary</span>
                                <span class="badge bg-success">Success</span>
                                <span class="badge bg-warning">Warning</span>
                                <span class="badge bg-danger">Danger</span>
                                <span class="badge bg-info">Info</span>
                            </div>
                        </section>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">COUNTER &amp; NOTIFICATION DOTS</h5>
                        <section class="m-card">
                            <header class="m-card__header"><div><h2 class="m-card__title">Numeric &amp; presence indicators</h2><p class="m-card__subtitle">Notification badges and online-status dots used across the topbar and team listings.</p></div></header>
                            <div style="display: flex; gap: 24px; flex-wrap: wrap; align-items: center;">
                                <div style="position: relative; width: 38px; height: 38px; border-radius: 8px; background: var(--m-surface-2); display: flex; align-items: center; justify-content: center; color: var(--m-text-muted);">
                                    <i class="fa-regular fa-bell"></i>
                                    <span style="position:absolute;top:-4px;right:-4px;background:var(--m-danger);color:#fff;font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:999px;line-height:1.4;">12</span>
                                </div>
                                <div style="position: relative; width: 38px; height: 38px; border-radius: 8px; background: var(--m-surface-2); display: flex; align-items: center; justify-content: center; color: var(--m-text-muted);">
                                    <i class="fa-regular fa-envelope"></i>
                                    <span style="position:absolute;top:8px;right:8px;background:var(--m-danger);width:8px;height:8px;border-radius:50%;"></span>
                                </div>
                                <div style="position: relative;">
                                    <img src="images/icon/avatar-01.jpg" style="width:36px;height:36px;border-radius:50%;object-fit:cover;display:block;">
                                    <span style="position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;background:var(--m-success);border:2px solid var(--m-surface);"></span>
                                </div>
                                <div style="position: relative;">
                                    <img src="images/icon/avatar-04.jpg" style="width:36px;height:36px;border-radius:50%;object-fit:cover;display:block;">
                                    <span style="position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;background:var(--m-warning);border:2px solid var(--m-surface);"></span>
                                </div>
                                <div style="position: relative;">
                                    <img src="images/icon/avatar-06.jpg" style="width:36px;height:36px;border-radius:50%;object-fit:cover;display:block;">
                                    <span style="position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;background:var(--m-text-faint);border:2px solid var(--m-surface);"></span>
                                </div>
                            </div>
                        </section>

                        <h5 class="section-eyebrow" style="margin: 28px 0 8px;">BADGES IN CONTEXT</h5>
                        <section class="m-card">
                            <ul class="card-list" style="margin: 0 -20px;">
                                <li>
                                    <div class="card-list__main">
                                        <span class="card-list__icon"><i class="fa-solid fa-key"></i></span>
                                        <div>
                                            <span class="card-list__title">Production API key</span>
                                            <span class="card-list__sub">Created 8 months ago</span>
                                        </div>
                                    </div>
                                    <span class="status--process">Active</span>
                                </li>
                                <li>
                                    <div class="card-list__main">
                                        <span class="card-list__icon" style="background:var(--m-c2-soft);color:var(--m-c2);"><i class="fa-solid fa-key"></i></span>
                                        <div>
                                            <span class="card-list__title">Staging API key</span>
                                            <span class="card-list__sub">Created 4 months ago</span>
                                        </div>
                                    </div>
                                    <span class="status--approved">In use</span>
                                </li>
                                <li>
                                    <div class="card-list__main">
                                        <span class="card-list__icon" style="background:var(--m-warning-soft);color:var(--m-warning);"><i class="fa-solid fa-key"></i></span>
                                        <div>
                                            <span class="card-list__title">Legacy v1 key</span>
                                            <span class="card-list__sub">Created 3 years ago — deprecated</span>
                                        </div>
                                    </div>
                                    <span class="status--denied">Revoked</span>
                                </li>
                            </ul>
                        </section>

                        <div class="row" style="margin-top: 28px;">
                            <div class="col-md-12">
                                <div class="copyright">
                                    <p>Copyright © 2026 Colorlib. All rights reserved. Template by <a href="https://colorlib.com" rel="nofollow" target="_blank">Colorlib</a>.</p>
                                </div>
                            </div>
                        </div>
