/* Connected Trades Section */
#connectedTrades {
    background: linear-gradient(to bottom, #1c1c1c, #292929); /* Dark section gradient */
    color: #e0e0e0;
    padding: 20px 30px;
    border-radius: 10px;
    margin: 20px auto;
    width: auto; /* Dynamic width */
    max-width: 1980px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    text-align: center;
}
section #tradesSection {
    display: block;
    unicode-bidi: isolate;

    /* Dynamic Width Based on Viewport */
    width: 90vw; /* Start with 90% of the viewport width */
    max-width: 1980px; /* Maximum size limit */
    margin: 0 auto; /* Center the section */
    padding: 1px; /* Add padding inside the section */

}
/* Table Container */
#scrollableTableContainer {
    margin: 20px auto; /* Center the container */
    overflow-x: auto; /* Enable horizontal scrolling */
    width: 2300px; /* Dynamic width with margins */
    max-width: 90%; /* Prevent container from exceeding the viewport width */
    border: 1px solid #444444;
    background: linear-gradient(to bottom, #1c1c1c, #292929); /* Dark gradient for table background */
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    justify-content: center; /* Horizontally center the data */
        align-items: center; /* Vertically center the data */
}

/* Ensure the table stays fully visible within the container */
.trades-table {
    width: 100%; /* Table fills the container width */
    border-collapse: collapse;
    min-width: 800px; /* Minimum width for readability */
    font-size: 14px;
    background: linear-gradient(to bottom, #1c1c1c, #292929);
    color: #e0e0e0;
}

.trades-table th,
.trades-table td {
    padding: 10px 15px;
    border: 1px solid #444444; /* Dark border for rows and columns */
    text-align: center;
    white-space: nowrap; /* Prevent text from wrapping */
}

/* Table Header Styling */
.trades-table th {
    background-color: #222222; /* Darker header background */
    color: #ffd700; /* Gold text for header */
    font-weight: bold;
    text-transform: uppercase;
    position: sticky; /* Sticky header */
    top: 0; /* Sticks to the top during scrolling */
    z-index: 2; /* Ensure header stays above rows */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); /* Subtle shadow for the header */
}

/* Alternating Row Colors */
.trades-table tbody tr:nth-child(even) {
    background-color: #1a1a1a; /* Slightly darker row for contrast */
}

.trades-table tbody tr:hover {
    background-color: #020e3665; /* Hover effect with a dark blue tint */
    color: #ffd700; /* Change text to gold on hover */
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    #scrollableTableContainer {
        overflow-x: auto; /* Ensure horizontal scrolling */
        width: calc(100% - 20px); /* Add smaller margin for tighter spaces */
        justify-content: center; /* Horizontally center the data */
        align-items: center; /* Vertically center the data */
        
    }

    .trades-table {
        font-size: 8px; /* Reduce table font size for mobile */
        min-width: 300px; /* Ensure table remains readable */
    }

    .trades-table th,
    .trades-table td {
        font-size: 8px; /* Reduce table font size for mobile */
        padding: 4px; /* Reduce padding for smaller screens */
    }
}

/* Custom Scrollbar Styling */
#scrollableTableContainer::-webkit-scrollbar {
    height: 8px; /* Height of horizontal scrollbar */
}

#scrollableTableContainer::-webkit-scrollbar-thumb {
    background-color: #444444; /* Dark scrollbar thumb */
    border-radius: 10px;
}

#scrollableTableContainer::-webkit-scrollbar-thumb:hover {
    background-color: #ffd700; /* Gold thumb on hover */
}

#scrollableTableContainer::-webkit-scrollbar-track {
    background-color: #1c1c1c; /* Match table background */
}