/* Smooth top page loader — uses CRM primary tokens */
#crm-top-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1090;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#crm-top-loader.is-active {
  opacity: 1;
}

#crm-top-loader.is-finishing {
  opacity: 0;
  transition: opacity 0.35s ease 0.1s;
}

#crm-top-loader .crm-top-loader-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  height: 100%;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--crm-primary-main, #2092ec) 70%, transparent),
    var(--crm-primary-main, #2092ec) 40%,
    var(--crm-primary-dark, #176bac)
  );
  border-radius: 0 2px 2px 0;
  box-shadow:
    0 0 8px color-mix(in srgb, var(--crm-primary-main, #2092ec) 55%, transparent),
    0 0 2px var(--crm-primary-main, #2092ec);
  transition: width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: width;
}

#crm-top-loader .crm-top-loader-peg {
  position: absolute;
  right: 0;
  top: 0;
  width: 120px;
  height: 100%;
  transform: rotate(2deg) translateY(-1px);
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--crm-primary-main, #2092ec) 55%, #fff)
  );
  opacity: 0.65;
  box-shadow: 0 0 12px color-mix(in srgb, var(--crm-primary-main, #2092ec) 70%, transparent);
}

html[dir='rtl'] #crm-top-loader .crm-top-loader-bar {
  inset: 0 0 0 auto;
  border-radius: 2px 0 0 2px;
}

html[dir='rtl'] #crm-top-loader .crm-top-loader-peg {
  right: auto;
  left: 0;
  transform: rotate(-2deg) translateY(-1px);
  background: linear-gradient(
    to left,
    transparent,
    color-mix(in srgb, var(--crm-primary-main, #2092ec) 55%, #fff)
  );
}

@media (prefers-reduced-motion: reduce) {
  #crm-top-loader,
  #crm-top-loader .crm-top-loader-bar {
    transition: none;
  }
}