/* Table Container - Scrollable with hidden scrollbars by default */
.table-container {
    max-height: 80vh;
    max-width: 90vw;
    overflow: auto;
    margin: 20px;
    position: relative;
    box-sizing: border-box;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.table-container:hover {
    scrollbar-width: thin;
    -ms-overflow-style: auto;
}

.table-container::-webkit-scrollbar {
    display: none;
}

.table-container:hover::-webkit-scrollbar {
    display: block;
    width: 8px;
    height: 8px;
}

.table-container::-webkit-scrollbar-track {
    background: #000000;
}

.table-container::-webkit-scrollbar-thumb {
    background-color: #666666;
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background-color: #4A4A4A;
}

/* Table Base Styles */
table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    box-sizing: border-box;
}

td, th {
    padding: 0.5rem;
    color: #CCCCCC;
    font-size: 18px;
    text-align: center;
}

/* First column alignment */
td:first-child, th:first-child {
    text-align: left;
}

/* Sticky Header Row (thead) */
thead th {
    position: sticky;
    top: 0;
    background-color: #333333;
    z-index: 20;
    white-space: nowrap;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
}

thead th:last-child {
    border-right: none;
}

/* Purple line BELOW the entire header (after thead) */
thead tr:last-child th {
    border-bottom: 2px solid #6600CC; /* Thick purple line under header */
}

/* Sticky First Column */
td:first-child, th:first-child {
    position: sticky;
    left: 0;
    background-color: #333333;
    z-index: 15;
    border-right: 2px solid #6600CC; /* Thick purple line AFTER first column */
    white-space: nowrap;
}

/* Ensure top-left header cell has correct z-index and borders */
thead th:first-child {
    z-index: 25;
    border-right: 2px solid #6600CC; /* Purple line after first column in header */
    border-bottom: 2px solid #6600CC; /* Purple line under header */
}

/* Body cell borders */
tbody td {
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
}

tbody td:last-child {
    border-right: none;
}

tbody tr:last-child td {
    border-bottom: none;
}

/* Emphasize flag emojis */
th span.emoji {
    font-size: 20px;
    vertical-align: middle;
}

/* Vendor logo styling */
.vendor-logo {
    max-height: 30px;
    max-width: 100px;
    height: auto;
    width: auto;
    display: block;
    margin: 0 auto;
}