/* Default resizable columns */
table.dataTable thead th[data-is-resizable=true] {
    position: relative;
    border-left: 2px solid transparent;
    border-right: 1px solid rgba(0,0,0,0.08);
    cursor: col-resize !important; /* enforce ⇔ cursor */
    transition: width 0.05s ease-in-out;
    user-select: none; /* Prevent text selection while interacting */
}

/* Hover effect */
table.dataTable thead th.dt-colresizable-hover {
    background-color: rgba(0, 123, 255, 0.06);
    border-right: 1px solid rgba(0,0,0,0.15);
    cursor: col-resize !important; /* enforce ⇔ cursor */
}

/* At min/max bound */
table.dataTable thead th.dt-colresizable-bound-min,
table.dataTable thead th.dt-colresizable-bound-max {
    opacity: 0.5;
    border-right: 3px solid #ff0000;
    cursor: not-allowed !important; /* blocked state */
}

/* Enhanced styling for better visual feedback */
table.dataTable thead th {
    position: relative;
    cursor: col-resize;
    transition: all 0.2s ease;
}

/* Resize handle styling with better visibility */
/* Visual handle (thin) */
table.dataTable thead th::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    width: 3px; /* thin visual line */
    background-color: transparent;
    cursor: col-resize;
    transition: background-color 0.2s ease;
}

table.dataTable thead th:hover::after {
    background-color: rgba(0, 123, 255, 0.35);
}

/* Active resize styling */
table.dataTable thead th.ui-resizable-resizing::after {
    background-color: #0d6efd;
    width: 2px;
}

/* Invisible grab zone (wide hit area without changing appearance) */
table.dataTable thead th::before {
    content: '';
    position: absolute;
    right: -8px; /* extend beyond edge */
    top: 0;
    bottom: 0;
    width: 16px; /* generous hit target */
    background: transparent; /* stay invisible */
    cursor: col-resize;
    z-index: 1000; /* above header content but below any overlays */
}

/* Resize feedback during active resize */
table.dataTable thead th.ui-resizable-resizing {
    background-color: rgba(13, 110, 253, 0.15) !important;
    border-right: 2px solid #0d6efd !important;
    user-select: none; /* No selection during active drag */
}

/* Ensure proper z-index for resize handles */
table.dataTable .ui-resizable-handle {
    z-index: 1000;
}

/* Smooth transitions for width changes */
table.dataTable thead th,
table.dataTable tbody td {
    transition: width 0.1s ease;
}

/* Loading indicator during save */
.column-width-saving {
    opacity: 0.7;
    pointer-events: none;
}

.column-width-saving::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1001;
}

/* Success feedback animation */
.column-width-saved {
    animation: columnWidthSaved 0.5s ease;
}

@keyframes columnWidthSaved {
    0% { background-color: rgba(40, 167, 69, 0.2); }
    100% { background-color: transparent; }
}

/* Error feedback animation */
.column-width-error {
    animation: columnWidthError 0.5s ease;
}

@keyframes columnWidthError {
    0% { background-color: rgba(220, 53, 69, 0.2); }
    100% { background-color: transparent; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    table.dataTable thead th::after {
        width: 10px; /* Larger touch target on mobile */
    }
    
    table.dataTable thead th[data-is-resizable=true] {
        border-right: 2px solid rgba(0,0,0,0.15);
    }
}

/* Better visual separation for resizable columns */
table.dataTable thead th[data-is-resizable=true]:not(:last-child) {
    border-right: 1px solid rgba(0,0,0,0.08);
}

/* Hover state for better UX */
table.dataTable thead th[data-is-resizable=true]:hover {
    background-color: rgba(0, 123, 255, 0.06);
}

/* Disabled state for non-resizable columns */
table.dataTable thead th:not([data-is-resizable=true]) {
    cursor: default;
}

table.dataTable thead th:not([data-is-resizable=true])::after {
    display: none;
}

/* Prevent text selection across the whole header row while dragging */
table.dataTable thead {
    user-select: none;
}