/* Rubrique MJ « Combats du tour ».
   Palette et espacements viennent de design-system.css. */

.mjcombats-title-icon {
    vertical-align: -3px;
    margin-right: 6px;
}
.mjcombats-spinner {
    margin: 0 auto;
}
.mjcombats-empty {
    padding: var(--space-8);
}
.mjcombats-muted {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 400;
}
.mjcombats-intro {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

/* ===== Barre de sélection ===== */
.mjcombats-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}
.mjcombats-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 220px;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

/* ===== Bataille ===== */
.mjcombats-battle {
    margin-bottom: var(--space-3);
    padding: 0;
}
.mjcombats-battle-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    list-style: revert;
}
.mjcombats-battle-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--color-accent-cyan);
}
.mjcombats-battle-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.mjcombats-battle-meta .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mjcombats-chip {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .15);
    font-size: var(--text-xs);
    color: var(--color-text-primary);
}
.mjcombats-battle-body {
    padding: 0 var(--space-4) var(--space-4);
}

/* ===== Points de vue ===== */
.mjcombats-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.mjcombats-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 3px;
    cursor: pointer;
    font-size: var(--text-sm);
    background: transparent;
    color: var(--color-text-secondary);
}
.mjcombats-tab-active {
    border-color: rgba(0, 229, 255, .5);
    background: rgba(0, 229, 255, .12);
    color: var(--color-accent-cyan);
}
.mjcombats-view + .mjcombats-view {
    margin-top: var(--space-4);
}

/* ===== Étapes de la vue d'ensemble ===== */
.mjcombats-step {
    margin-top: var(--space-3);
    padding-left: var(--space-3);
    border-left: 2px solid rgba(0, 229, 255, .25);
}
.mjcombats-step-title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}
.mjcombats-step-text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 3px 0;
}

@media (max-width: 640px) {
    .mjcombats-field {
        min-width: 100%;
    }
}