/* =============================================================================
   UI Order — ordem do menu lateral e das abas escolhida pelo usuário (card 979579)
   Cores derivadas do texto (currentColor / rgba) para servir ao tema claro,
   escuro e ao Air Mode sem regra própria para cada um.
   ============================================================================= */

/* ---- Menu oculto até a ordem salva ser aplicada. Se o script falhar, o menu
   aparece sozinho depois de 1,5s: a ordem padrão é melhor que menu nenhum. ---- */
#side-menu.ui-order-pending {
  visibility: hidden;
  animation: ui-order-reveal 0s linear 1.5s forwards;
}

@keyframes ui-order-reveal {
  to {
    visibility: visible;
  }
}

/* ---- Barra "Personalizar menu" (abaixo da busca) ---- */
.sidebar-ui-order-bar {
  padding: 0 16px 8px;
}

.sidebar-ui-order-toggle,
.sidebar-ui-order-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #79829c;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.sidebar-ui-order-toggle:hover,
.sidebar-ui-order-reset:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #a6b0cf;
}

.sidebar-ui-order-toggle[aria-pressed="true"] {
  border-color: rgba(85, 110, 230, 0.55);
  background: rgba(85, 110, 230, 0.22);
  color: #fff;
}

.sidebar-ui-order-panel {
  display: none;
  margin-top: 6px;
}

.sidebar-ui-order-bar.is-active .sidebar-ui-order-panel {
  display: block;
}

.sidebar-ui-order-hint {
  margin: 0 0 4px;
  color: #79829c;
  font-size: 11.5px;
  line-height: 1.4;
}

.sidebar-ui-order-status {
  margin-left: 6px;
  color: #34c38f;
  font-size: 12px;
}

body[data-sidebar="light"] .sidebar-ui-order-toggle,
body[data-sidebar="light"] .sidebar-ui-order-reset,
body[data-sidebar="light"] .sidebar-ui-order-hint {
  color: #6a7187;
}

body[data-sidebar="light"] .sidebar-ui-order-toggle:hover,
body[data-sidebar="light"] .sidebar-ui-order-reset:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #495057;
}

body[data-sidebar="light"] .sidebar-ui-order-toggle[aria-pressed="true"] {
  color: #3b4db8;
}

/* Com o menu recolhido (só ícones) não há espaço para o modo de edição. */
body.vertical-collpsed .sidebar-ui-order-bar {
  display: none;
}

/* ---- Modo de edição do menu ---- */
#sidebar-menu.is-ui-ordering #side-menu li[draggable="true"] > a {
  cursor: grab;
  outline: 1px dashed rgba(166, 176, 207, 0.35);
  outline-offset: -2px;
  border-radius: 6px;
}

#sidebar-menu.is-ui-ordering #side-menu li[draggable="true"] > a::before {
  content: "\F01DD"; /* mdi-drag-vertical */
  font-family: "Material Design Icons";
  margin-right: 4px;
  opacity: 0.6;
}

/* No modo de edição a estrela de favorito sai: o clique é para reordenar. */
#sidebar-menu.is-ui-ordering .sidebar-favorite-btn {
  display: none !important;
}

#sidebar-menu.is-ui-ordering #side-menu li.is-ui-dragging > a {
  cursor: grabbing;
  opacity: 0.45;
}

/* ---- Abas do componente padrão (x-form-tabs) ---- */
.form-tabs-wrapper.has-ui-order {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
}

.form-tabs-wrapper.has-ui-order > .form-tabs {
  flex: 1 1 0;
  min-width: 0;
}

.form-tabs-ui-order {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  padding-right: 0.25rem;
}

.form-tabs-ui-order-toggle,
.form-tabs-ui-order-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--form-muted, #74788d);
  font-size: 0.8rem;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
}

