#pmo-table {
    overflow-x: auto;
}

    /* deterministic sizing; honor <col> widths; don't force full width */
    #pmo-table table {
        table-layout: fixed;
        width: max-content; /* or: auto */
    }

    /* allow shrinking below content size */
    #pmo-table th,
    #pmo-table td,
    #pmo-table .mud-table-head-cell,
    #pmo-table .mud-table-cell {
        min-width: 0 !important;
        box-sizing: border-box;
        /* instead of clipping + … */
        overflow: visible; /* let text flow */
        text-overflow: unset; /* no ellipsis */
        white-space: normal; /* allow wrapping */

        padding: 2px 4px; /* 🔹 small padding for readability */
        line-height: 1.2; /* tighter line-height works for wrapped headers */
    }

    /* header: enable absolute-positioned resize handle */
    #pmo-table .pmo-th {
        position: relative;
        padding-left: 18px;
    }

    /* resize handle */
    #pmo-table .pmo-col-resizer {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 6px;
        cursor: col-resize;
        user-select: none;
    }

        #pmo-table .pmo-col-resizer:hover {
            background: rgba(0,0,0,.06);
        }

    #pmo-table .mud-table-sort-label {
        display: inline-flex;
        align-items: center; /* vertical center */
        gap: 4px; /* spacing between text and icon */
    }

    /* drag handle as inline-flex */
    #pmo-table .pmo-col-drag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        cursor: move;
        opacity: 0;
        transition: opacity 0.2s;
        user-select: none;
        vertical-align: middle; /* align with text baseline */
    }


    #pmo-table .pmo-th:hover .pmo-col-drag {
        opacity: 0.4; /* 🔹 light gray, semi-transparent */
    }

    /* stronger highlight when hovering the handle directly */
    #pmo-table .pmo-col-drag:hover {
        opacity: 0.9; /* 🔹 bright when hovered */
    }



    #pmo-table .pmo-col-drag svg {
        width: 100%;
        height: 100%;
        fill: rgba(0,0,0,.06); /* inherit text color */
    }

    #pmo-table .pmo-col-drag:active {
        opacity: 1;
    }




    /* generic long-text handling */
    #pmo-table .pmo-cell--wrap {
        white-space: pre-wrap; /* keep newlines */
        word-break: break-all; /* break loooong base64 tokens */
        overflow-wrap: anywhere;
        /*font-family: monospace;*/
        line-height: 1.2;
    }

    /* show a scroll box (good for base64/SVG text) */
    #pmo-table .pmo-cell--scroll {
        max-height: 40px; /* adjust as you like */
        overflow: auto;
    }

    /* one-line ellipsis (for short views) */
    #pmo-table .pmo-cell--ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*  hard-cap *all* cells so rows can't explode */
    #pmo-table td.pmo-cap {
        max-height: 40px;
        overflow: hidden;
    }