/* _content/Kayros.Portal/Components/Pages/Admin/ProductMenuEditor.razor.rz.scp.css */
/* KUX-011: editor rápido de menú por producto.

   El árbol es HTML propio --lista anidada con `role="tree"`-- y no un componente de MudBlazor, así
   que estos estilos alcanzan a los elementos sin `::deep`. Mismo criterio que el selector de vista
   del menú en KUX-010. */

.kux-pm-toolbar[b-i1hfn7nhvj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.kux-pm-tree[b-i1hfn7nhvj],
.kux-pm-tree ul[b-i1hfn7nhvj] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kux-pm-row[b-i1hfn7nhvj] {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .35rem .5rem;
    border-radius: 4px;
    cursor: pointer;
    min-height: 2.25rem;
}

.kux-pm-row:hover[b-i1hfn7nhvj] {
    background: var(--mud-palette-action-default-hover);
}

/* La fila seleccionada manda: los seis botones de la barra operan sobre ella, así que si no se
   distingue de un vistazo el administrador no sabe qué va a mover ni qué va a borrar.
   `--mud-palette-primary-hover` sola no alcanza --es un 4% de opacidad, invisible en oscuro--, así
   que además va una barra de color a la izquierda y el nombre en primario. */
.kux-pm-row.seleccionado[b-i1hfn7nhvj] {
    background: var(--mud-palette-primary-hover);
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
    outline: 1px solid var(--mud-palette-primary);
}

.kux-pm-row.seleccionado .kux-pm-name[b-i1hfn7nhvj] {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* El foco tiene que verse: la pantalla se opera con teclado y los botones actúan sobre la fila
   enfocada. Sin esto, moverse con Tab deja al administrador sin saber sobre qué va a operar. */
.kux-pm-row:focus-visible[b-i1hfn7nhvj] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.kux-pm-root[b-i1hfn7nhvj] {
    font-weight: 600;
}

.kux-pm-name[b-i1hfn7nhvj] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La ruta acompaña al comando para distinguir dos pantallas de nombre parecido. Se apaga para que
   no compita con el nombre: es un dato de referencia y no se edita acá. */
.kux-pm-route[b-i1hfn7nhvj] {
    margin-left: .5rem;
    opacity: .6;
    font-size: .8em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kux-pm-badge[b-i1hfn7nhvj] {
    margin-left: .5rem;
    padding: .1rem .4rem;
    border-radius: 999px;
    font-size: .7em;
    font-weight: 400;
    opacity: .7;
    background: var(--mud-palette-action-default-hover);
}

/* Reserva el ancho del chevron en las hojas para que los nombres queden alineados con los de las
   carpetas del mismo nivel. Sin esto, la sangría miente sobre la profundidad. */
.kux-pm-chevron-space[b-i1hfn7nhvj] {
    display: inline-block;
    width: 2rem;
}

.kux-pm-chevron[b-i1hfn7nhvj] {
    margin-right: 0;
}

.kux-pm-new-name[b-i1hfn7nhvj] {
    max-width: 18rem;
}

.kux-pm-empty[b-i1hfn7nhvj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    opacity: .6;
    text-align: center;
}

/* Las flechas de orden, empujadas al final de la fila seleccionada. `margin-left: auto` come todo el
   espacio sobrante, así que quedan siempre en el mismo lugar del renglón sin importar el largo del
   nombre; `flex-shrink: 0` evita que un nombre largo se las lleve puestas. */
.kux-pm-actions[b-i1hfn7nhvj] {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Ancla del menú contextual. Hay UNO solo para todo el árbol --uno por fila multiplicaría el mismo
   menú por cada ítem del catálogo-- y se abre en las coordenadas del cursor, así que el activador no
   se muestra: ocupa cero y el popover se dibuja aparte, en el proveedor del layout. */
.kux-pm-context-anchor[b-i1hfn7nhvj] {
    position: fixed;
    width: 0;
    height: 0;
    overflow: hidden;
}

.kux-pm-diagnostics[b-i1hfn7nhvj] {
    margin: 0;
    padding-left: 1.1rem;
}