/* =========================================================
   Beyond Lightspeed — Rubrique Commerce (refonte du 2026-10-03)
   Même gabarit que les rubriques Systèmes et Flottes, dont elle reprend les
   classes communes : onglets .gtabs (components.css), encarts .ovp, surfaces
   .ovs, tuiles .sch-tile, filtres .ovp-chips / .ovp-views, cartes
   .sgd-card (systems.css), cartes de liste .flt-item, bandeau .fdh, fiche
   .fdt et boutons d'action .fac-btn (fleets.css). Ne figure ici que ce qui
   est propre au commerce (préfixes cm-, cmh-, cmg-, cmc-, cmp-).
   ========================================================= */

/* ── Teintes de texte ── */
.cm-tone--green { color: var(--color-accent-green); }
.cm-tone--cyan { color: var(--color-accent-cyan); }
.cm-tone--purple { color: var(--color-accent-purple); }
.cm-tone--amber { color: var(--color-accent-amber); }
.cm-tone--yellow { color: #eab308; }
.cm-tone--red { color: var(--color-accent-red); }
.cm-tone--muted { color: var(--color-text-label); }
.cm-tone--bright { color: var(--color-text-bright); }

/* ── Étiquettes ── */
.cm-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 10px;
    border: 1px solid currentColor;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
}
.cm-tag--owner { color: #ff8a9b; background: rgba(255, 61, 90, 0.1); border-color: rgba(255, 61, 90, 0.4); }
.cm-tag--ally { color: var(--color-accent-green); background: rgba(0, 230, 118, 0.1); border-color: rgba(0, 230, 118, 0.4); }
.cm-tag--rare { color: #ffd166; background: rgba(255, 209, 102, 0.1); border-color: rgba(255, 209, 102, 0.45); text-transform: uppercase; }
.cm-tag--best { color: var(--color-accent-green); background: rgba(0, 230, 118, 0.12); border-color: rgba(0, 230, 118, 0.5); }

/* ── Page : onglets, liste latérale et fiche ── */
.cm-page-header { margin-bottom: 12px; }
.gtab__count {
    margin-left: 7px;
    padding: 0 7px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0;
}
.gtab.is-active .gtab__count { background: rgba(0, 229, 255, 0.16); color: var(--color-accent-cyan); }

/* Liste latérale et fiche : gabarit commun (template.css). */
.cm-layout {
    --tpl-list-w: 290px;
    --tpl-sticky-top: var(--cm-sticky-top, 110px);
}
.cm-item__trade { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--text-xs); }
.cm-empty { padding: 40px 16px; }

/* La fiche : bandeau, onglets puis encarts empilés. */
.cm-sheet > .cm-totals + .ovp { margin-top: 16px; }
.cm-panels { display: grid; gap: 16px; }

/* ── Bandeau du poste : le bandeau d'encart « commerce » en fond ── */
.fdh.cmh { align-items: center; }
.fdh.cmh.has-banner {
    background:
        linear-gradient(90deg, rgba(5, 10, 20, 0.95) 0%, rgba(5, 10, 20, 0.78) 50%, rgba(5, 10, 20, 0.3) 100%),
        var(--cmh-art) right center / cover;
    border-color: rgba(255, 179, 0, 0.3);
}
.cmh-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, auto));
    gap: 6px;
    justify-items: stretch;
}
.cmh-actions .fac-btn { padding: 6px 12px; }
.cmh-hint {
    grid-column: 1 / -1;
    margin: 0;
    max-width: 340px;
    color: var(--color-text-label);
    font-size: var(--text-xs);
    line-height: 1.35;
}
.cmh-hint.is-ready { color: var(--color-accent-green); }
@container sheet (max-width: 520px) {
    .cmh-actions { grid-template-columns: 1fr; width: 100%; }
}

