/* --- Sortable Table Styles --- */
        .sortable-table th {
            cursor: pointer;
            position: relative;
            padding-right: 2.5rem; /* Space for the sort icon */
            white-space: nowrap;
        }

        .sortable-table th:hover {
            background-color: #f3f4f6;
        }

        /* Ascending sort icon */
        .sortable-table th.asc:after {
            content: "▲";
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.8em;
            color: #4b5563;
        }

        /* Descending sort icon */
        .sortable-table th.desc:after {
            content: "▼";
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.8em;
            color: #4b5563;
        }

        /* Unsorted icon (optional) */
        .sortable-table th:not(.asc):not(.desc):after {
            content: "•";
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.8em;
            color: #d1d5db;
        }
        
  	div.tablecontainer {
  		overflow-x: auto;
		}

        /* --- Custom Scrollbar for better UX --- */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #e5e7eb;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb {
            background: #9ca3af;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #6b7280;
        }