/* ============================================
   STATUS BADGES / CHIPS
   Centralized styles for status indicators
   ============================================ */

/* Base status chip styling */
.status-chip {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill, 50px);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    vertical-align: middle;
    transition: var(--transition-fast, 150ms ease);
}

/* Pending - Amber/Orange */
.status-pending {
    background: var(--status-pending-bg, linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 152, 0, 0.2) 100%));
    color: var(--status-pending-text, #b36b00);
    border: 1px solid var(--status-pending-border, rgba(255, 152, 0, 0.4));
    box-shadow: 0 2px 4px var(--status-pending-shadow, rgba(255, 152, 0, 0.15));
}

/* Confirmed - Green */
.status-confirmed {
    background: var(--status-confirmed-bg, linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(32, 201, 151, 0.2) 100%));
    color: var(--status-confirmed-text, #1a7f37);
    border: 1px solid var(--status-confirmed-border, rgba(40, 167, 69, 0.4));
    box-shadow: 0 2px 4px var(--status-confirmed-shadow, rgba(40, 167, 69, 0.15));
}

/* In Progress - Purple */
.status-inprogress {
    background: var(--status-inprogress-bg, linear-gradient(135deg, rgba(111, 66, 193, 0.15) 0%, rgba(136, 84, 208, 0.2) 100%));
    color: var(--status-inprogress-text, #5a32a3);
    border: 1px solid var(--status-inprogress-border, rgba(111, 66, 193, 0.4));
    box-shadow: 0 2px 4px var(--status-inprogress-shadow, rgba(111, 66, 193, 0.15));
}

/* Completed - Blue */
.status-completed {
    background: var(--status-completed-bg, linear-gradient(135deg, rgba(13, 110, 253, 0.15) 0%, rgba(32, 139, 254, 0.2) 100%));
    color: var(--status-completed-text, #0a58ca);
    border: 1px solid var(--status-completed-border, rgba(13, 110, 253, 0.4));
    box-shadow: 0 2px 4px var(--status-completed-shadow, rgba(13, 110, 253, 0.15));
}

/* Expired - Gray */
.status-expired {
    background: var(--status-expired-bg, linear-gradient(135deg, rgba(108, 117, 125, 0.15) 0%, rgba(134, 142, 150, 0.2) 100%));
    color: var(--status-expired-text, #495057);
    border: 1px solid var(--status-expired-border, rgba(108, 117, 125, 0.4));
    box-shadow: 0 2px 4px var(--status-expired-shadow, rgba(108, 117, 125, 0.15));
}

/* Cancelled - Red */
.status-cancelled {
    background: var(--status-cancelled-bg, linear-gradient(135deg, rgba(220, 53, 69, 0.15) 0%, rgba(235, 87, 100, 0.2) 100%));
    color: var(--status-cancelled-text, #b02a37);
    border: 1px solid var(--status-cancelled-border, rgba(220, 53, 69, 0.4));
    box-shadow: 0 2px 4px var(--status-cancelled-shadow, rgba(220, 53, 69, 0.15));
}

/* Client Cancelled - Dark Gray */
.status-client-cancelled {
    background: var(--status-client-cancelled-bg, linear-gradient(135deg, rgba(33, 37, 41, 0.15) 0%, rgba(52, 58, 64, 0.2) 100%));
    color: var(--status-client-cancelled-text, #212529);
    border: 1px solid var(--status-client-cancelled-border, rgba(33, 37, 41, 0.4));
    box-shadow: 0 2px 4px var(--status-client-cancelled-shadow, rgba(33, 37, 41, 0.15));
}

/* Declined - Solid Red (inverted for emphasis) */
.status-declined {
    background: var(--status-declined-bg, linear-gradient(135deg, rgba(220, 53, 69, 0.85) 0%, rgba(185, 43, 57, 0.95) 100%));
    color: var(--status-declined-text, #ffffff);
    border: 1px solid var(--status-declined-border, rgba(220, 53, 69, 0.6));
    box-shadow: 0 2px 4px var(--status-declined-shadow, rgba(220, 53, 69, 0.25));
}

/* ============================================
   SIZE VARIANTS
   ============================================ */

/* Small variant */
.status-chip-sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
}

/* Large variant */
.status-chip-lg {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
}

/* ============================================
   INTERACTIVE STATES
   ============================================ */

/* Clickable badges */
.status-chip.clickable {
    cursor: pointer;
}

.status-chip.clickable:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

/* ============================================
   SPECIAL BADGE TYPES
   ============================================ */

/* Discount badge - uses confirmed style */
.status-discount {
    background: var(--status-confirmed-bg, linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(32, 201, 151, 0.2) 100%));
    color: var(--status-confirmed-text, #1a7f37);
    border: 1px solid var(--status-confirmed-border, rgba(40, 167, 69, 0.4));
    box-shadow: 0 2px 4px var(--status-confirmed-shadow, rgba(40, 167, 69, 0.15));
}

/* Manual discount - uses pending style */
.status-manual {
    background: var(--status-pending-bg, linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 152, 0, 0.2) 100%));
    color: var(--status-pending-text, #b36b00);
    border: 1px solid var(--status-pending-border, rgba(255, 152, 0, 0.4));
    box-shadow: 0 2px 4px var(--status-pending-shadow, rgba(255, 152, 0, 0.15));
}

/* Payment/Paid badge - uses completed style */
.status-paid {
    background: var(--status-completed-bg, linear-gradient(135deg, rgba(13, 110, 253, 0.15) 0%, rgba(32, 139, 254, 0.2) 100%));
    color: var(--status-completed-text, #0a58ca);
    border: 1px solid var(--status-completed-border, rgba(13, 110, 253, 0.4));
    box-shadow: 0 2px 4px var(--status-completed-shadow, rgba(13, 110, 253, 0.15));
}

/* Active badge - uses confirmed/green style */
.status-active {
    background: var(--status-active-bg, linear-gradient(135deg, rgba(40, 167, 69, 0.15) 0%, rgba(32, 201, 151, 0.2) 100%));
    color: var(--status-active-text, #1a7f37);
    border: 1px solid var(--status-active-border, rgba(40, 167, 69, 0.4));
    box-shadow: 0 2px 4px var(--status-active-shadow, rgba(40, 167, 69, 0.15));
}

/* Inactive badge - uses expired style */
.status-inactive {
    background: var(--status-expired-bg, linear-gradient(135deg, rgba(108, 117, 125, 0.15) 0%, rgba(134, 142, 150, 0.2) 100%));
    color: var(--status-expired-text, #495057);
    border: 1px solid var(--status-expired-border, rgba(108, 117, 125, 0.4));
    box-shadow: 0 2px 4px var(--status-expired-shadow, rgba(108, 117, 125, 0.15));
}

/* Snoozed badge - Purple */
.status-snoozed {
    background: var(--status-snoozed-bg, linear-gradient(135deg, rgba(111, 66, 193, 0.15) 0%, rgba(136, 84, 208, 0.2) 100%));
    color: var(--status-snoozed-text, #5a32a3);
    border: 1px solid var(--status-snoozed-border, rgba(111, 66, 193, 0.4));
    box-shadow: 0 2px 4px var(--status-snoozed-shadow, rgba(111, 66, 193, 0.15));
}