/* transactions.css — volet ÉCHANGES (v0.6.177).
 *
 * Règle de conception 3 : AUCUNE couleur en dur. Tout passe par les tokens de thème
 * (--bg --panel --input --line --txt --acc --ok --bad --warn), sans quoi le volet
 * deviendrait illisible dans quatre des cinq thèmes commutables à chaud.
 */

/* Gabarit « bouton d'en-tête » COPIÉ SUR `#ev-toggle`, à l'identique et pour la même
   raison : la normalisation `#mtg-header-actions > #…-toggle` de search.css énumère les
   volets par identifiant et ne connaît pas celui-ci. Un bouton qui se suffit à lui-même
   n'accroche pas son alignement à un fichier tiers.

   `order:10` — et non l'ordre du DOM. Chaque volet ajoute son bouton APRÈS son propre
   `fetch("/auth/state")` ; l'ordre d'insertion dépend donc de l'ordre de RÉSOLUTION de
   sept requêtes concurrentes, qui n'est garanti par rien. Placer « 7 » à droite de « 6 »
   par simple `appendChild` aurait marché la plupart du temps — c'est-à-dire pas toujours,
   et le défaut aurait été intermittent. `#mtg-header-actions` est en flex : un `order`
   supérieur au défaut (0) des six autres met celui-ci à droite, toujours. */
#tx-toggle {
  position: static; order: 10;
  background: var(--acc); color: var(--on-acc); border: none; border-radius: 8px;
  padding: 6px 12px; font: 700 13px/1.2 system-ui, Segoe UI, Roboto, sans-serif;
  cursor: pointer; box-shadow: none; white-space: nowrap;
  display: inline-flex; gap: 7px; align-items: center;
}
#tx-toggle:hover { filter: brightness(1.08); }
#tx-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.tx-tg-ic { font-size: 14px; line-height: 1; }
.tx-tg-nm { line-height: 1; }

#tx-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(920px, 96vw);
  background: var(--bg); color: var(--txt);
  border-left: 1px solid var(--line);
  display: none; flex-direction: column;
  /* 3000 — LE MEME QUE TOUS LES VOLETS LATERAUX (#col-panel, #ev-panel, cf.
     docs/ui-shell.md). La premiere valeur, 60, etait tres en dessous : des elements de
     l'en-tete et les popovers (z-index 3600 a 4200) restaient VISIBLES par-dessus le
     volet, qui avait pourtant l'air ouvert. Un panneau a demi recouvert ne se lit pas
     comme une erreur d'empilement, il se lit comme une interface cassee. */
  z-index: 3000;
  box-shadow: -8px 0 24px rgba(0, 0, 0, .28);
}
#tx-panel.on { display: flex; }

/* CONTRE-REGLE OBLIGATOIRE. `search.css` pose `select,input{width:100%}` pour TOUTE la
   page — c'est la mise en forme du formulaire de recherche, mais elle n'est bornee a
   rien. MESURE : sans cette regle, une case a cocher de ce volet fait 206 px, pousse le
   nom du deck a 10 px et le reduit a deux caracteres. C'est le defaut signale sur la
   premiere version en puces ; il n'etait pas dans les puces, il etait ici, et il aurait
   suivi n'importe quelle mise en page. Toute case a cocher ajoutee au volet doit rester
   couverte par ce selecteur — d'ou sa portee au PANNEAU et non a une classe. */
#tx-panel input[type="checkbox"] {
  flex: 0 0 auto; width: 15px; height: 15px;
  margin: 0; padding: 0; accent-color: var(--acc);
}
/* MEME PIEGE, MEMES VICTIMES SUIVANTES. Le selecteur de mode et le rayon du filtre de
   distance sont un `select` et un `input[type=number]` : sans contre-regle, `width:100%`
   leur donne toute la largeur du volet, et un champ « 50 » large de 900 px pousse le mot
   « km » a la ligne suivante. Toute commande ajoutee ici doit rester couverte. */
