@use "tokens" as *;

// Configurador del menú público (doc 10 ampliado, rediseño sin grupos):
// filas tipo PageBlocks (asa + etiqueta + badges + acciones),
// arrastrables (drag & drop nativo) además de las flechas. Nada se persiste
// hasta "Guardar": la barra superior trae el aviso de cambios sin guardar y
// Descartar/Guardar.
.menu-manager {
  display: grid;
  gap: $space-3;

  &__bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: $space-3;
  }

  &__dirty {
    color: $warning;
    font-size: $fs-13;
    font-weight: $k-fw-semibold;
    margin-right: auto;
  }

  &__empty { color: $text-3; margin: 0; }

  &__list {
    display: grid;
    gap: $space-2;
  }

  // SIN wrap: la fila entera cabe siempre en UNA línea — la etiqueta es lo
  // único que encoge (min-width: 0 + ellipsis); en muy estrecho, además,
  // baja de cuerpo (container query más abajo).
  &__item {
    display: flex;
    align-items: center;
    gap: $space-2;
    border: 1px solid $border;
    border-radius: $radius-md;
    background: $surface;
    padding: $space-2 $space-3;
    min-width: 0;
    position: relative;
    transition: border-color 0.15s ease, opacity 0.15s ease;

    // Filas NO clickables (no seleccionan panel, solo se arrastran): el
    // cursor invita a agarrar en cualquier punto de la fila.
    cursor: grab;

    &:hover { border-color: $border-strong; }
    &.is-hidden { opacity: 0.65; }
    &.is-dragging { opacity: 0.4; cursor: grabbing; }

    // Indicador de inserción: línea antes/después de la fila.
    &.drop-before::before,
    &.drop-after::after {
      content: "";
      position: absolute;
      left: $space-2;
      right: $space-2;
      height: 2px;
      background: $accent-500;
      border-radius: $radius-pill;
    }
    &.drop-before::before { top: -$space-1; }
    &.drop-after::after { bottom: -$space-1; }

    // Destino válido para anidar: resalta toda la fila.
    &.drop-inside {
      border-color: $accent-500;
      background: color-mix(in srgb, $accent-500 10%, $surface);
    }
  }

  // Hijas de una página: sangradas justo debajo de ella (mismo lenguaje que
  // los bloques hijos de PageBlocks).
  &__item.is-child { margin-left: $space-7; }

  &__grip {
    display: inline-flex;
    color: $text-3;
    flex: 0 0 auto;
    cursor: grab;
    touch-action: none;
    transition: color 0.15s ease;

    &:hover { color: $accent-500; }
    &:active { cursor: grabbing; }
  }

  &__label {
    font-weight: $k-fw-semibold;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: auto;
  }

  // En muy estrecho el título baja de cuerpo (y la elipsis remata si aún
  // no cabe): la fila sigue siendo UNA línea.
  @container content (max-width: #{$bp-sm - 1px}) {
    &__label { font-size: $fs-13; }
  }

  &__badges { display: flex; gap: $space-1; }

  &__moves {
    display: flex;
    gap: 2px;
  }

  &__move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid $border;
    border-radius: $radius-sm;
    color: $text-2;
    cursor: pointer;
    padding: $space-1;
    transition: background-color 0.15s ease;

    &:hover:not(:disabled) { background: $surface-2; }
    &:disabled { opacity: 0.4; cursor: default; }
  }

  &__visibility {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid color-mix(in srgb, $success 45%, transparent);
    border-radius: $radius-sm;
    color: $success;
    cursor: pointer;
    padding: $space-1;
    flex: 0 0 auto;
    transition: background-color 0.15s ease, border-color 0.15s ease;

    &.is-on {
      background: $success;
      border-color: $success;
      @include contrast-text($success);
    }

    // Entrada OCULTA: el botón en ámbar ($warning) — sin chip, el estado
    // lo cuenta el propio color del botón.
    &.is-off {
      background: $warning;
      border-color: $warning;
      @include contrast-text($warning);
    }
  }
}