.form-tabs-ui-order-toggle:hover,
.form-tabs-ui-order-reset:hover {
  background-color: var(--form-accent-soft, rgba(85, 110, 230, 0.08));
  color: var(--form-accent, #556ee6);
}

.form-tabs-ui-order-toggle .mdi,
.form-tabs-ui-order-reset .mdi {
  font-size: 1rem;
}

/* Fora do modo de edição: só o ícone, para não disputar espaço com as abas. */
.form-tabs-ui-order-toggle-label,
.form-tabs-ui-order-hint,
.form-tabs-ui-order-reset,
.form-tabs-ui-order-status:empty {
  display: none;
}

.form-tabs-wrapper.is-ui-ordering .form-tabs-ui-order-toggle-label,
.form-tabs-wrapper.is-ui-ordering .form-tabs-ui-order-hint {
  display: inline;
}

.form-tabs-wrapper.is-ui-ordering .form-tabs-ui-order-reset {
  display: inline-flex;
}

/* No modo de edição a barra de ações desce para uma linha própria: as abas
   continuam com a largura inteira, como o usuário as vê fora do modo. */
.form-tabs-wrapper.is-ui-ordering .form-tabs-ui-order {
  flex-basis: 100%;
  justify-content: flex-end;
  padding: 0.35rem 0.25rem;
  border-top: 1px solid var(--form-border, rgba(0, 0, 0, 0.08));
}

.form-tabs-wrapper.is-ui-ordering .form-tabs-ui-order-toggle {
  border-color: var(--form-accent, #556ee6);
  background-color: var(--form-accent-soft, rgba(85, 110, 230, 0.08));
  color: var(--form-accent, #556ee6);
}

.form-tabs-ui-order-hint {
  color: var(--form-muted, #74788d);
  font-size: 0.75rem;
  white-space: nowrap;
}

.form-tabs-ui-order-status {
  color: #34c38f;
  font-size: 0.75rem;
  white-space: nowrap;
}

.form-tabs-wrapper.is-ui-ordering .form-tabs li[draggable="true"] > .nav-link {
  cursor: grab;
  outline: 1px dashed rgba(85, 110, 230, 0.45);
  outline-offset: -4px;
}

.form-tabs-wrapper.is-ui-ordering .form-tabs li[draggable="true"] > .nav-link::before {
  content: "\F01DD"; /* mdi-drag-vertical */
  font-family: "Material Design Icons";
  margin-right: 2px;
  opacity: 0.55;
}

.form-tabs-wrapper.is-ui-ordering .form-tabs li.is-ui-dragging > .nav-link {
  cursor: grabbing;
  opacity: 0.45;
}

@media (max-width: 767.98px) {
  .form-tabs-wrapper.is-ui-ordering .form-tabs-ui-order-hint {
    display: none;
  }
}

/* ---- Arraste sem imagem flutuante (o próprio item acompanha o cursor) ---- */
.ui-order-drag-blank {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: transparent;
  pointer-events: none;
}

/* ---- Confirmação ao lado do item movido ---- */
.is-ui-just-moved > a,
.is-ui-just-moved > .nav-link {
  animation: ui-order-moved 1.6s ease;
}

@keyframes ui-order-moved {
  0%,
  40% {
    background-color: rgba(52, 195, 143, 0.28);
  }
  100% {
    background-color: transparent;
  }
}

.ui-order-saved-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(52, 195, 143, 0.18);
  color: #34c38f;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
}

/* O app.min.css dá a todo "a i" da sidebar 1.25rem e min-width de 1.75rem. */
#sidebar-menu .ui-order-saved-badge i,
.ui-order-saved-badge i {
  min-width: auto;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

/* ---- Toast ---- */
.ui-order-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  max-width: 360px;
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  animation: ui-order-fadein 0.2s ease;
}

.ui-order-toast--success {
  background: #198754;
  color: #fff;
}

.ui-order-toast--error {
  background: #dc3545;
  color: #fff;
}

@keyframes ui-order-fadein {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}