#tx-panel select {
  width: auto; background: var(--input); color: var(--txt);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px;
  font: inherit; font-size: .86rem;
}
#tx-panel input[type="number"] {
  width: 5.2em; background: var(--input); color: var(--txt);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px;
  font: inherit; font-size: .86rem; font-variant-numeric: tabular-nums;
}
#tx-panel input:disabled, #tx-panel select:disabled { opacity: .45; cursor: not-allowed; }

.tx-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: var(--panel); flex: 0 0 auto;
}
.tx-h-title { font-size: 1.05rem; flex: 1 1 auto; }
.tx-hbtn {
  background: transparent; color: var(--txt); border: 1px solid var(--line);
  border-radius: 6px; cursor: pointer; padding: 2px 9px; font: inherit; line-height: 1.4;
}
.tx-hbtn:hover { border-color: var(--acc); }

/* `min-height:0` est INDISPENSABLE sur une colonne flex qui défile : sans lui le corps
   prend la hauteur de son contenu et déborde sous le pli — défaut déjà payé sur
   `.ev-side` dans le volet Événements, recopié ici en connaissance de cause. */
.tx-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px 28px; }

.tx-sec { margin: 0 0 20px; }
.tx-sec h3 { margin: 0 0 4px; font-size: .98rem; color: var(--acc); }
.tx-sechead { display: flex; align-items: center; gap: 10px; }
.tx-sechead h3 { flex: 1 1 auto; }
.tx-hint { margin: 0 0 8px; font-size: .82rem; opacity: .72; line-height: 1.45; }
.tx-empty { margin: 6px 0; opacity: .7; font-size: .9rem; }
.tx-err { margin: 6px 0; color: var(--bad); font-size: .9rem; }
.tx-totals { margin: 6px 0 2px; font-size: .88rem; }

.tx-btn {
  background: var(--input); color: var(--txt); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 10px; cursor: pointer; font: inherit; font-size: .86rem;
}
.tx-btn:hover { border-color: var(--acc); }
.tx-btn.on { border-color: var(--acc); color: var(--acc); }
.tx-btn.prim { background: var(--acc); color: var(--bg); border-color: var(--acc); }
.tx-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* Bascule de vue par ICONES, gabarit de `.col-dview` (collection) : deux libelles de
   largeur variable selon la langue faisaient sauter l'en-tete de section d'une langue a
   l'autre. Le libelle passe en `title` + `aria-label`. */
.tx-views { display: flex; gap: 4px; }
.tx-view {
  flex: 0 0 auto; background: none; border: 1px solid var(--line); color: var(--txt2);
  border-radius: 5px; padding: 2px 7px; font-size: 13px; line-height: 1.3;
  cursor: pointer; min-width: 28px; text-align: center;
}
.tx-view:hover { border-color: var(--acc); color: var(--acc); }
.tx-view.on { border-color: var(--acc); color: var(--acc); background: var(--panel); }

/* --- Decks : LISTE a selection multiple -------------------------------------- */
/* Anciennement des puces en flex. Elles se comprimaient des que la place manquait — nom
   reduit a deux caracteres, compte de proxys passe a la ligne — et une puce illisible ne
   dit plus ce qu'on coche. Une liste en colonne aligne les comptes et defile. */
.tx-decks {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--line); border-radius: 8px;
  max-height: 34vh; overflow-y: auto; background: var(--panel);
}
.tx-deck { border-bottom: 1px solid var(--line); }
.tx-deck:last-child { border-bottom: none; }
.tx-deck > label {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 10px; cursor: pointer; font-size: .88rem; min-width: 0;
}
.tx-deck:hover { background: var(--input); }
.tx-deck-vide > label { opacity: .5; }     /* 0 proxy = rien a acquerir */
/* Le nom prend la place restante et s'abrege proprement ; `min-width:0` est ce qui
   AUTORISE l'abregement dans un conteneur flex — sans lui, un nom long pousse le compte
   de proxys hors de la ligne au lieu de se couper. */
