/*
====================================================
VoteMVP Chip/Badge Shared Styles
====================================================
Consolidated chip and badge styles used across components
*/

/* Base Chip Styles */
.success-chip,
.info-chip,
.warning-chip {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    display: inline-block;
}

/* Chip Color Variants */
.success-chip {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success);
    border: 1px solid var(--bs-success-border-subtle);
}

.info-chip {
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info);
    border: 1px solid var(--bs-info-border-subtle);
}

.warning-chip {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning);
    border: 1px solid var(--bs-warning-border-subtle);
}

/* Role-Specific Chip Styling */
.role-admin {
    background: var(--bs-danger-bg-subtle) !important;
    color: var(--bs-danger) !important;
    border-color: var(--bs-danger-border-subtle) !important;
}

.role-owner {
    background: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary-border-subtle) !important;
}

.role-manager {
    background: var(--bs-warning-bg-subtle) !important;
    color: var(--bs-warning) !important;
    border-color: var(--bs-warning-border-subtle) !important;
}

.role-treasurer {
    background: var(--bs-info-bg-subtle) !important;
    color: var(--bs-info) !important;
    border-color: var(--bs-info-border-subtle) !important;
}

.role-user {
    background: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary-border-subtle) !important;
}

/* Player Detail Chips */
.jersey-number {
    background: var(--color-primary-500);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.75rem;
    min-width: 2rem;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.position-chip {
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info);
    border: 1px solid var(--bs-info-border-subtle);
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.grade-chip {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success);
    border: 1px solid var(--bs-success-border-subtle);
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.team-chip {
    background: var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary);
    border: 1px solid var(--bs-secondary-border-subtle);
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Chip Container Layouts */
.user-roles,
.team-role {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.player-details {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.25rem;
}

/* Status Chips */
.status-chip {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    display: inline-block;
}

.status-active {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success);
    border: 1px solid var(--bs-success-border-subtle);
}

.status-inactive {
    background: var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary);
    border: 1px solid var(--bs-secondary-border-subtle);
}

.status-pending {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning);
    border: 1px solid var(--bs-warning-border-subtle);
}

.status-waitlisted {
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info);
    border: 1px solid var(--bs-info-border-subtle);
}

.status-cancelled,
.status-refunded,
.status-rejected {
    background: var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary);
    border: 1px solid var(--bs-secondary-border-subtle);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .user-roles,
    .team-role,
    .player-details {
        gap: 0.25rem;
        margin-top: 0.25rem;
    }

    .success-chip,
    .info-chip,
    .warning-chip,
    .jersey-number,
    .position-chip,
    .grade-chip,
    .team-chip,
    .status-chip {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }
}