/* =========================================================
   Beyond Lightspeed — Catalogues MJ (technologies, bâtiments, composants)
   Onglets, barre de sélection, édition groupée en tableau, étiquettes de
   prérequis et listes de contrôle (orphelins, anomalies). Les pages MJ de
   catalogue écrivaient ces styles en ligne, recopiés de page en page.
   ========================================================= */

/* ── Utilitaires de la page ── */
.mjcat-muted  { color: var(--color-text-muted); }
.mjcat-green  { color: var(--color-accent-green); }
.mjcat-code {
    font-size: var(--text-xs);
    color: var(--primary-color);
}
.mjcat-right  { text-align: right; }
.mjcat-center { text-align: center; }
.mjcat-nowrap { white-space: nowrap; }
.mjcat-spacer { flex: 1; }
.mjcat-mt2 { margin-top: 2px; }
.mjcat-mb2 { margin-bottom: 2px; }
.spinner.mjcat-spinner-sm { width: 16px; height: 16px; }
.spinner.mjcat-spinner-xs { width: 14px; height: 14px; }

/* ── Onglets de la page ── */
.mjcat-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 1.5rem;
}
.mjcat-tab {
    padding: 10px 22px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: var(--color-text-muted);
    font-weight: normal;
    font-size: var(--text-sm);
    transition: color 0.15s;
}
.mjcat-tab.is-warn { color: var(--color-accent-amber); }
.mjcat-tab.is-active {
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: bold;
}

/* ── Filtre et barre de sélection ── */
.mjcat-filter { margin-bottom: 1rem; }
.form-input.mjcat-filter-input {
    max-width: 340px;
    font-size: var(--text-sm);
}
.mjcat-selbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: rgba(0, 230, 118, 0.06);
    border: 1px solid rgba(0, 230, 118, 0.2);
    border-radius: 8px;
}
.mjcat-selbar-count {
    font-size: var(--text-sm);
    color: var(--color-accent-green);
    font-weight: 600;
}
.mjcat-selbar-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 16px;
    padding: 0 4px;
}
.btn.mjcat-btn-compact {
    font-size: 12px;
    padding: 5px 14px;
}
.btn.mjcat-btn-green {
    color: var(--color-accent-green);
    border-color: rgba(0, 230, 118, 0.3);
}
.btn.mjcat-mt1 { margin-top: 1rem; }
.btn.mjcat-row-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
}
.btn.mjcat-row-btn--first { margin-right: 0.5rem; }
.btn.mjcat-btn-xs {
    padding: 0.2rem 0.6rem;
    font-size: var(--text-xs);
}

