/* Container for scrollable table with adjusted padding */
.table-container {
    max-height: 80vh;
    max-width: 90vw;
    overflow: auto;
    margin: 20px;
    position: relative;
    box-sizing: border-box;
    /* Hide scrollbars by default */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}
.table-container:hover {
    /* Show scrollbars on hover with reduced width */
    scrollbar-width: thin; /* Firefox */
    -ms-overflow-style: auto; /* IE and Edge */
}
.table-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar in WebKit browsers by default */
}
.table-container:hover::-webkit-scrollbar {
    display: block; /* Show scrollbar on hover */
    width: 8px; /* Reduced width */
    height: 8px; /* Reduced height for horizontal scrollbar */
}
.table-container::-webkit-scrollbar-track {
    background: #000000; /* Match table background */
}
.table-container::-webkit-scrollbar-thumb {
    background-color: #666666; /* Light grey to match section-header */
    border-radius: 4px;
}
.table-container::-webkit-scrollbar-thumb:hover {
    background-color: #4A4A4A; /* Slightly darker on hover */
}

table {
    border-collapse: separate; /* Keeps separate to fix vertical border dominance */
    border-spacing: 0; /* Eliminates spacing to prevent double horizontal lines */
    width: 100%;
    box-sizing: border-box;
}

td, th {
    padding: 0.5rem;
    color: #CCCCCC;
    font-size: 18px; /* Removed white-space: nowrap */
}

/* Align content columns to horizontal center */
td:not(:first-child), th:not(:first-child) {
    text-align: center;
}

/* Fixed header rows (first and second rows) */
tr:nth-child(1) th {
    position: sticky;
    top: 0;
    background-color: #333333;
    z-index: 20; /* Ensures borders dominate */
    border-bottom: 1px solid #CCCCCC;
    white-space: nowrap; /* Apply nowrap only to header row */
}

tr:nth-child(1) th {
    border-right: 1px solid #CCCCCC;
}

tr:nth-child(1) th:last-child {
    border-right: none;
}

tr:nth-child(2) td {
    position: sticky;
    top: 3.75rem; /* Matches first row height */
    background-color: #333333;
    color: #FFFFFF;
    z-index: 20; /* Ensures borders dominate */
    border-bottom: 2px solid #6600CC;
    border-top: none; /* Prevents double lines */
}

/* Third row (Base OS) styling */
tr:nth-child(3) td {
    border-top: none; /* Prevent overlap with second row */
}

tr:nth-child(3) td:first-child {
    z-index: 5; /* Above non-sticky, below headers */
    border-right: 1px solid #6600CC;
}

/* Remove border-top from fourth row to prevent gray border overlap */
tr:nth-child(4) td {
    border-top: none;
}

/* Ensure header cell in first row, first column has visible border */
tr:nth-child(1) th:first-child {
    z-index: 25; /* Highest to ensure border visibility */
    background-color: #333333;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #6600CC;
}

/* Ensure header cell in second row, first column has visible border */
tr:nth-child(2) td:first-child {
    z-index: 25; /* Highest to ensure border visibility */
    background-color: #333333;
    border-top: none; /* Prevents double lines */
    border-right: 1px solid #6600CC;
    border-bottom: 2px solid #6600CC;
}

/* Fixed first column */
td:first-child, th:first-child {
    position: sticky;
    left: 0;
    background-color: #333333;
    z-index: 5; /* Above non-sticky, below headers */
    border-right: 1px solid #6600CC;
    white-space: nowrap;
}

/* Consolidated header styling */
.category-header {
    background-color: #333333; /* Dark grey for category headers */
    color: #FFFFFF;
    font-weight: bold; /* Bold for category headers */
    border-right: none; /* No vertical borders for content cells */
}

.section-header {
    background-color: #666666; /* Light grey for section headers */
    color: #FFFFFF;
    font-weight: normal; /* Normal for section headers */

}

/* Border styles */
td, th {
    border-right: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
}

td:last-child, th:last-child {
    border-right: none;
}

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

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

/* Logo styling (adjusted to preserve aspect ratio) */
.vendor-logo {
    max-height: 30px;
    max-width: 100px;
    vertical-align: middle;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    height: auto; /* Ensures aspect ratio is maintained */
    width: auto; /* Allows image to scale naturally */
    max-width: 100%; /* Prevents overflow within the cell */
}

/* Note styling */
.note {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    margin-left: auto;
    display: block;
    width: fit-content;
}

.note img {
    max-height: 32px;
    vertical-align: middle;
}

/* Checkbox styling for column controls */
#column-controls {
    /* Removed position: sticky */
    top: 0;
    background-color: #000000;
    z-index: 1000;
    padding: 10px;
    /* Match table size by inheriting .table-container width */
    max-width: 90vw; /* Matches .table-container max-width */
    margin: 20px; /* Matches .table-container margin */
    box-sizing: border-box; /* Include padding in width */
    /* Removed border-bottom: 1px solid #ccc */
}

#column-controls h3 {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    color: #CCCCCC;
}

#column-controls label {
    margin-right: 1rem;
    color: #CCCCCC;
}

#column-controls label span {
    margin-left: 0.5rem;
    color: #CCCCCC;
}

/* Button styling */
#column-controls button {
    margin-right: 1rem;
    padding: 0.25rem 0.5rem;
    background-color: #333333;
    color: #FFFFFF;
    border: 1px solid #6600CC;
    border-radius: 4px;
    cursor: pointer;
}

#column-controls button:hover {
    background-color: #4A4A4A;
}

/* Override .container width from viable.works.css */
.container {
    max-width: 90% !important;
}

/* Format paragraphs to match #column-controls style */
header p, section p {
    background-color: #000000;
    padding: 10px;
    color: #CCCCCC;
}