/* ── Cartes de marchandise ── */
.ovs-grid.cm-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ovs.cmg-card {
    --ovs-accent: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.ovs.cmg-card.is-selling,
.ovs.cmg-card--sale { --ovs-accent: var(--color-accent-green); }
.ovs.cmg-card.is-buying,
.ovs.cmg-card--buy { --ovs-accent: var(--color-accent-purple); }
.ovs.cmg-card--alliance { --ovs-accent: var(--color-accent-cyan); }
.ovs.cmg-card.is-changed { --ovs-accent: var(--color-accent-amber); border-color: rgba(255, 179, 0, 0.45); }
.cmg-card .sgd-name { gap: 7px; flex-wrap: wrap; }
/* Le grand format reste dans le coin haut : centré, il passait sous les
   champs de vente et de rachat et brouillait leur lecture. */
.ovs.cmg-card.has-card-art--large::after {
    top: -8px;
    right: -14px;
    width: 140px;
    transform: none;
    opacity: 0.26;
    -webkit-mask-image: radial-gradient(circle at 60% 40%, #000 35%, transparent 70%);
    mask-image: radial-gradient(circle at 60% 40%, #000 35%, transparent 70%);
}

/* Chiffres clés en ligne : libellé en petites capitales, valeur dessous. */
.cmg-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
}
.cmg-fact { display: grid; gap: 1px; min-width: 0; }
.cmg-fact dt {
    color: var(--color-text-label);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.cmg-fact dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    white-space: nowrap;
}
.cmg-fact dd small { color: var(--color-text-label); font-size: var(--text-xs); font-weight: 500; }
.cmg-facts--big .cmg-fact dd { font-size: 1.25rem; text-shadow: 0 0 12px color-mix(in srgb, currentColor 40%, transparent); }

/* Cartes de mes postes : même grille dans les onglets Spatio-port et
   Consommation, pour qu'une marchandise garde sa place d'un onglet à l'autre. */
.ovs-grid.cm-goods-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

/* Blocs d'une carte : réserves, vente, rachat — empilés, pleine largeur. */
.cmg-block {
    --block-color: var(--color-accent-cyan);
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 8px 10px 10px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--block-color) 28%, transparent);
    background: color-mix(in srgb, var(--block-color) 6%, rgba(0, 0, 0, 0.32));
}
.cmg-block--stocks { --block-color: var(--color-accent-purple); }
.cmg-block--sale { --block-color: var(--color-accent-green); }
.cmg-block--buy { --block-color: var(--color-accent-amber); }
.cmg-block__title {
    padding: 0 4px;
    color: var(--block-color);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
div.cmg-block__title { padding: 0; }
.fac-btn.cmg-block__action { justify-self: end; padding: 3px 10px; }

/* Réserves : deux tuiles côte à côte, chacune dit à qui elle sert. */
.cmg-pools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.cmg-pool {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--pool-color, var(--color-accent-cyan));
}
.cmg-pool--private { --pool-color: var(--color-accent-cyan); }
.cmg-pool--alliance { --pool-color: var(--color-accent-purple); }
.cmg-pool dt { color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: 700; }
.cmg-pool dd { margin: 0; color: var(--pool-color); font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; }
.cmg-pool p { margin: 0; color: var(--color-text-label); font-size: var(--text-xs); line-height: 1.3; }

/* Une ligne = un libellé à gauche, sa saisie à droite ; passe à la ligne
   plutôt que de déborder du cadre. */
.cmg-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; min-width: 0; }
.cmg-row__label { min-width: 0; color: var(--color-text-secondary); font-size: var(--text-xs); }
.cmg-money { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-label); font-size: var(--text-xs); }
.cmg-switch { flex-shrink: 0; }
.cmg-auto { display: grid; gap: 2px; padding: 5px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.3); }
.cmg-auto__price { color: var(--color-accent-green); font-family: var(--font-mono); font-size: 1.05rem; }
.cmg-hint { color: var(--color-text-label); font-size: var(--text-xs); line-height: 1.35; }

