/* aq-nav.css — navigation: top navbar, sidebar, icon rail, phone drawer.
 *
 * One file for both directions (logical properties + tokens). Loaded after
 * aqary-skin.css by the tenant and superadmin loaders. Keeps the theme's
 * geometry contract (sidebar 260px, rail 60px, overlay drawer under 768px)
 * so app-menu.js, content margins and the demo-bar inset keep working.
 *
 *   ≥992px   sidebar expanded (theme can collapse to the rail on toggle)
 *   768–991  60px icon rail (theme default), popout labels on hover
 *   <768px   56px bar + full-height drawer
 */

@media screen {

/* ══ Geometry ═══════════════════════════════════════════════════ */

body.fixed-navbar { padding-top: var(--aq-nav-h) !important; }
.header-navbar.aq-nav {
  min-height: var(--aq-nav-h) !important;
  height: var(--aq-nav-h);
  padding: 0 !important;
  border: 0 !important;
  box-shadow: 0 1px 0 rgba(15, 26, 42, .08), 0 4px 14px -6px rgba(15, 26, 42, .22) !important;
  font-family: var(--aq-font-body) !important;
}
.header-navbar.aq-navbar-brand {
  background-color: var(--aq-navbar-base) !important;
  background-image: var(--aq-navbar-gradient) !important;
}
.aq-nav .navbar-wrapper { display: flex; height: 100%; }
body.vertical-layout.fixed-navbar .main-menu.menu-fixed {
  top: var(--aq-nav-h) !important;
  height: calc(100% - var(--aq-nav-h)) !important;
}

/* ══ Brand column (over the sidebar on ≥768px) ══════════════════ */

.aq-nav .navbar-header.aq-nav__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100% !important;
  padding: 0 16px !important;
  background: var(--aq-surface-card) !important;
  border-inline-end: 1px solid var(--aq-surface-border);
  border-bottom: 1px solid var(--aq-surface-border);
  float: none !important;
}
.aq-nav__logo { display: flex; align-items: center; height: 100%; padding: 0 !important; margin: 0 !important; }
.aq-nav__logo .brand-logo { height: 38px; width: auto !important; max-width: 100%; object-fit: contain; }
/* Rail: show the logo mark only */
body.menu-collapsed .aq-nav .navbar-header.aq-nav__brand { padding: 0 !important; justify-content: center; }
body.menu-collapsed .aq-nav__logo .brand-logo { width: 40px !important; height: 34px; object-fit: cover; object-position: right center; }
.aq-nav__phone { display: none !important; }

/* ══ The bar ════════════════════════════════════════════════════ */

.aq-nav .navbar-container.aq-nav__bar {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 !important;
  margin: 0 !important; /* the flex row already sits beside the brand column */
  background: transparent !important;
}
.aq-nav #navbar-mobile {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  padding-inline: 16px 20px;
}
.aq-nav__start, .aq-nav__end { display: flex; align-items: center; gap: 8px; min-width: 0; }
.aq-nav__start { gap: 14px; }
.aq-nav__title {
  margin: 0 !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Glass icon button (menu toggle, help, what's new) */
.aq-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--aq-radius-control);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff !important;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color var(--aq-transition), border-color var(--aq-transition);
}
.aq-nav__icon:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.aq-nav__icon:focus-visible,
.aq-nav__chip:focus-visible,
.aq-nav__avatar-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .55) !important;
}
.aq-nav__divider { width: 1px; height: 28px; background: rgba(255, 255, 255, .3); margin: 0 4px; }

/* Calendar */
.aq-nav__calendar { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .9); font-size: 18px; }

