﻿#table th+th,
#table td+td {
    border-left: 1px solid rgba(203, 213, 225);
}

/* Scrollbar Styling */
#table-scroll-container::-webkit-scrollbar {
    width: 6px;
}

#table-scroll-container::-webkit-scrollbar-track {
    background: #f1f5f9;
}

#table-scroll-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

#table-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #059669;
}

/* Ensure the header has enough height and relative positioning for the icon */
th.sortable {
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    position: relative;
    /* Required for absolute positioning of the icon if needed */
    padding-right: 25px !important;
    /* Make room for the arrow so it doesn't overlap text */
}

th.sortable:hover {
    color: #059669 !important;
    background-color: #f8fafc;
}

/* The Sort Indicator */
th.sortable::after {
    content: '↕';
    position: absolute;
    right: 8px;
    /* Fixed distance from the right border of the cell */
    top: 50%;
    transform: translateY(-50%);
    color: #cbd5e1;
    /* slate-300 */
    font-size: 0.9em;
    opacity: 0.7;
}

/* Specific arrows when active */
th.sortable.asc::after {
    content: '↑';
    color: #059669;
    opacity: 1;
}

th.sortable.desc::after {
    content: '↓';
    color: #059669;
    opacity: 1;
}

.chip-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-left: 16px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    border-width: 1px;
    border-style: solid;
    border-color: #9E9E9E;
    background: transparent;
    color: #212121;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    box-sizing: border-box;
    outline: none;
    transition: background 0.1s;
}

.chip.selected {
    border-width: 0;
    background: #E8EAF6;
    color: #3949AB;
    font-weight: 500;
}

.chip.all:not(.selected) {
    border-style: dashed;
}

button.chip {
    border-width: 1px !important;
}
