/* Cost Explorer — coûts MFM par faction, version par version, avec diff ±. */

/* Alias de compatibilité (mêmes que rules-explorer.css) : les tokens de palette
   applicatifs pointent vers ceux définis dans base.css. */
:root {
  --bg2:         var(--bg-2);
  --line2:       var(--line-2);
  --gold-bright: var(--accent-b);
  --red:         var(--danger);
  --red-bright:  var(--danger);
  --green:       var(--success);
  --u:           1rem;
}

.ce-wrap { max-width: 1100px; }

.ce-controls { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: calc(var(--u) * 1.2); }
.ce-field { display: flex; flex-direction: column; gap: 6px; }
.ce-field label { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ce-field select { padding: 9px 12px; border: 1px solid var(--line2); border-radius: var(--radius2); background: var(--panel); color: var(--text); font-family: var(--font); font-size: .92rem; min-width: 220px; }
.ce-field select:focus { outline: none; border-color: var(--gold); }
.ce-field--cmp select { min-width: 180px; }

.ce-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: calc(var(--u) * 1.2); }
.ce-tab { appearance: none; background: transparent; border: none; cursor: pointer; font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 12px 18px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.ce-tab:hover { color: var(--text); }
.ce-tab.is-active { color: var(--gold-bright); border-bottom-color: var(--gold); }

.ce-status { font-family: var(--mono); font-size: .8rem; color: var(--muted); min-height: 1.2em; margin: 0 0 calc(var(--u) * .8); }
.ce-status.is-error { color: var(--red-bright); }

.ce-empty { color: var(--muted); font-size: .92rem; padding: calc(var(--u) * 1.5); text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); }

/* Version courante / diff */
.ce-verline { font-family: var(--mono); font-size: .8rem; color: var(--muted); margin: 0 0 calc(var(--u) * 1); }
.ce-verline b { color: var(--gold-bright); }

/* Groupes d'unités */
.ce-group { margin-bottom: calc(var(--u) * 1.4); }
.ce-group__title { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 calc(var(--u) * .6); padding-bottom: 4px; border-bottom: 1px solid var(--line); }

.ce-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.ce-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 520px; }
.ce-table th, .ce-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ce-table thead th { position: sticky; top: 0; background: var(--panel2); font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.ce-table tbody tr:hover { background: color-mix(in srgb, var(--gold) 6%, transparent); }
.ce-table .ce-unit { font-weight: 600; }
.ce-role { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 8px; }
.ce-legends { color: var(--muted2); font-style: italic; }
.ce-pts { font-family: var(--mono); font-weight: 600; color: var(--gold-bright); white-space: nowrap; }
.ce-models { font-family: var(--mono); color: var(--muted); white-space: nowrap; }

/* Badge de différentiel */
.ce-delta { font-family: var(--mono); font-size: .76rem; font-weight: 600; white-space: nowrap; margin-left: 8px; padding: 1px 7px; border-radius: 999px; }
.ce-delta--up { color: #fff; background: color-mix(in srgb, var(--danger) 78%, transparent); }
.ce-delta--down { color: #fff; background: color-mix(in srgb, var(--success) 82%, transparent); }
.ce-delta--new { color: var(--on-accent); background: var(--gold); }

/* Onglet Changements */
.ce-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: calc(var(--u) * 1.1); }
.ce-chip { appearance: none; cursor: pointer; background: var(--panel); border: 1px solid var(--line2); color: var(--muted); border-radius: 999px; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; padding: 6px 13px; transition: border-color .15s, color .15s; }
.ce-chip:hover { color: var(--text); }
.ce-chip.is-active { color: var(--gold-bright); border-color: var(--gold); }

.ce-chg-sec { margin-bottom: calc(var(--u) * 1.6); }
.ce-chg-sec__title { display: flex; align-items: center; gap: 10px; font-family: var(--font); font-weight: 600; font-size: 1rem; margin: 0 0 calc(var(--u) * .8); }
.ce-chg-sec__count { font-family: var(--mono); font-size: .72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.ce-chg-sec--alert .ce-chg-sec__title { color: var(--red-bright); }
.ce-fac { font-family: var(--mono); font-size: .72rem; color: var(--muted2); }
.ce-fd-old { color: var(--muted); text-decoration: line-through; }
.ce-fd-new { color: var(--red-bright); font-weight: 600; }