/* Styles de la page — extraits des styles en ligne du JSX (lot 6).
   Palette et z-index viennent de design-system.css. */

/* ===== Chrome de la page ===== */
.mjintel-loading {
    padding: var(--space-8);
    color: var(--color-text-secondary);
}
.mjintel-missing-tables {
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-xl);
    background: rgba(255, 77, 79, .12);
    border: 1px solid rgba(255, 77, 79, .4);
    color: #ffb4b5;
}
.mjintel-tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.mjintel-tab {
    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);
}
.mjintel-tab-active {
    border-color: rgba(167, 139, 250, .6);
    background: rgba(167, 139, 250, .18);
    color: var(--color-accent-purple);
}
.mjintel-scroll-x {
    overflow-x: auto;
}
.mjintel-empty {
    color: var(--color-text-secondary);
}
.mjintel-intro {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-top: 0;
}
.mjintel-intro-loose {
    line-height: 1.6;
}

/* ===== Bascule fiches / tableau, groupes de boutons ===== */
.mjintel-view-toggle {
    display: inline-flex;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}
.mjintel-toggle-btn {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 3px;
    cursor: pointer;
    font-size: var(--text-xs);
    background: transparent;
    color: var(--color-text-secondary);
}
.mjintel-toggle-btn-active {
    border-color: rgba(34, 211, 238, .6);
    background: rgba(34, 211, 238, .15);
    color: var(--color-accent-cyan);
}
.mjintel-btn-group {
    display: flex;
    gap: 6px;
}

