/* Asset Vault — Vue Comptes (accounts.js) — REFONTE v3 « premium light / UBS ».
 *
 * Thème CLAIR : sections par catégorie en blocs nets à filet, lignes de compte
 * spacieuses, badges de type à FOND TINTÉ CLAIR (couleur TYPE_META en texte +
 * fond ~10 %), valeurs tabular-nums (positif/négatif colorées), poignées de drag
 * discrètes, éditeur inline net. La carte englobante (.card) est blanche (app.css).
 *
 * Contraintes : tokens --av-* UNIQUEMENT (aucune couleur en dur), aucun style
 * inline (CSP default-src 'self'). Le markup d'accounts.js et l'API dnd ne
 * changent pas : on ne fait que restyler les classes existantes.
 *
 * État « glissement » : les artefacts PARTAGÉS de dnd.js (.dnd-ghost = item
 * soulevé ombré, .dnd-source = placeholder pointillé teinté, .dnd-indicator =
 * barre coral 2px, .dnd-target = catégorie ciblée, .dnd-active) sont définis
 * dans app.css (utilitaire dnd.js, réutilisé par toutes les vues) — on ne les
 * redéfinit pas ici pour éviter tout doublon. On complète juste, ci-dessous, le
 * comportement propre à la ligne de compte pendant le drag.
 *
 * Mobile-first ; renforts ≥ 480px / ≥ 560px / ≥ 720px en fin de fichier.
 */

/* ---------- En-tête de la carte Comptes ---------- */

.acc-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--av-space-2);
  align-items: center;
}

.acc-toolbar__spacer {
  flex: 1 1 auto;
}

/* ---------- Section de catégorie ---------- */

/* Chaque catégorie est un bloc net : fond blanc, filet clair, coins arrondis,
   ombre douce. Aéré et « bancaire ». */
.acc-cat {
  margin-top: var(--av-space-3);
  background: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius);
  box-shadow: var(--av-shadow-sm);
  overflow: hidden;
}

.acc-cat:first-child {
  margin-top: 0;
}

/* En-tête aéré : poignée, nom + compteur, total à droite, menu. Séparateur fin
   sous l'en-tête, léger fond alterné pour asseoir la hiérarchie. */
.acc-cat__head {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  padding: var(--av-space-3) var(--av-space-3);
  background: var(--av-surface-2);
  border-bottom: 1px solid var(--av-border);
}

/* Poignée de réordonnancement de la catégorie elle-même. Discrète mais visible ;
   curseur grab + touch-action:none hérités de [data-drag-handle] (app.css). */
.acc-cat__grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--av-text-tertiary);
  border-radius: var(--av-radius-sm);
  font-size: 1rem;
  line-height: 1;
  transition: color 0.15s ease, background 0.15s ease;
}

.acc-cat__grip:hover {
  color: var(--av-text);
  background: var(--av-surface-3);
}

.acc-cat__grip:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

.acc-cat__titlewrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

/* Nom de catégorie en capitales douces (semibold + léger tracking), quasi noir. */
.acc-cat__title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--av-text);
  /* Coupe entre les mots (« COMPTES / BANCAIRES ») et jamais en plein mot,
     pour éviter le « BANCAIRE / S » disgracieux sur iPhone. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/* Goutte de liquidité inline dans le titre d'une catégorie liquide. */
.acc-cat__liq {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 6px;
  line-height: 0;
  color: var(--av-type-cash);
}

/* Compteur discret. */
.acc-cat__count {
  font-size: 0.74rem;
  color: var(--av-text-tertiary);
  letter-spacing: 0.01em;
}

/* Section RÉGULARISATIONS : réutilise .acc-cat, sous-groupes par type. */
.acc-accrual__group {
  padding-top: var(--av-space-2);
}

.acc-accrual__grouphead {
  padding: var(--av-space-2) var(--av-space-3) var(--av-space-1);
}

/* Total à droite : coloré selon le signe (les classes acc-row__value--pos/neg
   sont posées par accounts.js ; couleur neutre par défaut). */
.acc-cat__total {
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
  color: var(--av-text);
}

/* Menu ⋯ de la catégorie (Renommer / Supprimer). */
.acc-cat__menu {
  position: relative;
  flex: 0 0 auto;
}