/* Ce que le stock pourra donner au spatio-port : jauge et verdict. */
.cmg-capacity {
    --status-color: var(--color-text-secondary);
    display: grid;
    gap: 5px;
    padding: 7px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--status-color);
}
.cmg-capacity.is-ok { --status-color: var(--color-accent-green); }
.cmg-capacity.is-uncertain { --status-color: var(--color-accent-amber); }
.cmg-capacity.is-refused { --status-color: var(--color-accent-red); background: rgba(255, 61, 90, 0.08); }
.cmg-capacity.is-back { --status-color: var(--color-accent-cyan); }
.cmg-gauge {
    position: relative;
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}
.cmg-gauge > span { display: block; height: 100%; flex: 0 0 auto; }
.cmg-gauge__engaged { width: var(--engaged); background: linear-gradient(90deg, rgba(255, 179, 0, 0.35), rgba(255, 179, 0, 0.6)); }
.cmg-gauge__uncertain {
    width: var(--uncertain);
    background: repeating-linear-gradient(135deg, rgba(255, 179, 0, 0.45) 0 4px, rgba(0, 230, 118, 0.25) 4px 8px);
}
.cmg-gauge__sure { width: var(--sure); background: linear-gradient(90deg, rgba(0, 230, 118, 0.45), var(--color-accent-green)); }
/* La demande, posée depuis la droite : si elle déborde sur l'ambre, elle sera refusée. */
.cmg-gauge > .cmg-gauge__request {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--request);
    border: 2px solid var(--status-color);
    border-radius: 6px;
    box-shadow: 0 0 8px var(--status-color);
    box-sizing: border-box;
}
.cmg-capacity__sum { margin: 0; color: var(--color-text-secondary); font-size: var(--text-xs); line-height: 1.4; }
.cmg-capacity__sum strong { font-family: var(--font-mono); }
.cmg-capacity__status { margin: 0; color: var(--status-color); font-size: var(--text-xs); font-weight: 700; line-height: 1.4; }
.cmg-capacity.is-idle .cmg-capacity__status { color: var(--color-text-secondary); font-weight: 600; }
.cmg-capacity .cmg-hint { margin: 0; }
.fac-btn.cmg-capacity__fill { justify-self: start; padding: 3px 10px; }

.cmg-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.cmg-field__label { color: var(--color-text-secondary); font-size: var(--text-xs); }
.cmg-field__unit { color: var(--color-text-label); font-size: var(--text-xs); font-family: var(--font-mono); }
.form-input.cmg-input {
    flex: 0 0 auto;
    width: 76px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 3px 6px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-align: right;
}
.cmg-field .form-input.cmg-input { margin-left: auto; }
.form-input.cmg-input.is-edited { border-color: var(--color-accent-amber); box-shadow: 0 0 0 1px rgba(255, 179, 0, 0.25); }
.form-input.cmg-input.is-invalid { border-color: var(--color-accent-red); box-shadow: 0 0 0 1px rgba(255, 61, 90, 0.3); }
.cmg-note { font-size: var(--text-xs); line-height: 1.35; }
.cmg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: auto; }
.cmg-actions .fac-btn { padding: 3px 10px; }
@container sheet (max-width: 360px) {
    .cmg-pools { grid-template-columns: 1fr; }
}

/* ── Consommation ── */
.cmc-control {
    display: grid;
    gap: 6px;
    padding: 8px 9px;
    border-radius: 6px;
    border: 1px solid rgba(0, 229, 255, 0.16);
    background: rgba(0, 0, 0, 0.22);
}
.ovs.cmc-card { display: flex; flex-direction: column; gap: 9px; }
.ovs.sgd-card.cmc-card.is-short { --ovs-accent: var(--color-accent-red); border-color: rgba(255, 61, 90, 0.45); }

