/* Historique SAME — détail BRUT compact / micro-étapes verrouillées. */
[data-testid='history-mobile-gross-detail'] {
  position: relative;
  background: transparent !important;
}

/* Retour compact, verrouillé. */
[data-testid='history-mobile-gross-detail'] > [data-testid='history-mobile-gross-detail-back'] {
  min-height: 32px !important;
  height: 32px !important;
  padding-inline: 9px !important;
  gap: 6px !important;
  border-radius: 7px !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.018) !important;
  color: rgba(218, 227, 238, 0.72) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

[data-testid='history-mobile-gross-detail'] > [data-testid='history-mobile-gross-detail-back']:hover {
  border-color: rgba(255, 198, 76, 0.22) !important;
  background: rgba(255, 190, 65, 0.035) !important;
  color: rgba(255, 239, 207, 0.92) !important;
}

/* En-tête dense verrouillé. */
[data-testid='history-mobile-gross-detail'] > header {
  margin-top: 12px !important;
  padding: 0 0 11px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065) !important;
}

[data-testid='history-mobile-gross-detail'] > header::before,
[data-testid='history-mobile-gross-detail'] > header::after {
  content: none !important;
}

[data-testid='history-mobile-gross-detail'] > header > p:first-child {
  margin: 0 !important;
  color: rgba(232, 197, 117, 0.72) !important;
  font-size: 9px !important;
  line-height: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
}

[data-testid='history-mobile-gross-detail'] > header > h2 {
  margin: 3px 0 0 !important;
  max-width: none !important;
  color: rgba(247, 250, 253, 0.94) !important;
  font-size: 16px !important;
  line-height: 19px !important;
  font-weight: 760 !important;
  letter-spacing: -0.025em !important;
}

[data-testid='history-mobile-gross-detail'] > header > p:last-child {
  margin: 3px 0 0 !important;
  color: rgba(136, 151, 169, 0.68) !important;
  font-size: 10px !important;
  line-height: 13px !important;
  font-weight: 550 !important;
}

/* Toutes les opérations BRUT, présentes et futures, utilisent automatiquement cette même ligne compacte. */
[data-testid='history-mobile-gross-detail-operation'] {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1.2fr .8fr 1.2fr .7fr 22px !important;
  grid-template-rows: 38px !important;
  align-items: stretch !important;
  min-height: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(167, 180, 195, 0.78) !important;
  font-size: 9px !important;
  line-height: 11px !important;
  cursor: pointer;
  transition: background 140ms ease, box-shadow 140ms ease, transform 90ms ease !important;
}

[data-testid='history-mobile-gross-detail-operation'] > div:first-child,
[data-testid='history-mobile-gross-detail-operation'] > div:first-child > div:first-child,
[data-testid='history-mobile-gross-detail-operation'] > div:first-child > div:first-child > div:first-child,
[data-testid='history-mobile-gross-detail-operation'] > div:first-child > div:last-child,
[data-testid='history-mobile-gross-detail-operation'] > dl,
[data-testid='history-mobile-gross-detail-operation'] > dl > div:first-child {
  display: contents !important;
}

/* Date */
[data-testid='history-mobile-gross-detail-operation'] > div:first-child > div:first-child > p {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 38px !important;
  margin: 0 !important;
  color: rgba(167, 180, 195, 0.78) !important;
  font-size: 9px !important;
  line-height: 11px !important;
  font-weight: 550 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 140ms ease;
}

/* Type */
[data-testid='history-mobile-gross-detail-operation'] > div:first-child > div:first-child > div:first-child > span:first-child {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(167, 180, 195, 0.78) !important;
  font-size: 9px !important;
  line-height: 11px !important;
  font-weight: 550 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 140ms ease;
}

/* Le QR détaillé reste disponible pour l'ouverture future, mais n'encombre pas la ligne compacte. */
[data-testid='history-mobile-gross-detail-operation'] > div:first-child > div:first-child > div:first-child > span:nth-child(2) {
  display: none !important;
}

/* Tarif : première donnée du dl existant. */
[data-testid='history-mobile-gross-detail-operation'] > dl > div:first-child > dt {
  display: none !important;
}

[data-testid='history-mobile-gross-detail-operation'] > dl > div:first-child > dd {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 38px !important;
  margin: 0 !important;
  color: rgba(167, 180, 195, 0.78) !important;
  font-size: 9px !important;
  line-height: 11px !important;
  font-weight: 550 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 140ms ease;
}