.acc-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--av-text-tertiary);
  border-radius: var(--av-radius-sm);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  touch-action: manipulation;
  transition: color 0.15s ease, background 0.15s ease;
}

.acc-menu__toggle:hover {
  color: var(--av-text);
  background: var(--av-surface-3);
}

.acc-menu__toggle:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

/* Popover d'actions : carte blanche flottante, ombre portée.
   (#6) Monté sur <body> en position: fixed (coordonnées left/top posées par
   accounts.js depuis le rect du bouton ⋯), pour ne PAS être coupé par
   .acc-cat { overflow: hidden }. z-index au-dessus des barres/onglets. */
.acc-menu__pop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  min-width: 168px;
  max-width: calc(100vw - 16px);
  display: flex;
  flex-direction: column;
  padding: var(--av-space-1);
  background: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius);
  box-shadow: var(--av-shadow);
}

.acc-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: var(--av-text);
  border-radius: var(--av-radius-sm);
  font-size: 0.9rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease;
}

.acc-menu__item:hover {
  background: var(--av-surface-2);
}

.acc-menu__item:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

.acc-menu__item--danger {
  color: var(--av-negative);
}

.acc-menu__item--danger:hover {
  background: var(--av-negative-soft);
}

/* ---------- Liste des comptes d'une catégorie ---------- */

.acc-rows {
  display: flex;
  flex-direction: column;
  /* min-height : garde une cible de drop même quand la catégorie est vide. */
  min-height: 8px;
  padding: 0;
}

.acc-rows--empty {
  min-height: 52px;
}

.acc-cat__empty {
  color: var(--av-text-tertiary);
  font-size: 0.84rem;
  padding: var(--av-space-3) var(--av-space-3) var(--av-space-3) 46px;
}

/* ---------- Ligne de compte ---------- */

/* Mobile-first : grille 2 lignes pour laisser le nom respirer (sinon il
   s'enroule caractère par caractère sur iPhone). Ligne 1 : poignée | nom | ⋯ ;
   ligne 2 : (sous le nom) méta + valeur alignée à droite. Repasse en ligne
   unique dès 560px (voir plus bas). */
.acc-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "grip main    actions"
    "grip value   value";
  column-gap: var(--av-space-2);
  row-gap: var(--av-space-1);
  align-items: center;
  padding: var(--av-space-3);
  border-top: 1px solid var(--av-border);
  background: transparent;
  transition: background 0.15s ease;
}

.acc-row__grip,
.acc-row__grip-spacer { grid-area: grip; align-self: center; }
.acc-row__main { grid-area: main; }
.acc-row__valuewrap { grid-area: value; justify-self: end; }
.acc-row__actions { grid-area: actions; }

.acc-rows > .acc-row:first-child {
  border-top: none;
}

/* Survol de ligne subtil (--av-surface-3). */
.acc-row:hover {
  background: var(--av-surface-3);
}

.acc-row--archived {
  opacity: 0.62;
}

.acc-row--archived:hover {
  background: transparent;
}

/* Poignée de drag du compte (⠿). Discrète mais visible ; [data-drag-handle]
   fixe touch-action:none + curseur grab depuis app.css. Cible confortable. */
.acc-row__grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--av-text-tertiary);
  border-radius: var(--av-radius-sm);
  font-size: 1.05rem;
  line-height: 1;
  transition: color 0.15s ease, background 0.15s ease;
}

.acc-row__grip:hover {
  color: var(--av-text);
  background: var(--av-surface-2);
}

.acc-row__grip:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

.acc-row__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

/* Nom lisible, quasi noir. */
.acc-row__name {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  font-weight: 600;
  color: var(--av-text);
  line-height: 1.3;
  min-width: 0;
}

.acc-row__nametxt {
  overflow-wrap: anywhere;
  min-width: 0;
}

.acc-row__meta {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  flex-wrap: wrap;
}

/* Régularisation EXCLUE des totaux : ligne atténuée + petit tag « exclu ». */
.acc-row--excluded .acc-row__nametxt,
.acc-row--excluded .acc-row__value {
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.acc-row__excl {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--av-text-tertiary);
  background: var(--av-surface-3);
  border-radius: 5px;
  padding: 1px 6px;
}