.tx-deck-nm { flex: 1 1 auto; min-width: 0; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
/* Le compte reste a droite, sur UNE ligne, aligne d'une ligne a l'autre. */
.tx-deck-px { flex: 0 0 auto; opacity: .7; font-size: .8rem; white-space: nowrap;
              font-variant-numeric: tabular-nums; }

/* --- Tableau ---------------------------------------------------------------- */
.tx-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tx-table th, .tx-table td {
  text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tx-table th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
.tx-table tr:hover td { background: var(--panel); }
.tx-decknames { font-size: .76rem; opacity: .6; margin-top: 2px; }
.tx-own { font-size: .74rem; color: var(--ok); border: 1px solid var(--ok);
          border-radius: 4px; padding: 0 4px; }
.tx-prix { white-space: nowrap; }
.tx-yes { color: var(--ok); }
.tx-no { opacity: .45; }

/* --- Miniatures ------------------------------------------------------------- */
.tx-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.tx-card { margin: 0; background: var(--panel); border: 1px solid var(--line);
           border-radius: 8px; overflow: hidden; }
.tx-card img { width: 100%; display: block; }
.tx-noimg { width: 100%; aspect-ratio: 5 / 7; background: var(--input); }
.tx-card figcaption { padding: 5px 7px; font-size: .78rem; line-height: 1.35; }
.tx-badges { display: flex; justify-content: space-between; gap: 6px; margin: 2px 0; }

/* --- Contacts --------------------------------------------------------------- */
.tx-contacts { list-style: none; margin: 0; padding: 0; }
.tx-contacts li { border: 1px solid var(--line); border-radius: 8px;
                  padding: 8px 10px; margin-bottom: 8px; background: var(--panel); }
.tx-ct-head { display: flex; align-items: center; gap: 10px; }
.tx-ct-head b { flex: 1 1 auto; }
.tx-ct-lines { display: flex; flex-direction: column; gap: 2px; margin-top: 5px;
               font-size: .83rem; }
.tx-ct-b { color: var(--ok); }
.tx-ct-s { color: var(--warn); }
.tx-ct-lines i { opacity: .72; font-style: normal; }

/* --- Modes de classement et aide « ? » -------------------------------------- */
/* Le bloc s'enroule (`flex-wrap`) : cinq libelles de modes traduits n'ont pas la meme
   largeur d'une langue a l'autre, et un en-tete de section qui deborde pousse le titre
   hors de l'ecran dans deux langues sur onze. */
.tx-modes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tx-mode-lb { font-size: .8rem; opacity: .72; }
/* `position:relative` PORTE le popover : sans lui, `.tx-aide` se placerait par rapport
   au volet et non par rapport au bouton. */
.tx-help { position: relative; display: inline-flex; }
.tx-helpb {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--acc); background: transparent; color: var(--acc);
  font: 700 11px/1 system-ui, Segoe UI, Roboto, sans-serif;
  cursor: help; display: inline-flex; align-items: center; justify-content: center;
}
.tx-helpb:hover { background: var(--panel); }
.tx-helpb:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
/* 3070 = celui de `.mtgd-colorpop`, dont ce popover est le gabarit. Il doit passer
   au-dessus du contenu du volet (3000) sans atteindre la loupe (3600). */
.tx-aide {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 3070;
  background: var(--panel2, var(--panel)); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 12px 40px var(--shadow, rgba(0, 0, 0, .45));
  padding: 9px 11px; width: min(420px, 78vw); font-size: .8rem; line-height: 1.45;
}
.tx-aide[hidden] { display: none; }
.tx-aide h4 {
  margin: 0 0 6px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--mut, var(--txt2));
}
.tx-aide-l { display: flex; gap: 8px; padding: 3px 0; }
.tx-aide-l b { flex: 0 0 34%; color: var(--acc); font-weight: 600; }
.tx-aide-l span { flex: 1 1 auto; opacity: .82; }

