/* Historique SAME — KPI BRUT / micro-étapes 1-9 : carte complète + coque du détail. */
[data-testid='history-mobile-finance-kpi-brut'] {
  min-height: 82px !important;
  padding: 9px 10px 7px !important;
  border: 1px solid rgba(255, 191, 73, 0.32) !important;
  border-radius: 7px !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 190, 65, 0.09), transparent 42%),
    linear-gradient(145deg, rgba(11, 25, 42, 0.99), rgba(5, 14, 25, 0.995)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 0 0 1px rgba(255, 189, 59, 0.025),
    0 8px 20px rgba(0, 0, 0, 0.18) !important;
  transition:
    transform 160ms cubic-bezier(.2,.8,.2,1),
    border-color 160ms ease,
    background 180ms ease,
    box-shadow 180ms ease !important;
}

[data-testid='history-mobile-finance-kpi-brut'] > span {
  min-height: 24px !important;
  font-size: 12px !important;
  line-height: 14px !important;
  font-weight: 760 !important;
  letter-spacing: 0.045em !important;
  transition: color 160ms ease;
}

[data-testid='history-mobile-finance-kpi-brut'] > strong {
  min-height: 22px !important;
  margin-top: 3px !important;
  font-size: 18px !important;
  line-height: 21px !important;
  font-weight: 820 !important;
  letter-spacing: -0.035em !important;
  white-space: nowrap;
  transition: color 160ms ease, text-shadow 180ms ease, transform 80ms ease;
}

[data-testid='history-mobile-finance-kpi-brut'] > em {
  margin-top: 4px !important;
  font-size: 11px !important;
  line-height: 13px !important;
  font-weight: 760 !important;
  letter-spacing: -0.01em !important;
}

[data-testid='history-mobile-finance-kpi-brut'] .op390-mini-trend {
  right: 18px !important;
  bottom: 13px !important;
  width: 64px !important;
  height: 22px !important;
  opacity: 0.98;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), opacity 160ms ease;
}

[data-testid='history-mobile-finance-kpi-brut'] .op390-mini-trend polyline {
  stroke: #ffbd25 !important;
  stroke-width: 1.9 !important;
  filter: drop-shadow(0 0 2.5px rgba(255, 189, 37, 0.52)) !important;
  transition: stroke-width 160ms ease, filter 180ms ease;
}

[data-testid='history-mobile-finance-kpi-brut']::after {
  content: '↗';
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  color: rgba(255, 205, 102, 0.58);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  transition: color 160ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
}

/* Micro-étape 6 : survol premium, uniquement sur appareils avec vraie souris. */
@media (hover: hover) and (pointer: fine) {
  [data-testid='history-mobile-finance-kpi-brut']:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 198, 76, 0.68) !important;
    background:
      radial-gradient(circle at 18% -4%, rgba(255, 190, 65, 0.15), transparent 46%),
      linear-gradient(145deg, rgba(14, 29, 47, 0.995), rgba(6, 16, 28, 0.998)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      inset 0 0 0 1px rgba(255, 189, 59, 0.045),
      0 12px 26px rgba(0, 0, 0, 0.24),
      0 0 18px rgba(255, 184, 47, 0.08) !important;
  }

  [data-testid='history-mobile-finance-kpi-brut']:hover > span {
    color: rgba(247, 241, 229, 0.94) !important;
  }

  [data-testid='history-mobile-finance-kpi-brut']:hover > strong {
    color: #ffc64a !important;
    text-shadow: 0 0 12px rgba(255, 193, 64, 0.22);
  }

  [data-testid='history-mobile-finance-kpi-brut']:hover .op390-mini-trend {
    opacity: 1;
    transform: translateY(-1px) scale(1.04);
  }

  [data-testid='history-mobile-finance-kpi-brut']:hover .op390-mini-trend polyline {
    stroke-width: 2.05 !important;
    filter: drop-shadow(0 0 3px rgba(255, 189, 37, 0.66)) !important;
  }

  [data-testid='history-mobile-finance-kpi-brut']:hover::after {
    color: rgba(255, 216, 132, 0.9);
    transform: translate(1px, -1px);
  }
}

/* Micro-étape 7 : retour de pression/clic, souris comme tactile. */
[data-testid='history-mobile-finance-kpi-brut']:active {
  transform: translateY(0) scale(0.985);
  border-color: rgba(255, 203, 92, 0.82) !important;
  background:
    radial-gradient(circle at 18% -2%, rgba(255, 190, 65, 0.13), transparent 44%),
    linear-gradient(145deg, rgba(10, 22, 37, 0.998), rgba(4, 12, 22, 1)) !important;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 199, 75, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.22),
    0 0 12px rgba(255, 184, 47, 0.08) !important;
  transition-duration: 70ms !important;
}

[data-testid='history-mobile-finance-kpi-brut']:active > strong {
  transform: translateY(1px);
  color: #ffca53 !important;
  text-shadow: 0 0 8px rgba(255, 193, 64, 0.18);
}

