/* ═══════════════════════════════════════════════════════════════════════════
   TENDER84 V5 — BADGES COMPONENT
   Status badges, sector badges, district chips, value chips, urgency badges.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base Badge ── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 10px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    border-radius: var(--radius-full);
    white-space: nowrap;
    vertical-align: middle;
}

.badge i {
    font-size: 0.7rem;
}

/* ── Status Badges ── */
.badge-status-live {
    background: var(--color-success-100);
    color: var(--color-success-700);
}

.badge-status-expired {
    background: var(--color-gray-200);
    color: var(--color-gray-600);
}

.badge-status-closing-soon {
    background: var(--color-danger-100);
    color: var(--color-danger-700);
    animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ── Sector Badge (colored by domain) ── */
.badge-sector {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge-sector-works {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.badge-sector-goods {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.badge-sector-services {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
}

.badge-sector-consulting {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.badge-sector-default {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    border: 1px solid var(--color-gray-200);
}

/* ── District Chip ── */
.badge-district {
    font-size: var(--font-size-xs);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
    font-weight: var(--font-weight-medium);
}

.badge-district i {
    font-size: 0.65rem;
    margin-right: 2px;
}

/* ── Tender Value Badge ── */
.badge-value {
    font-size: var(--font-size-xs);
    padding: 3px 10px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    font-weight: var(--font-weight-bold);
    border: 1px solid #fcd34d;
    letter-spacing: 0.02em;
}

/* ── EMD Badge ── */
.badge-emd {
    font-size: var(--font-size-xs);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    border: 1px solid var(--color-gray-200);
    font-weight: var(--font-weight-medium);
}

.badge-emd i {
    color: var(--color-accent-600);
}

/* ── Portal Badge ── */
.badge-portal {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-accent-50);
    color: var(--color-accent-700);
    border: 1px solid var(--color-accent-200);
    font-weight: var(--font-weight-medium);
}

/* ── Urgency Badge ── */
.badge-urgency {
    font-size: var(--font-size-xs);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--color-danger-500);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    animation: badge-pulse 1.8s infinite;
}

/* ── GEM / Global Badge ── */
.badge-gte {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* ── Cached / Live Data Source Badge ── */
.badge-source-cached {
    font-size: 0.62rem;
    padding: 2px 8px;
    background: var(--color-warning-100);
    color: var(--color-warning-600);
}

.badge-source-live {
    font-size: 0.62rem;
    padding: 2px 8px;
    background: var(--color-success-100);
    color: var(--color-success-600);
}