/* =============================================================================
   MyCategoryOrderEditor et MyProductOrderEditor
   -----------------------------------------------------------------------------
   Deux editeurs de reordonnancement au style quasi identique dans Boracay : liste
   de type tableau, ligne de depot, poignee de glisser-deposer. Les couleurs et le
   rayon passent par les tokens ; le reste (tailles, transitions) est repris tel
   quel.
   ============================================================================= */

.my-category-order-editor,
.my-product-order-editor {
    transition: box-shadow 0.2s;
}

/* Conteneur de contenu (la carte vient du MyCard du site d'appel) */
.my-category-order-editor--root,
.my-product-order-editor {
    border-radius: var(--my-radius-md);
}

.my-category-order-editor--root.my-category-order-editor--editing,
.my-product-order-editor--editing {
    box-shadow: 0 0 0 2px var(--my-action-primary);
}

@keyframes myOrderEditorFlash {
    0% { outline: 0 solid rgba(var(--my-brand-primary-rgb), 0); outline-offset: 0; }
    30% { outline: 5px solid rgba(var(--my-brand-primary-rgb), 0.65); outline-offset: 3px; }
    60% { outline: 0 solid rgba(var(--my-brand-primary-rgb), 0); outline-offset: 0; }
    85% { outline: 4px solid rgba(var(--my-brand-primary-rgb), 0.45); outline-offset: 2px; }
    100% { outline: 0 solid rgba(var(--my-brand-primary-rgb), 0); outline-offset: 0; }
}

.my-category-order-editor--flash,
.my-product-order-editor--flash {
    animation: myOrderEditorFlash 0.7s ease-in-out;
}

.my-category-order-editor__header,
.my-category-order-editor__item,
.my-product-order-editor__header,
.my-product-order-editor__item {
    display: flex;
    align-items: center;
    padding: 0 12px;
}

.my-category-order-editor__header,
.my-product-order-editor__header {
    height: 36px;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--my-text-muted);
    border-bottom: 1px solid var(--my-border-subtle);
    background: var(--my-surface-hover);
}

.my-category-order-editor__item,
.my-product-order-editor__item {
    height: 44px;
    border-bottom: 1px solid var(--my-border-subtle);
    user-select: none;
    transition: background 0.15s;
}

.my-category-order-editor__list,
.my-product-order-editor__list {
    position: relative;
}

.my-category-order-editor__group:last-child > .my-category-order-editor__item,
.my-product-order-editor__item:last-of-type {
    border-bottom: none;
}

.my-category-order-editor__item:hover,
.my-product-order-editor__item:hover {
    background: var(--my-surface-hover);
}

.my-category-order-editor__list.editing .my-category-order-editor__item,
.my-product-order-editor__list.editing .my-product-order-editor__item {
    cursor: grab;
}

/* Ligne selectionnee en mode edition (Ctrl+clic, Shift+clic ou debut de drag) -
   uniquement MyProductOrderEditor, qui autorise la selection multiple. */
.my-product-order-editor__list.editing .my-product-order-editor__item--selected {
    background: var(--my-surface-selected);
}

/* Desactive les evenements pointeur sur les enfants en mode edition pour que le
   drag soit capte uniquement par la ligne parente ; reactive sur la poignee. */
.my-product-order-editor__list.editing .my-product-order-editor__item * {
    pointer-events: none;
}

.my-product-order-editor__list.editing .my-product-order-editor__item .drag-handle {
    pointer-events: auto;
}

/* Ligne de depot visuelle indiquant la position d'insertion pendant le drag */
.my-product-order-editor__drop-line {
    height: 3px;
    background: var(--my-action-primary);
    border-radius: 2px;
    margin: 0 4px;
    animation: myOrderEditorDropLineFadeIn 0.08s ease-out;
}

@keyframes myOrderEditorDropLineFadeIn {
    from { opacity: 0; transform: scaleX(0.7); }
    to { opacity: 1; transform: scaleX(1); }
}

/* Zone invisible positionnee en absolu sur le bas du conteneur : capture le
   dragover sans ajouter d'espace visuel. */
.my-product-order-editor__drop-end-zone {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
}

.my-category-order-editor__col-drag,
.my-product-order-editor__col-drag {
    flex: 0 0 28px;
    display: flex;
    align-items: center;
}

.my-category-order-editor__item .drag-handle,
.my-product-order-editor__item .drag-handle {
    cursor: grab;
    color: var(--my-text-disabled);
    font-size: 20px;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
}

.my-category-order-editor__item:hover .drag-handle,
.my-product-order-editor__item:hover .drag-handle {
    opacity: 1;
    color: var(--my-action-primary);
}

.my-category-order-editor__col,
.my-product-order-editor__col {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px;
}

.my-category-order-editor__col--expand { flex: 0 0 32px; display: flex; align-items: center; justify-content: center; }
.my-category-order-editor__col--image { flex: 0 0 4em; display: flex; align-items: center; justify-content: center; }
.my-category-order-editor__col--code { flex: 1 1 0; min-width: 60px; }
.my-category-order-editor__col--name { flex: 1 1 0; min-width: 100px; }

/* overflow visible : ne pas rogner le chip Etat */
.my-category-order-editor__col--state {
    flex: 0 0 110px;
    text-align: center;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.my-category-order-editor__expand-btn {
    padding: 0;
    width: 24px;
    height: 24px;
}

.my-category-order-editor__group {
    display: flex;
    flex-direction: column;
}

.my-category-order-editor__sublist {
    border-left: 2px solid var(--my-action-primary);
    margin-left: 20px;
    margin-bottom: 4px;
}

.my-product-order-editor__col--image { flex: 0 0 4em; display: flex; align-items: center; justify-content: center; }
.my-product-order-editor__col--code { flex: 1 1 0; min-width: 60px; }
.my-product-order-editor__col--name { flex: 3 1 0; min-width: 100px; }
.my-product-order-editor__col--version { flex: 1 1 0; min-width: 60px; text-align: center; }
.my-product-order-editor__col--hscode { flex: 2 1 0; min-width: 80px; }