/*
 * Reordena as abas da lista de conversas para "Todos" ficar em PRIMEIRO.
 * Injetado no <head> do vueapp.html.erb; CSS puro sobre o front pré-compilado
 * (sem recompilar o bundle Vue).
 *
 * Contexto do bundle (componente woot-tabs / TabsItem):
 *  - A barra de abas (assignee) é um woot-tabs com a classe distintiva
 *    "w-full px-3 -mt-1 py-0 [&_ul]:p-0 h-10" no container -> alvo: um elemento
 *    que tenha ao mesmo tempo os tokens `-mt-1` E `[&_ul]:p-0` (só a barra de
 *    assignee combina os dois; a barra de caixas usa `[&_ul]:p-0` mas sem `-mt-1`).
 *  - Dentro há uma <ul class="flex ..."> com um <li> por aba, na ordem do DOM
 *    me / unassigned / all -> "Todos" é SEMPRE o ULTIMO <li> (por isso :last-child,
 *    robusto mesmo que algum agente não veja as 3 abas por permissão).
 *  - O sublinhado azul da aba ativa é um pseudo-elemento ::after no <a> da PRÓPRIA
 *    aba ativa (after:bg-n-brand) — segue a aba, não uma posição por índice.
 *    Logo, mudar a ordem visual com `order` NÃO desalinha o indicador.
 *
 * Especificidade (2 seletores de atributo + ul + li + :pseudo) supera as utilities
 * do Tailwind, então não precisa de !important.
 */

/* A <ul> já é flex; garante o contexto de `order` e normaliza as margens laterais
   (as utilities mx-2 + first:ml-0/last:mr-0 são por ordem de DOM e ficariam tortas
   após o reorder). */
[class~="[&_ul]:p-0"][class~="-mt-1"] ul {
  display: flex;
}

[class~="[&_ul]:p-0"][class~="-mt-1"] ul > li {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

/* "Todos" (último <li>) vai para o início e encosta na borda esquerda. */
[class~="[&_ul]:p-0"][class~="-mt-1"] ul > li:last-child {
  order: -1;
  margin-left: 0;
}

/* Depois de mover o último para a frente, o novo "visualmente último" é o penúltimo
   do DOM: zera a margem direita dele para encostar na borda. */
[class~="[&_ul]:p-0"][class~="-mt-1"] ul > li:nth-last-child(2) {
  margin-right: 0;
}