/* ===== Barre « tout enregistrer » et boutons d'action ===== */
.mjintel-save-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.mjintel-save-count {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mjintel-save-count-dirty {
    color: var(--color-accent-purple);
}
.mjintel-save-btn {
    padding: 6px 14px;
    font-size: var(--text-xs);
    border-radius: 3px;
    border: none;
    font-weight: var(--weight-bold);
    cursor: not-allowed;
    background: rgba(255, 255, 255, .08);
    color: var(--color-text-muted);
}
.mjintel-save-btn-sm {
    padding: 5px 10px;
}
/* `button:disabled { cursor: not-allowed }` (components.css) a une spécificité
   de (0,1,1) : le sélecteur est qualifié par l'élément pour que le curseur reste
   celui que portait le style en ligne pendant un enregistrement en cours. */
button.mjintel-save-btn-ready {
    cursor: pointer;
    background: linear-gradient(135deg, var(--color-accent-purple), var(--color-accent-cyan));
    color: #03060e;
}
.mjintel-cancel-btn {
    padding: 6px 12px;
    font-size: var(--text-xs);
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: transparent;
    color: var(--color-text-muted);
    cursor: not-allowed;
}
button.mjintel-cancel-btn-ready {
    color: var(--color-text-secondary);
    cursor: pointer;
}

/* ===== Champs de saisie =====
   `.mjintel-input` est la base ; les classes qui suivent ne portent que
   l'écart, comme le faisaient les objets étalés dans le JSX. Elles doivent
   donc rester APRÈS elle dans ce fichier. */
.mjintel-input {
    width: 100%;
    padding: 6px 8px;
    background: #111827;
    color: var(--color-text-primary);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 3px;
    font-size: var(--text-sm);
}
.mjintel-row-title {
    margin-bottom: var(--space-1);
}
.mjintel-row-description {
    margin-bottom: var(--space-1);
    font-size: var(--text-xs);
}
.mjintel-flavor-input {
    font-size: var(--text-xs);
    min-height: 52px;
}
.mjintel-amplitude-input {
    width: 72px;
    font-size: var(--text-xs);
}
.mjintel-amplitude-input-lg {
    width: 78px;
}
.mjintel-cost-input {
    width: 80px;
}
.mjintel-goods-qty-input {
    width: 64px;
    font-size: var(--text-xs);
}
.mjintel-weight-input {
    width: 70px;
}
.mjintel-goods-select {
    width: auto;
    font-size: var(--text-xs);
    padding: 3px 6px;
}
.mjintel-difficulty-select {
    width: 120px;
    font-size: var(--text-xs);
    padding: 4px 6px;
}
.mjintel-commander-select {
    width: auto;
    display: inline-block;
    font-size: var(--text-xs);
}
.mjintel-motifs-input {
    font-size: var(--text-xs);
    min-height: 150px;
    line-height: 1.5;
}
.mjintel-description-input {
    min-height: 54px;
    font-size: var(--text-xs);
}
.mjintel-difficulty-input {
    width: 150px;
}
.mjintel-detail-number {
    width: 90px;
}
.mjintel-logistics-input {
    width: 110px;
}
.mjintel-flavor-text-input {
    min-height: 48px;
    font-size: var(--text-xs);
}
.mjintel-flavor-pool-input {
    min-height: 110px;
    font-size: var(--text-sm);
    line-height: 1.55;
}

/* Champs courts du formulaire de création et des filtres. */
.mjintel-field {
    padding: 5px 8px;
    background: #111827;
    color: var(--color-text-primary);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 3px;
    font-size: var(--text-xs);
}
.mjintel-field-code {
    width: 190px;
}
.mjintel-field-name {
    width: 230px;
}

/* ===== Étiquettes ===== */
.mjintel-form-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.mjintel-form-label-spaced {
    margin-top: var(--space-2);
}
.mjintel-inline-label {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
.mjintel-checkbox-label {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 6px;
}

/* ===== Tableaux ===== */
.mjintel-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
}
.mjintel-vars-table {
    border-collapse: collapse;
    font-size: var(--text-xs);
    min-width: 100%;
}
.mjintel-thead-row {
    text-align: left;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    text-transform: uppercase;
}
.mjintel-cell {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    vertical-align: top;
}
/* `tr:last-child td { border-bottom: none }` (components.css) l'emporterait sur
   la classe seule ; le style en ligne, lui, garantissait le trait sur la
   dernière ligne. On rétablit la même spécificité pour ne rien changer. */
tr td.mjintel-cell {
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.mjintel-th {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    white-space: nowrap;
    text-align: left;
}
.mjintel-cell-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}
/* La couleur vient du type d'opportunité, portée en ligne. */
.mjintel-cell-type {
    font-size: var(--text-xs);
    white-space: nowrap;
}
.mjintel-cell-nowrap {
    white-space: nowrap;
}
.mjintel-cell-check {
    text-align: center;
}
.mjintel-cell-text {
    min-width: 260px;
}
.mjintel-cell-wide {
    min-width: 280px;
}
.mjintel-cell-goods {
    min-width: 200px;
}
.mjintel-cell-motifs {
    min-width: 340px;
}
.mjintel-cell-node {
    min-width: 210px;
}

/* Fond d'une ligne du tableau des variables : le brouillon l'emporte sur
   l'inactivité, d'où l'ordre de ces deux règles. */
.mjintel-vars-row {
    background: transparent;
}
.mjintel-vars-row-inactive {
    background: rgba(255, 77, 79, .05);
}
.mjintel-vars-row-dirty {
    background: rgba(167, 139, 250, .08);
}

/* ===== Champs numériques des tableaux ===== */
.mjintel-num-input {
    width: 72px;
    font-size: var(--text-xs);
    padding: 4px 6px;
    text-align: right;
}
.mjintel-num-input-param {
    width: 64px;
}
.mjintel-num-input-compact {
    width: 60px;
}

/* ===== Codes et marqueurs de modification ===== */
.mjintel-code {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
.mjintel-code-dirty {
    color: var(--color-accent-purple);
}
.mjintel-dirty-dot {
    color: var(--color-accent-purple);
    font-size: var(--text-xs);
    margin-left: var(--space-1);
}
.mjintel-row-code {
    color: var(--color-accent-purple);
    font-size: var(--text-xs);
}

/* ===== Effets et amplitudes ===== */
.mjintel-effect-label {
    color: var(--color-accent-cyan);
    font-size: var(--text-xs);
}
.mjintel-effect-title {
    color: var(--color-accent-cyan);
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
}
.mjintel-effect-summary {
    color: var(--color-text-secondary);
    font-weight: var(--weight-normal);
}
.mjintel-effect-detail {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin: 4px 0 6px;
    line-height: 1.45;
}
.mjintel-effect-error {
    color: var(--color-accent-red);
    font-size: var(--text-xs);
}
.mjintel-effect-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.mjintel-effect-group {
    margin-bottom: 10px;
}
.mjintel-param-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.mjintel-param-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.mjintel-param-chip-spaced {
    margin-left: var(--space-2);
}

/* ===== Textes secondaires ===== */
.mjintel-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.mjintel-hint-italic {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
}
.mjintel-warn-text {
    color: var(--color-accent-amber);
}
.mjintel-danger-text {
    color: var(--color-accent-red);
}

/* ===== Onglet Missions ===== */
.mjintel-row-axis {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}
.mjintel-row-node {
    font-size: var(--text-xs);
    color: var(--color-accent-amber);
    margin-top: 2px;
}
.mjintel-cost-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 3px;
    max-width: 110px;
    line-height: 1.35;
}
/* Marchandise réellement exigée : se pose sur `.mjintel-hint`. */
.mjintel-goods-required {
    color: var(--color-accent-purple);
}
.mjintel-goods-picker {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ===== Onglet Arbres d'influence ===== */
.mjintel-nodes-toolbar {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.mjintel-nodes-count {
    font-size: var(--text-xs);
    color: var(--color-accent-purple);
}
.mjintel-warning-line {
    color: var(--color-accent-amber);
    font-size: var(--text-xs);
}
.mjintel-node-role {
    color: var(--color-accent-purple);
    font-weight: var(--weight-bold);
}
.mjintel-node-toggle {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    cursor: not-allowed;
}
.mjintel-node-toggle-enabled {
    cursor: pointer;
}
.mjintel-node-checkbox {
    margin-top: 2px;
}
.mjintel-node-label {
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}
.mjintel-node-label-acquired {
    color: var(--color-accent-green);
}
.mjintel-node-effect {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-top: 2px;
}
.mjintel-node-requires {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* ===== Onglet Événements politiques ===== */
.mjintel-event-sign {
    color: var(--color-accent-green);
    font-weight: var(--weight-bold);
}
.mjintel-event-sign-negative {
    color: var(--color-accent-red);
}
.mjintel-motifs-count {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

/* ===== Onglet Opportunités — création ===== */
.mjintel-new-toggle {
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);
}
.mjintel-new-form {
    margin-bottom: 14px;
    padding: 11px 13px;
    border-radius: 3px;
    background: rgba(167, 139, 250, .06);
    border: 1px solid rgba(167, 139, 250, .35);
}
.mjintel-new-form-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--color-accent-purple);
    margin-bottom: var(--space-2);
}
.mjintel-new-form-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
}
/* L'opacité suivait `valide && !enCours`, c'est-à-dire exactement l'inverse de
   `disabled` : d'où l'état CSS plutôt qu'une classe. `:disabled` est nécessaire
   pour passer devant `.btn:disabled`, qui vaut 0,55. */
.mjintel-create-btn {
    font-size: var(--text-xs);
    opacity: 1;
}
.mjintel-create-btn:disabled {
    opacity: .5;
}
.mjintel-new-cancel {
    font-size: var(--text-xs);
}
.mjintel-new-form-help {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
    line-height: 1.55;
}

/* ===== Onglet Opportunités — filtres et groupes ===== */
.mjintel-filters {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.mjintel-filter-count {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    align-self: center;
}
.mjintel-sparse-warning {
    margin-bottom: var(--space-3);
    padding: 9px 11px;
    border-radius: 3px;
    background: rgba(255, 179, 0, .08);
    border: 1px solid rgba(255, 179, 0, .35);
    color: var(--color-accent-amber);
    font-size: var(--text-xs);
    line-height: 1.5;
}
.mjintel-type-group {
    margin-bottom: 18px;
}
/* `--mjintel-type-color` est posée en ligne : c'est la teinte du type
   d'opportunité, qui vient des données. */
.mjintel-type-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 0 8px;
    border-bottom: 1px solid var(--mjintel-type-color);
    margin-bottom: var(--space-2);
}
.mjintel-type-name {
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
}
.mjintel-type-detail {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}
.mjintel-type-count {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-left: auto;
}

/* ===== Onglet Opportunités — une définition ===== */
.mjintel-opp-row {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-xl);
    margin-bottom: 6px;
    background: rgba(255, 255, 255, .02);
}
.mjintel-opp-row-dirty {
    border-color: rgba(167, 139, 250, .5);
}
.mjintel-opp-row-inactive {
    background: rgba(255, 77, 79, .04);
}
.mjintel-opp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    flex-wrap: wrap;
}
.mjintel-opp-caret {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    width: 12px;
}
.mjintel-opp-code {
    color: var(--color-accent-purple);
    font-size: var(--text-xs);
    min-width: 130px;
}
.mjintel-opp-label {
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    min-width: 200px;
}
.mjintel-opp-label-inactive {
    color: var(--color-text-muted);
}
.mjintel-opp-branch {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
.mjintel-opp-difficulty {
    font-size: var(--text-xs);
    color: var(--color-accent-amber);
}
.mjintel-opp-cost {
    font-size: var(--text-xs);
    color: var(--color-accent-purple);
}
/* Se posent sur `.mjintel-hint`. */
.mjintel-opp-pool {
    margin-left: auto;
}
.mjintel-opp-pool-empty {
    color: var(--color-accent-amber);
}
.mjintel-opp-alert-on {
    color: var(--color-accent-red);
}
.mjintel-opp-flag-off {
    font-size: var(--text-xs);
    color: var(--color-accent-red);
    font-weight: var(--weight-bold);
}
.mjintel-opp-flag-dirty {
    font-size: var(--text-xs);
    color: var(--color-accent-purple);
    font-weight: var(--weight-bold);
}
.mjintel-opp-body {
    padding: 4px 12px 12px 34px;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.mjintel-field-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.mjintel-field-row-end {
    align-items: flex-end;
}
.mjintel-form-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 6px;
    line-height: 1.45;
}
.mjintel-opp-full {
    grid-column: 1 / -1;
}
.mjintel-pool-count {
    color: var(--color-text-muted);
    font-weight: var(--weight-normal);
}
.mjintel-pool-count-empty {
    color: var(--color-accent-amber);
}
.mjintel-opp-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* ===== Onglet Réglages ===== */
.mjintel-settings-group {
    margin-bottom: var(--space-5);
}
.mjintel-settings-title {
    font-size: var(--text-xs);
    color: var(--color-accent-cyan);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}
.mjintel-settings-note {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0 0 10px;
    line-height: 1.55;
    max-width: 780px;
}
.mjintel-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}
.mjintel-settings-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-bottom: 3px;
}
.mjintel-settings-save {
    padding: 8px 18px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--color-accent-purple), var(--color-accent-cyan));
    color: #03060e;
    font-weight: var(--weight-bold);
}