/* Small, document-level feedback remains available while the app boots. */
@view-transition {
  navigation: auto;
}

#haco-page-progress,
#haco-page-navigation-status {
  display: none;
}
html[data-page-navigation-stage] #haco-page-progress,
html[data-page-navigation-stage] #haco-page-navigation-status {
  display: flex;
}

html[data-page-navigation-stage="entering"] body {
  background: var(--page-navigation-background, #fff);
}
#haco-page-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 200;
  overflow: hidden;
  pointer-events: none;
  background: color-mix(in srgb, var(--primary, #2563eb) 12%, transparent);
}
#haco-page-progress span {
  width: 36%;
  height: 100%;
  background: var(--primary, #2563eb);
  animation: haco-page-progress 1.1s ease-in-out infinite;
}
#haco-page-navigation-status {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 201;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 40px);
  padding: 9px 13px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  color: var(--foreground, var(--page-navigation-foreground, #334155));
  background: var(--card, var(--page-navigation-background, #fff));
  box-shadow: 0 4px 16px rgb(0 0 0 / 6%);
  font:
    500 12px/1.5 system-ui,
    sans-serif;
  pointer-events: none;
  animation: haco-page-status-in 120ms ease-out 180ms both;
}
#haco-page-navigation-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#haco-page-navigation-status::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary, #2563eb);
}
#haco-page-navigation-retry {
  display: none;
  color: inherit;
  white-space: nowrap;
}
html[data-page-navigation-stage="waiting"] #haco-page-navigation-retry {
  display: inline;
  pointer-events: auto;
}
html[data-page-navigation-stage="settling"] #haco-page-progress span {
  animation: none;
  width: 100%;
}
html[data-page-navigation-stage="settling"] #haco-page-progress,
html[data-page-navigation-stage="settling"] #haco-page-navigation-status {
  animation: haco-page-status-out 180ms ease-out both;
}
[data-page-navigation-pending] {
  position: relative;
  background: color-mix(
    in srgb,
    var(--primary, #2563eb) 12%,
    transparent
  ) !important;
  color: var(--primary, #2563eb) !important;
}
[data-page-navigation-pending]::after {
  content: "";
  position: absolute;
  right: 8px;
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: haco-page-spinner 700ms linear infinite;
}
[data-collapsible="icon"] [data-page-navigation-pending]::after {
  right: 2px;
  bottom: 2px;
  width: 7px;
  height: 7px;
}
html[data-page-navigation-stage] [data-route-loading] {
  visibility: hidden;
}
html[data-page-navigation-stage="entering"] [data-page-content] {
  animation: haco-page-content-in 160ms ease-out both;
}
@media (min-width: 768px) {
  [data-slot="sidebar-container"],
  [data-page-sidebar] {
    view-transition-name: haco-sidebar;
  }
}
::view-transition-group(root) {
  animation-duration: 160ms;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 160ms;
  animation-timing-function: ease-out;
}
::view-transition-group(haco-sidebar) {
  animation: none;
}
::view-transition-old(haco-sidebar) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-new(haco-sidebar) {
  animation: none;
  mix-blend-mode: normal;
}
@keyframes haco-page-progress {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(380%);
  }
}
@keyframes haco-page-spinner {
  to {
    transform: rotate(360deg);
  }
}
@keyframes haco-page-content-in {
  from {
    opacity: 0.75;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes haco-page-status-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes haco-page-status-out {
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  #haco-page-progress span,
  #haco-page-navigation-status,
  [data-page-navigation-pending]::after,
  html[data-page-navigation-stage] [data-page-content] {
    animation: none;
  }
}