/* ---------- Badge de type (fond tinté clair) ---------- */

/* Pastille : couleur du type en texte, fond tinté clair (~10 %), point de la
   même teinte. accounts.js pose la classe utilitaire .acc-badge--<type>. */
.acc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--av-radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  white-space: nowrap;
}

.acc-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* Teintes par type sur fond blanc (écho TYPE_META / tokens --av-type-*). Texte à
   la couleur du type, fond ~10 % de la même teinte DÉRIVÉ du token via color-mix
   (aucune valeur de couleur en dur : la teinte reste synchrone avec --av-type-*).
   color-mix : Safari 16.2+, Chrome 111+, Firefox 113+ (cible iPhone couverte). */
.acc-badge--cash {
  color: var(--av-type-cash);
  background: color-mix(in srgb, var(--av-type-cash) 10%, transparent);
}
.acc-badge--investment {
  color: var(--av-type-investment);
  background: color-mix(in srgb, var(--av-type-investment) 10%, transparent);
}
.acc-badge--prevoyance {
  color: var(--av-type-prevoyance);
  background: color-mix(in srgb, var(--av-type-prevoyance) 10%, transparent);
}
.acc-badge--collection {
  color: var(--av-type-collection);
  background: color-mix(in srgb, var(--av-type-collection) 10%, transparent);
}
.acc-badge--property {
  color: var(--av-type-property);
  background: color-mix(in srgb, var(--av-type-property) 10%, transparent);
}
.acc-badge--debt {
  color: var(--av-type-debt);
  background: color-mix(in srgb, var(--av-type-debt) 10%, transparent);
}
.acc-badge--receivable {
  color: var(--av-type-receivable);
  background: color-mix(in srgb, var(--av-type-receivable) 10%, transparent);
}
.acc-badge--payable {
  color: var(--av-type-payable);
  background: color-mix(in srgb, var(--av-type-payable) 10%, transparent);
}
.acc-badge--unknown {
  color: var(--av-text-secondary);
  background: var(--av-surface-3);
}

/* Devise en gris. */
.acc-row__currency {
  font-size: 0.76rem;
  color: var(--av-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Bloc valeur (à droite) : affichage + bouton crayon, ou éditeur inline. */
.acc-row__valuewrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

/* Valeur cliquable pour édition : tabular-nums, coloration pos/neg posée par
   accounts.js (--pos/--neg). Au repos transparente, discrètement encadrée au
   survol pour signaler l'édition. */
.acc-row__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--av-radius-sm);
  padding: 4px 8px;
  color: var(--av-text);
  cursor: text;
  font-size: 0.95rem;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.acc-row__value:hover {
  border-color: var(--av-border-strong);
  background: var(--av-surface);
}

.acc-row__value:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

.acc-row__value--pos { color: var(--av-positive); }
.acc-row__value--neg { color: var(--av-negative); }

/* Icône crayon d'édition, claire et discrète. */
.acc-row__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--av-text-tertiary);
  border-radius: var(--av-radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  touch-action: manipulation;
  transition: color 0.15s ease, background 0.15s ease;
}

.acc-row__edit:hover {
  color: var(--av-accent);
  background: var(--av-accent-soft);
}

.acc-row__edit:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

/* ---------- Éditeur inline de valeur ---------- */

/* Input + ✓/✗ nets, centrés verticalement. */
.acc-inline {
  display: flex;
  align-items: center;
  gap: 4px;
}

.acc-inline__input {
  width: 8.5em;
  max-width: 42vw;
  padding: 7px 9px;
  font-size: 0.92rem;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--av-text);
  background: var(--av-surface);
  border: 1px solid var(--av-accent);
  border-radius: var(--av-radius-sm);
}

.acc-inline__input:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

.acc-inline__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-sm);
  background: var(--av-surface);
  color: var(--av-text);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.acc-inline__btn:hover {
  background: var(--av-surface-2);
}

.acc-inline__btn:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

.acc-inline__btn--ok {
  border-color: var(--av-positive);
  color: var(--av-positive);
}

.acc-inline__btn--ok:hover {
  background: var(--av-positive-soft);
}

.acc-inline__btn--cancel {
  color: var(--av-text-secondary);
}

.acc-inline__btn--cancel:hover {
  background: var(--av-surface-3);
}