/* ── Liste principale ── */
.card-body.mjcat-flush { padding: 0; }
.mjcat-th-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.mjcat-th-check,
.mjcat-td-check {
    text-align: center;
    padding: 8px 4px;
}
.mjcat-th-check { width: 36px; }
.mjcat-checkbox {
    cursor: pointer;
    accent-color: var(--color-accent-green);
}
.mjcat-sort {
    margin-left: 4px;
    color: var(--color-text-muted);
}
.mjcat-sort.is-active { color: var(--primary-color); }
.mjcat-row { border-left: 3px solid transparent; }
.mjcat-row.is-selected { background: rgba(0, 230, 118, 0.04); }
/* Clé désaccordée : la ligne est signalée en rouge, sélection ou non. */
.mjcat-row.has-issue {
    background: rgba(255, 77, 79, 0.07);
    border-left-color: var(--color-accent-red);
}
.mjcat-key-flag {
    margin-left: 6px;
    color: var(--color-accent-red);
    font-size: var(--text-xs);
    cursor: help;
}
.mjcat-issue {
    font-size: var(--text-xs);
    color: #ff8080;
    margin-top: 2px;
    line-height: 1.35;
}
.mjcat-vis {
    padding: 0.2rem 0.5rem;
    font-size: var(--text-xs);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-secondary);
}
.mjcat-vis.is-public {
    background: rgba(0, 230, 118, 0.15);
    color: var(--color-accent-green);
}
.mjcat-effects {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mjcat-tag {
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 4px;
    border-radius: 3px;
    margin-right: 4px;
    font-size: var(--text-xs);
    color: var(--primary-color);
}

/* ── Contrôles : orphelins et anomalies ── */
.mjcat-sections {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.mjcat-note {
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    padding: 10px 14px;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}
.card-header .mjcat-card-title {
    margin: 0;
    font-size: 14px;
}
.card-header .mjcat-card-title--red   { color: var(--color-accent-red); }
.card-header .mjcat-card-title--amber { color: var(--color-accent-amber); }
.mjcat-card-count {
    margin-left: 8px;
    font-size: 12px;
    font-weight: normal;
    color: var(--color-accent-green);
}
.mjcat-card-count.is-warn { color: var(--color-accent-amber); }
.mjcat-card-count--note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mjcat-ok-line {
    padding: 1rem;
    color: var(--color-accent-green);
    font-size: var(--text-sm);
}
.mjcat-pill {
    font-size: var(--text-xs);
    background: rgba(255, 255, 255, 0.07);
    padding: 1px 5px;
    border-radius: 3px;
}
.mjcat-explain {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 0;
    line-height: 1.6;
}
.mjcat-issues {
    font-size: var(--text-xs);
    color: #ff8080;
}
.mjcat-dup {
    background: rgba(255, 82, 82, 0.15);
    color: var(--color-accent-red);
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 4px;
    font-size: var(--text-xs);
}
.mjcat-json {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    max-width: 300px;
}

/* ── Fiche d'édition (modale) ── */
.mjcat-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mjcat-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.form-label.mjcat-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.form-label.mjcat-check--spaced { margin-bottom: 8px; }
.mjcat-box {
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.form-label.mjcat-box-title {
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--primary-color);
}
.form-group.mjcat-group-spaced { margin-bottom: 12px; }
.form-input.mjcat-mono {
    font-family: monospace;
    font-size: 12px;
}
.form-input.mjcat-prereq-search {
    margin-bottom: 8px;
    font-size: var(--text-sm);
}
.mjcat-prereq-list {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
}
.mjcat-prereq-empty {
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
    padding: 12px;
}
.mjcat-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mjcat-prereq-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    background: transparent;
}
.mjcat-prereq-item.is-selected { background: rgba(255, 255, 255, 0.04); }
.mjcat-code-muted {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* Étiquettes de prérequis retirables. */
.mjcat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.mjcat-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.mjcat-chip {
    font-size: var(--text-xs);
    background: rgba(124, 77, 255, 0.15);
    color: #b388ff;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mjcat-chip--wide { padding: 2px 7px; }
.btn-reset.mjcat-chip-x {
    cursor: pointer;
    font-weight: bold;
}
.btn-reset.mjcat-chip-x--soft {
    opacity: 0.7;
    line-height: 1;
}
.mjcat-none {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}
.mjcat-none--spaced { margin-right: 8px; }

/* ── Édition groupée en tableau ── */
.mjcat-subtabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    padding: 0 16px;
}
.mjcat-subtab {
    padding: 10px 18px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: var(--color-text-muted);
    font-weight: normal;
    font-size: 12px;
    transition: color 0.15s;
}
.mjcat-subtab.is-active {
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: bold;
}
.mjcat-bulk-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
}
.mjcat-th {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--text-xs);
    font-weight: bold;
    white-space: nowrap;
    text-align: left;
}
/* En-tête opaque : il est figé, les lignes défilent dessous. */
.mjcat-bulk-table--opaque .mjcat-th { background: #131b2d; }
.mjcat-th.mjcat-center { text-align: center; }
/* Première colonne figée à gauche (en-tête et cellules) ; le sélecteur
   l'emporte sur `.table-sticky-head thead th` pour garder l'en-tête figé
   au-dessus des autres. */
.mjcat-bulk-table th.mjcat-th--sticky {
    background: #0e0f1a;
    position: sticky;
    left: 0;
    z-index: 3;
}
/* Deux classes : l'emporte sur `tr:last-child td`, qui ôterait la bordure
   basse de la dernière ligne. */
.mjcat-bulk-table .mjcat-td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}
.mjcat-td.mjcat-center { text-align: center; }
.mjcat-td--sticky {
    background: #0e0f1a;
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.mjcat-minw-80  { min-width: 80px; }
.mjcat-minw-90  { min-width: 90px; }
.mjcat-minw-150 { min-width: 150px; }
.mjcat-minw-170 { min-width: 170px; }
.mjcat-minw-180 { min-width: 180px; }
.mjcat-minw-230 { min-width: 230px; }
.mjcat-minw-400 { min-width: 400px; }
.mjcat-row-name {
    font-weight: bold;
    color: var(--color-text-primary);
    font-size: var(--text-xs);
}
.mjcat-row-code {
    font-size: var(--text-xs);
    color: var(--primary-color);
    margin-top: 1px;
}
.mjcat-cell-input {
    background: #131421;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--color-text-primary);
    padding: 4px 7px;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}
.mjcat-cell-input--inline {
    width: auto;
    min-width: 160px;
    flex: 0 0 auto;
}

/* =========================================================
   Catalogues à colonnes : composants (et bâtiments)
   ========================================================= */
.mjcat-amber { color: var(--color-accent-amber); }

/* ── Barre de filtres et onglets de colonnes de la liste ── */
.mjcat-filterbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
}
.form-input.mjcat-filterbar-search {
    flex: 1 1 280px;
    min-width: 220px;
    font-size: var(--text-sm);
    padding: 6px 10px;
}
.form-input.mjcat-filterbar-select {
    width: auto;
    min-width: 170px;
    font-size: var(--text-sm);
    padding: 6px 10px;
}
.btn.mjcat-btn-reset {
    font-size: 12px;
    padding: 5px 12px;
}
.mjcat-filterbar-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-left: auto;
}
.mjcat-selbar--anim { animation: fadeIn 0.2s ease; }
.mjcat-selbar-clear--tight { line-height: 1; }

