/* v130.6 — onglets Transactions sticky et morphing selon le scroll. */

body.transactions-mode #transactions-hub {
  position: sticky !important;
  top: 4px !important;
  z-index: 78 !important;
  width: 100% !important;
  margin-top: 2px !important;
  margin-bottom: 8px !important;
  padding: 2px 0 0 !important;
  background: var(--paper) !important;
  transition:
    padding 260ms cubic-bezier(.22,.8,.24,1),
    background-color 260ms ease,
    box-shadow 260ms ease,
    -webkit-backdrop-filter 260ms ease,
    backdrop-filter 260ms ease !important;
}

html.is-ios body.transactions-mode #transactions-hub {
  top: calc(var(--safe-top) + 4px) !important;
}

body.transactions-mode #transactions-hub.is-sticking {
  padding-top: 5px !important;
  background: color-mix(in srgb, var(--paper) 88%, transparent) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow: 0 10px 22px rgba(20,28,35,.055) !important;
}

body.transactions-mode .transactions-segmented {
  display: grid !important;
  grid-template-columns:
    minmax(0, var(--tx-recurring-fr, 1fr))
    minmax(0, var(--tx-oneoff-fr, 1fr)) !important;
  gap: var(--tx-gap, 20px) !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  transition:
    grid-template-columns 70ms linear,
    gap 70ms linear,
    border-color 220ms ease !important;
}

body.transactions-mode .transactions-segmented button {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transition:
    opacity 90ms linear,
    color 220ms ease,
    font-size 90ms linear,
    transform 220ms cubic-bezier(.22,.8,.24,1) !important;
}

body.transactions-mode .transactions-segmented button.active {
  font-size: var(--tx-active-size, 13px) !important;
}

body.transactions-mode .transactions-segmented button:not(.active) {
  opacity: var(--tx-inactive-opacity, 1) !important;
}

body.transactions-mode .transactions-segmented button::after {
  left: var(--tx-underline-inset, 16%) !important;
  right: var(--tx-underline-inset, 16%) !important;
  transition:
    left 90ms linear,
    right 90ms linear,
    background-color 180ms ease !important;
}

body.transactions-mode #transactions-hub.is-maximized .transactions-segmented button:not(.active) {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.transactions-mode #transactions-hub.is-maximized .transactions-segmented button.active {
  font-weight: 790 !important;
}

/* Le sticky reste lisible en sombre et sous Windows 98. */
html[data-theme="dark"] body.transactions-mode #transactions-hub,
html[data-ui-theme="oled"] body.transactions-mode #transactions-hub {
  background: var(--paper) !important;
}

html[data-theme="dark"] body.transactions-mode #transactions-hub.is-sticking,
html[data-ui-theme="oled"] body.transactions-mode #transactions-hub.is-sticking {
  background: color-mix(in srgb, var(--paper) 88%, transparent) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.22) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.transactions-mode #transactions-hub,
  body.transactions-mode .transactions-segmented,
  body.transactions-mode .transactions-segmented button,
  body.transactions-mode .transactions-segmented button::after {
    transition: none !important;
  }
}