/* ---------- Menu d'actions du compte (Modifier / Archiver / Supprimer) ---------- */

.acc-row__actions {
  position: relative;
  flex: 0 0 auto;
}

/* ---------- Comptes archivés (repliable, discret) ---------- */

.acc-archived {
  margin-top: var(--av-space-3);
  background: var(--av-surface);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius);
  box-shadow: var(--av-shadow-sm);
  padding: 0 var(--av-space-3);
}

.acc-archived__summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--av-text-secondary);
  user-select: none;
  list-style: none;
  padding: var(--av-space-3) 0;
}

.acc-archived__summary::-webkit-details-marker {
  display: none;
}

.acc-archived__summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--av-text-tertiary);
  transition: transform 0.15s ease;
}

.acc-archived[open] .acc-archived__summary::before {
  transform: rotate(90deg);
}

.acc-archived__summary:hover {
  color: var(--av-text);
}

.acc-archived__summary:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
  border-radius: var(--av-radius-sm);
}

.acc-archived .acc-rows {
  border-top: 1px solid var(--av-border);
  padding-bottom: var(--av-space-2);
}

/* Ligne archivée : pas de poignée, on garde l'alignement via un espace réservé. */
.acc-row--archived .acc-row__grip-spacer {
  display: inline-flex;
  width: 36px;
  height: 1px;
  flex: 0 0 auto;
}

/* ---------- État vide global ---------- */

.acc-empty {
  color: var(--av-text-secondary);
  font-size: 0.9rem;
  padding: var(--av-space-5) var(--av-space-3);
  text-align: center;
}

/* ---------- Champ « valeur initiale » du dialogue de création ---------- */

.acc-field-hint {
  font-size: 0.76rem;
  color: var(--av-text-secondary);
  margin-top: -4px;
}

/* ---------- État « en cours de glissement » (spécifique aux lignes) ----------
   Les artefacts partagés .dnd-ghost / .dnd-source / .dnd-indicator / .dnd-target
   / .dnd-active sont stylés dans app.css (thème clair : ombre --av-shadow-lg +
   léger scale sur le fantôme soulevé, placeholder pointillé teinté, barre coral
   2px, catégorie ciblée soulignée). Ici on neutralise juste le survol de la
   ligne source pendant le drag pour ne pas concurrencer l'effet « soulevé ». */
.acc-row.dnd-source:hover {
  background: transparent;
}

/* ---------- Renforts responsive ---------- */

/* iPhone étroit (< 480px) : la place manque pour aligner sur une seule ligne
   poignée + « IMMOBILIER & DETTES » + « CHF 250 000.00 » + menu (le nom se
   brise et le total le chevauche). On passe l'en-tête de catégorie en DEUX
   lignes : ligne 1 = poignée · nom+compteur · menu ; ligne 2 = total aligné à
   droite. L'en-tête reste net et lisible, sans collision. */
@media (max-width: 479px) {
  .acc-cat__head {
    flex-wrap: wrap;
    row-gap: var(--av-space-1);
  }

  /* Le nom + compteur occupe tout l'espace restant de la 1re ligne. */
  .acc-cat__titlewrap {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Le total bascule sur une 2e ligne pleine largeur, aligné à droite,
     décalé pour s'aligner sous le nom (au-delà de la poignée). */
  .acc-cat__total {
    flex: 1 0 100%;
    order: 3;
    text-align: right;
    padding-left: 38px;
  }

  /* Le menu ⋯ reste sur la 1re ligne, à droite du nom. */
  .acc-cat__menu {
    order: 2;
  }
}

@media (min-width: 480px) {
  .acc-cat__title {
    font-size: 0.76rem;
  }

  .acc-row__value {
    font-size: 1rem;
  }
}

/* Dès qu'il y a la place : ligne unique poignée | nom+méta | valeur | ⋯. */
@media (min-width: 560px) {
  .acc-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "grip main value actions";
    column-gap: var(--av-space-3);
  }

  .acc-row__valuewrap {
    justify-self: end;
  }
}

