/* Letting somebody put their own modules in their own order.
 *
 * Whoever spends the day in Support and never opens HR should be able to have
 * Support at the top. The order is a preference, not a permission — nothing
 * here changes what anybody can reach.
 *
 * Applied with CSS `order` rather than by moving nodes: `.nav` is already a
 * flex column, so the saved order can be set during parse and there is no
 * moment where the sidebar is visibly in the wrong order.
 */

/* The grip. Hidden until the sidebar is hovered, so the default view is the
   plain nav it has always been. */
.nav-grip {
  flex: 0 0 auto;
  width: 14px;
  margin-left: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--chrome-border, #9ca3af);
  cursor: grab;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease;
  background: none;
  border: 0;
  padding: 0;
  font-size: 11px;
  line-height: 1;
}

.sidebar:hover .nav-grip,
.nav-grip:focus-visible { opacity: 1; }
.nav-grip:hover { color: var(--text, #111827); }
.nav-grip:active { cursor: grabbing; }

.nav-grip:focus-visible {
  outline: 2px solid var(--brand, #f7941d);
  outline-offset: 1px;
  border-radius: 3px;
}

.nav-group.is-dragging { opacity: .45; }

.nav-group.is-drop-target > .nav-row {
  box-shadow: inset 0 2px 0 var(--brand, #f7941d);
}

/* Collapsed sidebar has no room, and nothing to aim at. */
.sidebar-collapsed .nav-grip { display: none; }

/* Touch has no HTML5 drag. The keyboard path (alt+arrow on a focused grip)
   still works with a bluetooth keyboard, but there is nothing to grab on a
   phone, so do not show a handle that cannot be used. */
@media (hover: none) {
  .nav-grip { display: none; }
}

/* Shown only once an order has actually been saved — an affordance for undoing
   something, offered at the point there is something to undo. */
.nav-order-reset {
  display: none;
  margin: 6px 10px 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted, #6b7280);
  font-size: 11px;
  cursor: pointer;
  text-align: left;
}

.nav-order-reset:hover { color: var(--text, #111827); text-decoration: underline; }
.nav-order-reset.is-shown { display: block; }
.sidebar-collapsed .nav-order-reset { display: none; }