/* =========================================================
   Beyond Lightspeed — Rubrique Menaces (PLAN_PVE.md § 3.7, 2026-10-11)
   Même gabarit que Systèmes, Flottes et Stratégies, dont elle reprend les
   classes communes : onglets .gtabs, encarts .ovp et surfaces .ovs
   (systems.css), cartes de liste .flt-item et bandeau .fdh (fleets.css).
   Ne figure ici que ce qui est propre aux menaces : préfixes tm- (page) et
   tmh- (bandeau).
   ========================================================= */

/* ── Couleur d'une nature de menace ── */
.tm-kind--repaire { --tm-accent: var(--color-accent-red); }
.tm-kind--foyer { --tm-accent: var(--color-accent-amber); }
.tm-kind--invasion { --tm-accent: var(--color-accent-green); }
.tm-kind--raid { --tm-accent: var(--color-accent-purple); }
.tm-kind--epave { --tm-accent: var(--color-accent-cyan); }

/* ── En-tête de page : compteurs ── */
.tm-page-header { margin-bottom: 12px; }
.tm-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tm-stat {
    --tm-stat-accent: var(--color-accent-purple);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px 6px 8px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--tm-stat-accent) 35%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--tm-stat-accent) 12%, transparent), rgba(0, 0, 0, 0.3));
}
.tm-stat--red { --tm-stat-accent: var(--color-accent-red); }
.tm-stat--green { --tm-stat-accent: var(--color-accent-green); }
.tm-stat__emblem { flex-shrink: 0; color: var(--tm-stat-accent); }
.tm-stat__body { display: grid; gap: 1px; }
.tm-stat__label {
    color: var(--color-text-label);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.tm-stat__value { color: var(--color-text-bright); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; }

/* ── Page : liste latérale et fiche ── */
.tm-layout { display: flex; gap: 20px; align-items: stretch; min-height: 420px; }
.tm-sidebar {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 10px 12px;
    border: 1px solid rgba(255, 61, 90, 0.18);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(8, 16, 30, 0.85), rgba(4, 9, 18, 0.85));
}
.tm-list__title {
    margin: 4px 2px 0;
    color: var(--color-text-label);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.tm-list { display: grid; align-content: start; gap: 6px; }
.tm-main { flex: 1; min-width: 0; scroll-margin-top: 110px; }
@media (max-width: 900px) {
    .tm-layout { flex-direction: column; min-height: 0; }
    .tm-sidebar { width: 100%; box-sizing: border-box; }
}

/* ── Cartes de la liste ── */
.tm-item__art {
    color: var(--tm-accent);
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tm-accent) 22%, transparent), rgba(0, 0, 0, 0.3) 70%);
    border-color: color-mix(in srgb, var(--tm-accent) 30%, transparent);
}
.tm-item__facts { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--color-text-secondary); font-size: var(--text-xs); }
.tm-status { color: var(--tm-accent); font-weight: 700; }
.tm-status--vaincue .tm-status { color: var(--color-accent-green); }
.tm-status--annulee .tm-status { color: var(--color-text-muted); }
.tm-status--vaincue, .tm-status--annulee { opacity: 0.85; }
.tm-bounty { color: var(--color-accent-amber); font-family: var(--font-mono); }
.tm-mine { color: var(--color-accent-green); }

/* ── Fiche ── */
.tm-sheet { display: grid; gap: 0; }
.gtabs.tm-tabs { margin-bottom: 14px; }
.tm-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.tm-rewards { margin-top: 20px; }
.tm-empty-page {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 48px 16px;
    color: var(--color-text-secondary);
    text-align: center;
}
.tm-empty-page p { margin: 0; max-width: 620px; line-height: 1.5; }
.tm-faction-lore { font-size: var(--text-sm); }
.ovs.tm-empty { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }

/* Bandeau : couleur de la nature de menace, emblème en médaillon. */
.fdh.tmh {
    align-items: center;
    border-color: color-mix(in srgb, var(--tm-accent) 35%, transparent);
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--tm-accent) 16%, transparent), transparent 60%),
        linear-gradient(120deg, rgba(10, 16, 32, 0.96), rgba(6, 10, 20, 0.9));
}
.fdh.tmh .fdh-id__title { text-shadow: 0 0 16px color-mix(in srgb, var(--tm-accent) 45%, transparent); }
.tmh-figure {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    color: var(--tm-accent);
    background: radial-gradient(circle, color-mix(in srgb, var(--tm-accent) 30%, transparent) 0%, color-mix(in srgb, var(--tm-accent) 10%, transparent) 45%, transparent 70%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-accent) 30%, transparent);
}
.tmh-kicker {
    color: var(--color-text-label);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.fdh-chip--red { color: var(--color-accent-red); border-color: rgba(255, 61, 90, 0.4); }
@media (max-width: 640px) {
    .tmh-figure { display: none; }
}

/* ── Rempart de la Garde (invasion de l'Essaim) ── */
.tm-rampart { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 10px; }
.tm-rampart__label { color: var(--color-text-label); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tm-rampart__bar { display: block; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.tm-rampart__bar span { display: block; height: 100%; background: var(--color-accent-green); transition: width 0.3s ease; }
.tm-rampart__bar span.is-mid { background: var(--color-accent-amber); }
.tm-rampart__bar span.is-low { background: var(--color-accent-red); }
.tm-lines { margin: 0; padding-left: 18px; color: var(--color-text-primary); line-height: 1.5; }
@media (max-width: 640px) {
    .tm-rampart { grid-template-columns: minmax(0, 1fr) auto; }
    .tm-rampart__label { grid-column: 1 / -1; }
}

/* ── Rétro-ingénierie : fragments par faction ── */
.tm-frag { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.tm-frag:first-of-type { border-top: 0; }
.tm-frag__status { margin: 0 0 8px; color: var(--color-text-bright); }
.tm-frag__actions { display: grid; gap: 10px; }
.tm-frag__action { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.tm-frag__action label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--color-text-label); font-size: var(--text-sm); }
.tm-frag__action input.form-input { width: 7rem; }
.tm-frag__action select.form-input { max-width: 100%; }

/* ── Encarts ── */
.tm-notice p { margin: 0 0 10px; color: var(--color-text-primary); line-height: 1.55; }
.tm-facts { display: grid; gap: 6px; margin: 0; }
.tm-facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.tm-facts dt { color: var(--color-text-label); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tm-facts dd { margin: 0; color: var(--color-text-bright); }
.tm-mine-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.tm-big { display: block; color: var(--color-text-bright); font-family: var(--font-mono); font-size: var(--text-lg); }
.tm-warn { display: block; margin-top: 4px; color: var(--color-accent-amber); font-size: var(--text-xs); }
.tm-table th[scope="row"] { color: var(--color-text-bright); font-weight: 600; text-transform: none; letter-spacing: 0; background: none; font-size: var(--text-sm); }
.tm-num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.tm-row--me td, .tm-row--me th { background: rgba(0, 230, 118, 0.07); }
.tm-row--below td, .tm-row--below th { opacity: 0.6; }
.tm-row--ended td, .tm-row--ended th { opacity: 0.6; }
.tm-alliance, .tm-you { color: var(--color-text-secondary); font-weight: 400; }
.tm-alliances { margin: 10px 0 0; color: var(--color-text-secondary); font-size: var(--text-sm); }

.tm-shop__title { display: flex; align-items: center; gap: 6px; margin: 14px 0 8px; color: var(--color-text-bright); font-size: var(--text-sm); }
.tmj-actions.tm-shop__actions { margin-top: 0; flex-wrap: nowrap; }

/* ── Écran du MJ ── */
.tmj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px 16px; }
.tmj-field { display: grid; gap: 4px; }
.tmj-field span { color: var(--color-text-secondary); font-size: var(--text-xs); line-height: 1.35; }
.tmj-switch { display: flex; align-items: center; gap: 8px; color: var(--color-text-bright); font-weight: 600; }
.tmj-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.tmj-section { margin-bottom: 20px; }
fieldset.tmj-section { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
fieldset.tmj-section legend { padding: 0; }
fieldset.tmj-section legend h3 { margin: 0 0 10px; }
.tmj-composition td input { width: 80px; }
.tmj-muted { color: var(--color-text-muted); font-size: var(--text-xs); }