/* --- Filtre de distance ----------------------------------------------------- */
.tx-dist { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
           margin: 0 0 8px; font-size: .84rem; }
.tx-dist-lb { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tx-dist-lb:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.tx-dist-no { opacity: .62; font-size: .78rem; }

/* --- Contacts : les memes nombres dans tous les modes ------------------------ */
.tx-contacts li[data-detail] { cursor: pointer; }
.tx-contacts li[data-detail]:hover { border-color: var(--acc); }
.tx-contacts li[data-detail]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.tx-ct-num { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tx-bg {
  font-size: .74rem; border: 1px solid var(--line); border-radius: 4px;
  padding: 0 5px; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: .9;
}
.tx-bg-b { color: var(--ok); border-color: var(--ok); }
.tx-bg-s { color: var(--warn); border-color: var(--warn); }
.tx-bg-up { color: var(--ok); }
.tx-bg-down { color: var(--bad); border-color: var(--bad); }
.tx-bg-d, .tx-bg-km { opacity: .7; }

/* --- Fenetre de detail ------------------------------------------------------ */
/* 3400 : AU-DESSUS du contenu du volet (3000) et de son popover d'aide (3070), EN
   DESSOUS de la loupe (3600) — survoler une carte dans la fenetre doit l'agrandir
   par-dessus, pas derriere. */
#tx-modal {
  position: fixed; inset: 0; z-index: 3400;
  background: rgba(0, 0, 0, .52);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
#tx-modal[hidden] { display: none; }
.tx-md-box {
  background: var(--bg); color: var(--txt); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  width: min(760px, 96vw); max-height: 88vh;
  display: flex; flex-direction: column;
}
.tx-md-head {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--panel);
  border-radius: 10px 10px 0 0;
}
.tx-md-t { flex: 1 1 auto; font-size: 1rem; }
/* `min-height:0` : meme raison que `.tx-body` — sans lui la boite prend la hauteur de
   son contenu et deborde de l'ecran au lieu de faire defiler. */
.tx-md-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px 16px; }
.tx-md-body h4 { margin: 12px 0 5px; font-size: .86rem; color: var(--acc); }
.tx-md-body h4:first-of-type { margin-top: 2px; }
.tx-md-sum { margin: 0 0 6px; font-size: .86rem; font-variant-numeric: tabular-nums; }

/* --- Loupe de survol -------------------------------------------------------- */
/* 3600 = celui de `#zoom` (search.css) : la loupe doit passer AU-DESSUS du volet
   (3000), sans quoi elle serait rendue derriere lui et resterait invisible. */
#tx-zoom {
  position: fixed; display: none; z-index: 3600; pointer-events: none;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); background: var(--panel);
}
#tx-zoom img { display: block; width: 244px; }

@media (max-width: 760px) {
  #tx-panel { width: 100vw; }
  .tx-table .tx-decknames { display: none; }
  #tx-zoom { display: none !important; }   /* pas de survol au doigt */
  /* Le popover d'aide reste ancre par sa DROITE (`right:0`) et s'etale vers la gauche.
     MESURE, viewport 375 px : le basculer en `left:0` — reflexe naturel — l'accroche au
     bord GAUCHE du bouton « ? », qui est lui-meme a 332 px du bord ; le popover sortait
     alors de 300 px et le volet gagnait une barre de defilement horizontale. Seule la
     LARGEUR doit changer. */
  .tx-aide { width: min(420px, calc(100vw - 32px)); }
  .tx-aide-l { flex-direction: column; gap: 1px; }
  .tx-aide-l b { flex: 0 0 auto; }
  #tx-modal { padding: 8px; }
  .tx-md-box { width: 100vw; max-height: 94vh; }
}