/* Déroulé du prochain tour : une ligne par consommateur, dans l'ordre du moteur. */
.cmb { display: grid; gap: 6px; }
.cmb .ovs__title { margin-bottom: 0; }
.cmb-lines { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.cmb-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 8px;
    padding: 4px 7px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    border-left: 2px solid rgba(255, 255, 255, 0.12);
    font-size: var(--text-xs);
}
.cmb-line--population { border-left-color: var(--color-accent-cyan); }
.cmb-line.is-flow { border-left-color: var(--color-accent-green); }
.cmb-line.is-short { border-left-color: var(--color-accent-red); background: rgba(255, 61, 90, 0.08); }
.cmb-line__icon { flex-shrink: 0; }
.cmb-line__label { min-width: 0; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.cmb-line__hint { color: var(--color-text-label); }
.cmb-line__qty { color: var(--color-text-bright); font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.cmb-line__qty small { color: var(--color-text-label); font-weight: 500; }
.cmb-line.is-flow .cmb-line__qty { color: var(--color-accent-green); }
.cmb-line.is-short .cmb-line__qty { color: #ff8a9b; }
.cmb-line__note { grid-column: 2 / -1; color: #ff8a9b; line-height: 1.35; }
.cmb-line:not(.is-short) .cmb-line__note { color: var(--color-accent-purple); }
.cmb-end {
    display: flex;
    justify-content: space-between;
    padding: 5px 7px 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}
.cmb-end strong { color: var(--color-text-bright); font-family: var(--font-mono); }

.cmc-auto { display: flex; align-items: center; gap: 6px; color: var(--color-text-secondary); font-size: var(--text-xs); cursor: pointer; }
.cmc-bonus { font-size: var(--text-xs); font-weight: 700; }
.ovs.sgd-outlook strong { font-family: var(--font-mono); }

/* Réserve recalculée après le cargo du tour. */
.cmg-pool p.cmg-pool__after { color: var(--color-accent-cyan); font-family: var(--font-mono); font-size: var(--text-xs); }

/* Cargo du tour : chargements et déchargements des flottes au poste. */
.cmg-block--cargo { --block-color: var(--color-accent-cyan); }
.cmg-cargo { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cmg-cargo__line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    font-size: var(--text-xs);
}
.cmg-cargo__line.is-short { background: rgba(255, 179, 0, 0.1); }
.cmg-cargo__text { min-width: 0; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.cmg-cargo__text strong { color: var(--color-text-bright); }
.cmg-cargo__text em { color: var(--color-accent-amber); font-style: normal; }

/* Ordre du tour enregistré pour un champ : reste affiché, s'annule sur place. */
.cmg-order {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 8px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(0, 230, 118, 0.4);
    background: rgba(0, 230, 118, 0.08);
}
.cmg-order__text { min-width: 0; color: var(--color-text-secondary); font-size: var(--text-xs); line-height: 1.35; }
.cmg-order__text strong { color: var(--color-accent-green); }
.fac-btn.cmg-order__cancel { padding: 1px 8px; }
.fac-btn.cmg-order__cancel .fac-btn__label { font-size: var(--text-xs); }

/* État d'enregistrement d'une carte (enregistrement dynamique). */
.cmg-save { font-size: var(--text-xs); font-weight: 700; white-space: nowrap; color: var(--color-text-label); }
.cmg-save--saving { color: var(--color-accent-cyan); }
.cmg-save--saved { color: var(--color-accent-green); }
.cmg-save--incomplete,
.cmg-save--pending { color: var(--color-accent-amber); }
.cmg-save--invalid,
.cmg-save--error { color: var(--color-accent-red); }

/* ── Par marchandise : tuiles de totaux et sources ── */
.cm-totals { margin-bottom: 0; }
.ovs.cm-tile--cyan { --sch-accent: var(--color-accent-cyan); --ovs-accent: var(--color-accent-cyan); }
.ovs.cm-tile--purple { --sch-accent: var(--color-accent-purple); --ovs-accent: var(--color-accent-purple); }
.ovs.cm-tile--green { --sch-accent: var(--color-accent-green); --ovs-accent: var(--color-accent-green); }
.ovs.cm-tile--amber { --sch-accent: var(--color-accent-amber); --ovs-accent: var(--color-accent-amber); }
.ovs.cm-tile--deal { --sch-accent: #ffd166; --ovs-accent: #ffd166; }
.cm-tile .sch-tile__value.is-zero { color: var(--color-text-muted); text-shadow: none; }
.cm-tile__where { color: var(--color-text-secondary); font-size: var(--text-xs); overflow-wrap: anywhere; }
.cm-tile__empty { color: var(--color-text-label); font-size: var(--text-xs); line-height: 1.35; }

.ovs.cmp-source {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 6px 14px;
    align-items: center;
}
.ovs.cmp-source--stock { --ovs-accent: var(--color-accent-cyan); }
.ovs.cmp-source--alliance { --ovs-accent: var(--color-accent-purple); }
.ovs.cmp-source--spatio_mine { --ovs-accent: var(--color-accent-green); }
.ovs.cmp-source--spatio_foreign { --ovs-accent: #ff8a9b; }
.ovs.cmp-source--cargo { --ovs-accent: var(--color-accent-amber); }
.cmp-source__icon { flex-shrink: 0; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ovs-accent) 45%, transparent)); }
.cmp-source__main { display: grid; gap: 3px; min-width: 0; }
.cmp-source .sor-item__type { color: var(--ovs-accent); }
.cmp-source__place { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--color-text-primary); font-size: var(--text-sm); }
.cmp-source__place strong { color: var(--color-text-bright); }
.cmp-source__where { color: var(--color-text-label); font-family: var(--font-mono); font-size: var(--text-xs); }
.cmp-source__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cmp-source__figures { justify-content: flex-end; }
.cmp-source .sor-item__actions .fac-btn { padding: 3px 10px; }
@container sheet (max-width: 700px) {
    .ovs.cmp-source { grid-template-columns: auto minmax(0, 1fr); }
    .cmp-source__figures,
    .cmp-source .sor-item__actions { grid-column: 1 / -1; justify-content: flex-start; }
}