.anima-equipment-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.anima-equipment-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.anima-equipment-tab {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 7px 10px;
  border-radius: 3px;
}

.anima-equipment-tab.active,
.anima-equipment-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.anima-equipment-search {
  max-width: 380px;
  margin-left: auto;
}

.anima-equipment-card {
  overflow: hidden;
}

.anima-equipment-top-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--border);
  height: 18px;
  scrollbar-color: color-mix(in srgb, var(--accent) 72%, transparent) var(--surface);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.anima-equipment-scroll-spacer {
  width: max(100%, 1680px);
  height: 2px;
}

.anima-equipment-top-scroll::-webkit-scrollbar {
  height: 12px;
}

.anima-equipment-top-scroll::-webkit-scrollbar-track {
  background: var(--surface);
}

.anima-equipment-top-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 72%, transparent);
  border: 2px solid var(--surface);
  border-radius: 999px;
}

.anima-equipment-table-wrap {
  max-height: calc(100vh - 260px);
  min-height: 320px;
  overflow: auto;
}

.anima-equipment-table {
  width: max(100%, 1680px);
  border-collapse: collapse;
}

.anima-equipment-table th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
}

.anima-equipment-table th:first-child {
  text-align: left;
  left: 0;
  z-index: 4;
  min-width: 190px;
}

.anima-equipment-table td {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--ink);
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.anima-equipment-table th:nth-child(2),
.anima-equipment-table td:nth-child(2) {
  min-width: 110px;
}

.anima-equipment-table th:nth-child(3),
.anima-equipment-table td:nth-child(3),
.anima-equipment-table th:nth-child(4),
.anima-equipment-table td:nth-child(4) {
  min-width: 90px;
}

.anima-equipment-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 190px;
  background: var(--surface);
  box-shadow: 10px 0 14px rgba(0, 0, 0, 0.28); /* one-off shadow */
}

.anima-equipment-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.anima-equipment-table--goods {
  width: 100%;
}

.anima-equipment-name {
  color: var(--accent) !important;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .anima-equipment-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .anima-equipment-search {
    max-width: none;
    margin-left: 0;
  }

  /* La colonne du nom est COLLÉE (`position: sticky; left: 0`), donc sa largeur est
     retranchée du cadre visible à TOUTE position de défilement — ce n'est pas une
     colonne qu'on peut faire sortir de l'écran. Avec `white-space: nowrap` et aucun
     plafond, elle grossissait avec le nom le plus long du tableau (une colonne est
     partagée par toutes les lignes : un seul objet personnalisé au nom long suffisait).
     MESURÉ sur téléphone, cadre de 326 px à 360 et 388 px à 422 : à partir de 28
     caractères à 360 px et de 34 à 422 px, la colonne collée couvrait tout le cadre et
     AUCUNE des treize autres colonnes n'était plus atteignable, à aucune position de
     défilement. Le nom le plus long du catalogue livré en compte 42 (onglet Divers),
     et un objet personnalisé n'a pas de limite.
     Le plafond rend la colonne indépendante de la longueur du nom, qui passe à la ligne
     au lieu de la pousser. Relevé après : largeur constante quelle que soit la longueur,
     et le nombre de colonnes atteignables redevient celui d'un nom court.
     `overflow-wrap: anywhere` couvre le pire cas, un nom d'un seul mot insécable.
     Réservé au téléphone : à 768 et 1024 px le cadre est assez large pour que la colonne
     collée laisse des colonnes visibles même avec le plus long des noms — relevé
     identique avant et après à ces deux largeurs.

     LE PLAFOND EST DESCENDU DE 190 À 150 px, et il faut abaisser le `min-width` avec lui,
     sinon c'est ce plancher-là qui décide. La valeur d'origine ne réparait que le nom
     long ; le reste du défaut est le dimensionnement lui-même. Ce que la colonne collée
     prend, elle le prend à TOUTE position de défilement, donc une colonne du tableau
     n'est atteignable que si elle tient dans la bande « cadre moins colonne collée ».
     MESURÉ en Chromium, vraies polices, chaîne de conteneurs décalquée, catalogue livré
     (102 armes, 365 biens), en balayant le plafond de 100 à 260 px :

       plafond      colonnes atteignables à 360 px      marge, sur Armes, entre la bande
                    Armes (sur 13)    Divers (sur 6)    et la plus large des colonnes
                                                        qu'on cherche à y faire entrer
       ──────────────────────────────────────────────────────────────────────────────
       130 px       12                5                 35,5 px
       140 px       12                5                 26,0 px
       150 px       12                5                 16,6 px
       160 px       12                5                  7,1 px
       165 px       12                5                  2,4 px
       168 px       10                4                  —
       190 px       10                3                  —   (le plafond d'avant)

     La falaise est entre 165 et 168 px sur LES DEUX onglets : au-delà, « Disponibilité »
     et « Classe d'arme » (environ 159 px) ne tiennent plus dans la bande. En dessous de
     165 px le gain est le même partout, seule change la marge — d'où le choix de 150 px
     et non de 165 : la largeur de ces colonnes vient de leur CONTENU, un libellé traduit
     ou une clé de type d'arme un peu plus longue les repousse, et 2,4 px valent un quart
     de caractère quand 16,6 px en valent deux.
     CE QUE ÇA COÛTE : le nom passe à la ligne plus tôt, donc les rangées grandissent —
     corps du tableau de 5 666 à 5 837 px sur Armes (+3,0 %) et de 20 008 à 20 992 px sur
     Divers (+4,9 %) ; la rangée la plus haute ne bouge pas sur Armes (81,8 px) et gagne
     une ligne sur Divers. Le nom n'est jamais coupé — il se replie —, et deux tiers des
     noms livrés tiennent encore sur une seule ligne (68 sur 102 en Armes, 230 sur 365 en
     Divers, contre 85 et 308 à 190 px).
     À 422 px le relevé est le même à 190 et à 150 : le cadre y est déjà assez large, le
     gain est celui des fenêtres les plus étroites. */
  .anima-equipment-table th:first-child,
  .anima-equipment-table td:first-child {
    min-width: 150px;
    max-width: 150px;
  }

  .anima-equipment-name {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Champs de prix de la modale d'équipement : le montant puis sa devise. Sortis
   d'attributs `style` du gabarit ; les deux largeurs l'emportent sur celles de
   `.form-control-sm` et `.form-select-sm` par l'ordre des feuilles, vendor.css
   étant chargée avant celle-ci. */
.anima-price-amount-input {
  width: 80px;
}

.anima-price-currency-select {
  width: 90px;
}