/**
 * Badges Component
 * Universe Moodle Theme
 *
 * - Pill shape (border-radius: 20px)
 * - Various sizes and colors
 *
 * @package AycaHanim
 */

/* ============== BASE BADGE ============== */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
    color: #fff;
    background-color: var(--main-theme-color);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* ============== SIZE VARIANTS ============== */
.badge-xs {
    padding: 3px 6px;
    font-size: 0.65rem;
}

.badge-sm {
    padding: 4px 8px;
    font-size: 0.6875rem;
}

.badge-lg {
    padding: 6px 14px;
    font-size: var(--text-base);
}

/* ============== COLOR VARIANTS ============== */
.badge-primary {
    background-color: var(--main-theme-color);
    color: #fff;
}

.badge-secondary {
    background-color: var(--gray-600);
    color: #fff;
}

.badge-success {
    background-color: var(--success);
    color: #fff;
}

.badge-danger {
    background-color: var(--danger);
    color: #fff;
}

.badge-warning {
    background-color: var(--warning);
    color: var(--gray-900);
}

.badge-info {
    background-color: var(--info);
    color: #fff;
}

.badge-light {
    background-color: var(--gray-100);
    color: var(--gray-800);
}

.badge-dark {
    background-color: var(--gray-900);
    color: #fff;
}

/* ============== OUTLINE VARIANTS ============== */
.badge-outline-primary {
    background-color: transparent;
    color: var(--main-theme-color);
    border: 1px solid var(--main-theme-color);
}

.badge-outline-secondary {
    background-color: transparent;
    color: var(--gray-600);
    border: 1px solid var(--gray-400);
}

.badge-outline-success {
    background-color: transparent;
    color: var(--success);
    border: 1px solid var(--success);
}

.badge-outline-danger {
    background-color: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}

/* ============== SOFT VARIANTS ============== */
.badge-soft-primary {
    background-color: var(--primary-color-100);
    color: var(--main-theme-color);
}

.badge-soft-success {
    background-color: rgba(2, 118, 84, 0.1);
    color: var(--success);
}

.badge-soft-danger {
    background-color: rgba(239, 16, 16, 0.1);
    color: var(--danger);
}

.badge-soft-warning {
    background-color: rgba(247, 183, 66, 0.1);
    color: #8a6d00;
}

.badge-soft-info {
    background-color: rgba(64, 108, 210, 0.1);
    color: var(--info);
}

/* ============== SPECIAL BADGES ============== */
/* Category badge (Course cards) */
.rui-course-cat-badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 0.688rem;
    font-weight: 500;
    color: var(--gray-600);
    background-color: var(--gray-100);
    border-radius: var(--radius-md);
}

/* New badge */
.badge-new {
    background-color: var(--success);
    color: #fff;
}

/* Pro badge */
.badge-pro {
    background-color: var(--warning);
    color: var(--gray-900);
}

/* Featured badge */
.badge-featured {
    background-color: var(--main-theme-color);
    color: #fff;
}

/* Status badges */
.badge-status-active {
    background-color: var(--success);
    color: #fff;
}

.badge-status-pending {
    background-color: var(--warning);
    color: var(--gray-900);
}

.badge-status-inactive {
    background-color: var(--gray-400);
    color: var(--gray-700);
}

.badge-status-cancelled {
    background-color: var(--danger);
    color: #fff;
}

/* ============== BADGE WITH ICON ============== */
.badge i {
    margin-right: 4px;
    font-size: 0.8em;
}

/* ============== NOTIFICATION BADGE ============== */
.badge-notification {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.625rem;
    background-color: var(--danger);
    color: #fff;
    border-radius: 50%;
}

/* ============== BADGE COUNT ============== */
.badge-count {
    padding: 2px 8px;
    font-size: 0.75rem;
    background-color: var(--gray-200);
    color: var(--gray-700);
}