/* Segmented control (navbar, profile menu, drawer) */
.aq-seg {
  display: inline-flex;
  flex: none;
  padding: 3px;
  gap: 2px;
  border-radius: 9px;
  background: var(--aq-neutral-100);
  border: 1px solid var(--aq-neutral-200);
}
.aq-seg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--aq-neutral-600) !important;
  font-size: var(--aq-fs-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color var(--aq-transition), color var(--aq-transition);
}
.aq-seg__btn:hover { color: var(--aq-ink-900) !important; }
.aq-seg__btn[aria-pressed="true"],
.aq-seg__btn[aria-current="true"] {
  background: var(--aq-surface-card);
  color: var(--aq-brand-500) !important;
  box-shadow: 0 1px 2px rgba(15, 26, 42, .12);
}
.aq-seg__btn:focus-visible { outline: none; box-shadow: var(--aq-focus-ring); }
.aq-seg__btn:disabled { opacity: .6; cursor: progress; }
.aq-seg--glass { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); }
.aq-seg--glass .aq-seg__btn { color: rgba(255, 255, 255, .88) !important; }
.aq-seg--glass .aq-seg__btn:hover { color: #fff !important; }
.aq-seg--glass .aq-seg__btn[aria-pressed="true"] { background: #fff; color: var(--aq-brand-500) !important; }
.aq-seg--glass .aq-seg__btn:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }

/* Avatar (initials) */
.aq-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 999px;
  background: var(--aq-brand-50);
  color: var(--aq-brand-500);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.aq-avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.aq-avatar--md { width: 36px; height: 36px; font-size: 14px; }
.aq-avatar--lg { width: 44px; height: 44px; font-size: 16px; }
.aq-nav__chip .aq-avatar, .aq-nav__avatar-btn .aq-avatar { background: #fff; color: var(--aq-brand-500); }

/* Profile chip */
.aq-nav .dropdown { position: relative; }
.aq-nav__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding-inline: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  cursor: pointer;
  max-width: 280px;
  transition: background-color var(--aq-transition);
}
.aq-nav__chip:hover { background: rgba(255, 255, 255, .24); }
.aq-nav__chip--static { cursor: default; }
.aq-nav__chip-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; text-align: start; }
.aq-nav__chip-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aq-nav__chip-role { font-size: 11px; opacity: .8; white-space: nowrap; }
.aq-nav__chip-caret { font-size: 14px; opacity: .85; }
.aq-nav__avatar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--aq-touch); height: var(--aq-touch); padding: 0;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
}

/* Profile menu (desktop chip and phone avatar share it) */
.aq-nav .dropdown-menu.aq-profile-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  left: auto;
  right: auto;
  transform: none !important;
  width: 300px;
  max-width: calc(100vw - 24px);
  margin: 0 !important;
  padding: 6px !important;
  color: var(--aq-ink-800);
  z-index: 1060;
}
.aq-profile-menu__head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--aq-surface-border);
}
.aq-profile-menu__who { min-width: 0; }
.aq-profile-menu__name { font-size: 14px; font-weight: 700; color: var(--aq-ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aq-profile-menu__meta { font-size: 12px; color: var(--aq-neutral-500); }
.aq-profile-menu .dropdown-item { min-height: 40px; }
.aq-profile-menu .dropdown-item > i,
.aq-profile-menu__label > i { font-size: 18px; color: var(--aq-neutral-500); }
.aq-profile-menu__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 0 10px;
}
.aq-profile-menu__label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--aq-fs-md); color: var(--aq-ink-700); }
.aq-profile-menu .dropdown-item.aq-profile-menu__logout,
.aq-profile-menu .dropdown-item.aq-profile-menu__logout > i { color: var(--aq-danger-700) !important; }
.aq-profile-menu .dropdown-item.aq-profile-menu__logout:hover { background: var(--aq-danger-50) !important; }

/* ══ Sidebar ════════════════════════════════════════════════════ */

.main-menu,
.main-menu.menu-light {
  background: var(--aq-surface-card) !important;
  box-shadow: none !important;
  border: 0 !important;
  border-inline-end: 1px solid var(--aq-surface-border) !important;
}
.main-menu .navigation,
.main-menu .navigation-main { padding: 6px 0 12px !important; margin: 0 !important; list-style: none !important; background: transparent !important; }