/* Onglets verts (liste et édition groupée). */
.mjcat-gtabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    overflow-x: auto;
}
.mjcat-ltabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--color-border);
}
.mjcat-gtab {
    padding: 10px 18px;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 400;
    white-space: nowrap;
    transition: all 0.15s;
}
.mjcat-gtab--list { padding: 9px 16px; }
.mjcat-gtab.is-active {
    background: rgba(0, 230, 118, 0.08);
    color: var(--color-accent-green);
    border-bottom-color: var(--color-accent-green);
    font-weight: 600;
}

/* ── Liste : colonnes de sélection, de nom et d'actions figées ──
   Fond opaque : les colonnes défilent dessous. Les sélecteurs l'emportent
   sur `.table-sticky-head thead th`, le survol des lignes et celui de
   `.editable-cell`, qui rendraient le fond translucide. */
.mjcat-list { min-width: 100%; }
.mjcat-list .mjcat-sticky-check,
.mjcat-list .mjcat-sticky-name,
.mjcat-list .mjcat-sticky-actions { position: sticky; }
.mjcat-list th.mjcat-sticky-check,
.mjcat-list td.mjcat-sticky-check {
    left: 0;
    text-align: center;
    padding: 8px 4px;
    background: #091224;
}
.mjcat-list th.mjcat-sticky-check { width: 36px; }
.mjcat-list th.mjcat-sticky-name,
.mjcat-list td.mjcat-sticky-name {
    left: 36px;
    background: #091224;
    border-right: 1px solid var(--color-border);
    min-width: 190px;
}
.mjcat-list th.mjcat-sticky-actions,
.mjcat-list td.mjcat-sticky-actions {
    right: 0;
    background: #091224;
    text-align: right;
    border-left: 1px solid var(--color-border);
}
.mjcat-list td.mjcat-sticky-actions { white-space: nowrap; }
.mjcat-list th.mjcat-sticky-check,
.mjcat-list th.mjcat-sticky-name,
.mjcat-list th.mjcat-sticky-actions { z-index: 3; }
.mjcat-list td.mjcat-sticky-check,
.mjcat-list td.mjcat-sticky-name,
.mjcat-list td.mjcat-sticky-actions { z-index: 2; }
.mjcat-list tr.is-selected { background: rgba(0, 230, 118, 0.04); }
.mjcat-list tr.is-selected td.mjcat-sticky-check,
.mjcat-list tr.is-selected td.mjcat-sticky-name,
.mjcat-list tr.is-selected td.mjcat-sticky-actions {
    background: linear-gradient(rgba(0, 230, 118, 0.06), rgba(0, 230, 118, 0.06)), #091224;
}
.mjcat-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.mjcat-num-h {
    text-align: right;
    white-space: nowrap;
}
/* Les libellés de caracs sont longs : ils passent à la ligne plutôt que
   d'étirer le tableau sur plusieurs écrans. */
