// Table container
.table-container {
    width: 100%;
    overflow-x: auto;
    margin: 1rem 0;
    
    // Scrollbar styling
    &::-webkit-scrollbar {
        height: 8px;
    }
    
    &::-webkit-scrollbar-thumb {
        background-color: #c1c1c1;
        border-radius: 4px;
    }
    
    &::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
}

// Table styles
#optionsTable,
#equitiesTable {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm) !important;
    table-layout: fixed;

    // Base cell styles
    th, td {
        padding: 0.34rem 0.65rem;
        border: 1px solid #999;
        text-align: center;
        min-width: 0;
        font-size: inherit !important;
    }

    // First column (ticker / equity names)
    th:first-child,
    td:first-child {
        width: 7%;
        min-width: 5rem; // 96px minimum
        padding-left: 0.7rem;
        padding-right: 0.7rem;
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    // Second column (mid / last)
    th:first-child + th,
    td:first-child + td {
        width: 7%;
        min-width: 5rem; // 120px minimum
        text-align: center;
    }

    // Third column
    th:nth-child(3),
    td:nth-child(3) {
        width: 7%;
        min-width: 6rem; // 88px minimum
    }

    // Columns 4-6 - percentage-based width for new account
    th:nth-child(4),
    td:nth-child(4),
    th:nth-child(5),
    td:nth-child(5),
    th:nth-child(6),
    td:nth-child(6) {
        width: 6%;
        min-width: 4rem; // 64px minimum
    }

    // Header styles
    th {
        background-color: #f5f5f5;
        position: sticky;
        top: 0;
        font-weight: 600;
        text-align: center;
        
        &:first-child {
            text-align: left;
        }

        &.account-header {
            text-align: center;
        }
    }

    // Row styles
    .equity-row {
        background-color: #CBEBF6;/// #ADD8E6;///#f8f9fa;
        font-weight: bold;
        border-top: 2px solid #333;
        border-bottom: 1px solid #999;
        
        // Keep background when sticky
        td:first-child {
            background-color: #CBEBF6;/// #ADD8E6;//#f8f9fa;
        }
    }

    .option-row {
        td:first-child {
            // Percentage value for option row
            text-align: center;
        }
        
        td:first-child + td {
            // This is where the actual option name will go
            text-align: center;
        }
        
        &:hover {
            background-color: #f1f1f1;
        }
    }

    // Cell styles
    .equity-cell {
        font-weight: 600;
    }

    .has-equity,
    .has-option {
        text-align: center;
        color: #28a745;
        font-weight: bold;
    }

    // Make first column sticky
    tbody td:first-child {
        position: sticky;
        left: 0;
        background-color: white;
        z-index: 1;
    }
}

/* Context Menu Styles */
.context-menu,
.equity-context-menu {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 10000;
    min-width: 150px;
}

.context-menu-close-button {
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    line-height: 1;
    padding: 0 4px;

    &:hover {
        color: #333;
    }
}

.context-menu-item {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-weight: normal;

    &:hover {
        background-color: #f0f0f0;
    }

    &:last-child {
        border-bottom: none;
    }

    &.disabled {
        cursor: not-allowed;
        color: #999;
        font-weight: lighter;

        &:hover {
            background-color: #fff;
        }
    }
}

.context-menu-submenu {
    padding-left: 12px;
    border-bottom: 1px solid #eee;
}

/* Table cell cursor styles */
.equity-ticker-cell,
.account-cell,
.option-row {
    cursor: pointer;
}

/* Change percentage color classes */
.change-positive {
    color: green;
}

.change-negative {
    color: red;
}