/* Les autres données restent dans le DOM pour le futur détail, mais sont masquées dans la ligne fermée. */
[data-testid='history-mobile-gross-detail-operation'] > dl > div:not(:first-child) {
  display: none !important;
}

/* Brut */
[data-testid='history-mobile-gross-detail-operation'] > div:first-child > div:last-child > p {
  display: none !important;
}

[data-testid='history-mobile-gross-detail-operation'] > div:first-child > div:last-child > strong {
  grid-column: 4 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  height: 38px !important;
  margin: 0 !important;
  color: rgba(241, 246, 251, 0.92) !important;
  font-size: 10px !important;
  line-height: 12px !important;
  font-weight: 760 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap;
  transition: color 140ms ease, text-shadow 140ms ease;
}

[data-testid='history-mobile-gross-detail-operation']::after {
  content: '›';
  grid-column: 5;
  grid-row: 1;
  align-self: stretch !important;
  justify-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  height: 38px !important;
  color: rgba(214, 184, 106, 0.64);
  font-size: 14px;
  line-height: 1;
  transition: color 140ms ease, transform 140ms ease;
}

/* Axe vertical verrouillé : Date · Type · Tarif · Brut · › partagent désormais exactement le même centre dans chaque ligne. */
[data-testid='history-mobile-gross-detail-operation'] > div:first-child > div:first-child > p,
[data-testid='history-mobile-gross-detail-operation'] > div:first-child > div:first-child > div:first-child > span:first-child,
[data-testid='history-mobile-gross-detail-operation'] > dl > div:first-child > dd,
[data-testid='history-mobile-gross-detail-operation'] > div:first-child > div:last-child > strong {
  transform: none !important;
  vertical-align: middle !important;
}

/* Survol commun : léger, discret, automatique pour chaque ligne actuelle et future. */
@media (hover: hover) and (pointer: fine) {
  [data-testid='history-mobile-gross-detail-operation']:hover {
    background: linear-gradient(90deg, rgba(255, 190, 65, 0.038), rgba(255, 190, 65, 0.012)) !important;
    box-shadow: inset 2px 0 0 rgba(255, 193, 62, 0.42) !important;
  }

  [data-testid='history-mobile-gross-detail-operation']:hover > div:first-child > div:first-child > p,
  [data-testid='history-mobile-gross-detail-operation']:hover > div:first-child > div:first-child > div:first-child > span:first-child,
  [data-testid='history-mobile-gross-detail-operation']:hover > dl > div:first-child > dd {
    color: rgba(205, 215, 226, 0.9) !important;
  }

  [data-testid='history-mobile-gross-detail-operation']:hover > div:first-child > div:last-child > strong {
    color: #f6d47f !important;
    text-shadow: 0 0 8px rgba(255, 193, 62, 0.12);
  }

  [data-testid='history-mobile-gross-detail-operation']:hover::after {
    color: rgba(238, 204, 120, 0.92);
    transform: translateX(2px);
  }
}

/* Pression commune : retour tactile/souris sans modifier la géométrie du tableau. */
[data-testid='history-mobile-gross-detail-operation']:active {
  transform: scale(0.995);
  background: rgba(255, 190, 65, 0.055) !important;
  box-shadow: inset 2px 0 0 rgba(255, 197, 76, 0.62) !important;
  transition-duration: 60ms !important;
}

/* Zone scrollable verrouillée : la liste seule défile, avec une barre verticale très fine. */
[data-testid='history-mobile-gross-detail-list'] {
  max-height: min(calc(100dvh - 310px), 740px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(147, 160, 179, 0.30) transparent;
}

[data-testid='history-mobile-gross-detail-list']::-webkit-scrollbar {
  width: 4px;
}

[data-testid='history-mobile-gross-detail-list']::-webkit-scrollbar-track {
  background: transparent;
}

[data-testid='history-mobile-gross-detail-list']::-webkit-scrollbar-thumb {
  min-height: 34px;
  border-radius: 999px;
  background: rgba(147, 160, 179, 0.26);
}

[data-testid='history-mobile-gross-detail-list']::-webkit-scrollbar-thumb:hover {
  background: rgba(222, 190, 111, 0.44);
}

@media (max-width: 639px) {
  [data-testid='history-mobile-gross-detail-list'] {
    max-height: min(calc(100dvh - 285px), 740px) !important;
  }
}

@media (min-width: 640px) {
  [data-testid='history-mobile-gross-detail'] > header > h2 {
    font-size: 17px !important;
    line-height: 20px !important;
  }
}