/* Conditional formatting classes */
.highlight-green {
    background-color: green;
    color: white;
}
.highlight-red {
    background-color: red;
    color: white;
}
/* OTM/ITM formatting */
.highlight-orange {
    background-color: Orange;
    color: white;
}
.highlight-lightgreen {
    background-color: #8BC34A;
    color: white;
}
.highlight-darkorange {
    background-color: darkorange;
    color: white;
}
.highlight-darkgreen {
    background-color: #59ff2fad;
    color: white;
}
.highlight-lightred {
    background-color: lightcoral;
    color: white;
}
.highlight-yellow {
    background-color: #c0ff00b3;
    color: white;
}
/* End OTM/ITM formatting */
.value-red {
    color: red;
}
.value-lightred {
    color: lightcoral;
}
.value-darkorange {
    color: darkorange;
}
.value-orange {
    color: orange;
}
.value-darkyellow {
    color: darkgoldenrod;
}
.value-yellow {
    color: yellow;
}
.value-yellowgreen {
    color: yellowgreen;
}
.value-lightgreen {
    color: lightgreen;
}
.value-green {
    color: green;
}
/* Styles for sortable columns */
th.sortable {
    cursor: pointer;
    position: relative;
}

th.sortable:after {
    content: ' --'; /* Default content */
    position: absolute;
    right: 10px;
}

th.sortable.asc:after {
    content: ' ▲'; /* Up arrow */
}

th.sortable.desc:after {
    content: ' ▼'; /* Down arrow */
}
.chart-container {
    width: 50%; /* Adjust the width as needed */
    height: 500px; /* Adjust the height as needed */
    margin-bottom: 60px;
}
#moneySpentChart {
    width: 100% !important;
    height: 100% !important;
}
#moneyDownChart {
    width: 100% !important;
    height: 100% !important;
}


#putCallTitle{
    margin-bottom: 20px;
}

.trade-list-table {
    width: 100%;
    table-layout: auto;
    margin-bottom: 0; /* Prevent extra margin causing scroll issues */
    min-width: 1200px; /* Minimum width for horizontal scroll */
}

.tradelist-container {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Ensure the body and html don't have unnecessary height */
body {
    overflow-x: hidden;
    height: 100vh;
}

.two-chart-row {
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.table-scroll-wrapper {
    flex: 1; /* Take remaining space */
    width: 100%;
    position: relative; /* Add positioning context */
    /* Add subtle scrollbar styling */
}

/* Fix sticky headers */
.trade-list-table thead th {
    position: sticky;
    top: 0;
    border-bottom: 2px solid #000000;
    /* Ensure the background is solid */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}


/* Custom scrollbar styling for webkit browsers */
.table-scroll-wrapper::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.table-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Media queries for responsive horizontal scroll */
@media (max-width: 1024px) {
    .trade-list-table {
        min-width: 1400px;
    }
}

@media (max-width: 768px) {
    .trade-list-table {
        min-width: 1600px;
    }
}

/* Remove or modify the problematic mainContent styling */
#mainContent {
    /* Remove position and z-index that might be blocking interaction */
    position: static !important;
    z-index: auto !important;
    background: transparent !important;
    pointer-events: auto !important;
}

/* Ensure table wrapper allows proper interaction */
.table-scroll-wrapper {
    width: 100%;
    position: relative;
    z-index: 1;
    /* Ensure pointer events work */
    pointer-events: auto;
}


/* Ensure table is interactive */
.trade-list-table {
    width: 100%;
    margin-bottom: 0;
    min-width: 1200px;
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

/* Make sure all interactive elements are accessible */
.trade-list-table td,
.trade-list-table th,
.trade-list-table a,
.trade-list-table button,
.trade-list-table input,
.watchlist-toggle {
    pointer-events: auto !important;
    position: relative;
    z-index: 3;
}

/* Fix container hierarchy */
.tradelist-container {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    height: -webkit-fill-available;
}

.trade-list-container {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}