/* ====================
   Badges Component
   バッジ・ラベルの共通スタイル
   ==================== */

/* ========== バッジ基本 ========== */
.badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border-radius: var(--radius-2xl);
    vertical-align: middle;
}

/* ========== カラーバリエーション ========== */

/* Primary */
.badge-primary {
    background-color: var(--color-primary);
    color: var(--color-text-white);
}

/* Secondary */
.badge-secondary {
    background-color: var(--color-gray-500);
    color: var(--color-text-white);
}

/* Success */
.badge-success {
    background-color: var(--color-success);
    color: var(--color-text-white);
}

/* Warning */
.badge-warning {
    background-color: var(--color-warning);
    color: var(--color-text-white);
}

/* Danger */
.badge-danger {
    background-color: var(--color-error);
    color: var(--color-text-white);
}

/* Info */
.badge-info {
    background-color: var(--color-info);
    color: var(--color-text-white);
}

/* Light */
.badge-light {
    background-color: var(--color-gray-200);
    color: var(--color-text-primary);
}

/* Dark */
.badge-dark {
    background-color: var(--color-gray-800);
    color: var(--color-text-white);
}

/* ========== スキルレベルバッジ ========== */
.level-badge {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--color-gray-200);
    border-radius: var(--radius-2xl);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.level-badge.beginner {
    background-color: #e3f2fd;
    color: #1976d2;
}

.level-badge.intermediate {
    background-color: #fff3e0;
    color: #f57c00;
}

.level-badge.advanced {
    background-color: #fce4ec;
    color: #c2185b;
}

/* ========== ステータスバッジ ========== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-2xl);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

/* 参加申込ステータス */
.status-badge.pending {
    background-color: #fff3e0;
    color: #f57c00;
}

.status-badge.approved {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.status-badge.rejected {
    background-color: #ffebee;
    color: #c62828;
}

.status-badge.cancelled {
    background-color: #f5f5f5;
    color: #757575;
}

/* イベントステータス */
.status-badge.confirmed {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.status-badge.recruiting {
    background-color: #fce4ec;
    color: #c2185b;
}

.status-badge.full {
    background-color: #f5f5f5;
    color: #757575;
}

.status-badge.closed {
    background-color: #ffebee;
    color: #c62828;
}

/* ========== サイズバリエーション ========== */
.badge-sm {
    padding: 2px 8px;
    font-size: 10px;
}

.badge-lg {
    padding: 6px 16px;
    font-size: var(--font-size-sm);
}

/* ========== アウトラインバッジ ========== */
.badge-outline {
    background-color: transparent;
    border: 1px solid currentColor;
}

.badge-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.badge-outline-success {
    color: var(--color-success);
    border-color: var(--color-success);
}

.badge-outline-warning {
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.badge-outline-danger {
    color: var(--color-error);
    border-color: var(--color-error);
}

/* ========== ドット付きバッジ ========== */
.badge-dot::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    margin-right: 6px;
}

/* ========== 数字バッジ（通知など） ========== */
.badge-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background-color: var(--color-error);
    color: var(--color-text-white);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    line-height: 20px;
    text-align: center;
}