/*
 * columnResize.css — styling for the reusable admin GridView column-resize
 * helper (columnResize.js). Mirrors the FrameGrid resize handle. Scoped to
 * .resizable-grid so it never affects grids that don't opt in.
 */

/* Header cells need position:relative so the absolutely-positioned handle
   anchors to the cell's right edge. box-sizing:border-box makes style.width
   equal offsetWidth, so the JS width-seeding and steal-from-neighbor math are
   exact (otherwise content-box inflates each column by its padding+border and
   the total width drifts on every drag). */
.resizable-grid th,
.resizable-grid td {
    position: relative;
    box-sizing: border-box;
}

/* table-layout:fixed is also set inline by the JS after seeding px widths;
   declaring it here keeps the fixed layout stable through re-renders. */
.resizable-grid {
    table-layout: fixed;
}

/* Clip overflow so a narrowed column doesn't spill its content over the
   neighbor. Long text still wraps (no white-space:nowrap) to preserve the
   existing multi-line behaviour of the admin grids. */
.resizable-grid td {
    overflow: hidden;
    word-wrap: break-word;
}
.resizable-grid th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Header cells may render as <th> (UseAccessibleHeader, the default) OR <td>
   (UseAccessibleHeader=false) — style the handle in both, else td-header grids
   get an unstyled, un-grabbable handle. */
.resizable-grid th .col-resize-handle,
.resizable-grid td .col-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 1;
    /* Faint always-visible divider so the grab area is discoverable. */
    border-right: 2px solid rgba(0, 0, 0, 0.15);
}
.resizable-grid th .col-resize-handle:hover,
.resizable-grid th .col-resize-handle.resizing,
.resizable-grid td .col-resize-handle:hover,
.resizable-grid td .col-resize-handle.resizing {
    background: #4a90d9;
    border-right-color: #4a90d9;
}