/* ============================================================================
   Status Badges Component
   Badges for displaying approval status, document status, etc.
   ============================================================================ */

/* Base Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

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

/* Gradient Variants (Solid) */
.status-badge--approved,
.status-badge--success,
.status-badge--published,
.status-badge--active,
.status-badge--present {
    background: var(--gradient-success);
    color: white;
}

.status-badge--pending,
.status-badge--draft,
.status-badge--processing {
    background: var(--gradient-warning);
    color: white;
}

.status-badge--rejected,
.status-badge--danger,
.status-badge--failed,
.status-badge--absent {
    background: var(--gradient-danger);
    color: white;
}

.status-badge--info,
.status-badge--excused {
    background: var(--gradient-info);
    color: white;
}

.status-badge--purple,
.status-badge--new {
    background: var(--gradient-purple);
    color: white;
}

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

.status-badge--secondary,
.status-badge--inactive {
    background: linear-gradient(135deg, var(--gray-400) 0%, var(--gray-500) 100%);
    color: white;
}

/* Light Variants (Soft Background) */
.status-badge--approved-light,
.status-badge--success-light {
    background: var(--status-success-light);
    color: var(--status-success-text);
}

.status-badge--pending-light,
.status-badge--warning-light {
    background: var(--status-warning-light);
    color: var(--status-warning-text);
}

.status-badge--rejected-light,
.status-badge--danger-light {
    background: var(--status-danger-light);
    color: var(--status-danger-text);
}

.status-badge--info-light {
    background: var(--status-info-light);
    color: var(--status-info-text);
}

.status-badge--draft-light,
.status-badge--secondary-light {
    background: var(--gray-100);
    color: var(--gray-600);
}

/* Outline Variants */
.status-badge--outline-success {
    background: transparent;
    border: 2px solid var(--status-success);
    color: var(--status-success);
}

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

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

.status-badge--outline-info {
    background: transparent;
    border: 2px solid var(--status-info);
    color: var(--status-info);
}

/* Size Variants */
.status-badge--sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
}

.status-badge--lg {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* With Dot Indicator */
.status-badge--dot {
    padding-left: 0.6rem;
}

.status-badge--dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-circle);
    background: currentColor;
    margin-right: 0.25rem;
}

/* Payment Status Badges */
.payment-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.75rem;
}

.payment-status--paid {
    background: var(--gradient-success-light);
    color: var(--status-success-text);
}

.payment-status--unpaid {
    background: var(--gradient-danger-light);
    color: var(--status-danger-text);
}

.payment-status--partial {
    background: var(--gradient-warning-light);
    color: var(--status-warning-text);
}

/* Document Status */
.document-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.8rem;
}

.document-status--verified {
    background: var(--gradient-success-light);
    color: var(--status-success-text);
    border: 1px solid var(--border-success);
}

.document-status--pending {
    background: var(--gradient-warning-light);
    color: var(--status-warning-text);
    border: 1px solid var(--border-warning);
}

.document-status--rejected {
    background: var(--gradient-danger-light);
    color: var(--status-danger-text);
    border: 1px solid var(--border-danger);
}

/* Count Badge */
.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.5rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.75rem;
    background: var(--status-danger);
    color: white;
}

.count-badge--success {
    background: var(--status-success);
}

.count-badge--warning {
    background: var(--status-warning);
}

.count-badge--info {
    background: var(--status-info);
}

.count-badge--primary {
    background: var(--ekafa-primary);
}

/* ============================================================================
   Session Type Badges
   ============================================================================ */
.status-badge--morning {
    background: var(--gradient-warning);
    color: white;
}

.status-badge--afternoon {
    background: var(--gradient-info);
    color: white;
}

/* ============================================================================
   Classroom Status Badges
   ============================================================================ */
.status-badge--open {
    background: var(--gradient-success);
    color: white;
}

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

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

/* ============================================================================
   Role Badges
   ============================================================================ */
.badge-role {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-role--admin {
    background: var(--gradient-purple);
    color: white;
}

.badge-role--teacher {
    background: var(--gradient-info);
    color: white;
}

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

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

/* Responsive */
@media (max-width: 768px) {
    .status-badge {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }

    .badge-role {
        padding: 0.35rem 0.75rem;
        font-size: 0.7rem;
    }
}