/**
 * Unified status badges for Game, Tournament (and shared statuses).
 * Use with: <span class="badge badge-status-{slug}">...</span>
 * Slug from status: upcoming, in_progress, completed, cancelled, suspended, archived
 */

/* Base: badge padding and shape */
.badge-status-upcoming,
.badge-status-in_progress,
.badge-status-completed,
.badge-status-cancelled,
.badge-status-suspended,
.badge-status-archived {
    font-weight: 500;
    padding: 0.35em 0.65em;
}

/* UPCOMING -> outline-success */
.badge-status-upcoming {
    background-color: transparent;
    border: 1px solid var(--bs-success);
    color: var(--bs-success);
}

/* IN_PROGRESS -> success (solid green) */
.badge-status-in_progress {
    background-color: var(--bs-success);
    border: 1px solid var(--bs-success);
    color: #fff;
}

/* COMPLETED -> gray */
.badge-status-completed {
    background-color: #6c757d;
    border: 1px solid #6c757d;
    color: #fff;
}

/* CANCELLED / SUSPENDED -> outline-danger */
.badge-status-cancelled,
.badge-status-suspended {
    background-color: transparent;
    border: 1px solid var(--bs-danger);
    color: var(--bs-danger);
}

/* ARCHIVED -> danger (solid red) */
.badge-status-archived {
    background-color: var(--bs-danger);
    border: 1px solid var(--bs-danger);
    color: #fff;
}

/* Mobile/PWA: ensure icon-only badge is square and readable */
@media (max-width: 767.98px) {
    .badge-status-upcoming,
    .badge-status-in_progress,
    .badge-status-completed,
    .badge-status-cancelled,
    .badge-status-suspended,
    .badge-status-archived {
        min-width: 2rem;
        padding: 0.4em 0.5em;
    }
}

/* Game card wrapper: border and header match status colors (e.g. tournament_detail) */
.card-status-upcoming {
    border-color: var(--bs-success);
}
.card-status-upcoming .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--bs-success);
    color: var(--bs-success);
}

.card-status-in_progress {
    border-color: var(--bs-success);
}
.card-status-in_progress .card-header {
    background-color: var(--bs-success);
    border-bottom-color: var(--bs-success);
    color: #fff;
}

.card-status-completed {
    border-color: #6c757d;
}
.card-status-completed .card-header {
    background-color: #6c757d;
    border-bottom-color: #6c757d;
    color: #fff;
}
.card-status-completed .card-header .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

.card-status-cancelled,
.card-status-suspended {
    border-color: var(--bs-danger);
}
.card-status-cancelled .card-header,
.card-status-suspended .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--bs-danger);
    color: var(--bs-danger);
}

.card-status-archived {
    border-color: var(--bs-danger);
}
.card-status-archived .card-header {
    background-color: var(--bs-danger);
    border-bottom-color: var(--bs-danger);
    color: #fff;
}