/* Styles for the container that will enable scrolling */
    .table-container {
        height: 512px; /* Calculated height to show 15 data rows + header (16 * 32px) */
        width: 98%; /* Occupy full width */
        overflow-y: auto; /* Enable vertical scrolling if content overflows */
        overflow-x: auto; /* Enable horizontal scrolling */
        border: 1px solid #ddd; /* Optional: Add a border to the container for visual clarity */
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
        position: relative; /* Needed for positioning column resizers correctly */
        margin-top: 12px;
        margin-left: 12px;
    }

    /* Styles for the entire table */
    table {
        table-layout: fixed; /* Crucial for respecting explicit column widths */
        /* min-width will be set by JavaScript dynamically */
        border-collapse: collapse; /* Ensures single borders between cells */
        font-family: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size: 0.8rem; /* Consistent font size for readability */
        width: 100%; /* Start table at 100% width, min-width will expand it */
    }

    /* Styles for the table header row */
    thead tr {
        background-color: #f2f2f2; /* Light grey background for header */
        position: sticky; /* Make header sticky */
        top: 0; /* Stick to the top of the scrollable container */
        z-index: 1; /* Ensure header is above scrolling content */
    }

    /* Styles for all table header cells */
    th {
        padding: 5px; /* UPDATED: Reduced padding for more compact rows */
        text-align: left; /* Default left alignment */
        border: 1px solid #ddd; /* Border for each column */
        white-space: nowrap; /* Prevent text wrapping in headers by default */
        position: relative; /* Needed for positioning the sort buttons */
    }

    /* Styles for all table data cells */
    td {
        padding: 5px; /* UPDATED: Reduced padding for more compact rows */
        text-align: left; /* Default left alignment */
        border: 1px solid #ddd; /* Border for each column */
        white-space: nowrap; /* Prevent text wrapping in data cells by default */
        overflow: hidden; /* Hide overflowing content if column is too narrow */
        text-overflow: ellipsis; /* Add ellipsis for overflowing text */
    }

    /* Explicit widths for columns based on user request */
    th:nth-child(1) {
        width: 70px; /* No. column: fixed 40px width */
    }
    td:nth-child(1) {
        text-align: center; /* Center content in data cells */
        /* white-space, overflow, text-overflow are inherited from general td rules */
    }

    th:nth-child(3) {
        width: 200px; /* No. column: fixed 40px width */
    }
    td:nth-child(3) {
        text-align: center; /* Center content in data cells */
        /* white-space, overflow, text-overflow are inherited from general td rules */
    }
    th:nth-child(4) {
        width: 145px; /* No. column: fixed 40px width */
    }
    td:nth-child(4) {
        text-align: center; /* Center content in data cells */
        /* white-space, overflow, text-overflow are inherited from general td rules */
    }




    th:nth-child(2) { width: 500px; } /* Address column: fixed 650px width */
    th:nth-child(n+5) { width: 145px; } /* All other columns: fixed 130px width */

    /* Styles for the scrollbar to make it thin */
    .table-container::-webkit-scrollbar {
        width: 8px; /* Vertical scrollbar width */
        height: 8px; /* Horizontal scrollbar height */
    }

    .table-container::-webkit-scrollbar-track {
        background: #f1f1f1; /* Color of the scrollbar track */
    }

    .table-container::-webkit-scrollbar-thumb {
        background: #057d3d; /* Color of the scrollbar thumb */
        border-radius: 4px; /* Rounded corners for the thumb */
    }

    .table-container::-webkit-scrollbar-thumb:hover {
        background: #046a33; /* Darker green on hover */
    }

    /* Styles for the sorting buttons */
    .sort-button {
        background-color: transparent; /* Transparent background */
        color: #4CAF50; /* Green color for the triangle icon */
        border: none; /* No border */
        padding: 2px; /* Smaller padding */
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 10px; /* Smaller font size for button text */
        cursor: pointer;
        border-radius: 3px; /* Slightly smaller rounded corners */
        transition: color 0.3s ease; /* Smooth transition on hover for color */
    }

    .sort-button:hover {
        color: #45a049; /* Darker green on hover */
    }

    .sort-header-content {
        display: flex;
        flex-direction: row; /* Arrange items in a row */
        align-items: center; /* Vertically align items in the center */
        justify-content: space-between; /* Space out content and buttons */
        height: 100%; /* Ensure content takes full height of th */
        padding-right: 5px; /* Add some padding on the right for the buttons */
        gap: 2px; /* Small gap between text and buttons */
    }

    /* Adjust specific header content for the "No." column to center its text */
    th:nth-child(1) .sort-header-content {
        justify-content: center; /* Center "No." text */
    }

    /* Style for selected cell */
    .selected-cell {
        background-color: #067a3c !important; /* Darker green background for selected cell */
        color: white; /* Changed text color to white for better contrast */
    }

    /* Styles for the custom context menu */
    .context-menu {
        display: none; /* Hidden by default */
        position: absolute; /* Positioned relative to the viewport */
        background-color: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 1000; /* Ensure it's on top of other content */
        min-width: 150px;
        border-radius: 4px;
        overflow: hidden;
    }

    .context-menu-item {
        padding: 8px 12px;
        cursor: pointer;
        font-size: 14px;
        color: #333;
    }

    .context-menu-item:hover {
        background-color: #f0f0f0;
    }