/**
 * Global Status Color Schema
 * Release 2026.5 - Unified status colors across all views
 *
 * Semantic mapping:
 *   Gray   → Initial/New      (draft, open)
 *   Blue   → Active/Running   (active, finalized)
 *   Orange → Pending          (sent)
 *   Green  → Completed        (completed, paid, paid_out)
 *   Red    → Cancelled        (cancelled)
 */

/* ============================================
   Status Badge (read-only display)
   ============================================ */
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Gray — draft, open */
.status-badge.status-draft,
.status-badge.status-open,
.status-badge.draft {
    background: rgba(156, 163, 175, 0.3);
    color: #d1d5db;
}

/* Blue — active, finalized */
.status-badge.status-active,
.status-badge.status-finalized,
.status-badge.active {
    background: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

/* Orange — sent */
.status-badge.status-sent,
.status-badge.sent {
    background: rgba(249, 115, 22, 0.3);
    color: #fdba74;
}

/* Green — completed, paid, paid_out */
.status-badge.status-completed,
.status-badge.status-paid,
.status-badge.status-paid-out,
.status-badge.completed,
.status-badge.paid,
.status-badge.paid-out {
    background: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

/* Red — cancelled */
.status-badge.status-cancelled,
.status-badge.cancelled {
    background: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

/* ============================================
   Status Select (editable dropdown)
   ============================================ */
.status-select {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.status-select:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.status-select:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

.status-select option {
    background: #1e293b;
    color: white;
}

/* Gray — draft, open */
.status-select.status-draft,
.status-select.status-open {
    background: rgba(156, 163, 175, 0.3);
    color: #d1d5db;
    border-color: rgba(156, 163, 175, 0.5);
}

/* Blue — active, finalized */
.status-select.status-active,
.status-select.status-finalized {
    background: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.5);
}

/* Orange — sent */
.status-select.status-sent {
    background: rgba(249, 115, 22, 0.3);
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.5);
}

/* Green — completed, paid, paid_out */
.status-select.status-completed,
.status-select.status-paid,
.status-select.status-paid-out {
    background: rgba(34, 197, 94, 0.3);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.5);
}

/* Red — cancelled */
.status-select.status-cancelled {
    background: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.5);
}

/* Gray — inactive (user accounts) */
.status-select.status-inactive,
.status-badge.status-inactive {
    background: rgba(156, 163, 175, 0.3);
    color: #d1d5db;
    border-color: rgba(156, 163, 175, 0.5);
}