@media (min-width: 720px) {
  .acc-cat__head {
    padding: var(--av-space-3) var(--av-space-4);
  }

  .acc-row {
    padding: var(--av-space-3) var(--av-space-4);
  }

  .acc-cat__empty {
    padding-left: 62px;
  }

  .acc-row__meta {
    gap: var(--av-space-3);
  }

  .acc-archived {
    padding: 0 var(--av-space-4);
  }
}

/* ==========================================================================
   Historique de compte (lot #6, account-history.js)
   Modale centrée réutilisant .dialog/.dialog__body/::backdrop de app.css.
   Toutes les couleurs viennent des tokens --av-*. Lisible dès 375px.
   ========================================================================== */

.acchist__body {
  gap: var(--av-space-3);
}

.acchist__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--av-space-3);
}

.acchist__titlewrap {
  display: flex;
  flex-direction: column;
  gap: var(--av-space-2);
  min-width: 0;
}

.acchist__title {
  overflow-wrap: anywhere;
}

.acchist__meta {
  display: flex;
  align-items: center;
  gap: var(--av-space-2);
  flex-wrap: wrap;
}

.acchist__currency {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--av-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Bouton de fermeture ×, rond discret cohérent avec le langage visuel. */
.acchist__close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-pill);
  background: var(--av-surface-2);
  color: var(--av-text-secondary);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.acchist__close:hover {
  background: var(--av-surface-3);
  color: var(--av-text);
  border-color: var(--av-border-strong);
}

.acchist__close:focus-visible {
  outline: none;
  box-shadow: var(--av-focus-ring);
}

/* ---------- Mini-courbe SVG (thème carte claire) ---------- */

.acchist__chart {
  position: relative;
  /* Le corps de la modale est un conteneur flex-column : sans flex-shrink:0 la
     boîte du graphe s'écrase quand le contenu est haut (grille perf + table).
     On la fige à sa hauteur. */
  flex: 0 0 148px;
  height: 148px;
  min-height: 148px;
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-sm);
  background: var(--av-surface-2);
  padding: var(--av-space-2);
  overflow: hidden;
}

.acchist__spark {
  display: block;
  width: 100%;
  height: 100%;
}

.acchist__spark-area {
  fill: var(--av-accent-soft);
  stroke: none;
}

.acchist__spark-line {
  stroke: var(--av-accent);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.acchist__spark-dot {
  fill: var(--av-accent);
  stroke: var(--av-surface);
  stroke-width: 2;
}

.acchist__chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 0 var(--av-space-3);
  text-align: center;
  font-size: 0.85rem;
  color: var(--av-text-secondary);
}

/* ---------- Bloc performance (valeur investie / rendement) ---------- */

.acchist__perf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--av-space-2);
}

.acchist__perf-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--av-space-2) var(--av-space-3);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-sm);
  background: var(--av-surface-2);
}

.acchist__perf-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--av-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.acchist__perf-value {
  font-family: var(--av-font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--av-text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ---------- Section relevés ---------- */

.acchist__section {
  display: flex;
  flex-direction: column;
  gap: var(--av-space-2);
}

.acchist__subtitle {
  font-family: var(--av-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--av-text);
  margin: 0;
}

.acchist__tablewrap {
  max-height: 40vh;
  overflow-y: auto;
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-sm);
}

.acchist__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.acchist__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--av-surface-2);
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--av-text-secondary);
  padding: var(--av-space-2) var(--av-space-3);
  border-bottom: 1px solid var(--av-border);
}

.acchist__th-value,
.acchist__td-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.acchist__table tbody td {
  padding: var(--av-space-2) var(--av-space-3);
  border-bottom: 1px solid var(--av-border);
  color: var(--av-text);
}

.acchist__table tbody tr:last-child td {
  border-bottom: none;
}

.acchist__td-date {
  color: var(--av-text-secondary);
  white-space: nowrap;
}

.acchist__empty {
  margin: 0;
  padding: var(--av-space-3);
  font-size: 0.85rem;
  color: var(--av-text-secondary);
  border: 1px solid var(--av-border);
  border-radius: var(--av-radius-sm);
  background: var(--av-surface-2);
}

.acchist__actions {
  margin-top: var(--av-space-1);
}

/* iPhone étroit (< 400px) : la grille performance repasse en une colonne pour
   ne jamais déborder. */
@media (max-width: 400px) {
  .acchist__perf {
    grid-template-columns: 1fr;
  }
}