.mjcat-wrap-h {
    text-align: right;
    white-space: normal;
    line-height: 1.25;
    max-width: 120px;
    letter-spacing: 0.04em;
}
.mjcat-th-sub {
    font-size: var(--text-xs);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.mjcat-faint {
    color: #3d4a63;
    font-style: italic;
}
.mjcat-faint-cell {
    color: #3d4a63;
    font-style: italic;
    font-size: 12px;
}
.mjcat-empty-row {
    text-align: center;
    padding: 28px;
    color: var(--color-text-muted);
}
.badge.mjcat-type-badge {
    padding: 0.2rem 0.5rem;
    font-size: var(--text-xs);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--primary-color);
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Fiche d'un élément : blocs, grilles et lignes de saisie ── */
.mjcat-grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.mjcat-grid5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.mjcat-box--green {
    background: rgba(0, 230, 118, 0.03);
    border-color: rgba(0, 230, 118, 0.1);
}
.form-label.mjcat-box-title--green { color: var(--color-accent-green); }
.form-label.mjcat-box-title--flush { margin: 0; }
.mjcat-box-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.mjcat-box-empty {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
    padding: 8px;
}
.mjcat-hint {
    margin: -4px 0 12px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mjcat-hint-inline {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}
.form-label.mjcat-subtitle {
    font-size: 12px;
    font-weight: bold;
    margin-top: 8px;
    display: block;
}
.form-label.mjcat-ellipsis {
    font-size: var(--text-xs);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.form-input.mjcat-input-xs {
    padding: 4px 6px;
    font-size: var(--text-xs);
}
.btn.mjcat-btn-tiny {
    padding: 2px 8px;
    font-size: var(--text-xs);
}
.mjcat-stack--8 { gap: 8px; }
.mjcat-line {
    display: flex;
    gap: 8px;
    align-items: center;
}
.form-input.mjcat-line-main {
    flex: 2;
    font-size: 12px;
    padding: 4px 8px;
}
.form-input.mjcat-line-value {
    flex: 1;
    font-size: 12px;
    padding: 4px 8px;
    width: 80px;
}
.btn.mjcat-line-remove {
    padding: 6px 10px;
    font-size: 12px;
}

/* ── Édition groupée transposée : un champ par ligne, un élément par colonne ── */
/* Dans l'en-tête de la modale, qui fixe la taille de ses titres. */
.modal .mjcat-modal-title {
    margin: 0;
    font-size: 15px;
    color: var(--color-accent-green);
}
.mjcat-modal-sub {
    margin: 2px 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.btn.mjcat-btn-text-sm { font-size: var(--text-sm); }
.mjcat-grid-table {
    width: 100%;
    border-collapse: collapse;
}
.mjcat-grid-table .mjcat-td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}
.mjcat-th.mjcat-th--top {
    position: sticky;
    top: 0;
    z-index: 2;
}
.mjcat-th.mjcat-th--corner {
    background: #0e0f1a;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 4;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.mjcat-td--field {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
}
.mjcat-minw-155 { min-width: 155px; }
.mjcat-minw-165 { min-width: 165px; }
.mjcat-minw-175 { min-width: 175px; }
.mjcat-minw-200 { min-width: 200px; }
.mjcat-minw-250 { min-width: 250px; }
.mjcat-hcode {
    color: var(--color-accent-green);
    font-size: var(--text-xs);
    font-weight: 400;
}
.mjcat-hname {
    color: #ddd;
    font-size: var(--text-xs);
}
.mjcat-rname {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}
.mjcat-field-desc {
    font-size: var(--text-xs);
    color: #484868;
    font-weight: 400;
}
.mjcat-na {
    color: #383850;
    font-size: var(--text-xs);
    font-style: italic;
}
.mjcat-cell-input--tight { padding: 2px; }
.mjcat-cell-input--auto { width: auto; }
.mjcat-cell-input.is-absent { opacity: 0.4; }
.mjcat-col-fill {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.mjcat-addbar {
    padding: 10px 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}
.mjcat-addbar-label {
    font-size: 12px;
    color: #777;
}
.btn.mjcat-btn-add {
    padding: 4px 14px;
    font-size: 12px;
}
.mjcat-grid-empty {
    padding: 40px;
    text-align: center;
    color: #404060;
    font-size: var(--text-sm);
}
.mjcat-scroll {
    overflow: auto;
    flex: 1;
}
.mjcat-colname {
    font-size: var(--text-xs);
    margin-bottom: 4px;
    color: var(--color-text-secondary);
}
.mjcat-colname--amber { color: var(--color-accent-amber); }
.mjcat-colname--red   { color: var(--color-accent-red); }
.mjcat-col-remove {
    background: rgba(255, 82, 82, 0.12);
    border: 1px solid rgba(255, 82, 82, 0.25);
    color: var(--color-accent-red);
    border-radius: 3px;
    padding: 1px 7px;
    cursor: pointer;
    font-size: var(--text-xs);
    margin-top: 3px;
    display: inline-block;
}

/* =========================================================
   Bâtiments : variantes propres au catalogue des bâtiments
   ========================================================= */
.mjcat-minw-160 { min-width: 160px; }
.mjcat-minw-190 { min-width: 190px; }
.mjcat-minw-195 { min-width: 195px; }
.mjcat-minw-310 { min-width: 310px; }

/* ── Liste ── */
.form-input.mjcat-filterbar-select--narrow { min-width: 150px; }
.mjcat-wrap-h.mjcat-wrap-h--wide { max-width: 130px; }
/* Arme de défense liée au bâtiment. */
.badge.mjcat-defense-badge {
    padding: 0.2rem 0.5rem;
    font-size: var(--text-xs);
    border-radius: 4px;
    background: rgba(0, 230, 118, 0.15);
    color: var(--color-accent-green);
    font-weight: bold;
}

/* ── Édition groupée ── */
/* Colonne des champs figée : son fond reste opaque au survol de la ligne
   (`tr:hover td` l'emporterait sur la seule classe) ; tableau transposé
   (composants, bâtiments) comme tableau en lignes (technologies). */
.mjcat-grid-table td.mjcat-td--sticky,
.mjcat-bulk-table td.mjcat-td--sticky { background: #0e0f1a; }
/* Production non renseignée : la valeur affichée est celle par défaut. */
.mjcat-cell-input.is-unset { opacity: 0.5; }
.mjcat-addbar-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-left: auto;
}

/* ── Fiche d'un bâtiment ── */
.mjcat-grid3.mjcat-grid3--flush { margin-bottom: 0; }
.mjcat-grid-prod {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
}
.mjcat-box--amber {
    background: rgba(255, 171, 0, 0.03);
    border-color: rgba(255, 171, 0, 0.12);
}
.form-label.mjcat-box-title--amber { color: var(--color-accent-amber); }
.mjcat-box-note {
    margin: 4px 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
/* Sélecteur de l'arme de défense : vert quand une arme est liée. */
.form-input.mjcat-input-armed   { color: var(--color-accent-green); }
.form-input.mjcat-input-inherit { color: inherit; }

/* ===== Console MJ : liste des joueurs (MjOverview) ===== */
.mjov-players-card {
    grid-column: 1 / -1;
}
.mjov-player-activity {
    font-size: 0.8rem;
}
.mjov-player-activity-muted {
    color: var(--color-text-secondary);
}
.mjov-player-activity-warn {
    color: var(--color-accent-amber);
}
.mjov-player-actions {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}
.btn.mjov-player-remove {
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
}
.mjov-field-help {
    color: #8b99b8;
}
.mjov-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.form-label.mjov-field-gap {
    margin-top: 0.5rem;
}

/* ── Case à cocher commentée (marchandise secrète) ── */
.mjcat-check { margin-top: 4px; }
.mjcat-check__label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.mjcat-check__text { margin: 0; }
.mjcat-check__hint { margin: 4px 0 0 24px; font-size: 12px; color: var(--text-muted); }
.mjcat-check__tag { display: block; font-size: 12px; color: var(--text-muted); }

/* ── Définitions (/config) : mise en page ──
   La page n'est pas sous la coque du jeu (.app, .page-body) : elle n'hérite
   ni du tiroir, ni de l'en-tête non collant, ni des cadres défilants des
   tableaux sur téléphone, et les porte donc ici. Ces règles vivaient dans un
   bloc <style> de ReferenceLayout. */
.ref-page { min-height: 100vh; background: var(--bg-color, #05070d); }
.page-header.ref-page-header { padding: 20px 20px 0; }
.ref-layout { display: flex; gap: 20px; align-items: flex-start; padding: 20px; }
.ref-sidebar {
    width: 250px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
    background: rgba(10, 10, 25, 0.7);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 10px;
    padding: 12px;
    box-sizing: border-box;
}
.ref-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    margin-bottom: 3px;
    border-left: 3px solid transparent;
}
.ref-link:hover { background: rgba(255, 255, 255, 0.05); color: var(--color-text-primary); }
.ref-link.active {
    background: rgba(0, 229, 255, 0.1);
    color: var(--color-accent-cyan);
    border-left-color: var(--color-accent-cyan);
}
/* Le contenu est un conteneur « sheet », comme le corps des pages du jeu :
   les seuils des encarts s'y appliquent de même. */
.ref-content { flex: 1; min-width: 0; container: sheet / inline-size; }
@media (max-width: 900px) {
    .page-header.ref-page-header { position: static; flex-wrap: wrap; row-gap: var(--space-3); }
    /* Empilés, la navigation et le contenu prennent toute la largeur
       (align-items: flex-start les laissait à la largeur de leur contenu,
       jusqu'à 1 600 px pour le catalogue des composants). La navigation
       devient une rangée de rubriques qui défile de côté : dix-neuf liens
       empilés repoussaient le contenu d'un écran et demi. */
    .ref-layout { flex-direction: column; align-items: stretch; padding: 12px; }
    .ref-sidebar {
        width: 100%;
        position: static;
        display: flex;
        gap: 4px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding: 6px;
    }
    .ref-link { flex: none; margin-bottom: 0; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
    .ref-link.active { border-bottom-color: var(--color-accent-cyan); }
}

/* ── Pages du MJ en deux colonnes (galaxies, combats, mesures du tour,
   plans) : contenu principal et panneau latéral. Les pistes étaient posées en
   ligne, en pixels, et poussaient la page à 750–840 px sur téléphone ; elles
   passent ici, et se replient en une colonne quand la place manque. ── */
.mj-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}
.mj-split--wide-aside { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-6); margin-top: var(--space-4); }
.mj-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; }
.mj-split--aside-first { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 1rem; }
.mj-split--single { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@container sheet (max-width: 860px) {
    .mj-split,
    .mj-split--wide-aside,
    .mj-split--even,
    .mj-split--aside-first { grid-template-columns: minmax(0, 1fr); }
}