/* ==========================================================================
   Sales Administration System
   Enterprise Badge
   File        : badge.css
   Description : Enterprise Status Badge Component
   Dependency  : theme.css
   ========================================================================== */


/* ==========================================================================
   BASE BADGE
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 26px;
    padding: .35rem .75rem;
    border-radius: var(--radius-pill);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1px solid transparent;
    white-space: nowrap;
    user-select: none;
}

/* ==========================================================================
   BADGE SIZE
   ========================================================================== */

.badge-sm {
    min-height: 22px;
    padding: .20rem .55rem;
    font-size: .70rem;
}

.badge-lg {
    min-height: 32px;
    padding: .50rem .90rem;
    font-size: .82rem;
}

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

.badge-draft {
    background: var(--status-draft-bg);
    color: var(--status-draft-text);
}

.badge-submitted {
    background: var(--status-submitted-bg);
    color: var(--status-submitted-text);
}

.badge-waiting {
    background: var(--status-waiting-bg);
    color: var(--status-waiting-text);
}

.badge-approved {
    background: var(--status-approved-bg);
    color: var(--status-approved-text);
}

.badge-rejected {
    background: var(--status-rejected-bg);
    color: var(--status-rejected-text);
}

.badge-waiting-revision {
    background : var(--status-waiting-revision-bg);
    color: var(--sattus-waiting-revision-text);
}

.badge-completed {
    background: var(--status-completed-bg);
    color: var(--status-completed-text);
}

.badge-cancelled {
    background: var(--status-cancelled-bg);
    color: var(--status-cancelled-text);
}

/* ==========================================================================
   APPROVAL LEVEL
   ========================================================================== */

.badge-waiting-l1 {
    background: #FFF3CD;
    color: #A15C00;
}

.badge-waiting-l2 {
    background: #FFE8C2;
    color: #B35A00;
}

.badge-waiting-l3 {
    background: #FFD8A8;
    color: #B54708;
}

.badge-waiting-l4 {
    background: #FFE5B4;
    color: #9A3412;
}

.badge-waiting-l5 {
    background: #FFF2E2;
    color: #C2410C;
}

/* ==========================================================================
   SOFT
   ========================================================================== */

.badge-soft-primary {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

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

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

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

.badge-soft-secondary {
    background: var(--color-secondary-soft);
    color: var(--color-secondary);
}

/* ==========================================================================
   SOLID
   ========================================================================== */

.badge-primary {
    background: var(--color-primary);
    color: white;
}

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

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

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

.badge-secondary {
    background: var(--color-secondary);
    color: white;
}

/* ==========================================================================
   OUTLINE
   ========================================================================== */

.badge-outline-primary {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

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

.badge-outline-warning {
    background: transparent;
    color: var(--color-warning);
    border-color: var(--color-warning);
}

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

.badge-outline-secondary {
    background: transparent;
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* ==========================================================================
   BADGE WITH ICON
   ========================================================================== */

.badge i {
    font-size: .80rem;
}

.badge-icon {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
}

/* ==========================================================================
   STATUS DOT
   ========================================================================== */

.badge-dot {
    display: inline-flex;
    align-items: center;
    gap: .50rem;
}

    .badge-dot::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
    }

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

.badge-pill {
    border-radius: 999px;
}

/* ==========================================================================
   TABLE BADGE
   ========================================================================== */

.table td .badge {
    vertical-align: middle;
}

/* ==========================================================================
   SUMMARY CARD BADGE
   ========================================================================== */

.summary-card .badge {
    margin-top: .35rem;
}

/* ==========================================================================
   CARD HEADER BADGE
   ========================================================================== */

.card-header .badge {
    margin-left: .35rem;
}

/* ==========================================================================
   BADGE GROUP
   ========================================================================== */

.badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ==========================================================================
   BADGE STACK
   ========================================================================== */

.badge-stack {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* ==========================================================================
   APPROVAL BADGE
   ========================================================================== */

.badge-approval {
    min-width: 120px;
    justify-content: center;
}

/* ==========================================================================
   CUSTOMER TYPE
   ========================================================================== */

.badge-mt {
    background: #EAF2FF;
    color: #0B3D91;
}

.badge-gt {
    background: #EEF8F1;
    color: #198754;
}

.badge-horeca {
    background: #FFF4E8;
    color: #FD7E14;
}

.badge-export {
    background: #F3F4F6;
    color: #374151;
}

/* ==========================================================================
   BOOLEAN BADGE
   ========================================================================== */

.badge-yes {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.badge-no {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

/* ==========================================================================
   PRIORITY
   ========================================================================== */

.badge-priority-high {
    background: #FDECEC;
    color: #B42318;
}

.badge-priority-medium {
    background: #FFF4E5;
    color: #B54708;
}

.badge-priority-low {
    background: #EAF8F0;
    color: #198754;
}

/* ==========================================================================
   ANIMATION
   ========================================================================== */

.badge-pulse {
    animation: badge-pulse 1.8s infinite;
}

@keyframes badge-pulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:768px) {

    .badge {
        font-size: .70rem;
        padding: .30rem .60rem;
    }

    .badge-approval {
        min-width: auto;
    }
}