/* Section labels */
.main-menu .navigation > li.navigation-header.aq-nav-section {
  padding: 16px 22px 6px !important;
  margin: 0 !important;
  line-height: 1.4;
}
.main-menu .navigation > li.navigation-header.aq-nav-section span {
  color: var(--aq-neutral-400) !important;
  font-size: var(--aq-fs-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.menu-collapsed .main-menu .navigation > li.navigation-header.aq-nav-section { display: none !important; }

/* Top-level rows */
body .main-menu .navigation > li > a {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  min-height: var(--aq-touch);
  padding: 0 12px !important;
  margin: 2px 10px !important;
  border-radius: var(--aq-radius-control) !important;
  color: var(--aq-neutral-800) !important;
  font-size: var(--aq-fs-md) !important;
  font-weight: 500 !important;
  line-height: 1.3;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  transition: background-color var(--aq-transition), color var(--aq-transition) !important;
}
body .main-menu .navigation > li > a > i {
  flex: none;
  width: 20px;
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 1;
  text-align: center;
  color: var(--aq-neutral-500) !important;
  transform: none !important;
  transition: color var(--aq-transition);
}
body .main-menu .navigation > li > a > .menu-title { flex: 1; min-width: 0; margin: 0 !important; transform: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Group caret: vendor draws it with a physical offset */
body .main-menu .navigation > li.has-sub > a::after {
  inset-inline-start: auto !important;
  inset-inline-end: 14px !important;
  color: var(--aq-neutral-400);
}
body .main-menu .navigation > li.has-sub > a { padding-inline-end: 34px !important; }

/* Hover */
body .main-menu .navigation > li > a:hover {
  background: var(--aq-neutral-50) !important;
  color: var(--aq-ink-900) !important;
}
body .main-menu .navigation > li > a:hover > i { color: var(--aq-neutral-700) !important; }
body .main-menu .navigation li > a:focus-visible { outline: none; box-shadow: var(--aq-focus-ring) !important; }

/* Open group parent: brand text only, no band */
body .main-menu .navigation > li.open > a,
body .main-menu .navigation > li.has-sub > a.active {
  background: transparent !important;
  color: var(--aq-brand-700) !important;
  font-weight: 600 !important;
}
body .main-menu .navigation > li.open > a > i,
body .main-menu .navigation > li.has-sub > a.active > i { color: var(--aq-brand-500) !important; }

/* Active leaf (a standalone top-level link or a submenu link) */
body .main-menu .navigation > li:not(.has-sub) > a.active,
body .main-menu .navigation ul.menu-content a.active {
  background: var(--aq-brand-50) !important;
  color: var(--aq-brand-700) !important;
  font-weight: 600 !important;
}
body .main-menu .navigation > li:not(.has-sub) > a.active > i { color: var(--aq-brand-500) !important; }
body .main-menu .navigation > li:not(.has-sub) > a.active::before,
body .main-menu .navigation ul.menu-content a.active::before {
  content: "";
  position: absolute;
  inset-inline-start: -10px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--aq-brand-500);
}
/* A group with no matching leaf (e.g. an Add page): its row carries the marker */
body .main-menu .navigation > li.open:not(:has(ul.menu-content a.active)) > a.active {
  background: var(--aq-brand-50) !important;
}

/* Submenu */
body .main-menu .navigation li ul.menu-content { padding: 0 !important; margin: 0 0 4px !important; background: transparent !important; }
body .main-menu .navigation li ul.menu-content li > a {
  position: relative;
  display: flex !important;
  align-items: center !important;
  min-height: 40px;
  padding: 0 12px !important;
  padding-inline-start: 44px !important;
  margin: 1px 10px !important;
  border-radius: var(--aq-radius-control) !important;
  color: var(--aq-neutral-700) !important;
  font-size: var(--aq-fs-md) !important;
  font-weight: 500 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  transform: none !important;
  transition: background-color var(--aq-transition), color var(--aq-transition) !important;
}
body .main-menu .navigation li ul.menu-content li > a:hover { background: var(--aq-neutral-50) !important; color: var(--aq-ink-900) !important; }
/* The empty <i> in each submenu link becomes the bullet */
body .main-menu .navigation li ul.menu-content li > a > i {
  position: absolute !important;
  inset-inline-start: 22px;
  top: 50%;
  width: 5px !important;
  height: 5px !important;
  margin: 0 !important;
  border-radius: 50%;
  background: var(--aq-neutral-300);
  font-size: 0 !important;
  color: transparent !important;
  transform: translateY(-50%) !important;
}
body .main-menu .navigation li ul.menu-content li > a.active > i { background: var(--aq-brand-500); }
body .main-menu .navigation li ul.menu-content li > a > .menu-title,
body .main-menu .navigation li ul.menu-content li > a > span { transform: none !important; }
/* Third level (Reports) */
body .main-menu .navigation li ul.menu-content li > ul li > a { padding-inline-start: 58px !important; }
body .main-menu .navigation li ul.menu-content li > ul li > a > i { inset-inline-start: 36px; }
body .main-menu .navigation li ul.menu-content > li.open > a,
body .main-menu .navigation li ul.menu-content > li.active > a { color: var(--aq-brand-700) !important; font-weight: 600 !important; background: transparent !important; }

/* ══ Icon rail (collapsed, ≥768px) ══════════════════════════════ */

body.menu-collapsed .main-menu .navigation > li > a {
  justify-content: center !important;
  width: 44px;
  padding: 0 !important;
  margin: 4px auto !important;
}
body.menu-collapsed .main-menu .navigation > li.has-sub > a::after { display: none !important; }
body.menu-collapsed .main-menu .navigation > li > a.active::before,
body.menu-collapsed .main-menu .navigation > li.open > a::before { inset-inline-start: -8px; }
body.menu-collapsed .main-menu .navigation > li.open > a,
body.menu-collapsed .main-menu .navigation > li.has-sub > a.active { background: var(--aq-brand-50) !important; }
/* Hover popout card */
body.menu-collapsed .main-menu .main-menu-content > span.menu-title,
body.menu-collapsed .main-menu .main-menu-content a.menu-title {
  background: var(--aq-surface-card) !important;
  color: var(--aq-ink-900) !important;
  font-weight: 700 !important;
  border-radius: var(--aq-radius-surface) var(--aq-radius-surface) 0 0 !important;
  border: 1px solid var(--aq-surface-border) !important;
  border-bottom: 0 !important;
}
body.menu-collapsed .main-menu .main-menu-content > ul.menu-content {
  background: var(--aq-surface-card) !important;
  border: 1px solid var(--aq-surface-border) !important;
  border-radius: 0 0 var(--aq-radius-surface) var(--aq-radius-surface) !important;
  box-shadow: var(--aq-elev-2) !important;
  padding: 6px 0 !important;
  min-width: 220px;
}
body.menu-collapsed .main-menu .main-menu-content > ul.menu-content li > a { padding-inline-start: 32px !important; margin: 1px 6px !important; }
body.menu-collapsed .main-menu .main-menu-content > ul.menu-content li > a > i { inset-inline-start: 14px; }

/* Drawer parts are phone-only */
.aq-drawer__head, .aq-drawer__foot { display: none; }

/* ══ Tablet: chip without text ══════════════════════════════════ */
@media (max-width: 991.98px) {
  .aq-nav__chip { padding-inline: 5px 8px; gap: 6px; }
  .aq-nav__chip-text { display: none; }
  .aq-nav__calendar > i { display: none; }
}

/* ══ Phone ══════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  body.fixed-navbar { padding-top: var(--aq-nav-h-sm) !important; }
  .header-navbar.aq-nav { height: var(--aq-nav-h-sm); min-height: var(--aq-nav-h-sm) !important; }
  .aq-nav .navbar-header.aq-nav__brand {
    width: 100% !important;
    padding: 0 6px !important;
    gap: 4px;
    background: transparent !important;
    border: 0 !important;
  }
  .aq-nav__phone { display: inline-flex !important; align-items: center; }
  .aq-nav__logo { display: none !important; }
  .aq-nav .aq-nav__icon { width: var(--aq-touch); height: var(--aq-touch); font-size: 20px; }
  .aq-nav__phone-title {
    flex: 1;
    min-width: 0;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .aq-nav .navbar-container.aq-nav__bar { display: none !important; }

  /* Setup pages (no drawer): logo tile + name + logout */
  .aq-nav--initial .navbar-header.aq-nav__brand { width: auto !important; }
  .aq-nav--initial .aq-nav__logo { display: flex !important; }
  .aq-nav--initial .aq-nav__logo .brand-logo { height: 36px; background: #fff; border-radius: var(--aq-radius-control); padding: 2px 6px; }
  .aq-nav--initial .navbar-container.aq-nav__bar { display: flex !important; }
  .aq-nav--initial .aq-nav__title, .aq-nav--initial .aq-nav__chip-text { display: none; }

  /* Full-height drawer. Main pages key on the server-rendered data-col (the
     theme only adds .vertical-overlay-menu at window load), so the drawer is
     already closed at first paint and never flashes on screen. */
  body:is(.vertical-overlay-menu, .vertical-layout[data-col="2-columns"]) .main-menu,
  body:is(.vertical-overlay-menu, .vertical-layout[data-col="2-columns"]).fixed-navbar .main-menu.menu-fixed {
    top: 0 !important;
    height: 100% !important;
    width: var(--aq-drawer-w) !important;
    left: auto !important;
    right: auto !important;
    inset-inline-start: 0 !important;
    z-index: 1045 !important;
    display: flex !important;
    flex-direction: column;
    opacity: 1 !important;
  }
  /* No slide until the theme has set the menu state (aq-nav.js adds the flag) */
  body:is(.vertical-overlay-menu, .vertical-layout[data-col="2-columns"]) .main-menu { transition: none !important; }
  html.aq-nav-ready body:is(.vertical-overlay-menu, .vertical-layout[data-col="2-columns"]) .main-menu { transition: transform .25s ease !important; }
  /* Closed: off-canvas at the inline start (transforms have no logical form) */
  body:is(.vertical-overlay-menu, .vertical-layout[data-col="2-columns"]) .main-menu { transform: translate3d(-100%, 0, 0) !important; }
  [dir="rtl"] body:is(.vertical-overlay-menu, .vertical-layout[data-col="2-columns"]) .main-menu { transform: translate3d(100%, 0, 0) !important; }
  body:is(.vertical-overlay-menu, .vertical-layout[data-col="2-columns"]).menu-open .main-menu.menu-fixed,
  [dir="rtl"] body:is(.vertical-overlay-menu, .vertical-layout[data-col="2-columns"]).menu-open .main-menu.menu-fixed {
    transform: none !important;
    box-shadow: var(--aq-elev-3) !important;
  }
  body:is(.vertical-overlay-menu, .vertical-layout[data-col="2-columns"]) .sidenav-overlay { z-index: 1040 !important; background: rgba(15, 26, 42, .45) !important; }
  body:is(.vertical-overlay-menu, .vertical-layout[data-col="2-columns"]) .main-menu .main-menu-content {
    flex: 1;
    min-height: 0;
    height: auto !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: var(--aq-neutral-300) transparent;
  }
  .aq-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    height: 60px;
    padding-inline: 16px 8px;
    border-bottom: 1px solid var(--aq-surface-border);
  }
  .aq-drawer__logo img { height: 34px; width: auto; }
  .aq-drawer__close.aq-nav__icon {
    width: var(--aq-touch); height: var(--aq-touch);
    background: transparent; border: 0;
    color: var(--aq-neutral-600) !important;
    font-size: 22px;
  }
  .aq-drawer__close.aq-nav__icon:hover { background: var(--aq-neutral-100); }
  .aq-drawer__close.aq-nav__icon:focus-visible { box-shadow: var(--aq-focus-ring) !important; }
  .aq-drawer__foot {
    display: block;
    flex: none;
    padding: 12px 14px 16px;
    border-top: 1px solid var(--aq-surface-border);
    background: var(--aq-surface-card);
  }
  .aq-drawer__who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
  .aq-drawer__who-text { min-width: 0; }
  .aq-drawer__who-name { font-size: 13px; font-weight: 700; color: var(--aq-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .aq-drawer__who-role { font-size: 12px; color: var(--aq-neutral-500); }
  .aq-drawer__controls { display: flex; flex-wrap: wrap; gap: 8px; }
  .aq-drawer__controls .aq-seg__btn { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html.aq-nav-ready body:is(.vertical-overlay-menu, .vertical-layout[data-col="2-columns"]) .main-menu { transition: none !important; }
}

/* Desktop sidebar is scrollable from first paint (the theme's scrollbar only
   arrives at load), so the kept scroll position applies before anything shows.
   Not on the tablet rail: its hover popouts need visible overflow. */
@media (min-width: 992px) {
  body[data-col="2-columns"] .main-menu.menu-fixed .main-menu-content { overflow-y: hidden; }
}

/* ══ Page transitions ═══════════════════════════════════════════
   Same-origin navigations crossfade the content (browsers without
   cross-document View Transitions just load normally). The navbar and the
   sidebar carry their own names so they stay still between pages. */
@view-transition { navigation: auto; }
.header-navbar.aq-nav { view-transition-name: aq-navbar; }
@media (min-width: 768px) {
  .main-menu { view-transition-name: aq-sidebar; }
}
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .18s; }

/* Top progress bar while the next page loads (aq-nav.js) */
.aq-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 1060;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.aq-progress.is-active { opacity: 1; }
.aq-progress__bar {
  height: 100%;
  width: 100%;
  background: var(--aq-brand-200);
  box-shadow: 0 0 8px rgba(255, 255, 255, .6);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
}
[dir="rtl"] .aq-progress__bar { transform-origin: right center; }
/* The theme's Pace bar takes over while the new page loads; same look, so
   the two read as one bar across the navigation. */
html body .pace .pace-progress {
  background: var(--aq-brand-200) !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, .6);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .aq-progress__bar { transition: none; }
}

} /* end @media screen */