/* ==================================================================================
   KEEPGREEN COMPONENT LIBRARY - BADGES
   ==================================================================================
   Badge components with BEM naming convention.
   Extracted from inline styles in admin user management and status indicators.

   Usage: Apply classes to Bootstrap badge elements for custom styling.
   Example: <span class="badge kg-badge--status-active">Active</span>
   ================================================================================== */

/* ==================================================================================
   STATUS BADGES
   ================================================================================== */

.kg-badge--status-active {
    background-color: var(--kg-color-success);
    color: var(--kg-color-white);
}

.kg-badge--status-locked {
    background-color: var(--kg-color-danger);
    color: var(--kg-color-white);
}

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

/* ==================================================================================
   TASK STATUS BADGES (Due Date Indicators)
   ================================================================================== */

.kg-task-badge--ok {
    color: var(--kg-color-gray-700);
}

.kg-task-badge--today {
    color: var(--kg-color-warning);
    font-weight: var(--kg-font-weight-bold);
}

.kg-task-badge--overdue {
    color: var(--kg-color-danger);
    font-weight: var(--kg-font-weight-bold);
}

/* Badge with opacity (Admin users page) */
.kg-badge--opacity-10 {
    opacity: 0.1;
}

/* ==================================================================================
   DIVIDER & DECORATIVE ELEMENTS
   ================================================================================== */

.kg-divider {
    width: 50px;
    height: 4px;
    background: var(--kg-color-primary);
    border-radius: var(--kg-radius-sm);
    margin-left: auto;
    margin-right: auto;
}

.kg-divider--sm {
    width: 40px;
    height: 3px;
}

.kg-divider--lg {
    width: 60px;
    height: 5px;
}