/**
 * Table Column Resize Styles
 * Provides visual feedback for resizable table columns
 */

/* Base styles for resizable tables */
.resizable-columns {
    table-layout: fixed;
    position: relative;
}

/* Resize handle styles */
.resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: none;
    z-index: 10;
}

/* Visual indicator on hover */
.resize-handle::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background: transparent;
    transition: background 0.2s ease;
}

.resize-handle:hover::after {
    background: #667eea;
}

/* Active resizing state */
.resizing .resize-handle::after {
    background: #667eea;
}

/* Prevent text selection while resizing */
.resizing {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: col-resize;
}

.resizing * {
    cursor: col-resize !important;
}

/* Table header adjustments */
.resizable-columns th {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 15px; /* Make room for resize handle */
}

/* Ensure cells respect width constraints */
.resizable-columns td,
.resizable-columns th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Special handling for action columns */
.resizable-columns .actions-column {
    min-width: 100px !important;
}

/* DataTables compatibility */
.dataTables_wrapper .resizable-columns th {
    padding-right: 20px;
}

/* Responsive behavior */
@media (max-width: 768px) {
    .resize-handle {
        width: 12px; /* Larger touch target on mobile */
    }
    
    .resize-handle::after {
        width: 4px;
    }
}

/* Visual feedback for minimum width reached */
.resize-handle.min-width::after {
    background: #e53e3e;
}

/* Smooth transitions for better UX */
.resizable-columns th,
.resizable-columns td {
    transition: none; /* Disable transitions during resize for performance */
}

/* Optional: Show resize cursor on entire header */
.resizable-columns thead th {
    border-right: 1px solid transparent;
}

.resizable-columns thead th:hover {
    border-right-color: #e2e8f0;
}

/* Fix for sticky columns */
.resizable-columns .sticky-column {
    z-index: 11; /* Above resize handles */
}

/* Modern table specific adjustments */
.table-modern.resizable-columns th {
    background-clip: padding-box; /* Prevent background from showing under resize handle */
}

/* Report table specific adjustments */
.report-table.resizable-columns th {
    padding-right: 20px;
}

/* Matrix table adjustments */
.matrix-table.resizable-columns th {
    min-width: 80px;
}

/* Prevent layout shift during resize */
.resizable-columns {
    width: 100%;
    max-width: 100%;
}

/* Visual indicator for sortable columns with resize */
.resizable-columns th.sortable {
    padding-right: 35px; /* Room for both sort icon and resize handle */
}

/* Fix for tables inside scrollable containers */
.table-responsive .resizable-columns {
    min-width: 100%;
}

/* Ensure resize handles are visible in dark mode */
@media (prefers-color-scheme: dark) {
    .resize-handle:hover::after {
        background: #818cf8;
    }
    
    .resizing .resize-handle::after {
        background: #818cf8;
    }
    
    .resizable-columns thead th:hover {
        border-right-color: #4a5568;
    }
}