/* table.css - Table components extracted from inline styles */

.w-50 {
    width: 50px !important;
}

/* Main table styles */
.table-custom {
    width: 100%;
    min-width: 100%;
    background-color: #fff;
    border-radius: 8px;
    border-spacing: 0;
    table-layout: auto;
}

    .table-custom thead {
        background-color: var(--table-header-bg) !important;
        color: black;
        border: none;
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    
        .table-custom thead th {
            color: black !important; /* Softer blue-gray color for headers */
            font-weight: 500;
            font-size: 14px;
            text-transform: none;
            background-color: transparent;
            padding-bottom: 16px;
            border: 1px solid #eaedf0 !important;
            position: relative;
            white-space: nowrap;
            max-width: 400px; /* Maximum width before ellipsis kicks in */
        }

    .table-custom tbody {
        background-color: #fff;
    }

        .table-custom tbody tr {
            background-color: var(--light-text, #f8f9fa);
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s, box-shadow 0.2s;
            border-bottom: 1px solid #eaedf0;
        }
        .table-custom tbody td {
            font-size: 14px;
            max-width: 400px; /* Maximum width before ellipsis kicks in */
            /*overflow: hidden;*/
            text-overflow: ellipsis;
            /*white-space: nowrap;*/
        }
            .table-custom tbody tr:hover {
                background-color: var(--secondary-color-hover, #f8f9fa);
            }

    .table-custom td {
        border-top: 1px solid #eaedf0;
        vertical-align: middle;
        text-align: left;
        border: 1px solid #eaedf0;
        padding: 8px 12px;
    }

    .table-custom tbody td:first-child {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }

    .table-custom tbody td:last-child {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }


    .table-custom th {
        color: black;
        padding: 12px 20px;
        cursor: pointer;
        font-weight: bold;
        white-space: nowrap;
        background-color: transparent;
    }

   
.table-responsive {
    overflow-x: auto;
    border-radius: 6px;
    max-height: calc(70vh - 50px);
    overflow-y: auto;
    z-index: 1;
}
    .table-responsive .dropdown-menu {
        z-index: 1050 !important;
        position: fixed !important;
    }

.scrollable-dropdown {
    max-height: 300px;
    overflow-y: auto;
}

.table-custom .sortable {
    cursor: pointer;
}

    .table-custom .sortable:after {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-left: 5px;
    }

    .table-custom .sortable.asc:after {
        content: '\f062';
    }

    .table-custom .sortable.desc:after {
        content: '\f063';
    }


/* No data cell styling */
.no-data-cell {
    background-color: #f5f5f5;
    text-align: center;
    font-style: italic;
    color: #666;
}

/* Sortable column styles */
.sortable {
    cursor: pointer;
}


.asc:after {
    content: '\f063';
    opacity: 1;
}

.desc:after {
    content: '\f062';
    opacity: 1;
}

/* Resize handle for columns */
.resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: transparent;
    cursor: col-resize;
}

    .resize-handle:hover {
        background-color: var(--primary-color);
    }

.resizer {
    display: inline-block;
    width: 5px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    cursor: col-resize;
    user-select: none;
}

/* Frozen columns - GENERIC (will be overridden for specific tables) */
.table-custom th.freeze-left {
    position: sticky;
    left: 0;
    z-index: 101;
    background-color: var(--table-header-bg);
}

.table-custom td.freeze-left {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 99;
}

.table-custom th.freeze-right {
    position: sticky;
    right: 0;
    background-color: var(--table-header-bg);
    z-index: 101;
}

.table-custom td.freeze-right {
    position: sticky;
    right: 0;
    background-color: #fff;
    box-shadow: #fff -3px 0px 0px;
    z-index: 99;
}

/* Modifications table specific styles */
.modifications-table {
    width: 100%;
    table-layout: fixed;
}

    .modifications-table th,
    .modifications-table td {
        word-wrap: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 1.2em;
    }

    .modifications-table .show-more {
        cursor: pointer;
        color: blue;
        text-decoration: underline;
    }

/* Column settings popup */
.column-settings-popup {
    min-width: 200px;
    max-height: 400px;
    position: fixed;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 9999 !important;
    color: black;
    padding: 10px;
    animation: slideIn 0.2s ease-out;
}

.column-toggle-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
}

    /* Custom scrollbar for table containers */
    .table-responsive::-webkit-scrollbar,
    .column-toggle-list::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .table-responsive::-webkit-scrollbar-track,
    .column-toggle-list::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .table-responsive::-webkit-scrollbar-thumb,
    .column-toggle-list::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

        .table-responsive::-webkit-scrollbar-thumb:hover,
        .column-toggle-list::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

/* Custom styling for dropdown selection color */

/* Change the background color of selected options */
select option:checked,
select option:hover,
select option.selected {
    background-color: var(--secondary-color, #004165) !important; /* Use your theme color or any color you prefer */
    color: white !important;
}

/* For Firefox */
select option:hover
{
    background-color: var(--secondary-color, #004165) !important;
    color: white !important;
}

/* For Chrome and Edge */
select option:checked {
    background-color: var(--secondary-color, #004165) !important;
    color: white !important;
}

/* fix multilist issue */
.table-custom,
.table-custom tr,
.table-custom td {
    overflow: visible !important;
    position: static !important;
    z-index: auto !important;
}


.table-responsive {
    overflow-x: scroll;
    overflow-y: visible !important;
}


.col-autofit-width{
    width: 1%;
    white-space: nowrap;
}