[data-testid='history-mobile-finance-kpi-brut']:active .op390-mini-trend {
  transform: translateY(1px) scale(0.99);
}

[data-testid='history-mobile-finance-kpi-brut']:active::after {
  color: rgba(255, 216, 132, 0.82);
  transform: translate(0, 0) scale(0.94);
}

/* Micro-étape 8 : focus clavier visible, net et distinct du survol. */
[data-testid='history-mobile-finance-kpi-brut']:focus-visible {
  outline: none !important;
  border-color: rgba(255, 215, 130, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px rgba(255, 194, 69, 0.12),
    0 0 0 2px rgba(5, 14, 25, 1),
    0 0 0 4px rgba(255, 196, 76, 0.72),
    0 10px 24px rgba(0, 0, 0, 0.22) !important;
}

[data-testid='history-mobile-finance-kpi-brut']:focus-visible::after {
  color: rgba(255, 226, 158, 0.96);
}

/* Micro-étape 9 : coque Radix du détail BRUT uniquement. Le contenu intérieur reste inchangé. */
[role='dialog'].history-kpi-dialog {
  top: 20px !important;
  right: 20px !important;
  bottom: auto !important;
  left: auto !important;
  width: min(760px, calc(100vw - 40px)) !important;
  max-width: none !important;
  height: auto !important;
  max-height: calc(100dvh - 40px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  border: 1px solid rgba(255, 199, 89, 0.16) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 188, 58, 0.055), transparent 30%),
    linear-gradient(160deg, rgba(8, 19, 32, 0.995), rgba(4, 11, 21, 0.998)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    -18px 0 48px rgba(0, 0, 0, 0.34),
    0 22px 70px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 189, 59, 0.018) !important;
  animation: same-brut-detail-shell-in 220ms cubic-bezier(.2,.85,.2,1) both;
}

[role='dialog'].history-kpi-dialog > button[aria-label='Close'],
[role='dialog'].history-kpi-dialog > button[data-radix-dialog-close] {
  z-index: 20;
}

[role='dialog'].history-kpi-dialog > [data-history-kpi-detail-root] {
  position: relative;
  min-height: 0 !important;
  background: transparent !important;
}

[role='dialog'].history-kpi-dialog [data-history-kpi-detail-root] > .history-kpi-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;
}

[role='dialog'].history-kpi-dialog [data-history-kpi-detail-root] > .history-kpi-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;
}

[role='dialog'].history-kpi-dialog [data-history-kpi-detail-root] > .history-kpi-detail-header {
  margin-top: 12px !important;
  padding: 0 0 11px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065) !important;
}

[role='dialog'].history-kpi-dialog [data-history-kpi-detail-root] > .history-kpi-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;
}

[role='dialog'].history-kpi-dialog [data-history-kpi-detail-root] > .history-kpi-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;
}

[role='dialog'].history-kpi-dialog [data-history-kpi-detail-root] > .history-kpi-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;
}

[role='dialog'].history-kpi-dialog .history-kpi-detail-total {
  border-color: rgba(196, 181, 253, 0.30) !important;
  background: linear-gradient(135deg, rgba(124, 74, 245, 0.25), rgba(10, 17, 34, 0.96)) !important;
}

@keyframes same-brut-detail-shell-in {
  from { opacity: 0; transform: translateX(18px) scale(.992); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@media (min-width: 640px) {
  [role='dialog'].history-kpi-dialog {
    translate: none !important;
  }
}

@media (max-width: 639px) {
  [role='dialog'].history-kpi-dialog {
    top: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    left: 12px !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100dvh - 24px) !important;
    border-width: 1px !important;
    border-radius: 12px !important;
  }
}

@media (min-width: 1280px) {
  [data-testid='history-mobile-finance-kpi-brut'] {
    min-height: 82px !important;
    padding: 10px 12px 8px !important;
  }

  [data-testid='history-mobile-finance-kpi-brut'] > span {
    font-size: 11px !important;
    line-height: 13px !important;
  }

  [data-testid='history-mobile-finance-kpi-brut'] > strong {
    margin-top: 4px !important;
    font-size: 21px !important;
    line-height: 23px !important;
  }

  [data-testid='history-mobile-finance-kpi-brut'] > em {
    margin-top: 5px !important;
    font-size: 12px !important;
    line-height: 14px !important;
  }

  [data-testid='history-mobile-finance-kpi-brut'] .op390-mini-trend {
    right: 20px !important;
    bottom: 15px !important;
    width: 72px !important;
    height: 24px !important;
  }

  [data-testid='history-mobile-finance-kpi-brut'] .op390-mini-trend polyline {
    stroke-width: 2 !important;
  }

  [data-testid='history-mobile-finance-kpi-brut']::after {
    top: 11px;
    right: 14px;
    font-size: 15px;
  }
}