/* ========================================
   Status Badge System - Modern Design
   ======================================== */

/* Base Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 10px;
    border-radius: 4px;
    font-size: 75%;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: all 0.2s ease;
    vertical-align: baseline;
    text-align: center;
}

.status-badge i {
    font-size: 1em;
    line-height: 1;
}

/* Pending Status */
.status-badge-pending {
    background-color: #FFF7E6;
    color: #AD6800;
    border: 1px solid #FFD591;
}

.status-badge-pending i {
    color: #FFA940;
}

/* In Progress Status */
.status-badge-in-progress {
    background-color: #E6F4FF;
    color: #0052A3;
    border: 1px solid #91CAFF;
}

.status-badge-in-progress i {
    color: #4A9EFF;
}

/* Submitted Status */
.status-badge-submitted {
    background-color: #F3E8FF;
    color: #5E35B1;
    border: 1px solid #D3ADF7;
}

.status-badge-submitted i {
    color: #9B6FFF;
}

/* In Review Status */
.status-badge-in-review {
    background-color: #FFFBE6;
    color: #B37800;
    border: 1px solid #FFE58F;
}

.status-badge-in-review i {
    color: #FFB020;
}

/* Success Status */
.status-badge-success {
    background-color: #F6FFED;
    color: #237804;
    border: 1px solid #B7EB8F;
}

.status-badge-success i {
    color: #52C41A;
}

/* Failed Status */
.status-badge-failed {
    background-color: #FFF1F0;
    color: #A8071A;
    border: 1px solid #FFA39E;
}

.status-badge-failed i {
    color: #F5222D;
}

/* Expired/Cancelled Status */
.status-badge-expired {
    background-color: #F5F5F5;
    color: #434343;
    border: 1px solid #D9D9D9;
}

.status-badge-expired i {
    color: #8C8C8C;
}

/* Type Badge Variants (for Quote/Order types) */
.status-badge.bg-success-subtle {
    background-color: #F6FFED;
    color: #237804;
    border: 1px solid #B7EB8F;
}

.status-badge.bg-info-subtle {
    background-color: #E6F4FF;
    color: #0052A3;
    border: 1px solid #91CAFF;
}

.status-badge.bg-warning-subtle {
    background-color: #FFFBE6;
    color: #B37800;
    border: 1px solid #FFE58F;
}

.status-badge.bg-secondary-subtle {
    background-color: #F5F5F5;
    color: #434343;
    border: 1px solid #D9D9D9;
}

.status-badge.bg-primary-subtle {
    background-color: #E6F4FF;
    color: #0052A3;
    border: 1px solid #91CAFF;
}

.status-badge.bg-dark-subtle {
    background-color: #E8E9EA;
    color: #212529;
    border: 1px solid #ADB5BD;
}

.status-badge.bg-danger-subtle {
    background-color: #FFF1F0;
    color: #A8071A;
    border: 1px solid #FFA39E;
}

/* Hover Effects */
.status-badge:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Size Variants */
.status-badge-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    gap: 0.35rem;
}

.status-badge-sm i {
    font-size: 0.875rem;
}

.status-badge-lg {
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
    gap: 0.625rem;
}

.status-badge-lg i {
    font-size: 1.125rem;
}

/* Animation for dotted circle (in-progress) */
@keyframes rotate-dotted {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.status-badge-in-progress .bx-loader-circle,
.status-badge-in-progress .bx-revision {
    animation: rotate-dotted 2s linear infinite;
}

/* ========================================
   Type Badge Variants (Using Glacier Branding)
   ======================================== */

/* Type: Sale - Bright Cobalt */
.status-badge-type-sale {
    background-color: #E8EEF5;
    color: #3C6098;
    border: 1px solid #A8BDDB;
}

.status-badge-type-sale i {
    color: #3C6098;
}

/* Type: Additional - Aegean Sky */
.status-badge-type-additional {
    background-color: #FEF3ED;
    color: #C76E47;
    border: 1px solid #F4C3AA;
}

.status-badge-type-additional i {
    color: #E48B59;
}

/* Type: Warranty - Sea Buckthorn */
.status-badge-type-warranty {
    background-color: #FFF8E6;
    color: #CC9933;
    border: 1px solid #FFE4A3;
}

.status-badge-type-warranty i {
    color: #FFBF65;
}

/* Type: Other - Dancing Mist */
.status-badge-type-other {
    background-color: #F2F4F7;
    color: #6B7A92;
    border: 1px solid #D1D8E3;
}

.status-badge-type-other i {
    color: #BFC8D8;
}