/* ==========================================================================
   MOTION & FEEDBACK — small, fast transitions that make the portal feel responsive.
   Paired with public/assets/js/routerizon/ui.js. Everything here is switched off for
   people who ask for reduced motion (bottom of this file).
   ========================================================================== */

/* ---------- Navigation progress bar (ui.js shows it while the next page loads) ---------- */
.rz-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 2100;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.rz-progress::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--rz-primary-400), var(--rz-primary-600));
  box-shadow: 0 0 8px rgba(var(--rz-primary-rgb), 0.5);
  transform-origin: left center;
  transform: scaleX(0);
}
[dir="rtl"] .rz-progress::before { transform-origin: right center; }
.rz-progress.is-active { opacity: 1; }
.rz-progress.is-active::before { animation: rz-progress 8s cubic-bezier(0.1, 0.6, 0.2, 1) forwards; }
@keyframes rz-progress {
  0% { transform: scaleX(0); }
  10% { transform: scaleX(0.35); }
  40% { transform: scaleX(0.7); }
  100% { transform: scaleX(0.95); }
}

/* ---------- Dropdowns, popovers: quick pop-in ---------- */
.dropdown-menu.show { animation: rz-pop var(--rz-dur-fast) var(--rz-ease); }
@keyframes rz-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ---------- Modals: lift in instead of sliding from the top ---------- */
.modal.fade .modal-dialog { transform: translateY(12px) scale(0.98); transition: transform var(--rz-dur) var(--rz-ease), opacity var(--rz-dur); }
.modal.show .modal-dialog { transform: none; }
.modal-backdrop.fade { transition: opacity var(--rz-dur); }

/* ---------- Clickable surfaces ---------- */
a.card,
.card.rz-card-link,
.rz-kpi {
  transition: border-color var(--rz-dur-fast), box-shadow var(--rz-dur), transform var(--rz-dur) var(--rz-ease);
}
a.card:hover,
.card.rz-card-link:hover {
  border-color: var(--rz-border-strong) !important;
  box-shadow: var(--rz-shadow-md) !important;
  transform: translateY(-2px);
}
.rz-kpi:hover { border-color: var(--rz-border-default) !important; box-shadow: var(--rz-shadow-md) !important; }
a.card { color: inherit; text-decoration: none; }

.rz-list__item { transition: background-color var(--rz-dur-fast); }
a.rz-list__item:hover,
.rz-list__item[href]:hover { background: var(--rz-surface-overlay); }

.table > tbody > tr > * { transition: background-color var(--rz-dur-fast); }

.bg-menu-theme .menu-link,
.dropdown-item,
.nav-link,
.page-link,
.form-control,
.form-select,
.form-check-input { transition: background-color var(--rz-dur-fast), color var(--rz-dur-fast), border-color var(--rz-dur-fast), box-shadow var(--rz-dur-fast); }

/* Sidebar chevrons rotate smoothly when a group opens */
.bg-menu-theme .menu-toggle::after { transition: transform var(--rz-dur) var(--rz-ease), opacity var(--rz-dur-fast); }

/* ---------- Live dashboard refresh: briefly tint regions that just updated ---------- */
[data-rz-live-slot].rz-just-updated { animation: rz-updated 1.2s ease-out; }
@keyframes rz-updated {
  0% { box-shadow: 0 0 0 2px rgba(var(--rz-primary-rgb), 0.25); }
  100% { box-shadow: 0 0 0 2px rgba(var(--rz-primary-rgb), 0); }
}
.rz-live.is-paused::before { background: var(--rz-warning-500); box-shadow: 0 0 0 3px var(--rz-warning-50); }
.rz-live.is-offline::before { background: var(--rz-neutral-400); box-shadow: 0 0 0 3px var(--rz-surface-sunken); }
.rz-live:not(.is-paused):not(.is-offline)::before { animation: rz-breathe 2.4s ease-in-out infinite; }
@keyframes rz-breathe {
  0%, 100% { box-shadow: 0 0 0 3px var(--rz-success-50); }
  50% { box-shadow: 0 0 0 5px var(--rz-success-50); }
}

/* ---------- Skeleton loaders (<div class="rz-skeleton" style="height:1rem">) ---------- */
.rz-skeleton {
  display: block;
  min-height: 0.875rem;
  border-radius: var(--rz-radius);
  background: linear-gradient(90deg, var(--rz-surface-sunken) 25%, var(--rz-neutral-150) 37%, var(--rz-surface-sunken) 63%);
  background-size: 400% 100%;
  animation: rz-shimmer 1.4s ease infinite;
}
@keyframes rz-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------- Busy submit buttons (ui.js, forms with data-rz-submit-busy) ---------- */
.btn[aria-busy="true"],
button[aria-busy="true"] { cursor: progress; }
.rz-btn-spinner {
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: rz-spin 0.7s linear infinite;
}
@keyframes rz-spin { to { transform: rotate(360deg); } }

/* ---------- Back to top ---------- */
.rz-to-top {
  position: fixed;
  inset-inline-end: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 1080;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rz-border-subtle);
  border-radius: 50%;
  background: var(--rz-surface-raised);
  color: var(--rz-text-secondary);
  font-size: 1.25rem;
  box-shadow: var(--rz-shadow-lg);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--rz-dur), transform var(--rz-dur) var(--rz-ease), color var(--rz-dur-fast), border-color var(--rz-dur-fast);
}
.rz-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.rz-to-top:hover { color: var(--rz-primary-700); border-color: var(--rz-primary-200); }

/* ---------- Copy-to-clipboard ([data-rz-copy]) ---------- */
[data-rz-copy] { cursor: copy; }
.rz-copied { position: relative; }
.rz-copied::after {
  content: attr(data-rz-copied-label);
  position: absolute;
  bottom: calc(100% + 6px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: var(--rz-radius);
  background: var(--rz-neutral-900);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  animation: rz-pop var(--rz-dur-fast) var(--rz-ease);
}
[dir="rtl"] .rz-copied::after { transform: translateX(50%); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rz-progress.is-active::before { transform: scaleX(0.6); }
  a.card:hover,
  .card.rz-card-link:hover { transform: none; }
}