/* ===== v590: 2FA button colour + one shared hover / press / focus behaviour for all top-bar buttons ===== */

/* 2FA button colours (same outlined treatment as the other action buttons) */
#twofaBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 700 !important;
  background: #f4efff !important;
  border-color: #a887e8 !important;
  color: #6b43b5 !important;
}

#twofaBtn .twofa-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root[data-theme="dark"] #twofaBtn {
  background: #261b3d !important;
  border-color: #6f52a8 !important;
  color: #c3a8ff !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) #twofaBtn {
    background: #261b3d !important;
    border-color: #6f52a8 !important;
    color: #c3a8ff !important;
  }
}

/* Shared feedback: BACK, Files / breadcrumbs, Upload, New Folder, Manage, 2FA, theme, Log Out */
.back-button,
.top-actions button,
.breadcrumbs button {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    filter .14s ease,
    transform .12s ease,
    box-shadow .16s ease,
    background-color .16s ease,
    border-color .16s ease;
}

@media (hover: hover) {
  .back-button:hover:not(:disabled),
  .top-actions button:hover:not(:disabled),
  .breadcrumbs button:hover:not(:disabled) {
    filter: brightness(1.12) saturate(1.1);
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgb(128 150 190 / 20%), 0 0 16px rgb(128 150 190 / 30%) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent),
                0 0 16px color-mix(in srgb, currentColor 34%, transparent) !important;
  }
}

.back-button:active:not(:disabled),
.top-actions button:active:not(:disabled),
.breadcrumbs button:active:not(:disabled) {
  filter: brightness(.88) saturate(1.1);
  transform: translateY(1px) scale(.96);
  box-shadow: 0 0 0 2px rgb(128 150 190 / 30%) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent) !important;
  transition-duration: .04s;
}

.back-button:focus-visible,
.top-actions button:focus-visible,
.breadcrumbs button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .back-button,
  .top-actions button,
  .breadcrumbs button { transition: none; }
  .back-button:hover:not(:disabled),
  .top-actions button:hover:not(:disabled),
  .breadcrumbs button:hover:not(:disabled),
  .back-button:active:not(:disabled),
  .top-actions button:active:not(:disabled),
  .breadcrumbs button:active:not(:disabled) { transform: none; }
}